/* Framework lesson pages — overview-page design: dark, big type, moving pictures, scroll reveal.
   Loaded after site.css. Accent comes from --c (edu-l / fin-l) on .lx */
.lx{--c:var(--gold)}
.lx .wrap{max-width:1160px}

/* hero */
.lx-hero{min-height:min(84vh,780px)}
.lx-hero h1{font-size:clamp(46px,8vw,104px)!important;line-height:1.05;max-width:12em}
.lx-hero h1 small{display:block;font:800 clamp(15px,1.6vw,18px)/1 var(--latin);letter-spacing:.22em;color:var(--c);margin-bottom:18px}
.lx-hero .sub{font-size:clamp(18px,2.2vw,23px);color:#e6dfd3}

/* lesson menu (all lessons of the level) */
.lx-page .fx-lessons{background:var(--ink);border-bottom:1px solid var(--line);color:var(--sub)}
.lx-page .fx-lessons .in{max-width:1160px;padding:18px 24px 20px}
.lx-page .fx-lessons .row a{border-color:#3a342c;color:var(--sub)}
.lx-page .fx-lessons .row a:hover{color:var(--fg);border-color:var(--c)}
.lx-page .fx-lessons .row a.on{border-color:var(--c);color:var(--c);background:rgba(255,255,255,.03)}

/* sticky "this lesson" chips */
.lx-toc{position:sticky;top:var(--nav);z-index:90;display:flex;align-items:center;gap:14px;height:54px;padding:0 24px;background:rgba(23,20,15,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.lx-toc > span{font:800 12px var(--sans);letter-spacing:.16em;color:var(--mute);flex:none}
.lx-toc div{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.lx-toc div::-webkit-scrollbar{display:none}
.lx-toc a{flex:none;font-size:14px;color:var(--sub);text-decoration:none;border:1px solid #3a342c;border-radius:999px;padding:5px 13px;white-space:nowrap;transition:color .2s,border-color .2s}
.lx-toc a b{font:800 11px var(--latin);color:var(--c);margin-right:6px}
.lx-toc a:hover,.lx-toc a.on{color:var(--fg);border-color:var(--c)}
html{scroll-padding-top:calc(var(--nav) + 70px)}

/* chapters */
.lx-ch{padding-block:clamp(84px,11vw,150px);border-top:1px solid var(--line)}
.lx-ch header{margin-bottom:clamp(30px,4vw,56px)}
.lx-ch header .n{display:block;font:800 13px var(--latin);letter-spacing:.24em;color:var(--c);margin-bottom:16px}
.lx-ch h2{font:900 clamp(34px,5.6vw,72px)/1.12 var(--sans);max-width:14em}
.lx-ch .txt p{font-size:clamp(17px,1.5vw,19px);line-height:1.95;color:var(--sub);max-width:36em}
.lx-ch .txt p + p{margin-top:1.1em}
.lx-ch .txt strong{color:var(--fg);font-weight:700}
.lx-ch .txt.solo{columns:2 22em;column-gap:56px}
.lx-ch .txt.solo p{break-inside:avoid}
.lx-ch .txt a{color:var(--c)}

/* story with moving picture: picture stays on screen while the story scrolls */
.lx-story .grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.lx-story .media{position:sticky;top:calc(var(--nav) + 84px)}
.clip{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px var(--line)}
.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lx-ideas .media.wide{max-width:980px;margin:0 auto clamp(40px,5vw,72px)}

/* statement between chapters */
.lx-say{padding-block:clamp(90px,12vw,170px);border-top:1px solid var(--line);text-align:center;background:radial-gradient(60% 80% at 50% 50%,rgba(255,255,255,.035),transparent 70%)}
.lx-say p{font:900 clamp(30px,4.8vw,62px)/1.3 var(--sans);max-width:17em;margin:0 auto;
  background:linear-gradient(100deg,var(--fg) 20%,var(--c) 60%,var(--gold) 95%);-webkit-background-clip:text;background-clip:text;color:transparent;text-wrap:balance}

/* three ideas */
.lx-ideas .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.lx-card{background:var(--ink2);border:1px solid var(--line);border-radius:26px;padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:14px}
.lx-card .n{font:800 clamp(40px,4.4vw,56px)/1 var(--latin);letter-spacing:-.02em;color:var(--c)}
.lx-card h3{font:800 clamp(20px,2vw,24px)/1.4 var(--sans);color:var(--fg)}
.lx-card p{font-size:16px;line-height:1.85;color:var(--sub)}
.lx-card p + p{margin-top:.6em}
.lx-card strong{color:var(--fg)}
.lx-card:nth-child(2){transition-delay:.12s}.lx-card:nth-child(3){transition-delay:.24s}

/* large quote */
.lx-q{margin:clamp(56px,7vw,96px) auto 0;max-width:30em;text-align:center}
.lx-q blockquote{margin:0;font:800 clamp(24px,3.2vw,38px)/1.5 var(--sans);color:var(--fg)}
.lx-q blockquote::before{content:"「";color:var(--c)}.lx-q blockquote::after{content:"」";color:var(--c)}
.lx-q figcaption{margin-top:18px;font-size:14px;color:var(--mute)}

/* book → today */
.lx-now{margin:8px 0 40px;border-top:1px solid var(--line)}
.lx-now .hd,.lx-now .row{display:grid;grid-template-columns:1fr 56px 1.2fr;gap:0 18px;align-items:center}
.lx-now.three .hd,.lx-now.three .row{grid-template-columns:1fr 1fr 1.2fr}
.lx-now .hd{padding:16px 0;font:800 12px var(--sans);letter-spacing:.2em;color:var(--mute)}
.lx-now:not(.three) .hd span:nth-child(2){grid-column:3}
.lx-now .row{padding:26px 0;border-bottom:1px solid var(--line);font-size:clamp(16px,1.6vw,19px);line-height:1.7}
.lx-now .row .c0{color:var(--sub)}
.lx-now .row .c1{color:var(--fg)}
.lx-now:not(.three) .row .c0::after{content:"→";display:grid;place-items:center;position:relative}
.lx-now:not(.three) .row{grid-template-columns:1fr 1.2fr}
.lx-now:not(.three) .hd{grid-template-columns:1fr 1.2fr}
.lx-now:not(.three) .hd span:nth-child(2){grid-column:auto}
.lx-now:not(.three) .row .c0{display:flex;justify-content:space-between;gap:18px;padding-right:18px}
.lx-now:not(.three) .row .c0::after{color:var(--c);font-weight:800}
.lx-now.three .row .c2{color:var(--fg)}
.lx-now.three .row .c1{color:var(--mute);text-decoration:line-through;text-decoration-color:rgba(208,106,94,.7)}
.lx-now strong{color:var(--c)}

/* three questions */
.lx-checks{display:grid;gap:14px;max-width:880px}
.lx-chk{display:grid;grid-template-columns:34px 48px 1fr;align-items:center;gap:6px;padding:24px 26px;border-radius:20px;background:var(--ink2);border:1px solid var(--line);cursor:pointer;transition:border-color .25s,background .25s}
.lx-chk input{position:absolute;opacity:0;pointer-events:none}
.lx-chk .box{width:24px;height:24px;border-radius:7px;border:2px solid #4a443c;display:grid;place-items:center;transition:all .2s}
.lx-chk .n{font:800 13px var(--latin);letter-spacing:.16em;color:var(--c)}
.lx-chk .t{font-size:clamp(16px,1.6vw,19px);line-height:1.7;color:var(--fg)}
.lx-chk:has(input:checked){border-color:var(--c);background:rgba(255,255,255,.03)}
.lx-chk input:checked + .box{background:var(--c);border-color:var(--c)}
.lx-chk input:checked + .box::after{content:"";width:6px;height:11px;border:solid #0E0D0B;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.lx-chk input:focus-visible + .box{outline:2px solid var(--gold);outline-offset:3px}

/* AI prompt */
.lx-ai{max-width:880px;margin-top:28px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,#1b1812,#141210);overflow:hidden}
.lx-ai .bar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px 14px 24px;border-bottom:1px solid var(--line)}
.lx-ai .bar span{font:800 12px var(--latin);letter-spacing:.2em;color:var(--c)}
.lx-ai button{font:700 14px var(--sans);border-radius:999px;border:1px solid #4a443c;background:transparent;color:var(--fg);padding:7px 16px;cursor:pointer}
.lx-ai button:hover{border-color:var(--c)}
.lx-ai pre{margin:0;padding:24px;white-space:pre-wrap;font:15.5px/1.9 var(--sans);color:#e2dbcf}

/* steps / videos */
.lx-steps{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px;counter-reset:s;max-width:880px}
.lx-steps li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;padding:22px 24px;border-radius:20px;background:var(--ink2);border:1px solid var(--line)}
.lx-steps li::before{content:counter(s,decimal-leading-zero);font:800 14px var(--latin);color:var(--c);grid-row:span 2}
.lx-steps b{color:var(--fg)}.lx-steps span{color:var(--sub)}
.lx-vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:24px}
.lx-vid{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:20px;background:var(--ink2);border:1px solid var(--line);text-decoration:none}
.lx-vid b{color:var(--fg)}.lx-vid small{color:var(--c);font-size:13px}.lx-vid span{color:var(--sub);font-size:15px}
.lx-vid:hover{border-color:var(--c)}

/* film */
.lx-film{border-top:1px solid var(--line)}

/* source line */
.lx-src{padding:48px 0 64px;border-top:1px solid var(--line)}
.lx-src p{font-size:13.5px;line-height:1.8;color:var(--mute);max-width:52em}

/* tables written outside 今天的版本 */
.lx-ch table{width:100%;border-collapse:collapse;margin-top:24px}
.lx-ch th,.lx-ch td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);color:var(--sub);font-size:16px}
.lx-ch th{color:var(--mute);font-size:13px;letter-spacing:.12em}

@media (max-width:900px){
  .lx-story .grid{grid-template-columns:1fr}
  .lx-story .media{position:relative;top:auto}
  .lx-ideas .cards{grid-template-columns:1fr}
  .lx-ch .txt.solo{columns:1}
}
@media (max-width:640px){
  .lx-toc{padding:0 12px}.lx-toc > span{display:none}
  .lx-hero h1{font-size:clamp(44px,13vw,64px)!important}
  .lx-now:not(.three) .row,.lx-now:not(.three) .hd,.lx-now.three .row,.lx-now.three .hd{grid-template-columns:1fr}
  .lx-now .hd{display:none}
  .lx-now .row{gap:6px;padding:20px 0}
  .lx-now:not(.three) .row .c0::after{content:"↓"}
  .lx-now:not(.three) .row .c0{padding-right:0}
  .lx-chk{grid-template-columns:30px 1fr;padding:20px}
  .lx-chk .n{display:none}
  .clip{border-radius:16px}
}

/* link cards (:::cards) — cross-links to other lessons/pages, instead of underlined links in the text */
.lx-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px;margin:26px 0 8px;max-width:52em;column-span:all;break-inside:avoid}
a.lx-card-link{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:20px;background:var(--ink2);border:1px solid var(--line);text-decoration:none;color:var(--fg);transition:border-color .2s,transform .2s;break-inside:avoid}
a.lx-card-link:hover{border-color:var(--c);transform:translateY(-2px)}
a.lx-card-link small{font:700 12px var(--latin);letter-spacing:.14em;color:var(--c)}
a.lx-card-link strong{font:800 19px/1.35 var(--sans);color:var(--fg);display:flex;justify-content:space-between;gap:12px}
a.lx-card-link strong i{font-style:normal;color:var(--c)}
a.lx-card-link span{color:var(--sub);font-size:15px;line-height:1.6}