/* The free Chapter 1 reader (/book/chapter-1). Cached for a year: when this file
   changes, bump the ?v= on the page. tools/chapter.py writes the markup. */

.reader-progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:950; pointer-events:none;}
.reader-progress span{display:block; height:100%; width:0; background:var(--platinum); transition:width .12s linear;}

.glance{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1px; background:var(--rule-dark); border:1px solid var(--rule-dark); margin:0;}
@media (max-width:1000px){ .glance{grid-template-columns:repeat(2, minmax(0, 1fr));} }
@media (max-width:640px){ .glance{grid-template-columns:1fr;} }
.glance-def{background:var(--ink); padding:clamp(24px, 2.6vw, 34px);}
.glance dt{font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--platinum); margin-bottom:12px;}
.glance dd{margin:0; font-size:15px; line-height:1.65; color:var(--steel);}
.glance dd .ilink{margin-left:4px; font-size:12px;}

/* --------------------------------------------------------------- the reader */
.reader-band{padding-top:clamp(56px, 7vw, 96px);}
.reader{display:grid; grid-template-columns:250px minmax(0, 1fr); gap:clamp(36px, 5vw, 80px); align-items:start;}
@media (max-width:980px){ .reader{grid-template-columns:1fr;} }
.reader-side{position:sticky; top:100px; align-self:start;}
@media (max-width:980px){ .reader-side{position:static;} }
.reader-k{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-label); margin:0 0 14px;}
.reader-toc{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-light);}
.reader-toc li{border-bottom:1px solid var(--rule-light);}
.reader-toc a{display:flex; gap:10px; align-items:baseline; padding:10px 0 10px 12px; font-size:13.5px; line-height:1.4; color:var(--ink-body); text-decoration:none; border-left:2px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease);}
.reader-toc .n{flex:0 0 26px; font-family:var(--display); font-size:11px; font-weight:700; color:var(--ink-label);}
.reader-toc a:hover,.reader-toc a.is-here{color:var(--ink); border-left-color:var(--ink);}
.reader-toc a.is-read .n::after{content:" \2713"; color:var(--slate);}
@media (max-width:980px){
  .reader-toc{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:18px;}
}
@media (max-width:520px){ .reader-toc{grid-template-columns:1fr;} }
.reader-left{margin:16px 0 0; font-size:13px; color:var(--ink-label);}
.reader-tools{display:flex; gap:6px; margin-top:14px;}
.reader-tools button{font-family:var(--display); font-size:11.5px; font-weight:700; letter-spacing:0.08em; min-height:38px; padding:0 12px; background:transparent; color:var(--ink); border:1px solid var(--rule-light); cursor:pointer; transition:border-color .3s var(--ease), background .3s var(--ease);}
.reader-tools button:hover{border-color:var(--ink);}
.reader-tools button[aria-pressed="true"]{background:var(--ink); color:var(--white); border-color:var(--ink);}
.reader-buy{margin-top:20px; width:100%; justify-content:center; text-align:center;}

.reader-text{--rs:18px; max-width:68ch; font-size:var(--rs); line-height:1.75; color:var(--ink-body);}
.reader-text p{margin:0 0 1.1em;}
.reader-chap{padding-bottom:28px; margin-bottom:36px; border-bottom:1px solid var(--rule-light);}
.reader-chap h2{font-size:clamp(40px, 5vw, 64px); margin:0 0 10px; color:var(--ink);}
.reader-line{font-size:17px; font-style:italic; color:var(--ink-label);}
.reader-sec{scroll-margin-top:100px; padding-top:12px; margin-bottom:56px;}
.reader-sec h2{font-size:clamp(26px, 2.8vw, 34px); line-height:1.2; margin:0 0 22px; color:var(--ink);}
.reader-sec h2 .ref{font-weight:300; color:var(--slate); margin-right:6px;}
.reader-sec h3{font-size:clamp(18px, 1.7vw, 21px); color:var(--ink); margin:34px 0 12px; scroll-margin-top:100px;}
.reader-sec h3.pillar span{display:block; font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-label); margin-bottom:6px;}
.reader-sec h3.level{padding-left:14px; border-left:3px solid var(--ink); transition:background .5s var(--ease);}
.reader-sec h3.level.is-lit{background:#F3F0E8;}
.motives{margin:0 0 1.2em; padding-left:1.3em;}
.motives li{margin-bottom:1em;}
.motives b{color:var(--ink);}

mark.ql{background:transparent; color:inherit; transition:background .4s var(--ease), box-shadow .4s var(--ease);}
.reader-text.hl mark.ql{background:#F1EBDB; box-shadow:0 0 0 2px #F1EBDB; cursor:pointer;}
.reader-text.hl mark.ql:hover,.reader-text.hl mark.ql:focus-visible{background:#E6DCC1; box-shadow:0 0 0 2px #E6DCC1; outline:none;}
.ql-pop{position:absolute; z-index:960; display:flex; gap:6px; padding:6px; background:var(--ink); border:1px solid var(--rule-dark); box-shadow:0 16px 40px rgba(0,0,0,.35);}
.ql-pop a,.ql-pop button{font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--white); background:transparent; border:1px solid var(--rule-dark); padding:9px 11px; text-decoration:none; cursor:pointer;}
.ql-pop a:hover,.ql-pop button:hover{border-color:var(--platinum);}

.reflect{margin:30px 0 8px; padding:22px 22px 18px; background:#F6F4EF; border-left:3px solid var(--ink);}
.reflect-k{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-label); margin:0 0 8px !important;}
.reflect-q{font-family:var(--display); font-size:17px; font-weight:600; line-height:1.45; color:var(--ink); margin:0 0 14px !important;}
.reflect textarea{display:block; width:100%; min-height:84px; padding:12px 14px; font:inherit; font-size:15.5px; line-height:1.6; color:var(--ink); background:var(--white); border:1px solid var(--rule-light); border-radius:0; resize:vertical;}
.reflect textarea:focus{outline:2px solid var(--ink); outline-offset:1px;}
.reflect-s{min-height:1.2em; margin:8px 0 0 !important; font-size:12.5px; color:var(--ink-label);}
.worksheet{margin:36px 0 0; padding-top:26px; border-top:1px solid var(--rule-light);}
.worksheet-k{font-family:var(--display); font-size:clamp(18px, 1.7vw, 21px); font-weight:700; color:var(--ink); margin:0 0 6px !important;}
.worksheet-d{font-size:15px; color:var(--ink-label);}
.worksheet .reflect{margin-top:14px;}

.lvl-pick{margin:14px 0 0; padding:18px 20px; border:1px solid var(--rule-light);}
.lvl-pick legend{padding:0 6px; font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-label);}
.lvl-pick{display:flex; flex-wrap:wrap; gap:8px;}
.lvl-chip{position:relative;}
.lvl-chip input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer;}
.lvl-chip span{display:inline-block; padding:9px 13px; font-family:var(--display); font-size:12.5px; font-weight:600; border:1px solid var(--rule-light); color:var(--ink-body); transition:all .3s var(--ease);}
.lvl-chip input:checked + span{background:var(--ink); color:var(--white); border-color:var(--ink);}
.lvl-chip input:focus-visible + span{outline:2px solid var(--ink); outline-offset:2px;}

/* The Hierarchy, as a pyramid you can select (1.8) */
.pyr{margin:30px 0 34px;}
.pyr-levels{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; align-items:center; gap:4px;}
.pyr-levels li{width:calc(34% + var(--i) * 13.2%); max-width:100%;}
.pyr-levels a{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:58px; padding:8px 10px; text-align:center; text-decoration:none; background:var(--ink); color:var(--white); clip-path:polygon(6% 0, 94% 0, 100% 100%, 0 100%); transition:background .3s var(--ease);}
.pyr-levels li:first-child a{clip-path:polygon(22% 0, 78% 0, 100% 100%, 0 100%); padding:8px 18%;}
.pyr-levels li:nth-child(odd) a{background:#1A1A1D;}
.pyr-levels a:hover,.pyr-levels a:focus-visible,.pyr-levels a.is-goal{background:var(--slate); outline:none;}
.pyr-levels .t{font-family:var(--display); font-size:clamp(11px, 1.3vw, 13.5px); font-weight:700; letter-spacing:0.04em; line-height:1.25;}
.pyr-levels .c{font-size:11.5px; color:var(--platinum); margin-top:2px;}
.pyr-levels li:first-child .c{display:none;}
.pyr figcaption{margin-top:12px; font-size:13px; color:var(--ink-label); text-align:center;}
@media (max-width:520px){ .pyr-levels li{width:calc(58% + var(--i) * 8.4%);} .pyr-levels a{min-height:52px;} .pyr-levels li:first-child a{padding:8px 14%;} .pyr-levels li:first-child .t{font-size:10.5px;} }

.reader-mid{margin:34px 0 8px; padding:24px; background:var(--ink); color:var(--platinum);}
.reader-mid-k{font-family:var(--display); font-size:15px; font-weight:700; color:var(--white); margin:0 0 6px !important;}
.reader-mid p{font-size:15px; line-height:1.65; color:var(--steel);}
.reader-mid .tlink{color:var(--white);}

.reader-notes{margin-top:24px; padding:26px; border:1px solid var(--rule-light);}
.reader-notes-k{font-family:var(--display); font-size:18px; font-weight:700; color:var(--ink); margin:0 0 6px !important;}
.reader-notes .btn-row{margin-top:16px;}
.reader-notes .fine{margin-top:12px !important; font-size:13px;}

.next-k{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--graphite); margin:0 0 14px;}
.next-ch{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-dark);}
.next-ch li{display:flex; gap:14px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--rule-dark);}
.next-ch .n{flex:0 0 44px; font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--graphite);}
.next-ch .t{flex:1 1 auto; font-family:var(--display); font-size:16px; font-weight:600; color:var(--white);}
.next-ch .p{flex:0 0 auto; font-size:12.5px; color:var(--graphite);}
.ch-buy{margin-top:26px;}
#keep-reading h2{margin-bottom:22px;}
.ch-lines .t{font-size:clamp(16px, 1.5vw, 19px);}

.reader-bar{position:fixed; left:50%; bottom:16px; z-index:940; transform:translate(-50%, 140%); display:flex; align-items:center; gap:14px; width:min(640px, calc(100% - 24px)); padding:10px 10px 10px 18px; background:rgba(10,10,10,0.94); border:1px solid var(--rule-dark); box-shadow:0 18px 50px rgba(0,0,0,.4); transition:transform .5s var(--ease);}
.reader-bar.is-up{transform:translate(-50%, 0);}
.reader-bar p{flex:1 1 auto; margin:0; font-size:13.5px; line-height:1.4; color:var(--steel);}
.reader-bar b{color:var(--white); font-weight:600;}
.reader-bar .btn{flex:0 0 auto; padding:12px 16px; font-size:11px;}
.reader-bar-x{flex:0 0 auto; width:38px; height:38px; background:transparent; color:var(--steel); border:0; font-size:22px; cursor:pointer;}
@media (max-width:560px){
  .reader-bar{left:10px; right:72px; width:auto; transform:translateY(160%); gap:8px; padding:8px 4px 8px 12px;}
  .reader-bar.is-up{transform:none;}
  .reader-bar p{flex:1 1 0; min-width:0; font-size:12px;} .reader-bar p .rb-long{display:none;}
  .reader-bar .btn{width:auto; min-width:0; white-space:nowrap; padding:11px 10px; font-size:10px; letter-spacing:0.12em;}
  .reader-bar-x{width:30px;}
}
@media print{ .reader-side,.reader-bar,.reader-progress,.reflect,.worksheet,.lvl-pick,.reader-mid,.reader-notes{display:none !important;} .reader{display:block;} }
@media (prefers-reduced-motion:reduce){ .reader-bar,.reader-progress span,mark.ql{transition:none;} }