@font-face{font-family:Notebook;src:url('fonts/nothing-you-could-do.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Zen;src:url('fonts/zen-kurenaido.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Marker;src:url('fonts/rock-salt.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--ink:#202020;--muted:#646464;--rule:#c9c9c9;--paper:#fff;--hand:Notebook,cursive;--body:Zen,sans-serif;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--hand);-webkit-font-smoothing:antialiased}button,input,select{font:inherit;color:inherit}button,select{cursor:pointer}button{border:0;background:transparent;padding:0}a{color:inherit;text-decoration:none}a,button,input,select{-webkit-tap-highlight-color:transparent}a:hover,button:hover{color:#000}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #444;outline-offset:5px}::selection{background:#252525;color:#fff}[hidden]{display:none!important}img{display:block;max-width:100%;height:auto}figure,p,h1,h2,h3{margin:0}h1,h2,h3{font-weight:400}mark{background:#dedede;color:inherit;text-decoration:underline;text-underline-offset:4px}.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:fixed;left:20px;top:-100px;padding:10px 20px;background:#fff;z-index:20}.skip:focus{top:10px}
.topline{max-width:1440px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:26px 42px 0 158px;font:12px/1.5 var(--hand);letter-spacing:1.5px}.topline .preview{font-size:11px;letter-spacing:1px}.notebook{display:grid;grid-template-columns:96px minmax(0,1fr);gap:37px;max-width:1440px;padding:0 42px 0 25px;margin:auto}.inside-cover{position:sticky;top:35px;align-self:start;margin-top:62px;min-height:650px;padding:0 23px 26px 3px;isolation:isolate}.inside-cover:after{content:'';position:absolute;right:0;top:14px;bottom:0;width:1px;background:linear-gradient(#bbb,#d0d0d0 75%,transparent);transform:rotate(.25deg);z-index:-1}.tiny{font-size:10px;letter-spacing:1px;text-align:center;color:var(--muted)}.inside-cover nav{margin-top:23px;display:grid;gap:19px}.source-link{position:relative;display:flex;align-items:center;justify-content:center;min-height:45px;font-size:27px;line-height:1.25;transition:transform .15s}.source-link:nth-child(2n){transform:rotate(-5deg)}.source-link:nth-child(3n){transform:rotate(3deg)}.source-link i{display:none}.source-link:hover{transform:rotate(-6deg) translateY(-2px)}.source-link.current:before{content:'';position:absolute;inset:1px -6px 0 -5px;border:1px solid #555;border-radius:48% 53% 46% 55%;transform:rotate(-14deg)}.cover-art{position:relative;width:65px;height:102px;margin:49px 0 35px -9px;background:#191919;transform:rotate(-8deg);clip-path:polygon(2% 4%,96% 0,100% 98%,7% 100%,0 73%,4% 45%);color:#fff}.cover-art span{position:absolute;top:9px;left:12px;font-size:14px;transform:rotate(4deg)}.cover-art svg{position:absolute;width:65px;bottom:6px;left:0;fill:none;stroke:#fff;stroke-width:1.2;opacity:.65}.cover-bottom{display:flex;flex-direction:column;gap:16px;align-items:center;font-size:9px;letter-spacing:.5px}.page{min-width:0}.mobile-header,.mobile-index{display:none}main{min-width:0}footer{position:relative;display:flex;align-items:flex-end;gap:32px;padding:23px 0 28px;margin-top:78px;font-size:12px}footer:before{content:'';position:absolute;top:0;left:0;right:4%;border-top:1px solid #bcbcbc;transform:rotate(-.15deg)}footer>div{flex:1}footer small{display:block;font-size:9px;letter-spacing:1px;margin-top:9px;color:var(--muted)}footer>a:last-child{font-size:12px}
.home-intro{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:24px;position:relative;padding-top:25px}.home-heading{align-self:center;padding:0}.wordmark{max-width:680px;line-height:1}.wordmark img{width:100%;height:auto}.masthead-collage{grid-column:2;grid-row:1/3;position:relative;align-self:start;margin-top:-52px;margin-right:-6px}.masthead-collage>img{width:100%;height:408px;object-fit:contain;object-position:center top}.masthead-collage>span{position:absolute;right:0;bottom:3px;font-size:13px;line-height:1.5;transform:rotate(-6deg);background:#fff;padding:3px 0 2px 10px}.search{display:flex;align-items:center;gap:17px;position:relative;min-height:52px;padding:0 5px 7px 0;margin:22px 0 0;isolation:isolate}.search:after,.search:before{content:'';position:absolute;z-index:-1;left:0;bottom:0;right:0;border-bottom:1px solid #686868;transform:rotate(-.35deg)}.search:before{bottom:-2px;left:3%;right:8%;border-color:#d0d0d0;transform:rotate(.1deg)}.search label{font-size:17px;letter-spacing:1px}.search input{width:0;min-width:0;flex:1;background:transparent;border:0;border-radius:0;font:22px var(--body);padding:0 3px;outline-offset:0}.search input:focus-visible{outline:0}.search:focus-within:after{border-bottom:2px solid #222}.search button{font-size:32px;line-height:1;min-width:40px;min-height:40px}.filters{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin:28px 0 45px}.filter-line{display:flex;gap:22px;align-items:center}.filter-line h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.topics,.eras{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}.topics button{position:relative;font-size:18px;letter-spacing:.6px;min-height:30px}.topics button[aria-pressed=true]:after{content:'';position:absolute;inset:1px -12px -2px -12px;border:1px solid #444;border-radius:48% 55% 45% 52%;transform:rotate(-9deg);pointer-events:none}.era-line{flex-basis:100%}.eras{gap:15px 26px}.eras button{font-size:14px;letter-spacing:.5px;min-height:24px;position:relative;color:#555}.eras button[aria-pressed=true]{color:#111}.eras button[aria-pressed=true]:after{content:'';position:absolute;bottom:0;left:-3px;right:-3px;border-bottom:1px solid #555;transform:rotate(-4deg)}.source-select{display:flex;align-items:center;gap:12px;font-size:11px;margin-left:auto}.source-select select,.sort-label select{background:transparent;border:0;border-radius:0;font:inherit;min-height:32px;padding-right:4px}.source-select select{min-width:60px}.active-filters{flex-basis:100%;display:flex;gap:22px;align-items:baseline;font:15px var(--body);color:var(--muted)}.active-filters button{font:11px var(--hand);white-space:nowrap}.home-sources{display:none}
.home-reading{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:55px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;position:relative;padding-bottom:10px}.section-heading:after{content:'';position:absolute;left:0;right:0;bottom:0;border-bottom:1px solid #b5b5b5;transform:rotate(-.25deg)}.section-heading h2{font-size:20px;letter-spacing:1.5px}.sort-label{font-size:14px}.results-note{font-size:9px;letter-spacing:1px;color:#666;text-align:right;margin:6px 0 0;min-height:15px}.article-card{display:grid;grid-template-columns:135px minmax(0,1fr);gap:22px;position:relative;padding:21px 0 23px;min-width:0}.article-card:after{content:'';position:absolute;bottom:0;left:0;right:0;border-bottom:1px solid #d3d3d3;transform:rotate(.12deg)}.article-card:nth-child(2n):after{right:1.5%;transform:rotate(-.2deg)}.card-meta{display:flex;align-items:baseline;gap:17px;padding-top:3px}.source-label{font-size:27px;line-height:1.2;transform:rotate(-7deg)}.card-date{font:11px/1.5 ui-monospace,Menlo,monospace;letter-spacing:-.3px;white-space:nowrap;color:#555}.card-copy{min-width:0}.article-card h3{font:23px/1.65 var(--body);overflow-wrap:anywhere}.article-card h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}.card-excerpt{font:17px/1.9 var(--body);color:#505050;margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:14px}.card-topics{font-size:11px;letter-spacing:.7px;color:#626262}.read-more{font-size:14px;white-space:nowrap}.card-photo{display:none}.photo-note{padding:62px 5px 0 0;align-self:start;position:sticky;top:20px}.photo-note figure{position:relative;transform:rotate(2deg);padding:10px 10px 8px;background:#fff;box-shadow:0 1px 5px #0000001a}.photo-note figure:before{content:'';position:absolute;left:30%;top:-9px;width:42%;height:20px;background:#d6d6d6a8;transform:rotate(-5deg);z-index:1;clip-path:polygon(1% 8%,99% 0,96% 100%,0 89%)}.photo-note img{width:100%;height:230px;object-fit:cover;filter:grayscale(1) contrast(1.15)}.photo-note figcaption{display:flex;justify-content:space-between;gap:10px;font-size:10px;padding:10px 1px 2px}.photo-note-label{display:block;font-size:12px;letter-spacing:1px;transform:rotate(-3deg);margin:21px 0 0 21px}.more-line{margin-top:30px;text-align:right;font-size:14px}.text-link:hover,.article-ending a:hover,.related a:hover{opacity:.65}.empty-state{padding:65px 0;text-align:center}.empty-state h3{font-size:25px}.empty-state button{font-size:14px;margin-top:20px}
.listing-heading{position:relative;margin-top:51px;padding-bottom:15px}.listing-heading .breadcrumb{font-size:12px}.listing-heading .eyebrow{font-size:10px;letter-spacing:1px;margin-top:29px;color:var(--muted)}.listing-heading h1{font:76px/1.4 var(--hand);transform:rotate(-3deg);transform-origin:left center;letter-spacing:-3px}.listing-heading:after{content:'';position:absolute;right:10px;top:10px;width:108px;height:145px;background:url('collage-monochrome-v6.png') center/contain no-repeat;opacity:.9;pointer-events:none}.search.compact{max-width:770px;margin-top:5px}.page:has(.listing-heading) .filters{max-width:100%;margin-top:25px}.page:has(.listing-heading) .article-section{max-width:1015px}.page:has(.listing-heading) .article-card.has-image{grid-template-columns:135px minmax(0,1fr) 130px}.page:has(.listing-heading) .card-photo{display:block;align-self:center;transform:rotate(-1deg)}.page:has(.listing-heading) .card-photo img{width:130px;height:110px;object-fit:cover;filter:grayscale(1);border:5px solid #fff;box-shadow:0 1px 4px #00000017}
.article-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:54px 0 48px;max-width:870px;font-size:13px}.article-top .mono{font-size:11px;letter-spacing:1px;color:var(--muted)}.reading{max-width:790px;padding-left:25px}.article-header{position:relative;padding-bottom:34px;margin-bottom:35px}.article-header:after{content:'';position:absolute;left:0;bottom:0;right:0;border-bottom:1px solid #bababa;transform:rotate(-.3deg)}.article-header .eyebrow{font-size:29px;display:flex;align-items:baseline;gap:21px}.article-header .eyebrow span{font-size:13px;color:var(--muted)}.article-header h1{font:35px/1.65 var(--body);margin:24px 0 20px;overflow-wrap:anywhere}.article-tags{display:flex;gap:26px;flex-wrap:wrap;font-size:12px}.historical-note{font-size:10px;line-height:1.7;color:var(--muted);margin-top:23px}.article-body{font:21px/2.05 var(--body);overflow-wrap:anywhere}.article-body>p{margin:0 0 1.6em}.article-photo{margin:50px 0 25px}.article-photo img{max-width:100%;max-height:660px;width:auto;height:auto;filter:grayscale(1);border:10px solid #fff;box-shadow:0 1px 6px #00000021;transform:rotate(-.5deg)}.article-photo figcaption{font:10px var(--hand);color:var(--muted);margin-top:13px}.article-ending{display:flex;align-items:center;gap:25px;flex-wrap:wrap;font-size:13px;margin:55px 0 40px;padding-top:28px;border-top:1px solid #ccc}.end-mark{font:40px var(--hand);margin-right:auto;transform:rotate(10deg)}.archive-link{font-size:10px}.article-ending button{font-size:10px}#copy-status{flex-basis:100%;font-size:11px;text-align:right}.related{max-width:790px;margin:60px 0 45px;padding-left:25px}.related h2{font-size:18px;letter-spacing:1px;margin-bottom:16px}.related>a{display:grid;grid-template-columns:118px 1fr 20px;align-items:baseline;gap:18px;padding:17px 0;border-top:1px solid #d0d0d0}.related .meta{font-size:10px;color:var(--muted)}.related [lang=ja]{font:19px/1.7 var(--body)}.related i{font-size:17px;font-style:normal}dialog{border:1px solid #999;padding:40px;max-width:540px;width:calc(100% - 40px);background:#fff;color:var(--ink);box-shadow:0 15px 80px #00000025}dialog::backdrop{background:#0000004d}dialog .dialog-close{position:absolute;right:15px;top:10px;font-size:28px;line-height:1}dialog .eyebrow{font-size:10px;letter-spacing:1px}dialog h2{font-size:28px;margin:10px 0 25px}dialog p{font:15px/1.85 var(--hand);margin:15px 0}dialog small{font-size:11px;line-height:1.8;display:block;color:var(--muted);margin-top:25px}
@media(min-width:1441px){.home-intro{padding-top:45px}.masthead-collage>img{height:370px}.home-heading{padding:9px 0 17px}}
@media(max-width:1100px){.topline{padding-left:124px;padding-right:30px}.notebook{grid-template-columns:70px minmax(0,1fr);gap:29px;padding:0 30px 0 25px}.inside-cover{padding-right:15px}.home-intro{grid-template-columns:minmax(0,1fr) 210px;column-gap:25px}.masthead-collage>img{height:290px}.home-heading{padding:10px 0}.home-reading{grid-template-columns:minmax(0,1fr) 185px;gap:30px}.article-card{grid-template-columns:105px minmax(0,1fr);gap:19px}.card-meta{flex-direction:column;gap:8px}.photo-note img{height:215px}.page:has(.listing-heading) .article-card.has-image{grid-template-columns:105px minmax(0,1fr) 105px}.page:has(.listing-heading) .card-photo img{width:105px;height:100px}.reading,.related{padding-left:0}.topics{gap:16px 24px}}
@media(max-width:760px){html{scroll-padding-top:12px}.topline{display:none}.notebook{display:block;padding:0 24px;max-width:560px}.inside-cover{display:none}.mobile-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:23px 0 0;font-size:10px;letter-spacing:.3px}.mobile-header button{font-size:10px;min-height:28px;white-space:nowrap}.mobile-index{display:flex;justify-content:space-around;padding:18px 0 10px;border-bottom:1px solid #ccc}.mobile-index .source-link{font-size:22px;min-height:38px;padding:0 5px}.home-intro{grid-template-columns:minmax(0,1fr) 84px;column-gap:4px;padding-top:28px}.home-heading{padding:0;margin-left:-10px;margin-right:-13px;position:relative;z-index:1}.wordmark{width:100%;padding-bottom:0}.wordmark img{width:100%}.masthead-collage{grid-row:1;align-self:center;margin:-12px -6px 0 0}.masthead-collage>img{height:145px;width:100%;object-fit:contain}.masthead-collage>span{font-size:6px;bottom:-8px;right:-1px;padding-left:2px}.search{grid-column:1/-1;margin-top:26px;min-height:45px;padding:0 0 5px;gap:12px}.search label{font-size:16px}.search input{font-size:19px}.search button{font-size:28px;min-height:36px;min-width:30px}.filters{margin:23px 0 24px;gap:12px 15px}.topics{gap:12px 26px}.topics button{font-size:16px;letter-spacing:.3px;min-height:28px}.topics button[aria-pressed=true]:after{left:-8px;right:-8px}.eras{gap:11px 17px}.eras button{font-size:12px;letter-spacing:0;min-height:25px}.home-sources{display:block;margin:20px 0 30px;padding-top:7px}.home-sources nav{display:flex;justify-content:space-between;gap:16px}.home-sources .source-link{min-height:38px;font-size:25px}.home-reading{display:flex;flex-direction:column;gap:0}.section-heading h2{font-size:18px}.sort-label{font-size:12px}.section-heading{padding-bottom:7px}.results-note{font-size:8px;margin-top:5px}.article-card{grid-template-columns:35px minmax(0,1fr);gap:14px;padding:21px 0 23px}.card-meta{gap:11px;padding-top:4px;align-items:flex-start}.source-label{font-size:25px}.card-date{position:absolute;top:23px;left:49px;font:10px/1.5 ui-monospace,Menlo,monospace;white-space:nowrap;max-width:none;letter-spacing:0}.card-copy{padding-top:24px}.article-card h3{font-size:22px;line-height:1.65}.card-excerpt{font-size:17px;line-height:1.85;-webkit-line-clamp:3;margin-top:10px}.card-bottom{margin-top:16px;gap:10px}.card-topics{font-size:10px;letter-spacing:0}.read-more{font-size:13px}.photo-note{position:static;max-width:260px;align-self:flex-end;padding:55px 10px 0 0;margin-top:0}.photo-note img{height:235px}.photo-note-label{font-size:11px}.more-line{margin-top:24px;font-size:13px}footer{margin-top:58px;font-size:10px;gap:20px;padding-bottom:25px}footer small{font-size:7px;letter-spacing:.7px}footer>a:last-child{font-size:10px}.listing-heading{margin-top:33px;padding-bottom:18px}.listing-heading .breadcrumb{display:none}.listing-heading .eyebrow{margin-top:0;font-size:9px}.listing-heading h1{font-size:64px;line-height:1.5}.listing-heading:after{width:72px;height:96px;top:-5px;right:1px}.search.compact{margin-top:9px}.page:has(.listing-heading) .filters{margin-top:24px;margin-bottom:29px}.source-select{flex-basis:100%;justify-content:flex-end;margin-top:-2px;font-size:10px}.source-select select{font-size:11px;min-height:28px}.page:has(.listing-heading) .article-card.has-image{grid-template-columns:35px minmax(0,1fr)}.page:has(.listing-heading) .card-photo{grid-column:2;justify-self:end;margin-top:6px}.page:has(.listing-heading) .card-photo img{width:120px;height:88px}.active-filters{font-size:13px;gap:15px}.active-filters button{font-size:9px}.article-top{font-size:12px;margin:34px 0 34px;gap:10px}.article-top .mono{font-size:9px}.article-header{padding-bottom:27px;margin-bottom:28px}.article-header .eyebrow{font-size:27px;gap:15px}.article-header .eyebrow span{font-size:11px}.article-header h1{font-size:29px;line-height:1.7;margin:21px 0 18px}.article-tags{font-size:10px;gap:21px}.historical-note{font-size:8px;margin-top:21px}.article-body{font-size:20px;line-height:2}.article-body>p{margin-bottom:1.5em}.article-photo{margin-top:35px}.article-photo img{border-width:6px}.article-photo figcaption{font-size:8px}.article-ending{margin:39px 0 30px;padding-top:22px;gap:17px;font-size:11px}.article-ending button,.archive-link{font-size:9px}.end-mark{font-size:33px}.related{margin:45px 0 33px}.related h2{font-size:17px}.related>a{grid-template-columns:1fr 20px;gap:5px 12px}.related .meta{grid-column:1/-1;font-size:9px}.related [lang=ja]{font-size:19px}.related i{grid-column:2}.empty-state{padding:45px 0}dialog{padding:30px 25px}dialog p{font-size:14px}}
@media(max-width:359px){.notebook{padding:0 18px}.home-intro{grid-template-columns:minmax(0,1fr) 71px}.masthead-collage>img{height:126px}.topics{gap:10px 16px}.topics button{font-size:15px}.eras{gap:8px 15px}.eras button{font-size:11px}.home-sources nav{gap:12px}.article-card{gap:10px}.card-date{left:45px}.article-card h3{font-size:21px}.card-bottom{align-items:flex-start}.card-topics{max-width:130px}.mobile-header{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* v7 — charcoal cover, graphite inserts, and a quieter white writing surface. */
:root {
  --paper: #f4f4f4;
  --ink: #242424;
  --muted: #555;
  --charcoal: #242424;
  --graphite: #d6d6d6;
  --grain: url('paper-grain-v7.svg');
}
body {
  background: #c4c4c4 var(--grain);
}
.topline, .notebook {
  max-width: 1380px;
  background: var(--paper) var(--grain);
}
.topline {
  position: relative;
  z-index: 2;
  padding: 25px 38px 0 150px;
}
.topline .preview {
  background: #292929;
  color: #eee;
  padding: 3px 9px;
  transform: rotate(2deg);
}
.notebook {
  gap: 29px;
  padding: 0 38px 0 25px;
  min-height: calc(100vh - 47px);
}
.inside-cover {
  color: #f4f4f4;
  margin-top: 55px;
  padding: 0 20px 20px 3px;
  min-height: 650px;
}
.inside-cover::before {
  content: '';
  position: absolute;
  inset: -24px 1px -18px -10px;
  z-index: -1;
  background: var(--charcoal) var(--grain);
  clip-path: polygon(1% 0, 97% .5%, 98% 11%, 96% 24%, 100% 37%, 97% 51%, 99% 68%, 96% 83%, 98% 99%, 3% 100%, 1% 87%, 3% 71%, 0 55%, 2% 31%);
}
.inside-cover::after { display: none; }
.inside-cover .tiny { color: #ccc; font-size: 11px; }
.inside-cover nav { gap: 19px; }
.inside-cover .source-link { font-size: 30px; }
.inside-cover a:hover, .inside-cover button:hover { color: #fff; }
.inside-cover :focus-visible { outline-color: #ddd; }
.inside-cover .source-link.current::before { border-color: #ddd; }
.cover-art {
  background: #b6b6b6 var(--grain);
  color: #242424;
  width: 60px;
  height: 83px;
  margin: 40px 0 29px 0;
  transform: rotate(7deg);
}
.cover-art svg { stroke: #242424; width: 60px; }
.cover-bottom { gap: 16px; font-size: 11px; }
.home-intro {
  grid-template-columns: minmax(0, 1fr) 300px;
  column-gap: 34px;
  padding-top: 32px;
}
.home-heading { padding: 0; }
.wordmark { max-width: 665px; }
.wordmark img { mix-blend-mode: multiply; }
.masthead-collage {
  isolation: isolate;
  margin: -6px -2px 0 0;
  padding: 9px 5px 40px;
  transform: rotate(1deg);
}
.masthead-collage::before {
  content: '';
  position: absolute;
  inset: 0 -6px 0 -4px;
  z-index: -1;
  background: #2b2b2b var(--grain);
  clip-path: polygon(2% 1%, 99% 0, 98% 18%, 100% 33%, 98% 57%, 100% 76%, 98% 99%, 84% 98%, 63% 100%, 42% 98%, 19% 100%, 1% 98%, 3% 71%, 0 48%);
}
.masthead-collage::after {
  content: '';
  position: absolute;
  top: -9px;
  left: 33%;
  width: 40%;
  height: 22px;
  background: #b1b1b1b3 var(--grain);
  transform: rotate(-5deg);
  clip-path: polygon(2% 0, 99% 5%, 97% 95%, 0 100%);
}
.masthead-collage > img {
  height: 326px;
  width: 100%;
  object-fit: contain;
  transform: rotate(-3deg);
}
.masthead-collage > span {
  color: #eee;
  background: transparent;
  font-size: 12px;
  letter-spacing: .7px;
  bottom: 17px;
  right: 17px;
  transform: rotate(-3deg);
}
.search { margin-top: 19px; }
.filters {
  isolation: isolate;
  padding: 17px 24px 18px;
  margin: 32px 0 42px;
  gap: 12px 28px;
}
.filters::before {
  content: '';
  position: absolute;
  inset: 0 0 0 -3px;
  z-index: -1;
  background: var(--graphite) var(--grain);
  clip-path: polygon(.3% 3%, 29% 1%, 56% 3%, 78% 0, 99.8% 2%, 100% 35%, 99.5% 66%, 100% 98%, 81% 97%, 55% 100%, 31% 97%, 0 100%, .3% 61%);
}
.topics { gap: 16px 31px; }
.topics button { font-size: 18px; min-height: 32px; }
.topics button[aria-pressed=true]::after { border-width: 1.5px; }
.eras button { color: #444; }
.active-filters { color: #414141; }
.source-select { position: absolute; top: 17px; right: 24px; }
.section-heading { gap: 20px; padding-bottom: 12px; }
.section-heading h2 {
  position: relative;
  isolation: isolate;
  padding: 6px 19px 8px 15px;
  color: #f7f7f7;
  transform: rotate(-2deg);
  font-size: 19px;
  letter-spacing: 2px;
}
.section-heading h2::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #292929 var(--grain);
  clip-path: polygon(0 7%, 99% 0, 97% 99%, 2% 96%);
}
.section-heading::after { border-color: #777; }
.article-card { padding-top: 24px; padding-bottom: 26px; }
.article-card::after { border-color: #b4b4b4; }
.article-card:nth-child(2n) .card-copy {
  background: #e9e9e9 var(--grain);
  box-shadow: 13px 0 #e9e9e9, -10px 0 #e9e9e9;
}
.article-card:nth-child(2n) .card-copy::before {
  content: '';
  position: absolute;
  left: 157px;
  right: 0;
  top: 17px;
  bottom: 18px;
  z-index: -1;
  background: #e9e9e9;
  transform: rotate(-.5deg);
}
.article-card { isolation: isolate; }
.article-card h3 { color: #222; }
.card-excerpt { color: #424242; }
.card-topics { color: #4d4d4d; }
.read-more { border-bottom: 1px solid #777; line-height: 1.4; }
.photo-note {
  isolation: isolate;
  position: sticky;
  top: 35px;
  padding: 50px 20px 29px 18px;
  margin: 17px -4px 0 0;
}
.photo-note::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #353535 var(--grain);
  clip-path: polygon(3% 0, 99% 2%, 98% 35%, 100% 68%, 97% 100%, 57% 98%, 1% 100%, 2% 63%, 0 28%);
  transform: rotate(-2deg);
}
.photo-note figure { padding: 8px 8px 9px; background: #dedede var(--grain); transform: rotate(3deg); }
.photo-note figure::before { background-color: #bdbdbdbf; }
.photo-note img { height: 235px; filter: grayscale(1) contrast(1.25); }
.photo-note figcaption { font-size: 11px; }
.photo-note-label { color: #ddd; margin: 21px 0 0 4px; font-size: 13px; }
.more-line .text-link {
  background: #dedede var(--grain);
  padding: 8px 16px;
  display: inline-block;
  transform: rotate(-1deg);
}
footer {
  isolation: isolate;
  color: #eee;
  padding: 33px 27px 29px;
  margin-top: 68px;
}
footer::before {
  inset: 0 -2px 0 -7px;
  border: 0;
  z-index: -1;
  background: #292929 var(--grain);
  clip-path: polygon(0 3%, 22% 0, 54% 3%, 82% 0, 100% 2%, 99.8% 100%, 0 100%);
  transform: none;
}
footer small { color: #c4c4c4; font-size: 10px; }
footer a:hover, footer button:hover { color: #fff; }
footer :focus-visible { outline-color: #ddd; }
.listing-heading {
  isolation: isolate;
  padding: 19px 29px 20px;
  margin-top: 45px;
  background: #d1d1d1 var(--grain);
}
.listing-heading::before {
  content: '';
  position: absolute;
  inset: 40px auto 13px 19px;
  width: 310px;
  z-index: -1;
  background: #292929 var(--grain);
  transform: rotate(-2deg);
  clip-path: polygon(0 4%, 99% 0, 98% 100%, 1% 97%);
}
.listing-heading .breadcrumb { position: relative; top: -7px; }
.listing-heading .eyebrow { color: #ccc; margin-top: 9px; }
.listing-heading h1 { color: #f4f4f4; font-size: 68px; line-height: 1.3; }
.listing-heading::after { right: 34px; top: 10px; width: 110px; height: 150px; }
.search.compact { margin-top: 27px; }
.page:has(.listing-heading) .filters { margin-top: 28px; }
.page:has(.listing-heading) .article-card:nth-child(2n) .card-copy::before { left: 157px; right: 152px; }
.page:has(.listing-heading) .card-photo img { border-color: #d5d5d5; }
.reading { max-width: 835px; padding-left: 0; margin-inline: auto; }
.article-top { max-width: 835px; margin-bottom: 29px; margin-inline: auto; }
.article-header {
  isolation: isolate;
  padding: 31px 34px 34px;
  margin-bottom: 37px;
  color: #f3f3f3;
}
.article-header::before {
  content: '';
  position: absolute;
  inset: 0 -2px 0 -3px;
  background: #2b2b2b var(--grain);
  z-index: -1;
  clip-path: polygon(.4% 0, 47% .7%, 79% 0, 100% 1%, 99.6% 63%, 100% 98%, 85% 99%, 60% 98%, 36% 100%, 17% 98%, 0 100%);
}
.article-header::after {
  top: 22px;
  bottom: auto;
  left: auto;
  right: 28px;
  width: 57px;
  height: 18px;
  border: 0;
  background: #737373 var(--grain);
  transform: rotate(8deg);
  opacity: .75;
}
.article-header .eyebrow span { color: #c3c3c3; font-size: 14px; }
.article-tags { font-size: 14px; }
.article-tags a:hover { color: #fff; }
.article-tags a:focus-visible { outline-color: #ddd; }
.historical-note { color: #c7c7c7; font-size: 12px; }
.article-body { padding: 0 33px; }
.article-photo img { border-color: #d8d8d8; }
.article-ending { margin-left: 33px; margin-right: 33px; }
.related { max-width: 835px; padding: 26px 30px; background: #d9d9d9 var(--grain); }
.related h2 { margin-bottom: 21px; }
.related>a { border-color: #aaa; }
dialog { background: #e5e5e5 var(--grain); border: 0; border-top: 14px solid #292929; }

@media (max-width: 1100px) {
  .topline { padding-left: 123px; padding-right: 30px; }
  .notebook { gap: 29px; padding: 0 30px 0 25px; }
  .inside-cover { padding-right: 12px; }
  .inside-cover::before { right: -3px; }
  .home-intro { grid-template-columns: minmax(0, 1fr) 210px; column-gap: 25px; }
  .masthead-collage { padding-bottom: 37px; }
  .masthead-collage > img { height: 252px; }
  .masthead-collage > span { right: 10px; font-size: 10px; bottom: 13px; }
  .filters { padding-left: 20px; padding-right: 20px; }
  .photo-note { padding: 41px 12px 25px; }
  .photo-note img { height: 207px; }
  .photo-note-label { font-size: 10px; }
  .article-card:nth-child(2n) .card-copy::before { left: 124px; }
  .page:has(.listing-heading) .article-card:nth-child(2n) .card-copy::before { left: 124px; right: 124px; }
  .article-body { padding: 0 25px; }
}

@media (max-width: 760px) {
  body { background-color: #bdbdbd; }
  .notebook { max-width: 560px; padding: 0 22px; }
  .mobile-header { padding-top: 18px; font-size: 11px; }
  .mobile-header button { color: #eee; background: #292929; padding: 5px 9px; transform: rotate(2deg); font-size: 11px; }
  .mobile-header button:hover { color: #fff; }
  .mobile-header button:focus-visible { outline-color: #777; }
  .mobile-index { margin-top: 16px; color: #eee; background: #303030 var(--grain); padding: 13px 9px; border: 0; }
  .mobile-index .source-link:hover { color: #fff; }
  .mobile-index .source-link.current::before { border-color: #eee; }
  .home-intro { grid-template-columns: minmax(0, 1fr) 85px; column-gap: 9px; padding-top: 30px; }
  .home-heading { padding: 0; margin-right: -16px; }
  .wordmark { width: 100%; }
  .masthead-collage { padding: 5px 0 25px; margin: 0 -3px 0 0; }
  .masthead-collage::before { inset: 0 -2px; }
  .masthead-collage::after { top: -5px; height: 11px; left: 23%; width: 51%; }
  .masthead-collage > img { height: 125px; transform: rotate(-2deg); }
  .masthead-collage > span { font-size: 6px; line-height: 1.4; right: 6px; bottom: 8px; padding: 0; }
  .search { margin-top: 23px; }
  .filters { padding: 14px 15px 15px; margin: 24px 0 22px; gap: 10px 13px; }
  .topics { gap: 8px 22px; }
  .topics button { font-size: 15px; min-height: 31px; }
  .eras { gap: 8px 15px; }
  .eras button { font-size: 11px; min-height: 25px; }
  .home-sources { position: relative; isolation: isolate; padding: 13px 14px 15px; margin: 22px 0 29px; color: #eee; }
  .home-sources::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #303030 var(--grain); clip-path: polygon(0 2%, 37% 0, 79% 3%, 100% 0, 99% 96%, 56% 100%, 0 97%); transform: rotate(-1deg); }
  .home-sources nav { gap: 10px; }
  .home-sources .source-link { font-size: 23px; }
  .home-sources .source-link:hover { color: #fff; }
  .home-sources .source-link:focus-visible { outline-color: #eee; }
  .section-heading { padding-bottom: 10px; }
  .section-heading h2 { font-size: 16px; padding: 5px 16px 7px 13px; }
  .article-card { padding-top: 23px; padding-bottom: 25px; }
  .article-card:nth-child(2n) .card-copy { box-shadow: 8px 0 #e9e9e9, -8px 0 #e9e9e9; }
  .article-card:nth-child(2n) .card-copy::before, .page:has(.listing-heading) .article-card:nth-child(2n) .card-copy::before { left: 41px; right: 0; top: 38px; bottom: 20px; }
  .card-date { top: 24px; }
  .read-more { font-size: 12px; }
  .photo-note { position: relative; top: auto; padding: 37px 20px 27px; margin: 49px 0 0; width: 260px; align-self: flex-end; }
  .photo-note img { height: 230px; }
  .photo-note-label { font-size: 12px; }
  footer { padding: 25px 16px 25px; gap: 15px; margin-top: 47px; }
  footer small { font-size: 8px; letter-spacing: .4px; }
  footer>a:last-child { font-size: 9px; }
  .listing-heading { padding: 22px 18px 25px; margin-top: 31px; }
  .listing-heading::before { inset: 13px auto 16px 12px; width: 205px; }
  .listing-heading .eyebrow { margin-top: 0; font-size: 10px; }
  .listing-heading h1 { font-size: 58px; line-height: 1.6; }
  .listing-heading::after { right: 7px; top: 21px; width: 70px; height: 98px; opacity: .8; }
  .search.compact { margin-top: 25px; }
  .page:has(.listing-heading) .filters { margin-top: 26px; margin-bottom: 27px; }
  .source-select { position: static; }
  .article-top { margin: 31px 0 24px; }
  .article-header { padding: 26px 21px 27px; margin-bottom: 28px; }
  .article-header::after { width: 39px; right: 15px; top: 18px; height: 12px; }
  .article-header .eyebrow span { font-size: 12px; }
  .article-header h1 { font-size: 27px; line-height: 1.65; margin: 19px 0; }
  .article-tags { font-size: 12px; gap: 20px; }
  .historical-note { font-size: 10px; margin-top: 21px; }
  .article-body { padding: 0 4px; font-size: 20px; }
  .article-ending { margin-left: 4px; margin-right: 4px; }
  .related { padding: 21px 18px; margin-top: 40px; }
  dialog { padding: 25px; }
}

@media (max-width: 359px) {
  .notebook { padding: 0 17px; }
  .home-intro { grid-template-columns: minmax(0, 1fr) 71px; column-gap: 5px; }
  .masthead-collage > img { height: 109px; }
  .masthead-collage > span { font-size: 5px; }
  .filters { padding-left: 12px; padding-right: 12px; }
  .topics { gap: 8px 18px; }
  .topics button { font-size: 14px; }
  .eras { gap: 8px 12px; }
  .eras button { font-size: 11px; }
  .home-sources { padding-left: 10px; padding-right: 10px; }
  .home-sources .source-link { font-size: 21px; }
  .card-date { left: 45px; }
  .article-header { padding-left: 17px; padding-right: 17px; }
  .article-header h1 { font-size: 25px; }
  .listing-heading::before { width: 180px; }
  .listing-heading h1 { font-size: 53px; }
  .listing-heading::after { width: 60px; right: 3px; }
}

/* v8 — scanned torn edges and independently positioned thematic cutouts. */
:root { --torn-paper: url('collage/xerox-paper-v8.png'); }
.inside-cover::before,
.masthead-collage::before,
.section-heading h2::before,
.photo-note::before,
footer::before,
.listing-heading::before,
.article-header::before,
.home-sources::before {
  background: none;
  border: 15px solid transparent;
  border-image: var(--torn-paper) 95 fill / 15px stretch;
  clip-path: none;
  filter: grayscale(1);
}
.inside-cover::before { inset: -43px -15px -38px -19px; transform: rotate(-.8deg); }
.topline .preview { background: var(--torn-paper) center / 100% 100% no-repeat; padding: 7px 13px; }
.masthead-collage { padding-top: 17px; padding-bottom: 45px; }
.masthead-collage::before { inset: -18px -20px -18px -15px; transform: rotate(1.5deg); }
.masthead-collage::after { left: 42%; top: -15px; opacity: .75; }
.masthead-collage > .urban-fragment { opacity: .64; transform: rotate(5deg); }
.masthead-collage > span { right: 19px; bottom: 38px; z-index: 3; font-size: 10px; }
.masthead-motifs { position: absolute; inset: 0; pointer-events: none; }
.masthead-motifs img { position: absolute; height: auto; filter: grayscale(1) contrast(1.08); }
.motif-skull { width: 174px; left: -32px; top: 44px; transform: rotate(-13deg); z-index: 2; }
.motif-guitar { width: 110px; right: -14px; top: -3px; transform: rotate(12deg); z-index: 3; }
.motif-ticket { width: 226px; left: 30px; bottom: -28px; transform: rotate(-9deg); z-index: 4; }
.filters::before {
  inset: -10px -12px -12px -15px;
  background: none;
  border: 11px solid transparent;
  border-image: var(--torn-paper) 95 fill / 11px stretch;
  clip-path: none;
  filter: grayscale(1) invert(1) contrast(.38) brightness(1.15);
  transform: rotate(-.25deg);
}
.section-heading h2::before { inset: -5px -7px; transform: rotate(-1deg); border-width: 8px; border-image-width: 8px; }
.margin-notes { min-width: 0; align-self: start; position: sticky; top: 35px; }
.margin-notes .photo-note { position: relative; top: auto; }
.photo-note::before { inset: -11px -13px -16px -12px; transform: rotate(-3deg); }
.ring-scrap { position: relative; margin: 39px -4px 0 -9px; pointer-events: none; }
.ring-scrap img { width: 100%; filter: grayscale(1) contrast(1.12); transform: rotate(-7deg); }
.ring-scrap span { display: block; margin: 17px 4px 0 0; text-align: right; font-size: 15px; letter-spacing: 1px; transform: rotate(-5deg); }
.ring-scrap::before { content: ''; position: absolute; top: -2px; left: 35%; width: 38%; height: 18px; background: #a7a7a799 var(--grain); transform: rotate(3deg); z-index: 1; clip-path: polygon(0 10%, 98% 0, 100% 90%, 2% 100%); }
.listing-heading::before { inset: 31px auto 2px 5px; width: 335px; transform: rotate(-2deg); }
.listing-heading::after { background-image: url('collage/cranial-study-v8.png'); filter: grayscale(1); opacity: .9; right: 42px; transform: rotate(11deg); }
.article-header::before { inset: -10px -17px -15px -19px; transform: rotate(-.5deg); }
.article-header::after { transform: rotate(11deg); clip-path: polygon(0 7%, 100% 0, 96% 97%, 3% 100%); }
footer::before { inset: -15px -18px -13px -20px; transform: rotate(.3deg); }
footer::after { content: ''; position: absolute; right: 70px; top: -33px; width: 174px; height: 58px; background: url('collage/live-ticket-v8.png') center / contain no-repeat; filter: grayscale(1); transform: rotate(8deg); pointer-events: none; }

@media (max-width: 1100px) {
  .inside-cover::before { right: -10px; }
  .masthead-collage > .urban-fragment { height: 252px; }
  .motif-skull { width: 139px; left: -21px; top: 43px; }
  .motif-guitar { width: 83px; right: -9px; top: 1px; }
  .motif-ticket { width: 178px; left: 8px; bottom: -23px; }
  .masthead-collage > span { font-size: 9px; right: 9px; bottom: 29px; }
  .ring-scrap { margin-left: -3px; }
  .ring-scrap span { font-size: 12px; }
}

@media (max-width: 760px) {
  .mobile-header button { background: var(--torn-paper) center / 100% 100% no-repeat; padding: 9px 13px; }
  .mobile-index { background: var(--torn-paper) center / 100% 100% no-repeat; padding: 20px 15px; }
  .home-intro { grid-template-columns: minmax(0, 1fr) 100px; column-gap: 13px; padding-top: 34px; }
  .home-heading { margin-left: -12px; margin-right: -5px; }
  .masthead-collage { padding: 5px 0 28px; margin: 0 -2px 0 0; }
  .masthead-collage::before { inset: -9px -11px -10px -7px; }
  .masthead-collage::after { top: -9px; height: 11px; left: 37%; width: 52%; }
  .masthead-collage > .urban-fragment { height: 150px; }
  .masthead-collage > span { display: none; }
  .motif-skull { width: 89px; left: 4px; top: 22px; transform: rotate(-12deg); }
  .motif-guitar { width: 52px; right: -4px; top: -5px; transform: rotate(13deg); }
  .motif-ticket { width: 119px; left: -13px; bottom: -10px; transform: rotate(-8deg); }
  .filters::before { inset: -6px -8px -8px -10px; }
  .home-sources::before { inset: -4px -8px -7px; transform: rotate(-1deg); }
  .margin-notes { position: static; align-self: flex-end; width: min(260px, 100%); }
  .margin-notes .photo-note { width: 100%; margin-top: 49px; }
  .photo-note::before { inset: -10px -9px -13px; }
  .ring-scrap { margin: 34px 1px 8px 2px; }
  .ring-scrap span { font-size: 14px; }
  .listing-heading::before { inset: 7px auto 6px 2px; width: 221px; }
  .listing-heading::after { right: 9px; transform: rotate(10deg); }
  .article-header::before { inset: -8px -9px -11px -11px; }
  footer::before { inset: -12px -12px -12px -14px; }
  footer::after { width: 115px; height: 39px; right: 14px; top: -25px; }
}

@media (max-width: 359px) {
  .home-intro { grid-template-columns: minmax(0, 1fr) 81px; column-gap: 9px; }
  .home-heading { margin-right: -5px; }
  .masthead-collage > .urban-fragment { height: 130px; }
  .motif-skull { width: 73px; left: 0; top: 20px; }
  .motif-guitar { width: 43px; right: -3px; }
  .motif-ticket { width: 100px; left: -12px; bottom: -7px; }
  .photo-note::before { inset: -10px -5px -13px; transform: rotate(-2deg); }
  .listing-heading::before { width: 197px; }
}

/* Article rows use dates only; source numbers remain in the page index. */
.article-card { grid-template-columns: 95px minmax(0, 1fr); }
.card-meta { padding-top: 9px; }
.article-card:nth-child(2n) .card-copy::before { left: 117px; }
.page:has(.listing-heading) .article-card.has-image { grid-template-columns: 95px minmax(0, 1fr) 130px; }
.page:has(.listing-heading) .article-card:nth-child(2n) .card-copy::before { left: 117px; }

@media (max-width: 1100px) {
  .article-card { grid-template-columns: 85px minmax(0, 1fr); }
  .article-card:nth-child(2n) .card-copy::before { left: 104px; }
  .page:has(.listing-heading) .article-card.has-image { grid-template-columns: 85px minmax(0, 1fr) 105px; }
  .page:has(.listing-heading) .article-card:nth-child(2n) .card-copy::before { left: 104px; }
}

@media (max-width: 760px) {
  .article-card, .page:has(.listing-heading) .article-card.has-image { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .card-meta { display: block; padding-top: 0; }
  .card-date { position: static; }
  .card-copy { padding-top: 0; }
  .article-card:nth-child(2n) .card-copy::before, .page:has(.listing-heading) .article-card:nth-child(2n) .card-copy::before { left: 0; top: 46px; }
  .page:has(.listing-heading) .card-photo { grid-column: 1; }
}

/* Saved article photographs: previews and an uncropped gallery. */
.home-reading .article-card.has-image { grid-template-columns: 95px minmax(0, 1fr) 120px; }
.home-reading .card-photo { display: block; align-self: center; transform: rotate(-2deg); }
.home-reading .card-photo img { width: 120px; height: 116px; object-fit: cover; filter: grayscale(1); border: 6px solid #d8d8d8; box-shadow: 0 1px 4px #00000017; }
.card-photo { position: relative; isolation: isolate; }
.card-photo.multiple-photos::before { content: ''; position: absolute; inset: 4px -5px -2px 5px; background: #c6c6c6 var(--grain); transform: rotate(5deg); z-index: -1; }
.card-photo-count { display: block; font: 10px/1.5 var(--hand); text-align: right; margin-top: 7px; letter-spacing: .3px; }
.photo-jump { border-bottom: 1px solid #aaa; margin-left: auto; }
.article-gallery { margin: 46px 0 30px; scroll-margin-top: 28px; }
.article-gallery h2 { font: 20px/1.5 var(--hand); letter-spacing: 1px; margin-bottom: 27px; }
.article-gallery h2 span { font-size: 12px; color: #555; }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 29px; align-items: start; }
.photo-grid figure { min-width: 0; padding: 8px 8px 11px; background: #dedede var(--grain); transform: rotate(-1deg); box-shadow: 0 1px 5px #0000001a; }
.photo-grid figure:nth-child(2n) { transform: rotate(1deg); margin-top: 16px; }
.photo-grid img { width: 100%; height: auto; filter: grayscale(1); }
.photo-grid figcaption { display: flex; justify-content: space-between; gap: 14px; font: 11px/1.6 var(--hand); padding: 10px 3px 0; }
.photo-grid a:focus-visible { outline-color: #444; }

@media (max-width: 1100px) {
  .home-reading .article-card.has-image { grid-template-columns: 85px minmax(0, 1fr) 85px; }
  .home-reading .card-photo img { width: 85px; height: 91px; border-width: 4px; }
  .card-photo-count { font-size: 9px; }
}

@media (max-width: 760px) {
  .home-reading .article-card.has-image { grid-template-columns: minmax(0, 1fr); }
  .home-reading .card-photo { grid-column: 1; justify-self: end; margin: 5px 4px 5px 0; }
  .home-reading .card-photo img { width: 160px; height: 118px; border-width: 6px; }
  .card-photo-count { font-size: 10px; }
  .photo-jump { margin-left: 0; }
  .article-gallery { margin-top: 35px; scroll-margin-top: 18px; }
  .article-gallery h2 { font-size: 18px; margin-bottom: 23px; }
  .photo-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 0 3px; }
  .photo-grid figure:nth-child(2n) { margin-top: 0; }
}

/* v11 — a found line in the margin, and deliberate page turns. */
:root { --mono: ui-monospace, Menlo, monospace; }
.home-reading { grid-template-rows: min-content 1fr; row-gap: 42px; }
.home-reading > .article-section { grid-column: 1; grid-row: 1 / 3; min-width: 0; }
.home-reading > .rediscovery { grid-column: 2; grid-row: 1; }
.home-reading > .margin-notes { grid-column: 2; grid-row: 2; }
.rediscovery { position: relative; isolation: isolate; min-width: 0; margin: 7px -3px 0 1px; padding: 24px 23px 23px; }
.rediscovery::before { content: ''; position: absolute; inset: -9px -9px -10px; z-index: -1; border: 13px solid transparent; border-image: var(--torn-paper) 95 fill / 13px stretch; filter: grayscale(1) invert(1) contrast(.45) brightness(1.02); transform: rotate(1.4deg); }
.rediscovery::after { content: ''; position: absolute; top: -13px; left: 28%; width: 42%; height: 19px; background: #b8b8b8a1 var(--grain); transform: rotate(-8deg); clip-path: polygon(0 8%, 98% 0, 100% 92%, 2% 100%); pointer-events: none; }
.rediscovery h2 { font: 20px/1.5 var(--hand); letter-spacing: -.6px; transform: rotate(-3deg); margin: 0 0 7px; }
.rediscovery-kicker { font: 8px/1.8 var(--mono); letter-spacing: .8px; color: #454545; margin: 0; }
#quote-link { display: block; padding-top: 14px; }
#random-quote { position: relative; font: 24px/1.7 var(--body); margin: 9px 0 20px; overflow-wrap: anywhere; }
#random-quote::before { content: '“'; display: block; height: auto; margin: 0 0 14px -5px; font: 56px/1 var(--hand); transform: rotate(-8deg); }
#quote-date { display: block; font: 10px/1.8 var(--mono); letter-spacing: .4px; }
#quote-title { display: block; font: 13px/1.7 var(--body); margin-top: 6px; overflow-wrap: anywhere; color: #3f3f3f; }
.quote-read { display: inline-block; font: 11px/1.8 var(--hand); margin: 17px 0 0; border-bottom: 1px solid #777; }
#shuffle-quote { display: block; margin: 20px 0 0 auto; font: 13px/1.5 var(--hand); padding: 6px 0 3px 12px; transform: rotate(-3deg); }
#shuffle-quote[hidden] { display: none; }
#quote-link:hover .quote-read, #shuffle-quote:hover { color: #000; border-bottom-color: #000; }
.article-top { flex-wrap: wrap; align-items: center; }
.quick-turns { display: flex; align-items: center; gap: 26px; margin-left: auto; font: 13px/1.8 var(--hand); }
.quick-turns a { padding: 5px 0; border-bottom: 1px solid #777; }
.quick-turns .turn-disabled { color: #888; }
.post-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; max-width: 835px; margin: 66px auto 37px; }
.page-turn { position: relative; isolation: isolate; min-width: 0; padding: 25px 27px 30px; color: #161616; display: flex; flex-direction: column; align-items: flex-start; }
.page-turn::before { content: ''; position: absolute; inset: -9px -8px -12px; z-index: -1; border: 13px solid transparent; border-image: var(--torn-paper) 95 fill / 13px stretch; filter: grayscale(1) invert(1) contrast(.33) brightness(1.12); transform: rotate(-1deg); transition: transform .2s; }
.page-turn.turn-next { color: #f3f3f3; }
.page-turn.turn-next::before { filter: grayscale(1); transform: rotate(.8deg); }
.turn-label { font: 20px/1.5 var(--hand); margin-bottom: 23px; }
.turn-date { font: 11px/1.8 var(--mono); letter-spacing: .4px; opacity: .75; }
.turn-title { font: 22px/1.65 var(--body); margin-top: 10px; overflow-wrap: anywhere; }
.turn-next .turn-label { align-self: flex-end; }
a.page-turn:hover::before { transform: rotate(.4deg) translateY(-3px); }
a.page-turn.turn-next:hover::before { transform: rotate(-.4deg) translateY(-3px); }
a.page-turn.turn-next:focus-visible { outline-color: #444; outline-offset: 13px; }
.page-turn.turn-disabled { opacity: .56; }
.turn-boundary { font: 24px/1.7 var(--hand); margin: 10px 0 17px; }
.article-back { display: flex; justify-content: space-between; gap: 20px; max-width: 835px; margin: 0 auto; font-size: 13px; }

@media (max-width: 1100px) and (min-width: 761px) {
  .rediscovery { padding: 20px 13px; }
  .rediscovery h2 { font-size: 17px; }
  #random-quote { font-size: 22px; }
}
@media (max-width: 760px) {
  .home-reading { gap: 0; }
  .rediscovery { order: -1; margin: 2px 3px 46px; padding: 22px 21px 24px; }
  .rediscovery::before { inset: -8px -7px -9px; transform: rotate(.5deg); }
  .rediscovery::after { left: 36%; width: 28%; }
  .rediscovery h2 { font-size: 21px; }
  #quote-link { padding-top: 8px; }
  #random-quote { font-size: 24px; line-height: 1.65; margin-bottom: 16px; }
  #random-quote::before { height: auto; font-size: 48px; margin-bottom: 12px; }
  #quote-title { font-size: 14px; }
  #shuffle-quote { margin-top: 10px; font-size: 13px; }
  .quick-turns { flex-basis: 100%; justify-content: space-between; gap: 20px; margin: 7px 0 0; padding-top: 10px; border-top: 1px solid #bbb; }
  .post-navigation { gap: 22px; margin-top: 48px; margin-bottom: 35px; }
  .page-turn { padding: 23px 17px 25px; }
  .turn-label { font-size: 17px; margin-bottom: 19px; }
  .turn-title { font-size: 21px; }
  .turn-date { font-size: 10px; }
}
@media (max-width: 480px) {
  .post-navigation { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-left: 3px; margin-right: 3px; }
  .page-turn { padding: 22px 22px 26px; }
  .turn-label { margin-bottom: 13px; }
  .turn-next .turn-label { align-self: flex-start; }
  .article-back { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-turn::before { transition: none; }
}

/* v12 — monochrome on paper, original color in the same-screen viewer. */
.article-body a[data-photo] { cursor: zoom-in; }
.article-photo figcaption { display: flex; justify-content: space-between; gap: 15px; align-items: baseline; }
html.photo-viewing { overflow: hidden; scrollbar-gutter: stable; background: #111; }
dialog.photo-viewer { position: fixed; inset: 0; margin: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; padding: 24px 32px 22px; border: 0; border-radius: 0; background: #111; color: #e8e8e8; overflow: hidden; box-shadow: none; }
dialog.photo-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 18px; }
dialog.photo-viewer::backdrop { background: #111; }
.photo-viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 38px; font: 14px/1.5 var(--hand); letter-spacing: .8px; }
.photo-viewer-header > span { color: #bdbdbd; }
.photo-close { min-height: 44px; padding: 3px 0 3px 16px; font-size: 16px; }
.photo-stage { position: relative; min-width: 0; min-height: 0; }
.photo-stage img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; filter: none; border: 0; box-shadow: none; }
.photo-viewer-footer { min-width: 0; }
.photo-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; font: 15px/1.5 var(--hand); }
.photo-controls button { min-height: 44px; }
#photo-previous { justify-self: start; }
#photo-next { justify-self: end; }
#photo-counter { grid-column: 2; font: 11px/1.8 var(--mono); letter-spacing: 1px; color: #c4c4c4; }
dialog.photo-viewer .photo-context { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 780px; margin: 6px auto 0; text-align: center; font: 14px/1.6 var(--body); color: #bdbdbd; overflow-wrap: anywhere; }
.photo-viewer button:hover { color: #fff; }
.photo-viewer button:focus-visible { outline-color: #bbb; outline-offset: 4px; }
@media (max-width: 760px) {
  dialog.photo-viewer { padding: max(12px, env(safe-area-inset-top)) 15px max(14px, env(safe-area-inset-bottom)); }
  dialog.photo-viewer[open] { gap: 12px; }
  .photo-viewer-header { font-size: 11px; letter-spacing: .4px; }
  .photo-close { font-size: 14px; }
  .photo-controls { font-size: 12px; gap: 12px; }
  #photo-counter { font-size: 10px; }
  dialog.photo-viewer .photo-context { font-size: 13px; margin-top: 5px; }
}

/* A small cranial clipping closes the page without resembling a control. */
.end-skull { display: block; flex: 0 0 46px; width: 46px; transform: rotate(-9deg); pointer-events: none; }
.end-skull img { width: 46px; height: auto; filter: grayscale(1) contrast(1.1); }
@media (max-width: 760px) {
  .end-skull { flex-basis: 40px; width: 40px; }
  .end-skull img { width: 40px; }
}

/* v13 — the photographic scrap is another route into the archive. */
#shuffle-photo { display: block; margin: 15px 0 0 auto; min-height: 34px; padding: 3px 0 3px 8px; font: 11px/1.6 var(--hand); color: #d7d7d7; transform: rotate(-3deg); }
#shuffle-photo:hover { color: #fff; }
#shuffle-photo:focus-visible { outline-color: #ccc; }
@media (max-width: 760px) {
  #shuffle-photo { font-size: 12px; min-height: 44px; margin-top: 9px; }
}

/* Preserved video-only posts keep a deliberate, same-page player. */
.article-videos { margin: 45px 0 30px; }
.article-videos h2 { font: 20px/1.5 var(--hand); margin-bottom: 24px; }
.video-item + .video-item { margin-top: 30px; }
.video-frame { aspect-ratio: 16 / 9; background: #1c1c1c var(--grain); color: #eee; }
.video-frame button, .video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-frame button { font: 17px/1.6 var(--hand); letter-spacing: 1px; color: #eee; }
.video-frame button span { display: block; font: 45px/1.2 var(--hand); margin-bottom: 17px; }
.video-frame button:hover { color: #fff; }
.video-frame button:focus-visible { outline-color: #888; }
.video-source { display: inline-block; font: 11px/1.8 var(--hand); margin-top: 12px; }
.article-body { overflow-wrap: anywhere; }
.facebook-text > p { margin: 0; }
.facebook-text > p + p { margin-top: .75em; }
.facebook-text > p.section-start { margin-top: 1.75em; }
.unavailable-media { font: 15px/1.8 var(--hand); color: #555; padding: 15px 0; }

/* Clear home navigation, and a balanced lower collage on narrow pages. */
.cover-home { display: block; margin: -18px -10px 19px; padding: 11px 0 14px; text-align: center; color: #f5f5f5; border-bottom: 1px solid #999; font: 15px/1.5 var(--hand); min-height: 44px; }
.cover-home:hover { color: #fff; }
.cover-home:focus-visible { outline-color: #ccc; }
.card-excerpt:empty { display: none; }
@media (max-width: 760px) {
  body[data-page="home"] .mobile-header { justify-content: flex-end; min-height: 62px; }
  .mobile-header .mobile-home { background: var(--torn-paper) center / 100% 100% no-repeat; color: #f4f4f4; padding: 9px 14px; font: 15px/1.7 var(--hand); min-height: 44px; }
  .mobile-header .mobile-home:hover { color: #fff; }
  .margin-notes { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; align-self: stretch; width: 100%; gap: 25px; padding: 52px 1px 15px; }
  .margin-notes .photo-note { width: 100%; margin: 0; padding: 29px 15px 22px; }
  .margin-notes .photo-note img { height: clamp(170px, 38vw, 290px); }
  .margin-notes .photo-note figcaption { font-size: 9px; gap: 8px; padding-top: 13px; }
  .margin-notes .photo-note-label { font-size: 11px; margin-top: 20px; }
  .margin-notes #shuffle-photo { font-size: 10px; min-height: 44px; padding-left: 0; }
  .margin-notes .ring-scrap { margin: 37px 0 0; align-self: center; }
  .margin-notes .ring-scrap span { font-size: 12px; margin-top: 16px; }
  .margin-notes .ring-scrap::before { height: 13px; }
}
@media (max-width: 359px) {
  .margin-notes { gap: 19px; }
  .margin-notes .photo-note { padding-left: 11px; padding-right: 11px; }
  .margin-notes .photo-note figcaption { font-size: 8px; }
  .margin-notes #shuffle-photo { font-size: 9px; }
  .margin-notes .ring-scrap span { font-size: 11px; }
}

/* v19 — precise navigation, legible details, and quieter reading pages. */
.listing-heading { padding-top: 25px; padding-bottom: 25px; }
.listing-heading::before { top: 12px; bottom: 12px; }
.listing-heading .eyebrow { margin-top: 0; font-size: 11px; }
.listing-heading::after { top: 9px; height: 126px; }
.card-date { font-size: 12px; color: #494949; }
.card-topics { font-size: 12px; line-height: 1.7; }
.results-note { font-size: 11px; letter-spacing: .5px; min-height: 20px; }
.sort-label { font-size: 15px; }
.sort-label select, .source-select select { min-height: 44px; }
.source-select { font-size: 13px; }
.source-select select { min-width: 70px; }
.cover-bottom { font-size: 12px; gap: 6px; }
.cover-bottom a, .cover-bottom button { min-height: 32px; display: inline-flex; align-items: center; white-space: nowrap; letter-spacing: 0; }
.active-filters { overflow-wrap: anywhere; }
.topics button { min-height: 44px; }
.eras button { min-height: 36px; }
.text-link, .read-more, .article-ending button, .archive-link, #shuffle-quote,
.active-filters button, .empty-state button, .quick-turns a, footer a, footer button {
  min-height: 44px; display: inline-flex; align-items: center;
}
.read-more, .article-ending button, .archive-link, .quote-read { font-size: 14px; }
.quick-turns .turn-disabled { font-size: 11px; letter-spacing: .4px; }
.article-header .eyebrow span { font: 13px/1.7 var(--mono); }
.article-tags { align-items: center; }
.article-tags a { min-height: 40px; display: inline-flex; align-items: center; }
.article-header h1 { line-height: 1.7; }
.article-header h1, .article-card h3 { text-wrap: pretty; line-break: strict; }
.article-body p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.article-body p a:hover { opacity: .65; }
.photo-grid:has(> figure:only-child) { grid-template-columns: minmax(0, 1fr); max-width: 600px; margin-inline: auto; }
.photo-grid figure:only-child figcaption { justify-content: flex-end; }
.photo-grid figcaption a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
.post-navigation .turn-disabled { align-self: center; opacity: 1; padding: 20px 27px; color: #666; }
.post-navigation .turn-disabled::before { content: none; }
.turn-disabled .turn-label { display: none; }
.turn-disabled .turn-boundary { font-size: 18px; margin: 0 0 8px; }
.turn-disabled .turn-date { font-size: 10px; }
html.notes-viewing { overflow: hidden; scrollbar-gutter: stable; }
#about { padding: 0; max-width: 600px; width: calc(100% - 32px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
.notes-toolbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 30px; background: #e5e5e5 var(--grain); border-bottom: 1px solid #bcbcbc; }
.notes-toolbar > span { font: 10px/1.7 var(--hand); letter-spacing: .7px; }
#about .dialog-close { position: static; min-height: 44px; padding: 0 0 0 12px; font: 14px/1.6 var(--hand); white-space: nowrap; }
.notes-content { padding: 23px 34px 35px; }
#about .notes-content p { font-size: 16px; line-height: 1.9; margin: 20px 0; }
#about .notes-content small { font-size: 13px; line-height: 1.9; }
@media (max-width: 760px) {
  .home-intro { padding-top: 28px; }
  .mobile-header button, .mobile-index .source-link, .home-sources .source-link { min-height: 44px; }
  .filter-line { width: 100%; }
  .topics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; gap: 5px; }
  .topics button { font-size: clamp(14px, 4.2vw, 18px); letter-spacing: 0; }
  .eras { gap: 5px 18px; }
  .eras button { min-height: 44px; font-size: 13px; }
  .listing-heading { padding: 22px 18px 25px; }
  .listing-heading::after { top: 21px; height: 98px; }
  .listing-heading .eyebrow { font-size: 11px; }
  .source-select { justify-content: flex-start; }
  .card-date { font-size: 11px; }
  .results-note { font-size: 10px; }
  .card-topics { font-size: 11px; }
  .read-more { font-size: 14px; }
  .article-header .eyebrow span { font-size: 11px; }
  .article-tags { gap: 10px 20px; }
  .article-ending button, .archive-link { font-size: 12px; }
  .article-back { align-items: center; }
  footer { align-items: center; flex-wrap: wrap; gap: 8px 16px; }
  footer > div { flex-basis: 100%; }
  footer a, footer button, footer > a:last-child { font-size: 12px; }
  footer small { margin-top: 0; font-size: 9px; }
  footer > a:last-child { margin-left: auto; }
  .notes-toolbar { padding: 8px 20px; }
  .notes-content { padding: 17px 23px 28px; }
  #about .notes-content p { font-size: 15px; line-height: 1.9; }
}
@media (max-width: 359px) {
  .topics { gap: 3px; }
  .eras { gap: 4px 16px; }
}
@media (min-width: 761px) and (max-height: 800px) {
  .inside-cover { min-height: 0; }
  .inside-cover nav { gap: 15px; }
  .cover-art { display: none; }
  .cover-bottom { margin-top: 28px; gap: 4px; }
}
@media (min-width: 761px) and (max-height: 620px) {
  .inside-cover { max-height: calc(100dvh - 50px); overflow-y: auto; scrollbar-width: thin; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .source-link { transition: none; }
}

/* v22 — ink caught on the edges of the notebook, clear of the writing. */
.home-intro::before,
.masthead-motifs::before,
.margin-notes::after,
.end-skull::before {
  content: '';
  position: absolute;
  background: url('collage/ink-impact-v22.3d22ffca31f3.svg') center / contain no-repeat;
  pointer-events: none;
}
.home-intro::before {
  width: 185px; height: 150px; left: -36px; top: -34px;
  transform: rotate(-17deg); opacity: .94;
}
.home-heading { position: relative; }
.masthead-motifs::before {
  width: 205px; height: 167px; left: -67px; bottom: 8px;
  transform: rotate(27deg); opacity: .9;
}
.margin-notes { isolation: isolate; }
.margin-notes::after {
  width: 175px; height: 142px; left: -53px; bottom: 39px;
  transform: rotate(-41deg); z-index: -1; opacity: .84;
}
.listing-heading::after {
  background-image: url('collage/cranial-study-v8.png'), url('collage/ink-impact-v22.3d22ffca31f3.svg');
  background-position: center, center;
  background-size: contain, 100% 100%;
  background-repeat: no-repeat;
}
.end-skull { position: relative; isolation: isolate; }
.end-skull::before {
  width: 116px; height: 40px; left: -21px; top: 14px;
  background-image: url('collage/ink-flick-v22.523d25ed9dc1.svg');
  transform: rotate(-14deg); z-index: -1; opacity: .84;
}
@media (max-width: 1100px) {
  .home-intro::before { width: 140px; height: 114px; top: -20px; left: -27px; }
  .masthead-motifs::before { width: 156px; height: 126px; left: -44px; bottom: 5px; }
}
@media (max-width: 760px) {
  .home-intro::before { width: 82px; height: 67px; top: -9px; left: -21px; opacity: .88; }
  .masthead-motifs::before { width: 94px; height: 77px; left: -23px; bottom: 3px; }
  .margin-notes { position: relative; }
  .margin-notes::after { width: 113px; height: 92px; left: -9px; bottom: 19px; opacity: .75; }
  .end-skull::before { width: 99px; height: 34px; left: -18px; }
}
@media print {
  .home-intro::before, .masthead-motifs::before, .margin-notes::after, .end-skull::before { display: none; }
}