/* Travoveda Blog, design F3 "Tower" (home page: "Spine", 2026-10).
   Every word of a title is set to the full width of the page, in Anybody at its widest. Labels are Chivo Mono.
   One stylesheet for the whole site; page-specific parts are grouped under their page below. */

:root{
  --paper:#f6f6f4;
  --ink:#0b0b0b;
  --dim:#6f706e;
  --rule:#d6d6d2;
  --slot:#e6e6e2;
  --display:"Anybody",ui-sans-serif,system-ui,sans-serif;
  --mono:"Chivo Mono",ui-monospace,monospace;
  --pad:clamp(16px,2.6vw,34px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0b0b0b;--ink:#f1f1ef;--dim:#8b8c8a;--rule:#232323;--slot:#1a1a1a;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#0b0b0b;--ink:#f1f1ef;--dim:#8b8c8a;--rule:#232323;--slot:#1a1a1a;color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--mono);padding-inline:var(--pad);overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--pad);top:-60px;z-index:10;background:var(--ink);color:var(--paper);padding:8px 12px;text-decoration:none}
.skip:focus{top:8px}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:5;background:var(--paper);margin-inline:calc(-1 * var(--pad));padding:14px var(--pad) 12px;display:flex;justify-content:space-between;align-items:baseline;gap:10px 28px;flex-wrap:wrap;border-bottom:1px solid var(--rule)}
.site-head nav{display:flex;gap:20px;flex-wrap:wrap}
.site-head a{text-decoration:none}
.site-head .brand{display:inline-flex;align-items:center;align-self:center}
/* the logo's "echo": now and then two pale ghosts of it jump out to the sides and snap back, like a glitch on film */
.site-head .brand{position:relative}
.site-head .brand .echo{position:absolute;inset:0;pointer-events:none;background:var(--ink);opacity:0;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;animation:echo 6s steps(1,end) infinite}
.site-head .brand .echo + .echo{animation-name:echo2}
@keyframes echo{0%,88%,100%{opacity:0;transform:none}89%{opacity:.35;transform:translate(-4px,0)}91%{opacity:.25;transform:translate(3px,1px)}93%{opacity:.3;transform:translate(-2px,-1px)}95%{opacity:0;transform:none}}
@keyframes echo2{0%,88%,100%{opacity:0;transform:none}89%{opacity:.25;transform:translate(5px,1px)}91%{opacity:.3;transform:translate(-3px,0)}94%{opacity:.2;transform:translate(2px,0)}95%{opacity:0;transform:none}}
@media (prefers-reduced-motion:reduce){.site-head .brand .echo{animation:none;display:none}}
/* header sizes step down from desktop to tablet to phone so the logo and menu never crowd each other */
.site-head{align-items:center}
.site-head .brand img{width:190px;height:auto;display:block}
.site-head nav{font-size:12.5px;gap:26px}
@media (max-width:1100px){.site-head .brand img{width:165px}.site-head nav{font-size:11.5px;gap:22px}}
@media (max-width:720px){.site-head .brand img{width:150px}.site-head nav{font-size:11px;gap:18px}}
@media (max-width:360px){.site-head .brand img{width:132px}.site-head nav{font-size:10.5px;gap:14px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .site-head .brand img{filter:invert(1) brightness(1.4)}}
:root[data-theme="dark"] .site-head .brand img{filter:invert(1) brightness(1.4)}
/* the light/dark switch: shows a moon on a light page and a sun on a dark one */
@media (min-width:721px){.site-head nav{margin-left:auto}}
.theme{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin:-6px -6px -6px 0;padding:0;background:none;border:0;color:var(--ink);cursor:pointer;border-radius:0}
.theme svg{width:20px;height:20px;fill:currentColor;transition:transform .5s var(--ease)}
.theme:hover svg{transform:rotate(-30deg)}
.theme .sun:hover{transform:rotate(45deg)}
.theme:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.theme .sun{display:none}
:root[data-theme="dark"] .theme .sun,:root:not([data-theme="light"]) body.dark .theme .sun{display:block}
:root[data-theme="dark"] .theme .moon,:root:not([data-theme="light"]) body.dark .theme .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme .sun{display:block}:root:not([data-theme="light"]) .theme .moon{display:none}}
.site-head nav a:hover,.site-head nav a:focus-visible,.site-head nav a[aria-current]{text-decoration:underline;text-underline-offset:4px}
.site-head a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* reading progress: a hairline under the header that fills as you read */
#bar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--ink)}

/* ---------- the tower ---------- */
.tower{display:block;width:max-content;max-width:100%;font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.8;color:var(--ink);margin:0}
.tower span{display:block;width:max-content;white-space:nowrap;font-variation-settings:"wdth" 150;padding-top:.04em}
/* before the script has measured, keep towers readable and inside the page */
.tower > .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tower:not(.fitted) span{font-size:clamp(28px,8vw,96px);white-space:normal}

.top{border-top:1px solid var(--ink);margin-top:28px;padding-top:10px}
.top .meta{display:flex;justify-content:space-between;gap:12px;color:var(--dim);padding-bottom:10px}

/* ---------- the wall: one essay per block ----------
   At rest, the title tower. On hover (or, on touch screens, when the block reaches the middle of the screen)
   the block grows to the cover's proportions, the cover shows in its own colours and the title shrinks
   and moves, white, to the corner chosen for that essay. */
.intro{max-width:52ch;color:var(--dim);font-size:12px;line-height:1.65;padding-block:18px 30px;margin:0}
.essay{position:relative;isolation:isolate;display:block;text-decoration:none;padding:10px var(--pad) 26px;margin-inline:calc(-1 * var(--pad));border-top:1px solid var(--ink);height:var(--rest-h,auto);overflow:hidden;transition:height .55s var(--ease)}
.essay .pic{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;opacity:0;transition:opacity .45s ease}
.essay .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,.08) 45%,rgba(0,0,0,.42))}
.essay .meta{display:grid;grid-template-columns:auto auto;justify-content:space-between;gap:4px 24px;color:var(--dim);padding-bottom:10px;align-items:baseline}
.essay .meta .lead{position:absolute;top:34px;left:var(--pad);width:min(62ch,calc(100% - 2 * var(--pad)));text-transform:none;letter-spacing:0;font-size:12.5px;line-height:1.55;opacity:0;transition:opacity .3s .15s}
.essay.c-top .meta .lead{top:auto;bottom:26px}
.essay .tower{transform-origin:0 0;transition:color .3s,transform .55s var(--ease)}
.essay:hover,.essay:focus-visible,.essay.open{height:var(--open-h);outline:none}
.essay:focus-visible{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px var(--ink)}
.essay:hover .tower,.essay:focus-visible .tower,.essay.open .tower{transform:translate(var(--tx,0),var(--ty,0)) scale(var(--s,1));color:#fff}
.essay:hover .pic,.essay:focus-visible .pic,.essay.open .pic{opacity:1}
.essay:hover .meta,.essay:focus-visible .meta,.essay.open .meta{color:#fff}
.essay:hover .meta .lead,.essay:focus-visible .meta .lead,.essay.open .meta .lead{opacity:1}
.wall-end{border-top:1px solid var(--ink)}

/* ---------- the shelf: the home page ----------
   Each title stands on its side next to its cover, like the spine of a book on a shelf: every line runs the full
   height of the cover. Essays alternate left and right. Covers are grey until hovered (on touch screens, until the
   essay reaches the middle of the screen). */
.shelf{display:flex;flex-direction:column;gap:clamp(44px,6vw,84px);padding-bottom:clamp(40px,6vw,80px)}
.shelf-item{display:flex;flex-direction:column;gap:12px}
.shelf-item .row{display:flex;gap:clamp(8px,1.2vw,16px);align-items:flex-start;text-decoration:none;color:inherit;max-width:100%}
.shelf-item .row:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.shelf-item:nth-child(even){align-items:flex-end}
.shelf-item:nth-child(even) .row{flex-direction:row-reverse}
.tower.spine{writing-mode:vertical-rl;transform:rotate(180deg);flex:none;width:auto;max-width:none}
.tower.spine span{width:auto;height:max-content;padding-top:0;padding-left:.04em}
.shelf-item .shelf-pic{display:block;flex:none;overflow:hidden;background:var(--slot);width:min(60vw,640px);aspect-ratio:16/9;max-width:100%}
.shelf-item .shelf-pic img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);transition:filter .5s ease}
.shelf-item .row:hover .shelf-pic img,.shelf-item .row:focus-visible .shelf-pic img,.shelf-item.open .shelf-pic img{filter:none}
.shelf-item .info{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;color:var(--dim);margin:0;max-width:100%}
.shelf-item .info .lead{grid-row:span 2;text-transform:none;letter-spacing:0;font-size:12px;line-height:1.55;color:var(--ink)}
.shelf-item .info > span:last-child{grid-column:1;grid-row:2;white-space:nowrap}
.shelf-item:nth-child(even) .info{grid-template-columns:minmax(0,1fr) auto;text-align:right}
.shelf-item:nth-child(even) .info .lead{grid-column:1;grid-row:1 / span 2}
.shelf-item:nth-child(even) .info > span:first-child,.shelf-item:nth-child(even) .info > span:last-child{grid-column:2}
@media (max-width:720px){.shelf-item .info,.shelf-item:nth-child(even) .info{grid-template-columns:minmax(0,1fr) auto;text-align:left}.shelf-item .info .lead,.shelf-item:nth-child(even) .info .lead{grid-column:1 / -1;grid-row:2}.shelf-item .info > span:first-child,.shelf-item:nth-child(even) .info > span:first-child{grid-column:1;grid-row:1}.shelf-item .info > span:last-child,.shelf-item:nth-child(even) .info > span:last-child{grid-column:2;grid-row:1;text-align:right}.shelf-item:nth-child(even){align-items:stretch}.shelf-item:nth-child(even) .row{align-self:flex-end}}
/* the home page on a computer, "Front page": the newest essay large with its lead beside it, the others below in a grid
   (phones keep the shelf above; the card replaces the info line only here) */
.home-card,.home-label{display:none}
@media (min-width:721px){
  .front{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px clamp(18px,2vw,30px);padding-bottom:clamp(40px,6vw,80px)}
  .front .shelf-item,.front .shelf-item:nth-child(even){min-width:0;gap:10px;align-items:stretch}
  .front .shelf-item:nth-child(even) .row{flex-direction:row}
  .front .shelf-item .row{gap:10px}
  .front .shelf-item .info{display:none}
  .front .home-card{display:flex;flex-direction:column;gap:6px;min-width:0}
  .front .home-card .meta{display:flex;justify-content:space-between;gap:12px;color:var(--dim);margin:0}
  .front .home-card .lead{margin:0;font-size:12px;line-height:1.55}
  .front .shelf-item:first-child{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,64fr) minmax(0,36fr);gap:0 clamp(20px,3vw,44px);align-items:end;border-top:1px solid var(--ink);padding-top:18px}
  .front .shelf-item:first-child .home-card{gap:18px}
  .front .shelf-item:first-child .home-card .meta{border-bottom:1px solid var(--rule);padding-bottom:8px}
  .front .shelf-item:first-child .home-card .lead{font-size:clamp(15px,1.35vw,19px);line-height:1.5;text-wrap:pretty}
  .front .home-card .go{color:var(--dim);text-decoration:none}
  .front .home-card .go:hover,.front .home-card .go:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
  .front .home-label{grid-column:1 / -1;display:flex;justify-content:space-between;color:var(--dim);border-top:1px solid var(--ink);margin:clamp(48px,6vw,80px) 0 -30px;padding-top:10px}
}
@media (min-width:721px) and (max-width:1000px){.front{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- subscription ---------- */
.letter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px var(--pad);margin:96px calc(-1 * var(--pad)) 0;padding:16px var(--pad) 34px;background:var(--ink);color:var(--paper)}
.letter .meta{grid-column:1/-1;display:flex;justify-content:space-between;color:var(--dim)}
.letter h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-variation-settings:"wdth" 150;font-size:clamp(28px,4.6vw,64px);line-height:.85;margin:0}
.letter p{font-family:var(--display);font-size:18px;line-height:1.5;margin:0 0 18px;font-variation-settings:"wdth" 92}
.letter form{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.letter input[type=email]{font-family:var(--mono);font-size:13px;background:transparent;border:0;border-bottom:1px solid var(--paper);color:var(--paper);padding:6px 0;width:18rem;max-width:100%;min-width:0;border-radius:0}
.letter input::placeholder{color:var(--dim)}
.letter input:focus{outline:none;border-bottom-width:2px}
.letter button{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;background:var(--paper);color:var(--ink);border:0;padding:8px 14px;cursor:pointer}
.letter button:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.letter .msg{display:block;margin-top:10px;min-height:1em}
.letter small{display:block;margin-top:14px;color:var(--dim)}
.letter small a{text-underline-offset:3px}
.hp{position:absolute;left:-9999px}

/* the small form in the footer of the home and article pages */
.inline-sub{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.inline-sub input[type=email]{font:inherit;font-size:12px;background:transparent;border:0;border-bottom:1px solid var(--ink);color:var(--ink);padding:4px 0;width:15rem;max-width:100%;min-width:0;border-radius:0}
.inline-sub input:focus{outline:none;border-bottom-width:2px}
.inline-sub button{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--paper);border:0;padding:7px 12px;cursor:pointer}
.inline-sub button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- footer ---------- */
.foot{display:flex;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;align-items:baseline;padding-block:24px 28px;border-top:1px solid var(--ink);color:var(--dim)}
.foot.gap{margin-top:96px}
.foot a{text-decoration:none}
.foot a:hover,.foot a:focus-visible{color:var(--ink);outline:none;text-decoration:underline;text-underline-offset:3px}
.letter + .foot{border-top:0}

/* ---------- article ----------
   The curtain: the cover fills the screen under the header and stays put, with the number, date and the title
   in one full-width line on the paper below it; as you scroll, the page with the text rises over the cover.
   On phones a wide cover is shown whole across the width instead of being cut to a sliver of the tall screen.
   While you read, the title is written out down the right edge of the screen: the bookmark. */
.curtain{position:relative}
.curtain-back{position:sticky;top:var(--hh,52px);height:calc(100vh - var(--hh,52px) - var(--band,140px));height:calc(100svh - var(--hh,52px) - var(--band,140px));min-height:200px;margin-inline:calc(-1 * var(--pad));overflow:hidden;background:var(--slot)}
.curtain-back img{display:block;width:100%;height:100%;object-fit:cover}
.curtain-sheet{position:relative;z-index:1;background:var(--paper);margin-inline:calc(-1 * var(--pad));padding:10px var(--pad) 0}
.curtain-band .row{display:flex;justify-content:space-between;gap:4px 16px;flex-wrap:wrap;color:var(--dim);margin:0 0 10px}
.curtain-title{max-width:none;width:auto;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.curtain-title span{white-space:nowrap}
.tower.curtain-title:not(.fitted) span{font-size:clamp(22px,4.4vw,72px)}
@media (max-width:720px){.curtain-back{height:auto;aspect-ratio:var(--ar,16/9);min-height:0}}
.art-head{margin-top:6px}
.art-head .shelf-pic img{filter:none}
/* About drawing: black lines on transparent, turned white in the dark theme */
.about .art-head .shelf-pic{background:none}
.about .art-head .shelf-pic img{object-fit:contain}
:root[data-theme="dark"] .about .art-head .shelf-pic img{filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .about .art-head .shelf-pic img,:root:not([data-theme="light"]) .about .pics img[src$=".svg"]{filter:invert(1)}}
:root[data-theme="dark"] .about .pics img[src$=".svg"]{filter:invert(1)}
.art-meta{display:flex;flex-wrap:wrap;gap:6px 28px;border-top:1px solid var(--ink);padding-top:8px;margin:14px 0 0;color:var(--dim)}
.art-meta div{display:flex;gap:8px}
.art-meta dd{margin:0;color:var(--ink)}
.bookmark{position:fixed;top:0;right:clamp(10px,2vw,28px);z-index:4;height:0;overflow:hidden;pointer-events:none}
.bookmark span{display:block;writing-mode:vertical-rl;padding-top:16px;font-family:var(--display);font-weight:800;text-transform:uppercase;font-variation-settings:"wdth" 150;line-height:.8;white-space:nowrap;font-size:clamp(26px,2.6vw,40px);color:var(--ink)}
.fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);margin:22px 0 0}
.fields div{padding:10px 14px 14px 0;border-right:1px solid var(--rule)}
.fields div+div{padding-left:14px}
.fields div:last-child{border-right:0}
.fields dt{color:var(--dim);margin-bottom:6px}
.fields dd{margin:0;font-family:var(--display);font-size:15px;line-height:1.3;font-variation-settings:"wdth" 100;text-transform:none;letter-spacing:0}
.cover{display:block;margin-inline:calc(-1 * var(--pad));width:calc(100% + 2 * var(--pad));max-width:none;height:auto;object-fit:cover;background:var(--rule)}
.standfirst{font-family:var(--display);font-weight:500;font-variation-settings:"wdth" 88;font-size:clamp(22px,2.6vw,34px);line-height:1.2;max-width:30ch;margin:48px auto 56px}
.body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,62ch) minmax(0,1fr);column-gap:28px}
.body > *{grid-column:2}
.p{position:relative;font-family:var(--display);font-weight:400;font-variation-settings:"wdth" 92;font-size:19px;line-height:1.62;margin:0 0 1.15em;hyphens:auto;overflow-wrap:break-word}
.p a{text-underline-offset:3px}
/* phrases the author marks: the place where the text looks back at the reader */
.body mark{background:none;color:inherit;font-weight:750;font-variation-settings:"wdth" 120;text-transform:uppercase;font-size:.84em;letter-spacing:.01em}
.body h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-variation-settings:"wdth" 150;font-size:clamp(22px,2.6vw,32px);line-height:.9;margin:1.6em 0 .7em}
.body h3{font-family:var(--display);font-weight:750;font-variation-settings:"wdth" 120;font-size:20px;line-height:1.2;margin:1.4em 0 .6em}
.body blockquote.q{font-family:var(--display);font-variation-settings:"wdth" 92;font-size:18px;line-height:1.6;margin:0 0 1.15em;padding-left:18px;border-left:2px solid var(--ink)}
.body figure.img{margin:2em 0}
.body figure.img figcaption{color:var(--dim);margin-top:8px}
/* a break between chapters: the number of the part that starts, as a pale stretched word like the towers */
.chapter{margin:2.2em 0 1.4em}
.chapter .tower{color:var(--rule2,#d4d4d0);font-weight:900}
body.dark .chapter .tower,:root[data-theme="dark"] .chapter .tower{color:#2e2e2e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chapter .tower{color:#2e2e2e}}
.body hr{border:0;border-top:1px solid var(--rule);margin:2em 0}
.end{color:var(--dim);margin:40px 0 0}
/* the pull quote is a tower of its own, cut across the page in negative */
.pull{grid-column:1/-1 !important;margin:56px calc(-1 * var(--pad));padding:18px var(--pad) 24px;background:var(--ink);color:var(--paper)}
.pull .tower{color:var(--paper)}
.pull figcaption{color:var(--dim);margin-top:14px}
.more{margin-top:96px}
.more > .meta{display:flex;justify-content:space-between;color:var(--dim);margin-bottom:10px}
.more h2{margin:0;font-weight:400}

/* ---------- about: built like an essay page (see the article section) ---------- */
.sec{border-top:1px solid var(--ink);margin-top:72px;padding-top:10px}
.sec .meta{display:flex;justify-content:space-between;gap:12px;color:var(--dim)}
.sec h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-variation-settings:"wdth" 150;font-size:clamp(28px,4.6vw,64px);line-height:.85;margin:14px 0 26px;letter-spacing:-.005em}
.sec p,.prose p{font-family:var(--display);font-weight:400;font-variation-settings:"wdth" 92;font-size:clamp(19px,1.9vw,24px);line-height:1.55;max-width:46ch;margin:0 0 .8em}
.about .body h2 .k{display:block;color:var(--dim);margin-bottom:8px}
.about .body .pics{margin:8px 0 1.6em}
.pics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pad);margin-top:40px}
.pics.one{grid-template-columns:minmax(0,1fr);max-width:66%}
.pics figure{margin:0}
.pics img{width:100%;height:auto}

/* ---------- donate ---------- */
.text{border-top:1px solid var(--ink);margin-top:26px;padding-top:22px}
.text p{font-family:var(--display);font-weight:400;font-variation-settings:"wdth" 92;font-size:clamp(19px,1.9vw,24px);line-height:1.55;max-width:46ch;margin:0}
.ways{margin-top:56px}
.ways > .meta{display:flex;justify-content:space-between;color:var(--dim);margin-bottom:10px}
.way{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 24px;padding:10px var(--pad) 22px;margin-inline:calc(-1 * var(--pad));border-top:1px solid var(--ink);text-decoration:none;transition:background-color .25s,color .25s}
.way:last-child{border-bottom:1px solid var(--ink)}
.way .meta{grid-column:1/-1;display:flex;justify-content:space-between;color:var(--dim)}
.way .name{font-family:var(--display);font-weight:800;text-transform:uppercase;font-variation-settings:"wdth" 150;font-size:clamp(40px,9vw,128px);line-height:.82;padding-top:.04em}
.way .addr{font-family:var(--mono);font-size:13px;letter-spacing:.02em;padding-bottom:.4em;text-align:right;overflow-wrap:anywhere}
.way .addr b{display:block;font-weight:400;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.way:hover,.way:focus-visible{background:var(--ink);color:var(--paper);outline:none}
.way:hover .meta,.way:focus-visible .meta,.way:hover .addr b,.way:focus-visible .addr b{color:var(--paper)}
.donate-pic{max-width:66%;margin:56px 0 0}
.donate-pic img{width:100%;height:auto}

/* ---------- publications ---------- */
.tools{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:22px;padding:0 0 10px;color:var(--dim)}
.tools button{font:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;padding:0;color:var(--dim);cursor:pointer}
.tools button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.tools button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.tools .sort{display:flex;gap:14px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,5vw,64px) clamp(20px,3vw,44px);border-top:1px solid var(--ink);padding-top:18px;margin:0;padding-left:0;list-style:none}
/* each essay is the home page block (title on its side beside the cover), two to a row */
.grid-item{display:flex;flex-direction:column;gap:10px;min-width:0}
.grid-item .row{display:flex;gap:10px;align-items:flex-start;text-decoration:none;color:inherit;max-width:100%}
.grid-item .row:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.grid-item .shelf-pic{display:block;flex:none;overflow:hidden;background:var(--slot);width:60%;aspect-ratio:16/9}
.grid-item .shelf-pic img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);transition:filter .5s ease}
.grid-item .row:hover .shelf-pic img,.grid-item .row:focus-visible .shelf-pic img,.grid-item.open .shelf-pic img{filter:none}
.grid-item .info{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;color:var(--dim);margin:0}
.grid-item .info .lead{grid-column:1 / -1;text-transform:none;letter-spacing:0;font-size:12px;line-height:1.55;color:var(--ink)}

/* ---------- search, "Shelf": every essay on one shelf as a spine; the ones that use the word slide out ---------- */
.search-form{display:flex;align-items:baseline;gap:16px;border-bottom:2px solid var(--ink);margin-top:28px;padding:10px 0 8px}
.search-form label{color:var(--dim);flex:none}
#q{flex:1;min-width:0;font-family:var(--display);font-weight:700;text-transform:uppercase;font-variation-settings:"wdth" 130;font-size:clamp(24px,3.4vw,44px);line-height:1.1;background:transparent;border:0;color:var(--ink);padding:0;border-radius:0;-webkit-appearance:none;appearance:none}
#q::placeholder{color:var(--rule)}
#q:focus{outline:none}
#q::-webkit-search-cancel-button{display:none}
.search-form:focus-within{border-bottom-width:3px}
.count{display:flex;justify-content:space-between;gap:12px;color:var(--dim);padding:12px 0 10px;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{font:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:1px solid var(--rule);color:var(--dim);padding:4px 8px;cursor:pointer}
.chips button:hover,.chips button:focus-visible{border-color:var(--ink);color:var(--ink);outline:none}
.bookcase{display:flex;align-items:flex-end;gap:3px;border-bottom:3px solid var(--ink);margin-top:24px;padding-top:24px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.vol{flex:none;display:block;border:1px solid var(--ink);border-bottom:0;padding:8px 5px 6px;background:var(--paper);color:var(--ink);text-decoration:none;transition:transform .45s var(--ease),opacity .35s,background-color .3s,color .3s}
.vol .tower{color:inherit}
.vol .no{display:block;writing-mode:vertical-rl;transform:rotate(180deg);margin-top:8px;opacity:.6}
.vol:hover,.vol:focus-visible{transform:translateY(-10px);outline:none}
.bookcase.q .vol{opacity:.18}
.bookcase.q .vol.hit{opacity:1;background:var(--ink);color:var(--paper);transform:translateY(-18px)}
#results{margin-top:30px}
.find{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:8px 28px;border-top:1px solid var(--rule);padding:16px 0 20px;text-decoration:none}
.find:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.find .t{font-family:var(--display);font-weight:800;text-transform:uppercase;font-variation-settings:"wdth" 150;font-size:15px;line-height:.95}
.find .t small{display:block;color:var(--dim);margin-bottom:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;font-weight:400}
.find .snip{font-family:var(--display);font-variation-settings:"wdth" 92;font-size:clamp(18px,1.7vw,22px);line-height:1.55;max-width:62ch}
.find mark{background:var(--ink);color:var(--paper);padding:0 .08em}
.find:hover .t{text-decoration:underline;text-underline-offset:3px}
@media (max-width:720px){.find{grid-template-columns:minmax(0,1fr)}}
.empty{border-top:1px solid var(--rule);padding:22px 0;font-family:var(--display);font-size:19px;line-height:1.5;max-width:52ch;margin:0}

/* ---------- plain pages (privacy, terms, 404) ---------- */
.prose{border-top:1px solid var(--ink);margin-top:26px;padding-top:22px}
.prose h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-variation-settings:"wdth" 150;font-size:clamp(22px,2.6vw,32px);line-height:.9;margin:1.4em 0 .6em}
.prose a{text-underline-offset:3px}

/* ---------- small screens ---------- */
@media (max-width:900px){
  .body{grid-template-columns:minmax(0,1fr);column-gap:0}
  .body > *{grid-column:1}
}
@media (max-width:720px){
  .essay .meta .lead{display:none}
  .fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fields div:nth-child(2){border-right:0}
  .fields div:nth-child(3){padding-left:0}
  .fields div:nth-child(n+3){border-top:1px solid var(--rule)}
  .p{font-size:17.5px}
  .standfirst{margin:32px 0 40px}
  #art .body,#art .standfirst{padding-right:30px}
  .art-meta{gap:4px 18px}
  .pics,.letter{grid-template-columns:minmax(0,1fr)}
  .pics.one,.donate-pic{max-width:none}
  .sec{margin-top:56px}
  .way{grid-template-columns:minmax(0,1fr)}
  .way .addr{text-align:left}
  .grid{grid-template-columns:minmax(0,1fr)}
  .search-form label{display:none}
  }
@media (prefers-reduced-motion:reduce){
  .essay,.essay .pic,.essay .tower,.essay .meta .lead,.shelf-item .shelf-pic img,.way,.grid-item .shelf-pic img,}
@media print{
  .site-head,.foot,.letter,.more,.inline-sub,#bar,.bookmark{display:none}
  body{background:#fff;color:#000}
}