/* Personal traces — garnet, paper and a little room to wander. */
html[data-world="blog"], body[data-world="blog"] { background: #2b141d; }
body[data-world="blog"] {
  --blog-paper: #f5eadd; --blog-ink: #422632; --blog-red: #ec7882;
  --silver: #f5eadd; --muted: #d3b9b8; --line: #f0c7bd33;
  color: var(--blog-paper);
  background: radial-gradient(ellipse at 80% 12%,#60273766,transparent 42%),#2b141d;
}
body[data-world="blog"] .inner-shell { min-height: 100svh; }
body[data-world="blog"] .inner-content { max-width: 1600px; padding: 0 clamp(28px,6vw,100px) 90px; }
body[data-world="blog"] .back-link { display: none; }
body[data-world="blog"] .site-header { color: var(--blog-paper); }
body[data-world="blog"] .header-book { background: var(--blog-paper); color: var(--blog-ink); border-color: #f5eadd88; }
body[data-world="blog"] .site-footer { max-width: none; padding-inline: clamp(28px,6vw,100px); color: var(--blog-paper); }
body[data-world="blog"] .site-footer :is(p,nav) { color: var(--muted); }
body[data-world="blog"] dialog { background: #381d28; }
#page-blog, #page-blog-post { animation: none; }
.journal-hero { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; min-height: 570px; gap: 35px; padding: 38px 0 65px; }
.journal-intro { position: relative; z-index: 1; }
.journal-kicker { font: 400 10px/1.5 var(--atlas-copy); letter-spacing: 2px; text-transform: uppercase; color: #e4bfb9; }
.journal-kicker::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ed7984; margin-right: 11px; box-shadow: 0 0 20px #ef4b6166; }
.journal-intro h2 { font: 500 clamp(64px,6.5vw,97px)/.95 var(--serif); letter-spacing: -2px; margin: 24px 0; }
.journal-intro h2 em { color: #e6ad9f; }
.journal-intro > p:not(.journal-kicker) { max-width: 340px; font: 400 16px/1.8 var(--sans); color: #d8bfba; }
.journal-invitation { display: flex; align-items: center; gap: 25px; margin-top: 30px; flex-wrap: wrap; }
.journal-primary, .journal-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 13px 24px; min-height: 48px; border-radius: 50px; font: 500 20px/1 var(--serif); border: 1px solid #f5eadd55; }
.journal-primary { background: var(--blog-paper); color: var(--blog-ink); }
.journal-secondary { background: transparent; color: var(--blog-paper); }
.journal-primary svg, .journal-secondary svg { width: 21px; height: 19px; transition: transform .25s; }
.journal-primary:hover svg, .journal-secondary:hover svg { transform: translateX(4px); }
.journal-wander { background: none; border: 0; border-bottom: 1px solid #e5b7ac77; color: #e5b7ac; font: 400 12px/1.8 var(--sans); padding: 5px 0; }
.journal-scene { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto; align-content: start; min-width: 0; height: auto; min-height: 455px; padding-top: 32px; position: relative; isolation: isolate; perspective: 1200px; }
.journal-memory { position: absolute; width: 118%; height: 114%; left: -14%; top: -6%; z-index: -1; overflow: visible; opacity: .9; filter: saturate(.95); transition: transform .65s ease; }
.journal-scene::before { content: ""; position: absolute; inset: 25% 5% 3% 24%; background: #1a071d66; filter: blur(35px); border-radius: 45%; z-index: -1; }
.journal-sheet { grid-area: 1 / 1; position: relative; width: 74%; height: auto; margin-left: 19%; align-self: stretch; pointer-events: none; border: 1px solid #d4998b44; border-radius: 4px 13px 13px 4px; background: #bc786a; transform: rotate(7deg); box-shadow: 0 25px 40px #0d041d44; }
.journal-feature { grid-area: 1 / 1; display: flex; flex-direction: column; position: relative; width: 74%; min-height: 355px; margin-left: 15%; padding: 30px 32px 25px; color: var(--blog-ink); background: linear-gradient(100deg,#d7c0af 0,#f2e5d5 10px,#f7eddf 24px,#ead8c7 100%); border-radius: 4px 13px 13px 4px; box-shadow: 0 22px 45px #16061066; transform: rotate(-5deg); transition: transform .45s,box-shadow .45s; }
.journal-feature:hover { transform: rotate(-2deg) translateY(-6px); box-shadow: 0 30px 50px #16061088; }
.journal-feature-top { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #7e52503b; padding-bottom: 16px; font: 400 9px/1.6 var(--atlas-copy); letter-spacing: 1.3px; text-transform: uppercase; }
.journal-feature h3 { font: 500 clamp(26px,2.8vw,39px)/1.12 var(--serif); letter-spacing: -.6px; margin: 25px 0 17px; text-wrap: balance; }
.journal-feature h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.journal-feature-excerpt { color: #775455; font: 500 19px/1.45 var(--serif); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 24px; }
.journal-feature-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 15px; border-top: 1px solid #7e52503b; font: 400 10px/1.5 var(--sans); }
.journal-feature-foot > svg { width: 26px; flex: 0 0 26px; }
.journal-archive { scroll-margin-top: 28px; border-top: 1px solid var(--line); padding-top: 35px; }
.journal-archive-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.journal-archive-heading h3 { font: 500 clamp(37px,3.3vw,48px)/1.1 var(--serif); }
.journal-archive-heading p { color: #d8b5b3; font: 400 11px/1.6 var(--atlas-copy); }
.journal-tools { display: grid; grid-template-columns: 1fr 160px 160px; gap: 16px; margin: 27px 0 15px; }
.journal-search { position: relative; }
.journal-search svg { position: absolute; width: 18px; height: 18px; left: 15px; top: 15px; color: #d5b1b0; }
.journal-tools input, .journal-tools select { color: var(--blog-paper); border: 1px solid #d4a6aa55; border-radius: 4px; background: #f7ded908; min-height: 48px; font: 400 12px/1.6 var(--sans); }
.journal-tools input { padding-left: 44px; }
.journal-tools input::placeholder { color: #d4b5b4; opacity: 1; }
.journal-tools select { -webkit-appearance: none; appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23f5eadd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; }
.journal-tools option { background: #381d28; }
.journal-result-line { display: flex; align-items: center; justify-content: flex-end; min-height: 0; color: #c9a5a8; font-size: 11px; }
#journal-result-count { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.journal-clear { background: none; border: 0; color: var(--blog-paper); padding: 6px; text-decoration: underline; text-underline-offset: 4px; }
.journal-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px 30px; margin-top: 22px; }
.journal-card { display: flex; flex-direction: column; min-width: 0; padding: 25px 27px 23px; min-height: 365px; border: 1px solid #b9758030; background: linear-gradient(145deg,#65304077,#471e2b55); border-radius: 5px; transition: transform .3s,background .3s,border-color .3s; }
.journal-card:nth-child(3n+2) { background: linear-gradient(145deg,#74404966,#4c252d44); }
.journal-card:nth-child(3n) { background: linear-gradient(145deg,#41253088,#32172155); }
.journal-card:hover { transform: translateY(-4px); border-color: #df8f9677; background-color: #72334233; }
.journal-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 33px; color: #c6888e; }
.journal-card-number { font: italic 500 25px/1 var(--serif); }
.journal-card-trace { font: 400 8px/1.5 var(--atlas-copy); letter-spacing: 1.3px; text-transform: uppercase; }
.journal-card-image { aspect-ratio: 1.55; overflow: hidden; position: relative; border-radius: 5px; background: #4e2531; margin-bottom: 20px; }
.journal-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s,filter .6s; filter: saturate(.85); }
.journal-card-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,#3d091f33,transparent 65%); pointer-events: none; }
.journal-card:hover .journal-card-image img { transform: scale(1.045); filter: saturate(1.05); }
.journal-card-image.is-memory { background: #5b2033 url("assets/memory-encounter-desktop.png") 26% 50%/440% auto; }
.journal-card-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: #d0abaa; font: 400 10px/1.5 var(--atlas-copy); }
.journal-card-meta span::before { content: "·"; margin-right: 10px; }
.journal-card h4 { font: 500 clamp(25px,2.4vw,33px)/1.14 var(--serif); color: var(--blog-paper); margin: 13px 0 12px; letter-spacing: -.3px; overflow-wrap: anywhere; }
.journal-card-excerpt { color: #d4b9b8; font: 400 13px/1.7 var(--sans); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 21px; }
.journal-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; font: 400 11px/1.5 var(--sans); color: #e5b1aa; }
.journal-card-bottom > svg { width: 20px; height: 20px; flex: 0 0 20px; transition: transform .3s; }
.journal-card:hover .journal-card-bottom > svg { transform: translateX(5px); }
.journal-card-stats { display: inline-flex; gap: 10px; align-items: center; flex-shrink: 0; margin-left: auto; color: #e5b1aa; font: 400 11px/1.5 var(--sans); }
.journal-card-metric { display: inline-flex; align-items: center; gap: 4px; }
.journal-card-metric svg { width: 13px; height: 13px; flex: 0 0 13px; }
.journal-feature-foot .journal-card-stats { color: #83555c; font-size: 10px; }
.journal-card-count { font-variant-numeric: tabular-nums; min-width: 1ch; }
@media (min-width: 801px) and (max-width: 1000px) { .journal-card-stats { gap: 7px; font-size: 10px; } }
.journal-more { display: flex; justify-content: center; margin-top: 40px; }
.journal-empty { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: #e9c9c2; }
.journal-empty h4 { font: 500 32px/1.2 var(--serif); margin-bottom: 15px; }
.journal-loading { color: #d4b5b4; padding: 35px 0; }
.journal-loading a { text-decoration: underline; }
/* The reading room stays quiet even when the archive is lively. */
.reader-progress { position: fixed; height: 2px; top: 0; left: 0; width: 100%; z-index: 20; pointer-events: none; }
.reader-progress span { display: block; height: 100%; background: #f1a492; width: 100%; transform: scaleX(0); transform-origin: left; }
.reader-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; gap: 20px; color: #e7c9c1; font-size: 12px; }
.reader-toolbar > a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.reader-controls { display: flex; align-items: center; gap: 8px; }
.reader-controls button { border: 1px solid #ddbcb533; background: #fff3e908; color: #f3dfd2; border-radius: 50%; min-width: 40px; min-height: 40px; padding: 8px; font-size: 13px; }
.reader-controls button:disabled { opacity: .4; }
.reader-controls .reader-copy { border-radius: 30px; padding-inline: 18px; margin-left: 5px; font: 400 11px/1.4 var(--sans); }
.reader-paper { background: var(--blog-paper); color: var(--blog-ink); padding: clamp(30px,5vw,72px); border-radius: 8px; max-width: 960px; margin: 0 auto; box-shadow: 0 20px 65px #17060f33; }
.reader-heading { max-width: 680px; margin: 0 auto 38px; }
.reader-meta { color: #83555c; font: 400 11px/1.8 var(--sans); display: flex; gap: 11px; flex-wrap: wrap; }
.reader-heading h2 { font: 500 clamp(35px,4.1vw,59px)/1.08 var(--serif); letter-spacing: -1px; margin: 20px 0 24px; overflow-wrap: anywhere; }
.reader-content { font: 400 var(--reading-size,20px)/1.8 Georgia,serif; max-width: 680px; margin: auto; overflow-wrap: anywhere; }
.reader-content > * + * { margin-top: 1.25em; }
.reader-content p { margin-bottom: 1.25em; }
.reader-content h2 { font: 500 1.8em/1.15 var(--serif); margin: 1.5em 0 .7em; }
.reader-content h3 { font: 500 1.45em/1.25 var(--serif); margin: 1.5em 0 .7em; }
.reader-content :is(h4,h5,h6) { font: 500 1.2em/1.3 var(--serif); margin: 1.5em 0 .7em; }
.reader-content :is(strong,b) { font-weight: bold; }
.reader-content :is(em,i) { font-weight: inherit; }
.reader-content :is(a,u) { color: #9a374f; text-decoration: underline; text-underline-offset: 3px; }
.reader-content a:focus-visible { outline-color: #9a374f; }
.reader-content blockquote { border-left: 2px solid #b86678; padding: 10px 0 10px 25px; margin: 1.8em 0; color: #824657; font-style: italic; }
.reader-content :is(ul,ol) { padding-left: 1.4em; }
.reader-content li { margin: .55em 0; }
.reader-content img, .reader-content video { width: auto; max-width: 100%; height: auto; border-radius: 3px; display: block; margin: auto; }
.reader-content figure { margin: 2em 0; }
.reader-content figcaption { color: #805e64; font: 400 12px/1.7 var(--sans); text-align: center; margin-top: 13px; }
.reader-content hr { border: 0; border-top: 1px solid #8a5d6038; margin: 2em 0; }
.reader-content iframe { width: 100%; max-width: 100%; aspect-ratio: 16/9; border: 0; }
.reader-end { max-width: 680px; margin: 45px auto 0; display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid #6e3d4829; font: 400 11px/1.8 var(--sans); color: #83555c; }
.reader-end a { text-decoration: underline; text-underline-offset: 3px; }
.reader-next { max-width: 960px; margin: 40px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.reader-next a { display: block; padding: 25px 0; border-top: 1px solid var(--line); }
.reader-next small { font: 400 10px/1.5 var(--atlas-copy); color: #cfa9ac; }
.reader-next h3 { font: 500 27px/1.2 var(--serif); margin-top: 12px; }
.reader-status { color: #e2b7b2; font: 400 11px/1.5 var(--sans); min-height: 1.5em; text-align: right; }
@media (min-width: 801px) and (max-width: 1100px) {
  body[data-world="blog"] .inner-content { padding-inline: 4vw; }
  .journal-hero { grid-template-columns: 1fr 1fr; gap: 15px; min-height: 520px; }
  .journal-scene { min-height: 420px; padding-top: 29px; }
  .journal-feature { width: 85%; min-height: 328px; margin-left: 7%; padding: 23px; }
  .journal-feature h3 { font-size: 29px; }
  .journal-feature-excerpt { font-size: 17px; }
  .journal-sheet { width: 85%; margin-left: 11%; }
  .journal-grid { gap: 30px 22px; }
}
@media (max-width: 800px) {
  body[data-world="blog"] .inner-content { padding: 0 25px 60px; max-width: 600px; }
  .journal-hero { display: block; padding: 42px 0 32px; min-height: auto; }
  .journal-intro h2 { font-size: clamp(52px,11vw,72px); line-height: .97; letter-spacing: -1px; margin: 20px 0; }
  .journal-intro > p:not(.journal-kicker) { font-size: 14px; max-width: 310px; }
  .journal-invitation { margin-top: 24px; gap: 21px; }
  .journal-primary, .journal-secondary { font-size: 18px; padding: 12px 22px; }
  .journal-scene { min-height: 0; padding-top: 132px; margin-top: 32px; padding-bottom: 22px; }
  .journal-memory { width: calc(100% + 50px); left: -25px; height: 290px; top: -18px; opacity: .95; transform: none; }
  .journal-sheet { width: 84%; margin-left: 13%; }
  .journal-feature { width: 84%; min-height: 278px; margin-left: 8%; padding: 21px 25px; }
  .journal-feature h3 { font-size: 28px; margin: 18px 0 12px; }
  .journal-feature h3 { -webkit-line-clamp: 2; }
  .journal-feature-top { padding-bottom: 12px; font-size: 8px; }
  .journal-feature-excerpt { font-size: 17px; -webkit-line-clamp: 2; margin-bottom: 17px; }
  .journal-feature-foot { padding-top: 12px; }
  .journal-scene { margin-bottom: 22px; }
  .journal-archive { padding-top: 30px; }
  .journal-archive-heading { align-items: center; }
  .journal-archive-heading h3 { font-size: 36px; }
  .journal-archive-heading p { font-size: 9px; }
  .journal-tools { grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 23px; }
  .journal-search { grid-column: 1/-1; }
  .journal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 20px; }
  .journal-card h4 { font-size: 26px; }
  .journal-card-excerpt { font-size: 12px; }
  .reader-toolbar { gap: 10px; font-size: 11px; padding-block: 20px; }
  .reader-controls { gap: 5px; }
  .reader-controls button { min-width: 44px; min-height: 44px; }
  .reader-controls .reader-copy { padding-inline: 11px; margin-left: 0; }
  .reader-paper { padding: 30px 22px; margin-inline: -10px; }
  .reader-heading h2 { font-size: clamp(33px,8.2vw,47px); }
  .reader-content { font-size: var(--reading-size,17px); line-height: 1.8; }
  .reader-next { grid-template-columns: 1fr; gap: 0; }
  .reader-next h3 { font-size: 26px; }
  .reader-end { flex-wrap: wrap; }
  body[data-world="blog"] .site-footer { padding: 25px; }
}
@media (max-width: 480px) {
  .journal-grid { grid-template-columns: 1fr; gap: 33px; }
  .journal-card-image { aspect-ratio: 1.65; }
  .journal-card h4 { font-size: 30px; }
  .journal-card-excerpt { font-size: 13px; }
}
@media (max-width: 360px) {
  body[data-world="blog"] .inner-content { padding-inline: 20px; }
  .journal-intro h2 { font-size: 49px; }
  .journal-scene { min-height: 0; }
  .journal-feature { min-height: 295px; padding-inline: 21px; }
  .reader-controls .reader-copy { max-width: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  #page-blog *, #page-blog-post * { transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .journal-tools select { -webkit-appearance: auto; appearance: auto; background-image: none; }
}
