/* Why only: a typographic argument on the deep green page. Type, rules and space; no boxes, no figures but one. */
.essay{padding-top:72px;max-width:1180px}
.opening{margin-bottom:96px}
.opening h1{max-width:8em}
.opening .purpose{margin-top:24px;font-size:20px;line-height:1.4;max-width:30em}

/* ---- A part: a label rail on the left, the argument on the right at one reading measure. */
.part{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);column-gap:var(--edge);padding-top:16px;border-top:1px solid var(--paper);margin-top:72px}
.part:first-of-type{margin-top:0}
.part h2{margin:0;font-size:17px;line-height:1.4;font-weight:700}
.part h2 .n{display:block;margin-bottom:4px;font:400 13.5px/1 var(--mono)}
.body{max-width:34em;min-width:0;font-size:20px;line-height:1.5}
.body p+p{margin-top:16px}
.body a{color:var(--paper);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.body a:hover{text-decoration-thickness:2px}

.thesis{font-size:clamp(38px,5.4vw,84px);line-height:.96;font-weight:700;letter-spacing:-.03em;margin-bottom:32px;text-wrap:balance}
.part:has(.thesis) .body{max-width:34em}
.thesis{max-width:9em}

/* ---- Precedent: three cases ruled apart, each a bold line then a paragraph. */
.case{margin-top:40px;padding-top:16px;border-top:1px solid var(--enamel)}
.case h3{margin:0 0 8px;font-size:20px;line-height:1.3;font-weight:700}
sup.fn{font-size:inherit;line-height:inherit;vertical-align:baseline;font-variant-position:super;font-feature-settings:"sups"}
sup.fn a{padding:0 4px;margin-left:-3px;text-decoration:none}

/* The three-position switch: three cells, the held one on a paper ground and bold. */
.switch{margin:24px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--paper)}
.switch .pos{padding:12px 14px;font-size:15px;line-height:20px}
.switch .pos+.pos{border-left:1px solid var(--paper)}
.switch .pos p+p{margin-top:0}
.switch .k{font:400 13.5px/20px var(--mono)}
.switch .v{font-weight:700;font-size:17px;line-height:1.4}
.switch .pos.on{background:var(--paper);color:var(--ink)}
.switch figcaption{grid-column:1/-1;padding:10px 14px;border-top:1px solid var(--paper);font-size:15px;line-height:20px}

/* ---- Objections: the objection in bold, the answer under it. */
.obj{margin:0}
.obj dt{margin-top:32px;font-weight:700}
.obj dt:first-child{margin-top:0}
.obj dd{margin:6px 0 0}

/* ---- The signature, then the notes. */
.close .sig{font-size:clamp(28px,3.6vw,48px);line-height:1.05;font-weight:700;letter-spacing:-.02em;margin-bottom:24px}
.notes{margin-top:72px;display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);column-gap:var(--edge);padding-top:16px;border-top:1px solid var(--paper);font-size:15px;line-height:20px}
.footnotes{margin:0;padding:0 0 0 20px;max-width:40em}
.footnotes li{padding:4px 0 4px 6px}
.footnotes a{color:var(--paper);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.fn-back{margin-left:8px}
.footnotes li:target{outline:1px solid var(--paper);outline-offset:4px}
.why-page .colophon{padding-top:72px}

@media (max-width:1000px){
  .part,.notes{display:block}
  .part h2{margin-bottom:16px}
  .part h2 .n{display:inline;margin-right:10px}
  .notes h2{margin-bottom:8px}
}
@media (max-width:760px),(max-aspect-ratio:1/1){
  .essay{padding-top:40px}
  .opening{margin-bottom:56px}
  .opening .purpose{font-size:17px}
  .part{margin-top:48px}
  .body{font-size:18px}
  .switch{grid-template-columns:minmax(0,1fr)}
  .switch .pos+.pos{border-left:0;border-top:1px solid var(--paper)}
}