/* ============================================================================
   ESSAY v2 — Figma Website v2, "Thinking" 692:598 (Markiian, 2026-10-26).
   Loaded after each essay's own <style>, so it wins. The title, lede and cover
   sit above the three columns, centred; the reading column is 720; the text is
   General Sans 20 / 150 % left-aligned; the tools ride the bottom of the screen
   in 5 % boxes with a blur, like the More pill.
   ========================================================================== */
.art-head{display:flex;flex-direction:column;align-items:center;gap:40px;padding:220px var(--margin) 0;}   /* header 60 + 40 + the frame's 120 */
.art-head .centre-block{width:100%;max-width:720px;gap:20px;text-align:center;}
.art-head .art-h1{font-size:64px;line-height:1;letter-spacing:.01em;}
.art-head .art-lede{font-size:25px;line-height:1.3;letter-spacing:.01em;text-align:center;}
.art-head .cover{width:100%;max-width:1200px;}

.art-layout{padding-top:40px;}
.centre{flex:0 1 720px;max-width:720px;padding:0;gap:28px;}
.stick{top:100px;}

.art-tldr{padding:20px 24px;border:0;background:#F0EFEC;}
.art-tldr p{font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:20px;line-height:1.5;letter-spacing:0;text-align:left;opacity:1;}
section.part,.part.intro{gap:20px;}
.art-h2{font-size:34px;line-height:1.2;letter-spacing:0;margin-bottom:0;padding-top:8px;}
.art-h3{font-size:25px;line-height:1.3;letter-spacing:0;padding-top:8px;}
.art-p{font-size:20px;line-height:1.5;letter-spacing:0;text-align:left;}
/* the author: on the column's left edge under a hairline, a 64 photo 20 from the text */
.author{margin:32px 0 0;width:100%;padding:32px 0 0;gap:20px;align-items:center;justify-content:flex-start;border-top:1px solid rgba(0,0,0,.1);}
.author .ava{width:64px;height:64px;border-radius:4px;}
.author .ava img{width:64px;height:64px;}
.author div{gap:6px;}
.author .name{font-size:20px;line-height:1.2;letter-spacing:0;}
.author .bio{font-size:15px;line-height:1.35;letter-spacing:0;opacity:.55;}
/* the contents hold in the middle of the screen once scrolled; essay.js measures them */
.rail-l .stick{top:max(100px,calc(50vh - var(--toc-h,220px) / 2));}
/* More from the blog: the heading and the names sit ABOVE the trail, as on the cases */
.more h2{position:relative;z-index:3;pointer-events:none;}
.more .halves a .name{z-index:2;pointer-events:none;}

/* the tools (Figma 692:964): always at the bottom of the screen, three 40-high boxes
   4 apart, each one row: the label with a colon, then the icons, all at 50 % */
.rail-r .stick{position:fixed;left:50%;bottom:8px;top:auto;transform:translateX(-50%);width:auto;z-index:40;}
.tools{flex-direction:row;gap:4px;}
.tool{flex-direction:row;align-items:center;gap:12px;height:40px;box-sizing:border-box;padding:8px 12px;background:rgba(0,0,0,.05);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap;}
.tool-label{font-size:15px;line-height:1;letter-spacing:0;opacity:.5;}
.tool .icons{gap:12px;}
.tool .ibtn{opacity:.5;}
.tool .ibtn:hover,.tool .ibtn:focus-visible{opacity:1;}
.tool .ibtn[data-tip]::after{top:auto;bottom:calc(100% + 8px);}

@media (max-width:1180px){
  .art-head{padding-top:140px;}
  .centre{max-width:none;padding:0 var(--margin);}
  .rail-r{margin-top:0;}
}
@media (max-width:640px){
  .art-head{padding-top:100px;gap:24px;}
  .art-head .art-h1{font-size:40px;}
  .art-head .art-lede{font-size:20px;}
  .art-h2{font-size:28px;}
  .art-p,.art-tldr p{font-size:17px;line-height:1.5;}
  .rail-r .stick{bottom:8px;}
  .tool{padding:8px 10px;}
  .tool-label{display:none;}   /* 603 wide does not fit a phone: icons only */
}