/* Soul for Machines on its own: no sidebar, no top bar; the journal is the whole page. */
:root,:root[data-theme]{--sidebar:0px!important}
.identity,.topline{display:none!important}
main{margin-left:0!important;--topline-height:0px!important}
.page-content.journal,.page-content.reading{max-width:none}
.page-content.journal{padding-top:clamp(40px,8vh,110px)}
/* very wide screens: up to QHD wide, centred */
@media(min-width:2700px){body:not([data-view=essay]) main{max-width:2560px;margin-inline:auto!important}}
@media(max-width:800px){.essay-mobile-nav{inset:auto 0 0!important}}

/* an essay: kicker and title on the centre line; the figure and the words as two equal halves under them */
.essay-kicker{display:flex;justify-content:center;align-items:center;gap:18px;margin:0;font:500 clamp(12px,.74vw,15px)/1.4 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.essay-kicker .byline::before{content:"";display:inline-block;width:28px;height:1px;margin-right:18px;vertical-align:middle;background:currentColor;opacity:.45}
.essay-kicker .by-name{letter-spacing:.16em}
.essay-heading{text-align:center}
.essay-heading h1{margin-inline:auto;text-wrap:balance}
.sketch-invitation{display:none!important}
.essay-links{display:flex;flex-wrap:wrap;gap:12px 32px;margin:2.2em 0 0;font-size:15px;letter-spacing:-.005em}
/* one hover for every text link on these pages: the line draws in under the words, as under the byline */
.essay-links a,.reading-brand strong,.by-name{color:var(--ink);text-decoration:none;padding-bottom:2px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .55s var(--ease)}
.essay-links a{color:var(--muted);transition:background-size .55s var(--ease),color .3s}
.essay-links a:is(:hover,:focus-visible),.reading-brand:is(:hover,:focus-visible) strong{background-size:100% 1px;color:var(--ink)}
.essay-links a span{display:inline-block;margin-left:4px}

/* On desktop an essay fills the screen, edge to edge and top to bottom. The rails take a fixed share of the width at
   either side; the column between them holds the title, then the figure and the words as two equal halves either side
   of the centre line. The row under the title takes all the height left: the figure grows to it, and the words are
   set (fitEssay) at the largest size that fills it while keeping a readable measure. Zoom, short or tall-narrow
   windows fall back to scrolling. */
@media (min-width:1101px) and (min-height:560px) and (min-aspect-ratio:5/4){
 body[data-view=essay]:not(.essay-flow) .reading{--rail:clamp(150px,11vw,440px);--cw:calc(100vw - 2 * var(--rail));height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);row-gap:clamp(20px,3.6dvh,64px);padding-block:clamp(14px,2.2dvh,40px) clamp(20px,3.4dvh,60px);overflow:clip}
 body[data-view=essay]:not(.essay-flow) .reading-masthead{width:var(--cw);margin-inline:auto!important;padding-bottom:clamp(10px,1.6dvh,24px)}
 body[data-view=essay]:not(.essay-flow) .reading-brand>span{display:none}
 body[data-view=essay]:not(.essay-flow) .essay-layout{margin-top:0;min-height:0;height:100%}
 body[data-view=essay]:not(.essay-flow) .essay-content{width:var(--cw)!important;max-width:none;height:100%;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:'head head' 'fig words';column-gap:clamp(48px,6vw,200px);row-gap:clamp(24px,4.4dvh,80px)}
 body[data-view=essay]:not(.essay-flow) .essay-heading{grid-area:head;max-width:none;margin:0}
 body[data-view=essay]:not(.essay-flow) .essay-heading h1{margin:clamp(12px,2dvh,28px) auto 0;max-width:none;font-size:clamp(2.25rem,.8rem + min(3vw,5.6dvh),7.5rem)}
 body[data-view=essay]:not(.essay-flow) .living-diagram{--gap:clamp(10px,1.6dvh,24px);--controls:calc(40px + var(--gap));grid-area:fig;container-type:size;min-height:0;height:100%;width:100%;max-width:none;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--gap)}
 body[data-view=essay]:not(.essay-flow) .sketch-stage{flex:none;height:auto;aspect-ratio:800/510;width:min(100cqi,calc((100cqb - var(--controls)) * 800 / 510))}
 body[data-view=essay]:not(.essay-flow) .sketch-control{width:min(100cqi,calc((100cqb - var(--controls)) * 800 / 510));max-width:none;margin:0}
 body[data-view=essay]:not(.essay-flow) .essay-words{grid-area:words;min-width:0;min-height:0;height:100%;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
 body[data-view=essay]:not(.essay-flow) .reading-text{margin:0;max-width:none;font-size:var(--fs,clamp(1.0625rem,.5rem + min(.8vw,1.45dvh),1.75rem))}
 body[data-view=essay]:not(.essay-flow) .essay-links{font-size:max(14px,calc(var(--fs,20px) * .62))}
 /* the rails: a share of the width each side; the button centred in it, growing with it */
 body[data-view=essay]:not(.essay-flow) .essay-layout>.essay-side{top:0!important;bottom:0;width:var(--rail);container-type:inline-size}
 body[data-view=essay]:not(.essay-flow) .essay-side.previous{left:0!important}
 body[data-view=essay]:not(.essay-flow) .essay-side.next{right:0!important}
 body[data-view=essay]:not(.essay-flow) .essay-side .essay-edge{--a:clamp(56px,30cqi,176px);width:100%;gap:clamp(16px,6cqi,44px);padding-inline:clamp(10px,6cqi,40px)}
 body[data-view=essay]:not(.essay-flow) .essay-side .edge-arrow{width:var(--a);height:var(--a);font-size:calc(var(--a) * .46)}
 body[data-view=essay]:not(.essay-flow) .essay-side .essay-edge strong{font-size:clamp(18px,11cqi,52px);max-width:11ch}
 body[data-view=essay]:not(.essay-flow) .essay-side .essay-edge :is(.meta,small){font-size:clamp(10px,4cqi,17px)}
}
@media (min-width:1101px) and (min-height:560px) and (max-height:760px){body[data-view=essay]:not(.essay-flow) .reading-masthead{display:none}body[data-view=essay]:not(.essay-flow) .essay-layout{margin-top:0}}
@media (max-width:1100px) and (orientation:portrait){.reading .sketch-stage{max-height:60svh;margin-inline:auto}}

/* the signature, and the way home (depart.js) */
@view-transition{navigation:auto}
::view-transition-group(fa-name){animation-duration:.9s;animation-timing-function:cubic-bezier(.22,.8,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.6s}
.journal-head .byline{margin:clamp(18px,2.4vh,30px) 0 0;color:var(--muted);font-size:clamp(15px,1vw,19px);letter-spacing:-.01em}
.byline a{color:inherit;text-decoration:none}
.by-name{color:var(--ink);padding-bottom:2px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .55s var(--ease)}
.byline a:is(:hover,:focus-visible) .by-name{background-size:100% 1px}
canvas.depart{position:fixed;inset:0;width:100vw;height:100vh;z-index:90;pointer-events:none}
.by-ghost{position:fixed;z-index:91;margin:0;pointer-events:none;white-space:nowrap;view-transition-name:fa-name}
/* while it departs, the page is the canvas's points; the living figures simply fade under the falling night */
html.departing main,html.departing main *:not(canvas){visibility:hidden!important}
html.departing main canvas{visibility:visible;opacity:0;transition:opacity .5s linear}

/* index <-> essay: the masthead, the figure, the kicker, the title and the first lines morph into each other */
::view-transition-group(*){animation-duration:.7s;animation-timing-function:cubic-bezier(.22,.8,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}
/* the rails' hairline only answers the pointer */
.essay-side .essay-edge:before{opacity:0!important}
.essay-side .essay-edge:is(:hover,:focus-visible):before{opacity:.8!important}

/* the body steps back so a few phrases can come forward; a link to another essay carries that essay's number */
.reading .reading-text p{color:color-mix(in srgb,var(--ink) 64%,var(--bg))}
.reading .reading-text :is(.accent,.xref){font-style:normal;color:var(--ink)}
.reading .reading-text .xref{text-decoration:none;padding-bottom:2px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;background-size:100% 1px;transition:background-size .55s var(--ease)}
.reading .reading-text .xref:is(:hover,:focus-visible){background-size:0 1px}
.reading .reading-text .xref sup{margin-left:.25em;font:500 .42em/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.08em;vertical-align:.9em;color:var(--muted)}
.newsletter .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* the signup, closed until the Kit form exists (content/newsletter.json) */
.newsletter :is(input,button):disabled{cursor:default}
.newsletter input:disabled{opacity:.55}
.newsletter button:disabled{opacity:.7}
.newsletter #newsletter-status:empty{display:none}
.newsletter button:disabled span{font-size:14px;letter-spacing:0}