/* Essay & guide layout (essay.css): long-form reading pages.
   Reconstructed in-system: tokens from site.css only. Margin notes sit in
   the right margin on wide screens and fold inline ≤1140px. */

/* reading progress (top of viewport) */
.rp{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;}
.rp span{display:block;height:100%;width:0;background:var(--moss);}

/* hero */
.es-hero{max-width:760px;margin:0 auto;padding:100px 40px 50px;}
.es-hero h1{font:300 clamp(38px,5vw,58px)/1.15 var(--serif);letter-spacing:-0.015em;color:var(--pool);margin-top:18px;}
.es-standfirst{font:italic 300 20px/1.6 var(--serif);color:var(--ink-soft);margin-top:20px;max-width:580px;}
.es-meta{display:flex;flex-wrap:wrap;gap:10px;font:600 11px/1.4 var(--sans);letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:26px;}

/* body column */
.es-body{max-width:760px;margin:0 auto;padding:10px 40px 80px;font:400 19px/1.85 var(--serif);color:var(--ink);position:relative;}
.es-body p{margin:0 0 26px;}
.es-body h2{font:300 28px/1.3 var(--serif);letter-spacing:-0.01em;color:var(--pool);margin:54px 0 20px;}
.es-drop::first-letter{font:300 64px/0.88 var(--serif);color:var(--pool);float:left;padding:8px 12px 0 0;}
.es-pull{font:italic 300 26px/1.5 var(--serif);color:var(--pool);margin:44px 0;padding:0 0 0 24px;border-left:2px solid var(--gold);}
.es-close{font:italic 300 21px/1.7 var(--serif);color:var(--ink-soft);}

/* margin notes: into the right margin when there's room */
.es-note{display:block;background:var(--mist-deep);border:1px solid var(--line);border-radius:12px;padding:16px 18px;font:400 14px/1.6 var(--sans);color:var(--ink-soft);margin:0 0 26px;}
.es-note .tap{display:block;font:600 10px/1 var(--sans);letter-spacing:0.18em;text-transform:uppercase;color:var(--moss);margin-top:10px;}
@media (min-width:1141px){
  .es-note{position:absolute;right:-216px;width:200px;background:none;border:none;border-top:1px solid var(--line);border-radius:0;padding:10px 0 0;font-size:13.5px;margin:0;}
  .es-note .tap{display:none;}
}

/* guide checklists */
.es-body h2 .g-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--moss);color:var(--moss);font:600 14px/1 var(--sans);margin-right:14px;vertical-align:middle;position:relative;top:-2px;}
.gc{display:flex;gap:12px;align-items:flex-start;background:var(--mist);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 26px;font:400 15px/1.6 var(--sans);color:var(--ink-soft);cursor:pointer;}
.gc input{accent-color:var(--moss);width:16px;height:16px;margin-top:3px;flex:none;}
.gc input:checked + span{color:var(--moss);}

/* next essay / guide */
.es-next{max-width:760px;margin:0 auto;padding:0 40px 90px;}
.es-next a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;border:1px solid var(--line);border-radius:16px;padding:22px 26px;background:var(--mist);}
.es-next .t{font:400 20px/1.3 var(--serif);color:var(--pool);}
.es-next a:hover .t{color:var(--moss);}

@media (max-width:640px){
  .es-hero{padding:80px 24px 40px;}
  .es-body{padding:10px 24px 60px;}
  .es-next{padding:0 24px 70px;}
}