/* FARMHOUSE — public site in the «Фермерский сад, винтаж» style.
   Spec: docs/STYLE.md; look reference: docs/style/reference.html (#mock).
   Mobile-first: fonts → tokens → base → components → sections → pages. Works without JS (site.js only enhances).
   Engravings (.eng) are alpha masks painted with --eng: olive on paper, cream at half strength in the evening theme. */

/* --- fonts: self-hosted woff2, cyrillic + latin subsets, SIL OFL (../fonts/OFL.txt, docs/ASSETS.md) --- */
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400 500; font-display: swap; src: url("../fonts/cormorant-garamond-var-italic-latin.3e2c4175a96d.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400 500; font-display: swap; src: url("../fonts/cormorant-garamond-var-italic-cyrillic.b554abc2d050.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/cormorant-garamond-var-latin.c47ff12887a3.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/cormorant-garamond-var-cyrillic.e1df04190d1b.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Cormorant SC"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-sc-500-latin.1509ff8ddfa9.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant SC"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-sc-500-cyrillic.3c16f61f110a.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/pt-serif-400-italic-latin.9b2614b19ca1.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/pt-serif-400-italic-cyrillic.6952857447b8.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/pt-serif-400-latin.48b1fa647f5c.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/pt-serif-400-cyrillic.093d7682a4bb.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/pt-serif-700-latin.cd87c62c9c9c.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/pt-serif-700-cyrillic.0c5cf5874944.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Bad Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/bad-script-400-latin.cd7e79cd4deb.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bad Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/bad-script-400-cyrillic.2624e2a9dfce.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Tenor Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/tenor-sans-400-latin.168c97047066.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Tenor Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/tenor-sans-400-cyrillic.c750776e99bb.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400-latin.79936b18df9f.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400-cyrillic.2f3900b11191.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* --- tokens ------------------------------------------------------------------ */
:root {
  color-scheme: light;
  --paper: #F6EFE6;
  --paper-kraft: #ECE2D4;
  --blush: #E6D8D7;
  --rose: #C4AEAD;
  --rose-powder: #DDC0BE;
  --ink: #451D1D;
  --ink-muted: rgb(69 29 29 / 72%);
  --on-rose: #451D1D;        /* text on rose/powder in both themes — white on rose is 2:1, never */
  --moss: #2F3A2A;
  --olive: #5E6345;
  --sage: #8E9A78;
  --terracotta: #A9694B;
  --cream: #F1E8DC;
  --on-photo: #F6EFE6;
  --line: rgb(94 99 69 / 45%);
  --line-soft: rgb(94 99 69 / 22%);
  --backdrop: rgb(47 58 42 / 45%);
  --eng: var(--olive);
  --eng-dim: 1;

  --f-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --f-engraved: "Cormorant SC", "Cormorant Garamond", Georgia, serif;
  --f-body: "PT Serif", Georgia, "Times New Roman", serif;
  --f-caps: "Tenor Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-script: "Bad Script", "Segoe Script", cursive;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, "Courier New", monospace;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .27 0 0 0 0 .2 0 0 0 0 .14 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* the hand-drawn double rule (partials/rule.html) as a mask, for pseudo-elements */
  --rule-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 8' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 2.6C40 1.8 80 3.4 130 2.4S230 1.6 290 2.9 370 2.2 400 2.5'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 6C50 5.2 95 6.8 150 5.8S250 5.1 310 6.3 375 5.6 400 5.9'/%3E%3C/g%3E%3C/svg%3E");
  /* the tag («бирка»): hairline frame with cut corners, 9-slice via border-image */
  --label-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 .5h14a5 5 0 0 0 4.5 4.5v14a5 5 0 0 0-4.5 4.5H5A5 5 0 0 0 .5 19V5A5 5 0 0 0 5 .5z' fill='%23F6EFE6' stroke='%235E6345'/%3E%3C/svg%3E");

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
  --radius: 2px;
  --dur: 220ms;
  --dur-slow: 450ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --content: 38rem;          /* post column: ~65 characters of PT Serif */
  --wide: 1180px;
  --bar-h: 60px;
  --mast-h: 61px;            /* bar + border; the desktop menu row adds to it */
}

/* Evening garden. Same values twice: the OS preference, and an explicit [data-theme] on <html>. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #221C19; --paper-kraft: #2C2420; --blush: #33292A;
    --rose: #D9B8B5; --rose-powder: #C9A5A2;
    --ink: #F1E8DC; --ink-muted: rgb(241 232 220 / 72%);
    --olive: #B9BC98; --sage: #9FAA8A; --terracotta: #D09474;
    --line: rgb(185 188 152 / 40%); --line-soft: rgb(185 188 152 / 20%);
    --backdrop: rgb(10 8 6 / 60%);
    --eng: #F1E8DC; --eng-dim: .5;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .91 0 0 0 0 .86 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --label-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 .5h14a5 5 0 0 0 4.5 4.5v14a5 5 0 0 0-4.5 4.5H5A5 5 0 0 0 .5 19V5A5 5 0 0 0 5 .5z' fill='%23221C19' stroke='%23B9BC98'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #221C19; --paper-kraft: #2C2420; --blush: #33292A;
  --rose: #D9B8B5; --rose-powder: #C9A5A2;
  --ink: #F1E8DC; --ink-muted: rgb(241 232 220 / 72%);
  --olive: #B9BC98; --sage: #9FAA8A; --terracotta: #D09474;
  --line: rgb(185 188 152 / 40%); --line-soft: rgb(185 188 152 / 20%);
  --backdrop: rgb(10 8 6 / 60%);
  --eng: #F1E8DC; --eng-dim: .5;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .91 0 0 0 0 .86 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --label-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 .5h14a5 5 0 0 0 4.5 4.5v14a5 5 0 0 0-4.5 4.5H5A5 5 0 0 0 .5 19V5A5 5 0 0 0 5 .5z' fill='%23221C19' stroke='%23B9BC98'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* --- base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--mast-h) + 16px); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--paper) var(--grain); color: var(--ink);
  font: 17px/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; padding-block: var(--s-5) var(--s-8); }
main.main--flush { padding-block: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
a:hover { color: var(--olive); }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.08; letter-spacing: .01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 9vw, 4rem); }
h2 { font-size: clamp(2rem, 6vw, 3.2rem); }
h1 em, h2 em, h3 em { font-style: italic; }
p { margin: 0 0 var(--s-4); }
ul { margin: 0; padding: 0; list-style: none; }

.container { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--s-4); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--paper); padding: var(--s-2) var(--s-3); }
.skip-link:focus { left: var(--s-3); }

/* three voices + typewriter */
.eyebrow { font: 11.5px/1.4 var(--f-caps); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--s-3); }
.lead { font-size: 1.1rem; color: var(--ink-muted); max-width: 42rem; }
.script { font-family: var(--f-script); font-weight: 400; font-style: normal; letter-spacing: 0; text-transform: none; }
.mono { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .07em; }

.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rule { display: block; width: 100%; height: 8px; color: var(--olive); margin-top: var(--s-5); }
.rule path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }

/* --- engravings: decorative, never in the way ------------------------------- */
.eng {
  display: block; background: var(--eng); opacity: calc(var(--o, .5) * var(--eng-dim));
  pointer-events: none; user-select: none;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-image: var(--m); mask-image: var(--m);
}
/* Soft edges for engravings whose crop line would otherwise show as a straight cut. */
.eng--fade, .card__placeholder .eng, .page-top__decor, .meet__rose, .wreath .eng, .error-page__eng {
  -webkit-mask-image: var(--m), radial-gradient(closest-side, #000 62%, transparent);
  mask-image: var(--m), radial-gradient(closest-side, #000 62%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.eng--basket { aspect-ratio: 512 / 720; --m: url("../img/decor/engravings/basket.3a43fba5c49c.webp"); }
.eng--bee { aspect-ratio: 460 / 503; --m: url("../img/decor/engravings/bee.51c0b5fa24ac.webp"); }
.eng--chamomile { aspect-ratio: 639 / 720; --m: url("../img/decor/engravings/chamomile.9c4bc2ff0c14.webp"); }
.eng--cornflower { aspect-ratio: 521 / 720; --m: url("../img/decor/engravings/cornflower.57fec184b9d7.webp"); }
.eng--dragonfly { aspect-ratio: 600 / 710; --m: url("../img/decor/engravings/dragonfly.6762aae23b54.webp"); }
.eng--grass { aspect-ratio: 264 / 720; --m: url("../img/decor/engravings/grass.d2d43c58deb4.webp"); }
.eng--pea { aspect-ratio: 582 / 720; --m: url("../img/decor/engravings/pea.b8d3452ff4d6.webp"); }
.eng--wildrose { aspect-ratio: 490 / 720; --m: url("../img/decor/engravings/wildrose.37633b4b9083.webp"); }
.eng--wreath { aspect-ratio: 720 / 486; --m: url("../img/decor/engravings/wreath.597bfa055241.webp"); }

/* A full-width band that lets an engraving peek in from beyond its edge without a horizontal scroll. */
.sheet { position: relative; overflow: hidden; overflow: clip; }
.sheet > .container { position: relative; }
.sheet--kraft { background: var(--paper-kraft) var(--grain); }
.sheet--blush { background: var(--blush) var(--grain); }
.sec { padding-block: 56px; }
@media (min-width: 720px) { .sec { padding-block: 80px; } }
.sec-head { max-width: 760px; margin-bottom: var(--s-6); }
.sec-head--center { text-align: center; margin-inline: auto; }
.sec-head--center .lead { margin-inline: auto; }

/* page heads of lists: eyebrow + heading with one italic word, an engraving at the right edge */
.page-top__decor { position: absolute; top: -8px; right: -44px; width: 124px; --o: .28; }
@media (min-width: 720px) { .page-top__decor { width: clamp(180px, 19vw, 280px); right: -36px; top: 4px; --o: .45; } }
.page-top__decor--tall { width: 64px; right: -6px; }
@media (min-width: 720px) { .page-top__decor--tall { width: 110px; right: 2%; } }

/* --- buttons, inputs, chips, tags ------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 46px; padding: 0 var(--s-5); border: 1px solid var(--rose); border-radius: var(--radius);
  background: var(--rose); color: var(--on-rose); cursor: pointer; text-decoration: none;
  font: 12px/1 var(--f-caps); letter-spacing: .2em; text-transform: uppercase;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--rose-powder); border-color: var(--rose-powder); color: var(--on-rose); }
.btn--ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--light { background: transparent; border-color: rgb(246 239 230 / 85%); color: var(--on-photo); }
.btn--light:hover { background: var(--on-photo); border-color: var(--on-photo); color: #451D1D; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.actions--start { justify-content: flex-start; }

input, textarea {
  width: 100%; font: inherit; color: inherit; background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px var(--s-3); min-height: 46px;
}
input::placeholder, textarea::placeholder { color: var(--ink-muted); opacity: .8; }
input:focus-visible, textarea:focus-visible { outline: none; border-color: var(--olive); box-shadow: 0 0 0 1px var(--olive); }
input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  min-height: 38px; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--radius);
  font: 11.5px/1 var(--f-caps); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--ink);
}
.chip:hover { border-color: var(--olive); color: var(--ink); background: var(--paper-kraft); }
.chip[aria-current="page"] { background: var(--moss); border-color: var(--moss); color: var(--cream); }
.chip__n { font-size: 10px; opacity: .65; letter-spacing: .05em; }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tag { font: italic 1.05rem/1.3 var(--f-display); text-decoration: none; color: var(--olive); padding: 2px 0; }
.tag:hover { color: var(--ink); text-decoration: underline; }

/* «бирка»: a label with cut corners — year of a book, «скоро» on the shop window */
.label {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; margin: 0;
  padding: 3px 12px; border: 7px solid transparent; border-image: var(--label-frame) 7 fill / 7px;
  font: 11px/1 var(--f-caps); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
}

/* --- masthead (sticky header) ----------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 20; color: var(--ink);
  background: var(--paper) var(--grain); border-bottom: 1px solid var(--line-soft);
  padding-top: env(safe-area-inset-top);
}
.masthead__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: var(--bar-h); gap: var(--s-2); }
.masthead__menu { justify-self: start; margin-left: -10px; }
.masthead__actions { justify-self: end; display: flex; gap: 2px; margin-right: -10px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius);
  background: transparent; color: inherit; cursor: pointer; text-decoration: none; padding: 0; position: relative;
}
.icon-btn:hover { color: var(--olive); background: var(--paper-kraft); }
.icon-btn[aria-expanded="true"] { background: var(--paper-kraft); }
.icon-btn--on::after { content: ""; position: absolute; top: 10px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); }

/* logo «лесенка»: engraved capitals + one handwritten line (desktop) */
.logo { display: grid; justify-items: center; text-decoration: none; color: inherit; line-height: 1; }
.logo:hover { color: inherit; }
.logo__word { font: 500 1.4rem/1 var(--f-engraved); letter-spacing: .2em; margin-right: -.2em; }
.logo__sub { display: none; font: 1.15rem/1 var(--f-script); color: var(--olive); margin-top: 5px; }

.masthead__search { display: flex; gap: var(--s-2); padding-bottom: var(--s-3); }
.masthead__search[hidden] { display: none; }
.masthead__search input { flex: 1; min-width: 0; }
.masthead__search .btn { padding-inline: var(--s-4); }
.js .masthead__search:not([hidden]) { animation: drop-in var(--dur) var(--ease); }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } }

.masthead__nav { display: none; }

@media (min-width: 960px) {
  :root { --bar-h: 84px; --mast-h: 132px; }
  .container { padding-inline: var(--s-6); }
  .logo__word { font-size: 2rem; letter-spacing: .16em; margin-right: -.16em; }
  .logo__sub { display: block; }
  .masthead__nav { display: block; border-top: 1px solid var(--line-soft); }
  .masthead__nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1) var(--s-6); padding-block: var(--s-3); }
  .masthead__nav a { font: 11.5px/1.4 var(--f-caps); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; padding-block: 4px; border-bottom: 1px solid transparent; }
  .masthead__nav a:hover, .masthead__nav a[aria-current="page"] { border-bottom-color: currentColor; color: inherit; }
}

/* Over the hero photo (home, page 1): transparent, cream ink. site.js pins it back as a paper bar
   (.is-stuck) once the photo scrolls away; without JS it simply scrolls away with the photo. */
.masthead--over { position: absolute; inset: 0 0 auto; }
.masthead--over:not(.is-stuck) { background: transparent; color: var(--on-photo); border-bottom-color: rgb(246 239 230 / 28%); }
.masthead--over:not(.is-stuck) .logo__sub { color: inherit; }
.masthead--over:not(.is-stuck) .icon-btn:hover,
.masthead--over:not(.is-stuck) .icon-btn[aria-expanded="true"] { color: inherit; background: rgb(246 239 230 / 14%); }
.masthead--over:not(.is-stuck) .masthead__nav { border-top-color: rgb(246 239 230 / 28%); }
.masthead--over:not(.is-stuck) input { border-color: rgb(246 239 230 / 70%); }
.masthead--over:not(.is-stuck) input::placeholder { color: rgb(246 239 230 / 80%); }
.masthead--over.is-stuck { position: fixed; animation: mast-in var(--dur-slow) var(--ease); }
@keyframes mast-in { from { transform: translateY(-100%); } }

/* --- drawer (burger menu) --------------------------------------------------- */
.drawer {
  position: fixed; inset: 0 auto 0 0; margin: 0; height: 100%; max-height: none;
  width: min(88vw, 380px); padding: var(--s-4) var(--s-5) var(--s-7); border: 0; border-right: 1px solid var(--line);
  background: var(--paper) var(--grain); color: var(--ink); overflow-y: auto; overscroll-behavior: contain;
  transition: transform var(--dur-slow) var(--ease);
}
/* Slide in on open only; closing is instant so the fading backdrop never swallows the next tap. */
@starting-style { .drawer[open] { transform: translateX(-100%); } }
.drawer::backdrop { background: var(--backdrop); transition: opacity var(--dur-slow) var(--ease); }
@starting-style { .drawer[open]::backdrop { opacity: 0; } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin: 0 -10px var(--s-5) 0; padding-top: env(safe-area-inset-top); }
.drawer__title { margin: 0; font: 500 1.2rem/1 var(--f-engraved); letter-spacing: .2em; }
.drawer__sections li { border-bottom: 1px solid var(--line-soft); }
.drawer__sections a { display: block; padding: 11px 0; font: 400 1.5rem/1.2 var(--f-display); text-decoration: none; }
.drawer__sections a[aria-current="page"], .drawer__links a[aria-current="page"] { font-style: italic; color: var(--olive); }
.drawer__links { margin-top: var(--s-3); }
.drawer__links a { display: block; padding: 10px 0; font: 12px/1.4 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.drawer__tags { margin-top: var(--s-6); }
.drawer__tags .tag-list { gap: var(--s-1) var(--s-4); }
.drawer__decor { width: 64px; margin: var(--s-7) 0 0 auto; --o: .5; }
body.drawer-open { overflow: hidden; }

/* --- page heads ------------------------------------------------------------- */
.page-head { padding-block: var(--s-4) var(--s-6); }
.page-head h1 { margin-bottom: var(--s-3); }
.page-head--center { text-align: center; }
.page-head--center .lead { margin-inline: auto; }
.page-head--center .breadcrumbs { justify-content: center; }
.page-head__page { font-size: .5em; color: var(--ink-muted); white-space: nowrap; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); font: 11.5px/1.4 var(--f-caps); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

.tag-filter { margin-top: var(--s-5); margin-inline: calc(-1 * var(--s-4)); }
.tag-filter ul { display: flex; gap: var(--s-2); overflow-x: auto; padding: 2px var(--s-4) var(--s-2); scrollbar-width: none; }
.tag-filter ul::-webkit-scrollbar { display: none; }
@media (min-width: 720px) { .tag-filter { margin-inline: 0; } .tag-filter ul { flex-wrap: wrap; overflow: visible; padding-inline: 0; } }

.search-form { display: flex; gap: var(--s-2); max-width: 560px; margin-top: var(--s-4); }
.search-form input { flex: 1; min-width: 0; font-size: 1.05rem; }
.search-count { margin: var(--s-4) 0 0; color: var(--ink-muted); }

/* --- feed and cards --------------------------------------------------------- */
.feed { display: grid; gap: var(--s-6) var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 720px) { .feed { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .feed { grid-template-columns: repeat(3, 1fr); } }

.card { display: flex; flex-direction: column; min-width: 0; }
/* a hand-drawn double rule above every card except those in the first row */
.card::before {
  content: ""; display: block; height: 8px; margin-bottom: var(--s-6); background: var(--olive); opacity: .8;
  -webkit-mask: var(--rule-mask) 0 0 / 100% 100% no-repeat; mask: var(--rule-mask) 0 0 / 100% 100% no-repeat;
}
.feed > .card:first-child::before { display: none; }
@media (min-width: 720px) { .feed:not(.feed--lead) > .card:nth-child(2)::before { display: none; } }
@media (min-width: 1080px) { .feed:not(.feed--lead) > .card:nth-child(3)::before { display: none; } }

.card__cover { display: block; text-decoration: none; overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-kraft); outline: 1px solid var(--line); outline-offset: 5px; margin: 6px; }
.card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.card:hover .card__cover img { transform: scale(1.03); }
.card__placeholder { position: relative; display: grid; place-items: center; height: 100%; background: var(--paper-kraft) var(--grain); }
.card__placeholder .eng { position: absolute; top: 10%; left: 50%; height: 80%; translate: -50% 0; --o: .3; }
.card__placeholder-label { position: relative; font: 500 13px/1.4 var(--f-engraved); letter-spacing: .25em; text-transform: uppercase; color: var(--ink); padding: var(--s-2) var(--s-4); text-align: center; border-block: 1px solid var(--line); background: var(--paper-kraft); }
.card__body { padding-top: var(--s-4); }
.card__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin: 0 0 var(--s-2); font: 11px/1.5 var(--f-caps); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }
.card__section { color: var(--olive); text-decoration: none; }
.card__section:hover { text-decoration: underline; }
.card__meta time::before { content: "·"; margin-right: var(--s-3); }
.card__meta time:first-child::before { content: none; }
.card__title { font-size: 1.75rem; line-height: 1.1; margin-bottom: var(--s-2); }
.card__title a { text-decoration: none; }
.card__title a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; }
.card__excerpt { color: var(--ink-muted); font-size: .98rem; margin-bottom: var(--s-3); }
.card__tags { display: flex; flex-wrap: wrap; gap: 2px var(--s-3); }
.card__tags a { font: italic 1.05rem/1.3 var(--f-display); color: var(--olive); text-decoration: none; }
.card__tags a:hover { text-decoration: underline; color: var(--ink); }

@media (min-width: 720px) {
  .feed--lead > .card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s-7); align-items: center; }
  .feed--lead > .card:first-child .card__title { font-size: clamp(2.2rem, 3.6vw, 3rem); }
  .feed--lead > .card:first-child .card__excerpt { font-size: 1.05rem; }
}

.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-4); margin-top: var(--s-7); }
.pager__link { font: 12px/1 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; padding: 14px 0; }
.pager__link[rel="next"] { justify-self: end; }
.pager__link[rel="prev"]::before { content: "← "; }
.pager__link[rel="next"]::after { content: " →"; }
.pager__info { font: italic 1.15rem var(--f-display); color: var(--ink-muted); }
.empty { color: var(--ink-muted); padding-block: var(--s-6); font-style: italic; }
.empty--center { text-align: center; }

/* --- home: hero ------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center; min-height: clamp(540px, 84svh, 760px);
  padding: calc(var(--mast-h) + 40px) 0 64px; text-align: center; color: var(--on-photo); background: var(--moss);
}
.hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
/* the reference's darkening: deeper at the top (menu) and the bottom (credit) */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgb(30 20 16 / 58%), rgb(30 20 16 / 38%) 45%, rgb(30 20 16 / 60%)); }
.hero__title { font: 400 clamp(2.3rem, 8.6vw, 4.5rem)/1.02 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.hero__title em { text-transform: none; }
.hero__sub { font-style: italic; max-width: 34rem; margin: var(--s-4) auto var(--s-6); }
.hero__credit { position: absolute; right: 12px; bottom: 10px; margin: 0; font: 10px/1 var(--f-caps); letter-spacing: .12em; text-transform: uppercase; opacity: .72; }

/* running line of sections */
.marquee { overflow: hidden; border-bottom: 1px solid var(--line); padding: 14px 0; }
.marquee__track { display: flex; width: max-content; animation: marquee 70s linear infinite; font: 11.5px/1 var(--f-caps); letter-spacing: .24em; text-transform: uppercase; }
.marquee__track span { padding-inline: 16px; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* manifesto: typewriter capitals with one handwritten word, engravings beyond the edges */
.manifest { text-align: center; }
.manifest__text { font: 15px/1.85 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; max-width: 680px; margin: 0 auto var(--s-6); }
.manifest__text .script { font-size: 1.6em; line-height: 1; color: var(--olive); }
.manifest__pea { position: absolute; right: -56px; top: 6px; width: 140px; --o: .3; }
.manifest__grass { position: absolute; left: -14px; bottom: -48px; width: 64px; --o: .4; }
@media (min-width: 720px) {
  .manifest__text { font-size: 17px; }
  .manifest__pea { width: 250px; right: -40px; top: 10px; --o: .5; }
  .manifest__grass { width: 110px; left: -10px; bottom: -40px; --o: .55; }
}

/* full-width band of flowers */
.band { height: 170px; overflow: hidden; background: var(--paper-kraft); }
.band img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
@media (min-width: 720px) { .band { height: 260px; } }

/* sections as torn notes */
.notes-sec__grid { display: grid; gap: var(--s-7); }
.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--s-7) var(--s-6); justify-items: center; }
.notes li { width: 100%; max-width: 280px; filter: drop-shadow(0 8px 10px rgb(40 25 20 / 14%)); transform: rotate(-1.5deg); }
.notes li:nth-child(even) { transform: rotate(1.2deg); }
.note {
  display: block; position: relative; padding: 30px 26px 50px; text-decoration: none; color: var(--ink);
  background: var(--paper) var(--grain);
  clip-path: polygon(0 0,100% 0,100% 92%,96% 94%,92% 92.5%,87% 95%,82% 93%,77% 95.5%,71% 93.2%,66% 95%,60% 92.8%,55% 95.6%,49% 93%,44% 95.2%,38% 92.6%,33% 95%,27% 93.3%,22% 95.4%,16% 92.9%,11% 95%,5% 93%,0 95%);
}
.note::before { content: ""; position: absolute; inset: 9px 9px 26px; border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: -5px; pointer-events: none; }
.note:hover { color: var(--ink); }
.note:hover .note__title { text-decoration: underline; text-decoration-thickness: 1px; }
.note__title { position: relative; display: block; font: 400 1.85rem/1.05 var(--f-display); }
.note .eyebrow { position: relative; display: block; margin: var(--s-3) 0 0; }
.notes-sec__stamp { position: relative; width: 150px; height: 150px; margin: 0 auto; color: var(--olive); transform: rotate(-8deg); }
.notes-sec__stamp svg { width: 100%; height: 100%; }
.notes-sec__stamp .eng { position: absolute; left: 50%; top: 50%; width: 54px; translate: -50% -50%; --o: .9; }
@media (min-width: 960px) {
  .notes-sec__grid { grid-template-columns: minmax(260px, 1fr) 2fr; align-items: center; }
  .notes-sec__grid .sec-head { margin-bottom: var(--s-6); }
  .notes-sec__stamp { margin: 0; width: 170px; height: 170px; }
}

/* meet Tanya: oval portrait in a double line + handwritten signature */
.meet__grid { display: grid; gap: var(--s-7); align-items: center; }
.oval { width: min(100%, 240px); margin-inline: auto; aspect-ratio: 4 / 5; border-radius: 50%; overflow: hidden; background: var(--blush); box-shadow: 0 0 0 8px var(--paper-kraft), 0 0 0 9px var(--olive); }
.oval img { width: 100%; height: 100%; object-fit: cover; scale: 1.42; } /* the print's paper margins stay outside the oval */
.meet__text p:not(.eyebrow) { max-width: 52ch; }
.meet__text h2 { margin-bottom: var(--s-4); }
.sign { display: inline-block; margin-top: var(--s-3); font: 2.3rem/1 var(--f-script); color: var(--olive); transform: rotate(-3deg); }
.meet__rose { position: absolute; right: -40px; bottom: -40px; width: 130px; --o: .25; }
@media (min-width: 720px) {
  .meet__grid { grid-template-columns: minmax(200px, 300px) 1fr; gap: 64px; }
  .oval { width: 100%; }
  .meet__rose { width: 210px; right: -30px; bottom: -30px; --o: .35; }
}

/* info frame in two columns */
.info { display: grid; max-width: 680px; margin: 0 auto; border: 1px solid var(--ink); text-align: center; }
.info > div { padding: 26px 16px; }
.info > div + div { border-top: 1px solid var(--ink); }
.info .eyebrow { margin-bottom: var(--s-1); }
.info__big { font: 19px/1.3 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; margin: 0 0 var(--s-3); }
.info a { font: 11.5px/1 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; }
@media (min-width: 600px) {
  .info { grid-template-columns: 1fr 1fr; }
  .info > div + div { border-top: 0; border-left: 1px solid var(--ink); }
}

/* --- round stamps (inline SVG) ---------------------------------------------- */
.stamp { display: block; color: var(--olive); overflow: visible; }
.stamp circle { fill: none; stroke: currentColor; }
.stamp__ring { font: 11px var(--f-caps); letter-spacing: .3em; text-transform: uppercase; fill: currentColor; }
.stamp__word { font: italic 32px var(--f-display); fill: currentColor; }

/* --- post / page ------------------------------------------------------------ */
.post { max-width: calc(var(--content) + 2 * var(--s-4)); }
.post__head { padding-top: var(--s-4); margin-bottom: var(--s-6); text-align: center; }
.post__head .breadcrumbs, .post__meta { justify-content: center; }
.post__title { font-size: clamp(2.3rem, 7.5vw, 3.7rem); margin-bottom: var(--s-4); }
.post__meta { display: flex; flex-wrap: wrap; gap: var(--s-3); font: 11.5px/1.5 var(--f-caps); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); margin: 0; }
.post__meta span::before { content: "·"; margin-right: var(--s-3); }
.post__cover { margin: 0 6px var(--s-7); outline: 1px solid var(--line); outline-offset: 6px; }
.post__cover img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 960px) { .post__cover { margin-inline: -80px; } }
.post__end { width: 88px; margin: var(--s-7) auto 0; --o: .75; }
.post__tags { margin-top: var(--s-6); gap: var(--s-1) var(--s-4); justify-content: center; }
.page .post__head { text-align: center; }

.prose { font-size: 1.07rem; }
.prose > * + * { margin-top: var(--s-4); }
.prose p { margin: 0; }
/* a drop cap in the display face when the text opens with a paragraph */
.prose--initial > p:first-child::first-letter { float: left; margin: .08em .12em 0 0; font: 400 4.3em/.8 var(--f-display); color: var(--olive); }
.prose h2 { font-size: clamp(1.7rem, 4.5vw, 2.2rem); margin-top: var(--s-7); }
.prose h3 { font-size: 1.5rem; margin-top: var(--s-6); }
.prose a { color: var(--olive); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose li + li { margin-top: var(--s-1); }
.prose img { margin-block: var(--s-5); }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.prose figure { margin: var(--s-5) 0; }
.prose figcaption { color: var(--ink-muted); font-size: .9rem; text-align: center; margin-top: var(--s-2); }
.prose blockquote { margin: var(--s-6) 0; padding: var(--s-4) 0; border-block: 1px solid var(--line); text-align: center; font: italic 1.5rem/1.4 var(--f-display); }
.prose hr { height: 8px; border: 0; margin-block: var(--s-7); background: var(--olive); -webkit-mask: var(--rule-mask) 0 0 / 100% 100% no-repeat; mask: var(--rule-mask) 0 0 / 100% 100% no-repeat; }
.prose pre { overflow-x: auto; background: var(--paper-kraft); padding: var(--s-3); border-radius: var(--radius); font: .9rem/1.6 var(--f-mono); }
.prose code { font-family: var(--f-mono); font-size: .9em; }
.prose table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: var(--s-2); }

.related, .comments { max-width: var(--wide); margin-top: var(--s-8); }
.related .sec-head, .comments h2 { margin-bottom: var(--s-6); }
.comments { max-width: calc(var(--content) + 2 * var(--s-4)); }
.comment { border-top: 1px solid var(--line-soft); padding-block: var(--s-4); }
.comment--reply { margin-left: var(--s-5); }
.comment__author { font-weight: 700; margin: 0 0 var(--s-1); }
.comment__author time { color: var(--ink-muted); font-weight: 400; font-size: .85rem; margin-left: var(--s-2); }
.comment__body { margin: 0; }
.comment-form { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.comment-form label { display: grid; gap: var(--s-1); font: 11.5px/1.4 var(--f-caps); letter-spacing: .16em; text-transform: uppercase; }
.comment-form label input, .comment-form label textarea { font: 1rem/1.5 var(--f-body); letter-spacing: 0; text-transform: none; }
.comment-form .hint { color: var(--ink-muted); font-size: .88rem; margin: 0; }
.comment-form .btn { justify-self: start; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* --- arches: library shelf, shop window ------------------------------------- */
.arch { display: block; text-decoration: none; color: inherit; }
.arch__frame { display: block; padding: 7px; border: 1px solid var(--line); border-radius: 999px 999px 0 0; }
.arch__window { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--blush) var(--grain); }
.arch__window > img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.arch:hover .arch__window img { transform: scale(1.03); }
/* a book standing in the niche instead of a photo cropped by the arch */
.arch__window--niche { display: flex; align-items: flex-end; justify-content: center; padding: 0 18% 12%; }
.arch__window--niche > img, .arch__window--niche > .book-blank { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; outline: 1px solid var(--line); outline-offset: 4px; }

/* --- library ---------------------------------------------------------------- */
.wreath { position: relative; display: grid; place-items: center; width: 210px; aspect-ratio: 900 / 608; margin: 0 auto var(--s-3); }
.wreath .eng { position: absolute; inset: 0; width: 100%; --o: .8; }
.wreath__text { position: relative; margin-top: -10px; font: 500 15px/1.1 var(--f-engraved); letter-spacing: .2em; text-transform: uppercase; }

/* auto-fit + centered: one or two books sit in the middle instead of hugging the left edge */
.books { display: grid; gap: var(--s-8) var(--s-6); grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); justify-content: center; }
.book-card { text-align: center; display: flex; flex-direction: column; align-items: center; }
.book-card .arch { width: min(100%, 280px); }
.book-card .label { margin-top: -18px; position: relative; }
.book-card__title { font-size: 1.8rem; margin: var(--s-4) 0 var(--s-1); }
.book-card__title a { text-decoration: none; }
.book-card__subtitle { font-style: italic; color: var(--ink-muted); margin-bottom: var(--s-2); }
.book-card__text { font-size: .96rem; color: var(--ink-muted); }
.book-blank { display: grid; place-items: center; padding: var(--s-4); background: var(--moss) var(--grain); color: var(--cream); font: italic 1.3rem/1.2 var(--f-display); text-align: center; }
.link-arrow { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: auto; font: 11.5px/1 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; padding: 12px 0; }
.link-arrow .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }

.book__grid { display: grid; gap: var(--s-7); }
.book__cover { margin: 0 auto; width: min(100%, 320px); aspect-ratio: 2 / 3; outline: 1px solid var(--line); outline-offset: 8px; background: var(--paper-kraft); }
.book__cover img, .book__cover .book-blank { width: 100%; height: 100%; object-fit: cover; }
.book__title { font-size: clamp(2.3rem, 7vw, 3.4rem); margin-bottom: var(--s-3); }
.book__details { font: 12px/1.6 var(--f-caps); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.book__links { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 860px) {
  .book__grid { grid-template-columns: minmax(260px, 360px) 1fr; align-items: start; }
  .book__cover { position: sticky; top: calc(var(--mast-h) + 40px); }
}

/* --- shop teaser ------------------------------------------------------------ */
.soon { display: grid; gap: var(--s-8); align-items: center; max-width: 980px; padding-block: var(--s-5) var(--s-7); }
.soon__art { position: relative; width: min(100%, 290px); margin-inline: auto; }
.soon__art .label { position: absolute; left: 50%; bottom: -18px; translate: -50% 0; }
.soon__stamp { position: absolute; right: -34px; top: -26px; width: 118px; height: 118px; border-radius: 50%; background: var(--paper); transform: rotate(-10deg); }
.soon__text { text-align: center; }
.soon__text h1 { margin-bottom: var(--s-4); }
.soon__text .lead { margin-inline: auto; }
@media (min-width: 800px) {
  .soon { grid-template-columns: minmax(240px, 330px) 1fr; gap: var(--s-8); padding-top: var(--s-7); }
  .soon__text { text-align: left; }
  .soon__text .lead { margin-inline: 0; }
  .soon__text .actions { justify-content: flex-start; }
}

/* --- footer ----------------------------------------------------------------- */
.site-footer { position: relative; background: var(--moss) var(--grain); color: var(--cream); margin-top: 96px; padding: 128px 0 var(--s-6); }
.site-footer__farm {
  position: absolute; left: 0; right: 0; top: 18px; height: 84px; background: var(--cream); opacity: .15; pointer-events: none;
  -webkit-mask: url("../img/decor/engravings/farm.5821acb465de.webp") center / auto 100% repeat-x; mask: url("../img/decor/engravings/farm.5821acb465de.webp") center / auto 100% repeat-x;
}
.seal { position: absolute; left: 50%; top: -64px; width: 128px; height: 128px; transform: translateX(-50%); border-radius: 50%; background: var(--moss); color: var(--cream); padding: 8px; }
.seal circle { fill: none; stroke: currentColor; }
.seal__ring { font: 11px var(--f-caps); letter-spacing: .32em; text-transform: uppercase; fill: currentColor; }
.seal__mono { font: 500 46px var(--f-engraved); fill: currentColor; }
.site-footer__inner { position: relative; display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 720px) { .site-footer__inner { grid-template-columns: repeat(2, 1fr) auto; align-items: start; } }
.site-footer__h { font: 11px/1.4 var(--f-caps); letter-spacing: .24em; text-transform: uppercase; color: rgb(241 232 220 / 62%); margin-bottom: var(--s-3); }
.site-footer ul { display: grid; gap: 2px; }
.site-footer a { color: var(--cream); text-decoration: none; font: 1.2rem/1.9 var(--f-display); }
.site-footer a:hover { color: var(--cream); text-decoration: underline; }
.site-footer__copy { margin: 0; font: 11px/1.6 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; color: rgb(241 232 220 / 62%); align-self: end; }

/* --- misc ------------------------------------------------------------------- */
.flash { margin-bottom: var(--s-5); }
.flash__item { padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-kraft); margin: 0 0 var(--s-2); }
.flash__item--error { border-color: var(--terracotta); }
.preview-banner { background: var(--blush); border: 1px dashed var(--terracotta); color: var(--ink); padding: var(--s-3) var(--s-4); border-radius: var(--radius); margin-bottom: var(--s-5); font-size: .95rem; }
.error-page { text-align: center; padding-block: var(--s-6) var(--s-8); }
.error-page__eng { width: 150px; margin: 0 auto var(--s-5); --o: .6; }
.error-page h1 { margin-bottom: var(--s-4); }
.error-page h1 .script { color: var(--olive); font-size: .92em; }
.error-page .lead { margin-inline: auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .band img { filter: brightness(.88); } }
:root[data-theme="dark"] .band img { filter: brightness(.88); }