body { background:#fff; color:#18181b; }
.page-width { width:min(1152px, calc(100% - 64px)); margin-inline:auto; }
.skip { position:fixed; top:-60px; left:16px; background:white; padding:12px; z-index:5; }
.skip:focus { top:12px; }
.mast { position:relative; z-index:1; background:#fafafa; }
.mast-inner { min-height:72px; display:flex; align-items:center; justify-content:space-between; }
.reading-hero { background:#fafafa; position:relative; isolation:isolate; overflow:hidden; border-bottom:1px solid #eeeef0; }
.reading-hero::before { content:""; position:absolute; z-index:-1; top:6%; right:-5%; width:60%; height:110%; background:url("assets/whenevr-hero-original.png") center/cover no-repeat; filter:blur(70px); opacity:.15; }
.hero-inner { padding-block:40px 46px; }
.hero-text .teacher-label { background:white; color:#52525b; border-color:#e4e4e7; margin-bottom:20px; }
.hero-text h1 { font-size:clamp(36px,3.8vw,54px); font-weight:500; line-height:1.12; letter-spacing:-.035em; }
.hero-text h1 span { color:#71717a; }
.hero-text p { max-width:40em; color:#52525b; margin:21px 0 25px; font-size:16px; line-height:1.85; }
.read-button { display:inline-flex; align-items:center; gap:18px; padding:12px 23px; color:white; background:#18181b; border-radius:999px; font-size:14px; box-shadow:0 2px 5px #18181b15; }
.read-button:hover { background:#3f3f46; }
.reading-layout { display:grid; grid-template-columns:minmax(160px,216px) minmax(0,784px); justify-content:space-between; gap:64px; align-items:start; padding-block:56px 76px; }
.reading-layout aside { position:sticky; top:32px; }
.contents summary { font-weight:600; font-size:14px; padding:12px 12px 14px; }
.contents summary span { float:right; }
.contents nav { border-top:1px solid #e4e4e7; padding-top:12px; }
.contents ol, .reading-layout article { counter-reset:chapter; }
.contents li, .chapter { counter-increment:chapter; }
.section-number { color:#71717a; font-variant-numeric:tabular-nums; font-weight:500; }
.section-number::before { content:counter(chapter, decimal-leading-zero); }
.contents .section-number { font-size:12px; }
.contents a { display:flex; align-items:baseline; gap:12px; padding:10px 13px; border-radius:12px; color:#64646e; font-size:14px; }
.contents a:hover, .contents a[aria-current] { background:#f4f4f5; color:#18181b; }
.intro,.chapter { scroll-margin-top:26px; }
.intro { padding:0 2px 20px; }
.intro p, .chapter-body p { font-size:16px; line-height:1.95; margin:0 0 20px; color:#414149; }
.intro p:first-child { font-size:20px; line-height:1.78; color:#29292e; }
.intro p:last-child { background:#f7f7f8; border-radius:16px; padding:20px 24px; }
article strong { font-weight:600; color:#27272a; }
.chapter { border:1px solid #e8e8eb; border-radius:22px; margin-bottom:18px; }
summary { list-style:none; cursor:pointer; }
summary::-webkit-details-marker { display:none; }
.chapter summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 30px; }
.chapter h2 { display:flex; align-items:baseline; gap:12px; font-weight:550; font-size:clamp(20px,2.3vw,27px); line-height:1.5; }
.chapter h2 .section-number { flex:none; font-size:14px; }
.chapter[open] > summary .faq-toggle::after { transform:translate(-50%,-50%); }
.chapter-body { padding:0 30px 12px; }
.chapter-body h3 { font-size:19px; font-weight:600; line-height:1.6; margin:30px 0 16px; }
.reading-table { border:1px solid #e8e8eb; border-radius:14px; overflow:hidden; margin:22px 0; }
.reading-table table { border-collapse:collapse; width:100%; font-size:15px; line-height:1.75; }
.reading-table th,.reading-table td { text-align:left; padding:12px 15px; vertical-align:top; }
.reading-table th { font-weight:550; }
.reading-table th:first-child { width:24%; }
.reading-table thead { background:#f4f4f5; }
.reading-table tr { border-bottom:1px solid #ededee; }
.reading-table tbody tr:last-child { border-bottom:0; }
.article-end { display:flex; justify-content:space-between; gap:16px; padding:16px 0; font-size:14px; color:#52525b; }
.article-end a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid #62627a; outline-offset:3px; }
@media(max-width:767px) {
  .page-width { width:calc(100% - 40px); }
  .mast-inner { min-height:60px; }
  .hero-inner { padding-block:24px 32px; }
  .hero-text h1 { font-size:clamp(28px,6.8vw,36px); line-height:1.35; }
  .hero-text p { margin-block:12px 16px; font-size:15px; }
  .hero-text .teacher-label { margin-bottom:14px; }
  .reading-layout { display:block; padding-block:24px 40px; }
  .reading-layout aside { position:static; margin-bottom:28px; background:#fafafa; border-radius:14px; padding:0 8px; }
  .contents nav { padding-block:7px; }
  .intro p:first-child { font-size:18px; }
  .intro p:last-child,.chapter summary { padding:18px; }
  .chapter-body { padding:0 18px 4px; }
  .reading-table th,.reading-table td { padding:9px; font-size:14px; }
  .reading-table th:first-child { width:29%; }
}