/* Календар — public site
   Paper, ink and the red of a tear-off calendar's Sundays.
   Literata for reading, Fira Sans Condensed for dates, numbers and navigation. */

:root {
  --paper: #eef0ec;
  --sheet: #fbfbf9;
  --ink: #1d2b3a;
  --ink-2: #4b5967;
  --ink-3: #6f7b86;
  --rule: #cdd2cb;
  --red: #b8232b;
  --cloth: #2f5d50;
  --cloth-ink: #eef3ef;
  --mark: #f3dd8a;
  --serif: 'Literata', Georgia, 'Times New Roman', serif;
  --cond: 'Fira Sans Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --measure: 40rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #131a21; --sheet: #1a232c; --ink: #e3e8ec; --ink-2: #aeb8c1; --ink-3: #87929c;
    --rule: #2d3944; --red: #ef6a62; --cloth: #3d7363; --cloth-ink: #eef3ef; --mark: #6b5b1c;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --paper: #131a21; --sheet: #1a232c; --ink: #e3e8ec; --ink-2: #aeb8c1; --ink-3: #87929c;
  --rule: #2d3944; --red: #ef6a62; --cloth: #3d7363; --cloth-ink: #eef3ef; --mark: #6b5b1c;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--serif);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; }
.wrap { width: min(72rem, 100% - 2rem); margin-inline: auto; }
.muted { color: var(--ink-3); }

/* ------------------------------------------------ header */
.site-head { border-bottom: 1px solid var(--rule); background: var(--paper); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.25rem .5rem; }
.mark { text-decoration: none; display: flex; flex-direction: column; line-height: 1; }
.mark-word { font: 700 2rem/1 var(--serif); letter-spacing: -0.01em; }
.mark-name { font: 500 .95rem/1.2 var(--cond); color: var(--ink-2); margin-top: .3rem; letter-spacing: .02em; }
.mark:hover .mark-word { color: var(--red); }
.head-search input {
  font: 400 1rem var(--cond); width: 17rem; max-width: 100%;
  padding: .5rem .75rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--sheet); color: var(--ink);
}
.nav { display: flex; gap: .25rem 1.5rem; flex-wrap: wrap; padding-block: .25rem .6rem; font: 500 1.05rem/1.4 var(--cond); }
.nav a { text-decoration: none; padding-block: .35rem; border-bottom: 2px solid transparent; }
.nav a[aria-current='page'] { border-bottom-color: var(--ink); }
.nav a:hover { color: var(--red); }
@media (max-width: 640px) {
  .head-row { flex-wrap: wrap; }
  .head-search, .head-search input { width: 100%; }
  .nav { gap: .1rem 1rem; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .nav a { white-space: nowrap; }
}

/* ------------------------------------------------ hero: the calendar leaf */
.hero { display: grid; grid-template-columns: minmax(15rem, 20rem) 1fr; gap: clamp(2rem, 5vw, 4.5rem); padding-block: clamp(2rem, 5vw, 3.5rem) 2rem; align-items: start; }
.leaf {
  position: relative;
  background: var(--sheet);
  text-align: center;
  padding: 2.4rem 1.5rem 1.6rem;
  border-radius: 2px;
  /* the pad of sheets underneath */
  box-shadow: 0 1px 0 var(--rule), 0 3px 0 -1px var(--sheet), 0 4px 0 -1px var(--rule), 0 6px 0 -2px var(--sheet), 0 7px 0 -2px var(--rule), 0 14px 24px -14px rgba(29, 43, 58, .35);
}
.leaf::before {
  /* binding holes along the top edge */
  content: ''; position: absolute; top: .8rem; left: 50%; transform: translateX(-50%);
  width: 60%; height: .7rem;
  background: radial-gradient(circle at center, var(--paper) 0 .28rem, transparent .3rem) 0 0 / 1.6rem .7rem repeat-x;
}
.leaf-month { margin: 0; font: 600 1.25rem/1.2 var(--cond); color: var(--red); letter-spacing: .02em; }
.leaf-day { margin: .1rem 0 0; font: 700 clamp(8rem, 18vw, 11.5rem)/0.95 var(--cond); font-variant-numeric: lining-nums; letter-spacing: -0.04em; color: var(--ink); }
.leaf.sunday .leaf-day { color: var(--red); }
.leaf-weekday { margin: .4rem 0 0; font: 500 1.35rem/1.2 var(--cond); color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: .7rem; }
@media (prefers-reduced-motion: no-preference) {
  .leaf { animation: settle .7s cubic-bezier(.2, .8, .2, 1) both; transform-origin: top center; }
  @keyframes settle { from { transform: rotateX(-24deg) translateY(-6px); opacity: 0; } to { transform: var(--tilt, none); opacity: 1; } }
}

.otd-title { font: 700 clamp(1.6rem, 3.2vw, 2.25rem)/1.15 var(--serif); margin: .25rem 0 1.25rem; letter-spacing: -0.01em; max-width: 22ch; }
.otd-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.otd-list li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.otd-year { font: 600 1.15rem/1.2 var(--cond); color: var(--red); font-variant-numeric: tabular-nums; }
.otd-list a { text-decoration: none; display: block; }
.otd-author { display: block; font: 500 .95rem/1.3 var(--cond); color: var(--ink-2); }
.otd-work { font: 600 1.15rem/1.3 var(--serif); }
.otd-list a:hover .otd-work { color: var(--red); text-decoration: underline; text-underline-offset: .18em; }
.otd-more { font: 400 1rem/1.5 var(--cond); color: var(--ink-2); margin-top: 1rem; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .leaf { max-width: 18rem; margin-inline: auto; width: 100%; }
  .otd-list li { grid-template-columns: 4.5rem 1fr; gap: .75rem; }
}

/* ------------------------------------------------ sections */
.section { padding-block: 2.5rem; border-top: 1px solid var(--rule); }
.section-head { margin-bottom: 1.25rem; }
.section-head h2 { font: 700 1.6rem/1.2 var(--serif); margin: 0 0 .35rem; }
.section-head p { margin: 0; color: var(--ink-2); font: 400 1rem/1.5 var(--cond); max-width: 60ch; }
.more { font: 600 1.05rem var(--cond); margin: 1.25rem 0 0; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* ------------------------------------------------ archive grid */
.grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.agrid { border-collapse: separate; border-spacing: 3px; font: 500 .95rem/1 var(--cond); font-variant-numeric: tabular-nums; min-width: 40rem; width: 100%; }
.agrid th { font-weight: 500; color: var(--ink-3); padding: .3rem .2rem; text-align: center; }
.agrid thead th { font-size: .85rem; }
.agrid tbody th { text-align: right; padding-right: .6rem; font-weight: 600; color: var(--ink); width: 3.5rem; }
.agrid tbody th a { text-decoration: none; }
.agrid td { height: 2.1rem; text-align: center; border-radius: 2px; padding: 0; }
.agrid td a { display: flex; align-items: center; justify-content: center; height: 100%; text-decoration: none; }
.agrid td.empty { background: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--rule) 55%, transparent) 4px 5px); }
.agrid td.l1 { background: color-mix(in srgb, var(--ink) 10%, var(--paper)); }
.agrid td.l2 { background: color-mix(in srgb, var(--ink) 25%, var(--paper)); }
.agrid td.l3 { background: color-mix(in srgb, var(--ink) 55%, var(--paper)); color: var(--paper); }
.agrid td.l4 { background: var(--ink); color: var(--paper); }
.agrid td:not(.empty):not(.sum):hover { outline: 2px solid var(--red); outline-offset: 1px; }
.agrid .sum { color: var(--ink-3); font-size: .85rem; width: 3.5rem; background: none; }
.grid-wrap.compact .agrid td { height: 1.8rem; }

/* ------------------------------------------------ post cards (a list, not boxes) */
.cards { border-top: 1px solid var(--rule); }
.card { padding: 1.15rem 0 1.25rem; border-bottom: 1px solid var(--rule); max-width: 46rem; }
.card-author { margin: 0 0 .15rem; font: 500 1rem/1.3 var(--cond); color: var(--ink-2); }
.card-author a { text-decoration: none; }
.card-title { margin: 0; font: 700 1.3rem/1.25 var(--serif); letter-spacing: -0.005em; }
.card-title a { text-decoration: none; }
.card-title a:hover { text-decoration: underline; }
.card-text { margin: .45rem 0 .4rem; color: var(--ink-2); font-size: 1rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-text mark { background: var(--mark); color: inherit; padding: 0 .1em; }
.card-meta { margin: 0; font: 400 .92rem/1.4 var(--cond); color: var(--ink-3); }
.card-meta time { color: var(--red); font-weight: 500; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2rem; border-top: 0; }
.cards-3 .card { border-top: 1px solid var(--rule); border-bottom: 0; }
@media (max-width: 760px) { .cards-3 { grid-template-columns: 1fr; } }

.side-title { font: 600 1.15rem/1.3 var(--cond); margin: 0 0 .5rem; color: var(--ink-2); }
.side-title + * { margin-top: 0; }
.topic-list { list-style: none; padding: 0; margin: 0 0 2rem; border-top: 1px solid var(--rule); font: 500 1.05rem/1.3 var(--cond); }
.topic-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.topic-list a { text-decoration: none; }
.topic-list .n, .author-group .n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.series-link { font: 400 1rem/1.5 var(--cond); color: var(--ink-2); }
.series-link a { font-weight: 600; color: var(--ink); }

/* ------------------------------------------------ pages */
.page { padding-block: 2.5rem 4rem; }
.page.narrow { max-width: 46rem; }
.page-head { margin-bottom: 1.75rem; max-width: 46rem; }
.page-head h1 { font: 700 clamp(2rem, 4.5vw, 2.9rem)/1.1 var(--serif); margin: 0 0 .6rem; letter-spacing: -0.015em; }
.kicker { margin: 0 0 .5rem; font: 500 1rem/1.3 var(--cond); color: var(--ink-2); }
.kicker a { text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.lead { font-size: 1.15rem; line-height: 1.55; color: var(--ink-2); margin: 0 0 .75rem; }
.count { font: 400 .95rem var(--cond); color: var(--ink-3); margin: 0; }
.empty-note { font: 400 1.1rem/1.5 var(--cond); color: var(--ink-2); padding: 2rem 0; border-top: 1px solid var(--rule); }

.pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; font: 500 1.05rem var(--cond); max-width: 46rem; flex-wrap: wrap; }
.pager .nums { display: flex; gap: .25rem; flex-wrap: wrap; }
.pager .nums > * { min-width: 2.2rem; text-align: center; padding: .3rem .4rem; text-decoration: none; border-radius: 2px; }
.pager [aria-current] { background: var(--ink); color: var(--paper); }
.pager .off { color: var(--ink-3); }

.topics-big { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 0 2.5rem; }
.topics-big li { border-top: 2px solid var(--ink); padding: .9rem 0 1.5rem; }
.topics-big li.series { border-top-color: var(--red); }
.topics-big a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; text-decoration: none; }
.tb-name { font: 700 1.45rem/1.2 var(--serif); }
.tb-n { font: 600 1.4rem var(--cond); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.topics-big .series .tb-n { font-size: 1rem; color: var(--red); }
.topics-big a:hover .tb-name { color: var(--red); }
.topics-big p { margin: .4rem 0 0; color: var(--ink-2); font-size: 1rem; }

.letters { display: flex; flex-wrap: wrap; gap: .2rem; margin-bottom: 2rem; font: 600 1.1rem var(--cond); position: sticky; top: 0; background: var(--paper); padding-block: .5rem; z-index: 2; border-bottom: 1px solid var(--rule); }
.letters a { text-decoration: none; min-width: 2rem; text-align: center; padding: .2rem .3rem; border-radius: 2px; }
.letters a:hover { background: var(--ink); color: var(--paper); }
.author-groups { columns: 3 16rem; column-gap: 2.5rem; }
.author-group { break-inside: avoid; margin-bottom: 1.5rem; scroll-margin-top: 4rem; }
.author-group h2 { font: 700 1.6rem/1 var(--cond); color: var(--red); margin: 0 0 .4rem; }
.author-group ul { list-style: none; margin: 0; padding: 0; }
.author-group li { display: flex; justify-content: space-between; gap: .5rem; padding: .15rem 0; font-size: 1rem; }
.author-group a { text-decoration: none; }
.author-group a:hover { text-decoration: underline; }

.big-search { display: flex; gap: .5rem; margin: 1rem 0; max-width: 40rem; }
.big-search input { flex: 1; font: 400 1.15rem var(--serif); padding: .7rem .9rem; border: 1px solid var(--ink-3); border-radius: 3px; background: var(--sheet); color: var(--ink); min-width: 0; }
button, .btn { font: 600 1.05rem var(--cond); background: var(--ink); color: var(--paper); border: 0; border-radius: 3px; padding: .7rem 1.3rem; cursor: pointer; }
button:hover { background: var(--red); }

/* ------------------------------------------------ a single text */
.post { padding-block: 2.5rem 4rem; }
.post-head { max-width: var(--measure); margin: 0 auto 2.25rem; }
.post-author { margin: 0 0 .3rem; font: 500 1.3rem/1.3 var(--cond); color: var(--ink-2); }
.post-author a { text-decoration: none; }
.post-author a:hover { text-decoration: underline; }
.post-title { font: 700 clamp(2rem, 5vw, 3.1rem)/1.1 var(--serif); margin: 0 0 1rem; letter-spacing: -0.015em; overflow-wrap: break-word; hyphens: auto; }
.post-meta { font: 400 1rem var(--cond); color: var(--ink-3); margin: 0; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }
.post-meta time { color: var(--red); font-weight: 600; }
.draft-flag { margin-left: .75rem; background: var(--mark); color: var(--ink); padding: .1rem .4rem; font-weight: 600; }

.prose { max-width: var(--measure); margin-inline: auto; font-size: 1.15rem; line-height: 1.75; overflow-wrap: break-word; hyphens: auto; }
.prose p { margin: 0 0 1em; }
.prose h2, .prose h3, .prose h4 { font-family: var(--serif); line-height: 1.25; margin: 2em 0 .6em; }
.prose h2 { font-size: 1.45rem; }
.prose h3 { font-size: 1.25rem; }
.prose .c { text-align: center; }
.prose .verse { white-space: normal; }
.prose blockquote { margin: 1.5em 0; padding-left: 1.25rem; border-left: 3px solid var(--rule); color: var(--ink-2); }
.prose img { margin: 1.5rem auto; border-radius: 2px; }
.prose a { color: var(--ink); text-decoration-color: var(--red); }
.prose table { border-collapse: collapse; font-size: 1rem; margin: 1.5em 0; }
.prose td, .prose th { border: 1px solid var(--rule); padding: .4rem .6rem; vertical-align: top; }
.prose ul, .prose ol { padding-left: 1.4em; }
/* poems and songs: lines sit close together */
.verse-mode .prose p { margin-bottom: .2em; }
.verse-mode .prose p + p:not(:has(+ p)) { margin-bottom: 1em; }

.post-nav { max-width: var(--measure); margin: 3rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; border-top: 2px solid var(--ink); padding-top: 1rem; }
.post-nav a { text-decoration: none; display: block; }
.post-nav .next { text-align: right; }
.pn-label { display: block; font: 500 .95rem var(--cond); color: var(--ink-3); }
.pn-title { font: 600 1.05rem/1.35 var(--serif); }
.post-nav a:hover .pn-title { color: var(--red); text-decoration: underline; }
.related { max-width: 72rem; margin: 3.5rem auto 0; }
.related h2 { font: 600 1.15rem var(--cond); color: var(--ink-2); margin: 0 0 .5rem; }
@media (max-width: 600px) { .post-nav { grid-template-columns: 1fr; } .post-nav .next { text-align: left; } }

/* ------------------------------------------------ workshop */
.workshop-strip .chapter-list, .toc { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.chapter-list li a, .toc li a { display: grid; grid-template-columns: 3rem 1fr auto; gap: 1rem; align-items: baseline; padding: .9rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.chapter-list li a { grid-template-columns: 3rem 1fr; font: 600 1.15rem/1.3 var(--serif); }
.ch-no, .toc-no { font: 700 1.6rem/1 var(--cond); color: var(--red); font-variant-numeric: tabular-nums; }
.toc-title { font: 600 1.25rem/1.3 var(--serif); }
.toc-meta { font: 400 .95rem var(--cond); color: var(--ink-3); white-space: nowrap; }
.toc li a:hover .toc-title, .chapter-list a:hover { color: var(--red); }
@media (max-width: 600px) { .toc li a { grid-template-columns: 2.5rem 1fr; } .toc-meta { grid-column: 2; } }

/* ------------------------------------------------ bookshop */
.shop-how { font: 400 1.02rem/1.5 var(--cond); color: var(--ink-2); max-width: 60ch; }
.filter { display: flex; gap: 1.25rem; font: 500 1.05rem var(--cond); margin-top: 1rem; }
.filter a { text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: .2rem; }
.filter a[aria-current] { border-bottom-color: var(--ink); }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10rem, calc(50% - 1rem)), 13rem)); gap: 2rem 1.75rem; }
@media (max-width: 480px) { .shelf { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; } }
.book-link { text-decoration: none; display: block; }
.book-photo { aspect-ratio: 2 / 3; background: var(--sheet); overflow: hidden; border-radius: 1px 3px 3px 1px; box-shadow: inset 3px 0 0 rgba(0,0,0,.08), 0 10px 18px -12px rgba(29,43,58,.45); }
.book-photo img { width: 100%; height: 100%; object-fit: cover; }
.status-sold .book-photo, .status-reserved .book-photo { filter: grayscale(.6); opacity: .75; }
.spine { height: 100%; background: var(--cloth); color: var(--cloth-ink); display: flex; flex-direction: column; justify-content: space-between; padding: 1.1rem .9rem; outline: 1px solid color-mix(in srgb, var(--cloth-ink) 35%, transparent); outline-offset: -8px; }
.spine-author { font: 500 .9rem/1.25 var(--cond); opacity: .85; }
.spine-title { font: 700 1.15rem/1.2 var(--serif); }
.book-title { margin: .8rem 0 .1rem; font: 700 1.08rem/1.25 var(--serif); }
.book-author { margin: 0; font: 400 .95rem/1.3 var(--cond); color: var(--ink-2); }
.book-price { margin: .35rem 0 0; font: 600 1.05rem var(--cond); }
.book-link:hover .book-title { color: var(--red); text-decoration: underline; }
.tag { font: 600 .9rem var(--cond); padding: .1rem .45rem; border-radius: 2px; }
.tag-reserved { background: var(--mark); color: #2b2408; }
.tag-sold { background: var(--rule); color: var(--ink-2); }

.book-page .book-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-top: .5rem; }
.gallery { display: grid; gap: 1rem; }
.gallery img { border-radius: 2px; box-shadow: 0 12px 24px -16px rgba(29,43,58,.5); }
.book-photo.big { max-width: 22rem; }
.book-info h1 { font: 700 clamp(1.9rem, 4vw, 2.6rem)/1.1 var(--serif); margin: 0 0 .4rem; }
.book-author.big { font-size: 1.25rem; }
.book-price.big { font-size: 1.5rem; margin: .8rem 0 1.25rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin: 0 0 1.5rem; padding: 1rem 0; border-block: 1px solid var(--rule); font-size: 1rem; }
.facts dt { font: 500 1rem var(--cond); color: var(--ink-3); }
.facts dd { margin: 0; }
.book-desc { font-size: 1.05rem; }
.reserve { margin-top: 2rem; background: var(--sheet); padding: 1.5rem; border-top: 3px solid var(--ink); }
.reserve h2 { font: 700 1.3rem var(--serif); margin: 0 0 1rem; }
.reserve label { display: block; font: 500 1rem var(--cond); margin: .9rem 0 .3rem; }
.reserve .opt { color: var(--ink-3); font-weight: 400; }
.reserve input, .reserve textarea { width: 100%; font: 400 1.05rem var(--serif); padding: .6rem .75rem; border: 1px solid var(--ink-3); border-radius: 3px; background: var(--paper); color: var(--ink); }
.reserve button { margin-top: 1.1rem; }
.reserve .small { font: 400 .9rem var(--cond); color: var(--ink-3); margin: .75rem 0 0; }
.hp { position: absolute; left: -5000px; }
.notice { font: 400 1.05rem/1.5 var(--cond); padding: 1rem 1.2rem; background: var(--sheet); border-left: 3px solid var(--ink-3); margin-top: 1.5rem; }
.notice.ok { border-left-color: var(--cloth); }
.notice.err { border-left-color: var(--red); margin: 0 0 1rem; }
@media (max-width: 760px) { .book-page .book-layout { grid-template-columns: 1fr; } }

.contact { margin-top: 2.5rem; border-top: 2px solid var(--ink); padding-top: 1rem; font: 400 1.1rem var(--cond); }
.contact h2 { font: 700 1.3rem var(--serif); margin: 0 0 .5rem; }

/* ------------------------------------------------ footer */
.site-foot { border-top: 1px solid var(--rule); margin-top: 3rem; padding-block: 1.75rem 2.5rem; font: 400 1rem/1.5 var(--cond); color: var(--ink-2); }
.foot-row { display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.foot-row p { margin: 0; }
.foot-links { display: flex; gap: 1.25rem; }
.foot-links a { text-decoration: none; font-weight: 500; }

@media print {
  .site-head, .site-foot, .post-nav, .related { display: none; }
  body { background: #fff; color: #000; }
}

/* =====================================================================
   Second pass: the desk, the shelf, the author's books
   ===================================================================== */
:root { --desk: #16212c; --desk-ink: #e9edf0; --desk-ink-2: #a9b5c0; --desk-rule: rgba(233, 237, 240, .14); --desk-red: #f0857d; --wood: #8a6a4a; }

/* ---- hero on a dark desk under a lamp */
.desk {
  background:
    radial-gradient(ellipse 60% 90% at 18% 35%, rgba(255, 236, 200, .10), transparent 70%),
    linear-gradient(180deg, #1b2834, var(--desk));
  color: var(--desk-ink);
  border-bottom: 4px solid var(--red);
}
.desk .hero { padding-block: clamp(2.25rem, 5vw, 4rem) clamp(2.25rem, 5vw, 3.5rem); }
.desk .leaf { box-shadow: 0 1px 0 #cfd4cd, 0 3px 0 -1px var(--sheet), 0 4px 0 -1px #cfd4cd, 0 6px 0 -2px var(--sheet), 0 7px 0 -2px #cfd4cd, 0 28px 40px -18px rgba(0, 0, 0, .7); --tilt: rotate(-1.2deg); transform: var(--tilt); }
.desk .leaf::before { background: radial-gradient(circle at center, var(--desk) 0 .28rem, transparent .3rem) 0 0 / 1.6rem .7rem repeat-x; }
.desk .otd-title { color: var(--desk-ink); }
.desk .otd-list { border-top-color: var(--desk-rule); }
.desk .otd-list li { border-bottom-color: var(--desk-rule); }
.desk .otd-year { color: var(--desk-red); }
.desk .otd-author { color: var(--desk-ink-2); }
.desk .otd-list a:hover .otd-work { color: #fff; text-decoration-color: var(--desk-red); }
.desk .otd-more { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; color: var(--desk-ink-2); margin-top: 1.5rem; }
.desk .otd-more a:not(.btn-light) { color: var(--desk-ink); }
.btn-light { display: inline-block; font: 600 1.05rem var(--cond); color: var(--desk); background: var(--desk-ink); border-radius: 3px; padding: .6rem 1.1rem; text-decoration: none; }
.btn-light:hover { background: var(--desk-red); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .desk .leaf .leaf-day { color: #1d2b3a; } :root:not([data-theme='light']) .desk .leaf { background: #fbfbf9; } :root:not([data-theme='light']) .desk .leaf .leaf-weekday { color: #4b5967; border-color: #cdd2cb; } }

/* ---- sentence of the day */
.quote-band { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3rem); position: relative; }
.quote-label { font: 500 1rem var(--cond); color: var(--ink-3); margin: 0 0 1rem; }
.quote { margin: 0; position: relative; padding-left: clamp(2.5rem, 6vw, 4.5rem); max-width: 54rem; }
.quote::before { content: '„'; position: absolute; left: 0; top: -.45em; font: 700 clamp(5rem, 11vw, 8rem)/1 var(--serif); color: var(--red); }
.quote p { margin: 0; font: italic 400 clamp(1.45rem, 3.2vw, 2.15rem)/1.4 var(--serif); letter-spacing: -0.005em; text-wrap: balance; }
.quote-src { margin: 1.1rem 0 0 clamp(2.5rem, 6vw, 4.5rem); font: 500 1.05rem var(--cond); color: var(--ink-2); }
.quote-src a { text-decoration: none; }
.quote-src a:hover { text-decoration: underline; color: var(--red); }

/* ---- the topics as a bookshelf */
.shelf-wrap { overflow-x: auto; padding-bottom: .5rem; -webkit-overflow-scrolling: touch; }
.bookshelf { list-style: none; margin: 0; padding: 0 .75rem; display: flex; align-items: flex-end; gap: 4px; height: 21rem; min-width: max-content; border-bottom: 14px solid var(--wood); box-shadow: 0 10px 14px -10px rgba(0, 0, 0, .45); position: relative; }
.bookshelf li { height: var(--h); width: var(--w); flex: none; }
.bookshelf li.leaning { transform: rotate(6deg); transform-origin: bottom left; margin-left: 10px; }
.bookshelf a {
  display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 100%;
  background:
    linear-gradient(90deg, rgba(0,0,0,.28), rgba(255,255,255,.10) 18%, rgba(255,255,255,0) 40%, rgba(0,0,0,.18) 92%),
    linear-gradient(180deg, transparent 0 9%, rgba(232, 200, 120, .55) 9% 9.8%, transparent 9.8% 88%, rgba(232, 200, 120, .55) 88% 88.8%, transparent 88.8%),
    var(--cloth);
  color: #f6efe0; text-decoration: none; border-radius: 3px 3px 1px 1px; padding: 1.4rem 0 .9rem;
  transition: transform .18s ease;
}
.bookshelf a:hover, .bookshelf a:focus-visible { transform: translateY(-14px); color: #fff; }
.spine-name { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 1.05rem/1.1 var(--serif); letter-spacing: .01em; max-height: 78%; overflow: hidden; }
.spine-n { font: 600 .95rem var(--cond); opacity: .85; }
@media (max-width: 640px) { .bookshelf { height: 16rem; } .spine-name { font-size: .95rem; } }
@media (prefers-reduced-motion: reduce) { .bookshelf a { transition: none; } }

/* ---- latest: one lead story and a column */
.news { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.lead-story { border-top: 4px solid var(--ink); padding-top: 1.1rem; }
.lead-topic { margin: 0 0 1rem; }
.lead-topic a { font: 600 .95rem var(--cond); color: #fff; background: var(--cloth, var(--ink)); padding: .2rem .55rem; border-radius: 2px; text-decoration: none; }
.lead-title { font: 700 clamp(1.9rem, 4vw, 2.7rem)/1.08 var(--serif); margin: .1rem 0 .9rem; letter-spacing: -0.015em; }
.lead-title a { text-decoration: none; }
.lead-title a:hover { color: var(--red); }
.lead-text { font-size: 1.12rem; line-height: 1.65; color: var(--ink-2); margin: 0 0 .8rem; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.news-list .cards { border-top: 0; }
.news-list .card:first-child { padding-top: 0; }
@media (max-width: 860px) { .news { grid-template-columns: 1fr; } }

/* ---- the author's books */
.cover { position: relative; aspect-ratio: 2 / 2.9; border-radius: 2px 4px 4px 2px; overflow: hidden; background: var(--sheet); box-shadow: 0 2px 2px rgba(0,0,0,.2), 0 18px 28px -14px rgba(0, 0, 0, .55); }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.30), rgba(255,255,255,.18) 3%, rgba(255,255,255,0) 7%, rgba(0,0,0,.06) 9%, transparent 14%); pointer-events: none; }
.cover-blank { height: 100%; display: grid; place-items: center; padding: 1rem; text-align: center; font: 700 1.2rem var(--serif); background: var(--cloth); color: var(--cloth-ink); }

.works-band { background: linear-gradient(180deg, #1f4639, #173a2f); color: #eef3ef; padding-block: clamp(2.5rem, 6vw, 4rem); margin-block: 1rem; }
.works-head h2 { font: 700 clamp(1.7rem, 3.4vw, 2.3rem)/1.15 var(--serif); margin: 0 0 .4rem; }
.works-head p { margin: 0 0 2rem; font: 400 1.05rem/1.5 var(--cond); color: #c4d6cd; max-width: 56ch; }
.works-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 15rem)); gap: 2.5rem 3rem; }
.works-row.small { grid-template-columns: repeat(auto-fill, minmax(8rem, 10rem)); gap: 1.5rem 2rem; }
.work { text-decoration: none; display: flex; flex-direction: column; color: inherit; }
.work .cover { transition: transform .25s ease, box-shadow .25s ease; transform: perspective(900px) rotateY(10deg); transform-origin: left center; }
.work:hover .cover, .work:focus-visible .cover { transform: perspective(900px) rotateY(0deg) translateY(-6px); }
.work-title { font: 700 1.2rem/1.25 var(--serif); margin-top: 1.1rem; }
.work-sub { font: 400 .98rem/1.4 var(--cond); opacity: .82; margin-top: .25rem; }
.work-sub.big { font-size: 1.2rem; opacity: 1; color: var(--ink-2); margin: 0 0 .6rem; }
.work-meta { font: 500 .95rem var(--cond); opacity: .75; margin-top: .35rem; }
.works-row.small .work-title { font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .work .cover { transition: none; transform: none; } }

.work-ad { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.5rem; max-width: var(--measure); margin: 2.5rem auto 0; padding: 1.5rem; background: var(--sheet); border-left: 4px solid var(--cloth, var(--ink)); }
.work-ad-lead { margin: 0; font: 500 .98rem var(--cond); color: var(--ink-3); }
.work-ad-title { margin: .1rem 0 .2rem; font: 700 1.4rem/1.2 var(--serif); }
.work-ad-title a { text-decoration: none; }
.work-ad-sub { margin: 0 0 .5rem; font: 400 1rem/1.4 var(--cond); color: var(--ink-2); }
.work-ad-desc { margin: 0 0 1rem; font-size: 1rem; color: var(--ink-2); }
.work-ad-actions { margin: 0; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.work-ad-price { font: 600 1.05rem var(--cond); }
.btn-ink { display: inline-block; font: 600 1.02rem var(--cond); color: var(--paper); background: var(--ink); padding: .55rem 1rem; border-radius: 3px; text-decoration: none; }
.btn-ink:hover { background: var(--red); color: #fff; }
.page > .work-ad { margin: 0 0 2rem; max-width: 46rem; }
@media (max-width: 520px) { .work-ad { grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: 1rem; } }

.works-list { display: grid; gap: 3.5rem; max-width: 56rem; }
.work-row { display: grid; grid-template-columns: 13rem 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.work-row h2 { font: 700 1.9rem/1.15 var(--serif); margin: 0 0 .4rem; }
.work-row h2 a { text-decoration: none; }
.work-row p { max-width: 60ch; }
.cover-l { width: 100%; }
.work-page { display: grid; grid-template-columns: minmax(12rem, 22rem) 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; margin-top: .5rem; }
.work-page h1 { font: 700 clamp(2.1rem, 5vw, 3.2rem)/1.08 var(--serif); margin: 0 0 .6rem; letter-spacing: -0.015em; }
.work-page .work-meta { opacity: 1; color: var(--ink-3); font-size: 1.05rem; }
.work-desc { font-size: 1.12rem; line-height: 1.7; max-width: 38rem; margin-top: 1.25rem; }
.work-link { font: 600 1.05rem var(--cond); }
.work-link a { color: var(--ink); text-decoration-color: var(--red); }
.reserve .small.first { margin: -.5rem 0 .5rem; }
@media (max-width: 760px) { .work-row, .work-page { grid-template-columns: 1fr; } .work-row > a, .work-page-cover { max-width: 14rem; } }

/* ---- single text */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); z-index: 20; }
@supports (animation-timeline: scroll()) {
  .read-progress { animation: progress linear both; animation-timeline: scroll(root); }
  @keyframes progress { to { transform: scaleX(1); } }
}
.topic-chip { display: inline-block; font: 600 .95rem var(--cond); color: #fff !important; background: var(--cloth, var(--ink)); padding: .2rem .6rem; border-radius: 2px; text-decoration: none !important; margin-right: .4rem; }
.topic-chip.series { background: var(--ink); }
.topic-chip:hover { filter: brightness(1.15); }
.post-head .kicker { margin-bottom: 1.1rem; }
.excerpt-note { margin: 1rem 0 0; font: 500 1.05rem var(--cond); background: var(--sheet); border-left: 4px solid var(--red); padding: .7rem 1rem; }
.excerpt-note a { font-weight: 700; }
.prose.dropcap > p:first-of-type::first-letter { float: left; font: 700 4.2em/0.82 var(--serif); padding: .06em .1em 0 0; color: var(--red); }
.post-tools { max-width: var(--measure); margin: 2.5rem auto 0; display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: center; font: 500 1rem var(--cond); padding-top: 1rem; border-top: 1px solid var(--rule); }
.share-label { color: var(--ink-3); }
.post-tools a { text-decoration-color: var(--rule); }
.post-tools .random { margin-left: auto; font-weight: 600; }

/* ---- workshop + shop side by side on the home page */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: clamp(2rem, 5vw, 4rem); }
.shelf.small { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 10.5rem)); gap: 1.5rem; }

.about-works { margin-top: 2.5rem; border-top: 2px solid var(--ink); padding-top: 1rem; }
.about-works h2 { font: 700 1.3rem var(--serif); margin: 0 0 1.25rem; }
@media (max-width: 640px) {
  .works-row { display: flex; overflow-x: auto; gap: 1.5rem; scroll-snap-type: x mandatory; padding: .5rem 0 1rem; -webkit-overflow-scrolling: touch; }
  .works-row .work { flex: 0 0 10.5rem; scroll-snap-align: start; }
  .works-row.small .work { flex-basis: 8rem; }
  .desk .leaf { max-width: 15rem; padding-top: 2rem; }
  .desk .leaf-day { font-size: 7rem; }
}

/* ---- bookshop */
.shop-hero { background: linear-gradient(180deg, #1f4639, #173a2f); color: #eef3ef; padding-block: clamp(2rem, 5vw, 3.25rem); border-bottom: 4px solid var(--red); }
.shop-hero-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: end; }
.shop-hero h1 { font: 700 clamp(2.2rem, 5vw, 3.2rem)/1.05 var(--serif); margin: 0 0 .75rem; letter-spacing: -0.015em; }
.shop-hero .lead { color: #c9dbd2; margin: 0; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: .8rem; font: 400 1.02rem/1.45 var(--cond); color: #dfe9e4; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.2rem 1fr; gap: .6rem; align-items: baseline; }
.steps li::before { content: counter(step); font: 700 1.6rem/1 var(--cond); color: #f3dd8a; }
.steps strong { color: #fff; font-weight: 600; }
.steps a { color: #fff; }
.filter { align-items: baseline; margin: 0 0 1.75rem; }
.filter-n { margin-left: auto; color: var(--ink-3); font-weight: 400; }
.spine { background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(255,255,255,.08) 6%, transparent 12%), var(--cloth); }
.shop-own { margin-top: 4rem; border-top: 2px solid var(--ink); padding-top: 1.25rem; }
.shop-own h2 { font: 700 1.5rem var(--serif); margin: 0 0 1.5rem; }
@media (max-width: 760px) { .shop-hero-row { grid-template-columns: 1fr; } }