/* WBK correction: preserve the original distressed horror poster.
   Existing commerce, product and form components remain in styles.css. */
:root {
  --body:'Jura',Arial,sans-serif;
  --display:'Jura',Arial,sans-serif;
  /* viora-allow: banned-font Cormorant is the existing Cyrillic bookshop identity; Georgia is only an offline fallback. */
  --font-chapter:'Cormorant Horror',Georgia,serif;
  --poster-size:clamp(72px,10vw,144px);
  --poster-height:630px;
  --drawer-width:540px;
  --rail-width:64px;
  --rope-guide:#4f3336;
  --rope-red:#ed3745;
  --poster-red:var(--blood);
  --drawer-surface:#171717;
  --close-border:#8a807e;
  --splash-opacity:1;
  --drawer-art-size:220px;
  --chapter-size:18px;
  --nav-height:44px;
  --nav-padding:14px;
  --contact-art-size:240px;
  --cart-title-size:40px;
  --cart-empty-size:38px;
  --poster-tracking:-.025em;
  --rope-stroke:1.5px;
}
/* 1. The top bar uses one control scale, not a large link next to tiny basket text. */
.nav-right {gap:var(--space-4)}
.nav-links {gap:var(--space-3)}
.nav-links .chapter-link,.cart-trigger {
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--nav-height);min-height:var(--nav-height);padding:0 var(--nav-padding);
  border:1px solid var(--hairline);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);
  font:700 var(--chapter-size)/1 var(--font-chapter);
  letter-spacing:.01em;white-space:nowrap;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.nav-links .chapter-link {position:relative;isolation:isolate}
.chapter-link::after {content:'';position:absolute;left:var(--space-5);right:var(--space-5);bottom:7px;height:2px;background:var(--blood);transform:scaleX(.2);transform-origin:left;opacity:0;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.chapter-link:hover::after,.chapter-link:focus-visible::after,.chapter-link[aria-current="page"]::after {transform:scaleX(1);opacity:1}
.nav-links .chapter-link:hover,.cart-trigger:hover {background:var(--surface-2);border-color:var(--control-border);color:var(--ink)}
.chapter-link:focus-visible {outline:2px solid var(--focus);outline-offset:3px}
.chapter-link:active {transform:translateY(1px)}
.cart-trigger {gap:var(--space-2)}
.cart-trigger>svg {width:18px;height:18px;flex:none}
.cart-label {font:inherit;line-height:1}
.cart-count {border:0;background:var(--blood);color:var(--accent-ink);border-radius:var(--r-sm);min-width:20px;height:20px;font:600 12px/1 var(--body)}
.mobile-menu nav .chapter-link {font-family:var(--font-chapter);font-size:var(--cart-title-size);position:relative}
.mobile-menu .chapter-link::after {left:var(--space-6);right:var(--space-6);bottom:var(--space-3)}
/* 2. Restore the source font treatment AND centered poster. Only alignment is corrected. */
:root {--ink-mask:none}
.horror-hero {border-bottom:1px solid var(--hairline);padding-bottom:var(--space-4)}
.poster-stage {position:relative;display:block;height:var(--poster-height);overflow:visible}
/* viora-allow: eyebrow This is the full-size primary h1, not a kicker; uppercase preserves the explicitly requested original poster. */
.poster-title {position:absolute;inset:var(--space-10) 0 auto;align-self:auto;width:auto;margin:0;padding:0;font:700 var(--poster-size)/1.13 var(--font-chapter);text-transform:uppercase;letter-spacing:0;color:var(--poster-red);text-align:center;text-wrap:nowrap;z-index:0}
.poster-title span,.poster-title span+span {font:inherit;letter-spacing:inherit;margin:0;filter:none;mask-image:none;white-space:nowrap}
.poster-title .poster-line {display:block;position:relative;height:1.13em}
.poster-title .poster-line-second {display:flex;justify-content:space-between;align-items:baseline;margin-top:96px;padding-inline:7% 0;gap:var(--space-6)}
.poster-title .title-give,.poster-title .title-sleep {position:static;display:block;inset:auto;font-size:inherit;line-height:inherit}
.poster-title .ink-word {position:relative;display:inline-block}
.poster-title .ink-text {display:inline-block;mask-image:none;filter:none}
.poster-title .letter-blood {position:absolute;display:block;inset:0;overflow:visible;pointer-events:none}
.poster-title .glyph-flow {display:block;position:absolute;top:.89em;font:inherit}
.poster-title .blood-bead {display:block;position:absolute}
.poster-cat {position:absolute;inset:auto auto 0 50%;transform:translateX(-50%);width:540px;height:585px;max-width:none;max-height:none;object-fit:contain;object-position:center bottom;margin:0;mask-image:none;mix-blend-mode:normal;opacity:1;z-index:1}
.poster-aside {left:0;bottom:var(--space-10);max-width:260px;font-size:var(--text-sm);z-index:2}
.hero-bottom {position:relative;z-index:2}
/* Non-hero type remains readable. The requested rough type is preserved on the poster. */
.horror-section-title {filter:none;mask-image:none}
/* 3. Five COMPLETE ink splashes. No negative offsets, clipping frames or hidden halves. */
.decorated-section {position:relative;isolation:isolate}
.ink-splash-frame {position:relative;inset:auto;overflow:visible;pointer-events:none;z-index:auto;flex:none;line-height:0;aspect-ratio:475/444}
.ink-splash {position:static;display:block;width:100%;height:auto;max-width:100%;z-index:auto;pointer-events:none;opacity:var(--splash-opacity);user-select:none;transform:none}
#catalog .section-head {display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:center;gap:var(--space-12)}
.catalog-title-panel {display:grid;grid-template-columns:minmax(0,1fr) 112px;align-items:center;gap:var(--space-6)}
.splash-catalog {width:112px}
.splash-catalog .ink-splash {transform:scaleX(-1)}
.merch-action-row {display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);margin-top:var(--space-6)}
.merch-action-row .btn {margin:0;flex:0 1 auto}
.splash-merch {width:130px}
.about-title-panel,.help-title-panel {min-width:0}
.splash-about {width:220px;margin:var(--space-8) auto 0 var(--space-5)}
.splash-help {width:180px;margin:var(--space-8) auto 0 var(--space-5)}
.splash-help .ink-splash {transform:scaleX(-1)}
.about-copy {background:var(--canvas)}
.merch-copy {background:var(--surface)}
.footer-top {align-items:flex-start}
.contact-panel {min-width:0;flex:1}
.splash-contacts {width:var(--contact-art-size);max-width:100%;margin:var(--space-6) 0 0}
.splash-contacts .ink-splash {opacity:1}
/* 4. Basket: one close frame, a contained empty state, anchored totals. */
#cartDialog {overscroll-behavior:contain;background:var(--drawer-surface);border-left:1px solid var(--hairline);box-shadow:var(--shadow);padding:env(safe-area-inset-top) 0 0}
#cartDialog::backdrop {background:var(--scrim);backdrop-filter:blur(3px)}
#cartDialog .dialog-head {background:var(--drawer-surface);padding:var(--space-6) var(--space-8);gap:var(--space-4);min-height:112px}
.cart-heading {position:relative;min-width:0;flex:1;padding-right:var(--space-12)}
#cartTitle {font:700 var(--cart-title-size)/1 var(--font-chapter);letter-spacing:-.02em}
#cartSubtitle {font-size:var(--text-xs);color:var(--ink-muted);margin-top:var(--space-2);line-height:1.4}
.drawer-count {position:absolute;right:0;top:0;display:grid;place-items:center;min-width:32px;height:32px;padding-inline:var(--space-2);border:1px solid var(--hairline);border-radius:var(--r-sm);font-size:var(--text-sm);font-variant-numeric:tabular-nums}
#cartDialog [data-close="cartDialog"].icon-btn {flex:none;width:44px;height:44px;border:1px solid var(--close-border);border-radius:var(--r-sm);background:transparent;box-shadow:none}
#cartDialog [data-close="cartDialog"].icon-btn:hover {background:var(--surface-2);border-color:var(--ink)}
#cartDialog [data-close="cartDialog"].icon-btn:focus-visible {outline:2px solid var(--focus);outline-offset:4px}
#cartDialog .drawer-body {min-height:0;padding:var(--space-8);display:flex;flex-direction:column}
#cartView {display:flex;flex-direction:column;flex:1;min-width:0}
#cartView[hidden] {display:none}
.empty-cart {display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:var(--space-6) 0 var(--space-12);text-align:center}
.empty-cart-art {width:var(--drawer-art-size);height:var(--drawer-art-size);margin:0 auto var(--space-6);border-bottom:1px solid var(--hairline)}
.empty-cart-art img {display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.empty-cart h3 {font:700 var(--cart-empty-size)/1.08 var(--font-chapter);letter-spacing:-.02em;max-width:100%}
.empty-cart p {font:500 var(--text-base)/1.6 var(--body);max-width:31ch;margin:var(--space-4) auto var(--space-6);color:var(--ink-muted)}
.empty-cart .btn {min-width:220px;justify-content:center;gap:var(--space-4)}
.empty-cart .btn svg {width:20px;height:20px;margin:0;color:inherit}
.empty-cart .empty-note {font-size:var(--text-xs);margin:var(--space-4) 0 0;color:var(--ink-muted)}
.cart-lines {width:100%}
.cart-line {grid-template-columns:88px minmax(0,1fr);gap:var(--space-5);padding-block:var(--space-6)}
.cart-thumb {width:88px;height:112px;border-radius:var(--r-sm)}
.cart-line h3 {font-size:var(--text-lg);line-height:1.3;overflow-wrap:anywhere}
.cart-line-bottom {gap:var(--space-3);align-items:center}
.cart-line .price {font-size:var(--text-lg);white-space:nowrap;margin-left:auto}
.cart-line .remove-line {width:auto;margin-left:auto;padding:var(--space-1) 0}
.cart-actions {padding:var(--space-6) var(--space-8) max(var(--space-6),env(safe-area-inset-bottom));background:var(--drawer-surface)}
.total-row {align-items:baseline;margin-bottom:var(--space-2)}
.total-row strong {font-size:var(--cart-empty-size);font-family:var(--font-chapter);line-height:1}
.cart-actions p {line-height:1.45;margin-bottom:var(--space-5)}
.cart-actions .btn {min-height:52px;justify-content:center}
.cart-continue {display:block;min-height:44px;background:transparent;color:var(--ink-muted);font-size:var(--text-sm);margin:var(--space-2) auto 0;padding-inline:var(--space-4);text-decoration:underline;text-underline-offset:4px}
.cart-continue:hover {color:var(--ink)}
/* 5. Rope progress: the existing native range remains keyboard/touch operable. */
.blood-rail {width:var(--rail-width);top:144px;bottom:36px}
.blood-track {inset:0;width:100%;height:100%;background:none;border:0;border-radius:0}
.rope-svg {width:100%;height:100%;overflow:visible;max-width:none}
.rope-guide {fill:none;stroke:var(--rope-guide);stroke-width:1.5;opacity:.65;stroke-dasharray:2 7;vector-effect:non-scaling-stroke}
.rope-strand {fill:none;stroke:var(--rope-red);stroke-width:var(--rope-stroke);stroke-linecap:round;vector-effect:non-scaling-stroke}
.charm-body {fill:var(--art);stroke:var(--rope-red);stroke-width:1.5;stroke-linejoin:round}
.charm-eyes {fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.blood-range {left:auto;right:2px;width:44px;inset-block:0;padding:0;border:0}
.rail-stop {left:-12px;width:44px}
.rail-tick {width:8px;transform:none;background:var(--control-border)}
.rail-tooltip {right:40px}
.rail-current {right:58px;top:var(--tip-y,32px);font-size:var(--text-xs)}
.blood-rail:has(.blood-range:hover) .rail-current,.blood-rail:has(.blood-range:focus-visible) .rail-current {opacity:1}
.blood-rail:has(.blood-range:focus-visible) .blood-track {outline:2px solid var(--focus);outline-offset:-2px;border-radius:var(--r-sm)}
/* Do not animate the whole interface on click. Focus rings are a single clear signal. */
.press-outline {display:none}
@media(min-width:1600px) {
  :root {--poster-height:660px}
}
@media(max-width:1100px) and (min-width:701px) {
  :root {--poster-size:clamp(65px,9.6vw,106px);--poster-height:600px}
  .poster-cat {width:490px;height:530px}
  .nav-right {gap:var(--space-4)}
  .nav-links .chapter-link,.cart-trigger {padding-inline:var(--nav-padding)}
  .nav-links {gap:var(--space-2)}
  :root {--chapter-size:18px}
}
@media(max-width:900px) {
  .nav-links {display:none}
  .nav-right {gap:var(--space-2)}
}
@media(max-width:700px) {
  #cartTitle {font-size:32px;white-space:nowrap}
  .cart-heading {padding-right:0}
  .drawer-count {display:none}
  :root {--poster-size:clamp(25px,8.4vw,58px);--poster-height:auto}
  .poster-stage {display:flex;flex-direction:column;height:auto;gap:0;width:calc(100% - var(--gutter)*2);padding-top:var(--space-8);overflow:visible}
  .poster-title {position:relative;inset:auto;width:100%;text-align:center;padding:0;align-self:auto;line-height:1.15;z-index:0}
  .poster-title .poster-line-second {margin-top:var(--space-6);padding:0;justify-content:center;gap:.22em}
  .poster-title .title-give,.poster-title .title-sleep {display:block;position:static;font-size:inherit}
  .poster-title .glyph-flow {top:.91em}
  .poster-cat {position:relative;inset:auto;transform:none;width:min(100%,420px);height:auto;max-height:none;max-width:100%;margin:var(--space-8) auto 0;align-self:center;object-fit:contain}
  .poster-aside {display:none}
  .hero-bottom {padding-top:var(--space-6);padding-bottom:var(--space-6);gap:var(--space-6)}
  .hero-description {max-width:36ch;font-size:var(--text-base)}
  .horror-hero .hero-actions {justify-content:flex-start;align-items:flex-start;gap:var(--space-5);width:100%}
  .horror-hero .motion-button {width:auto;min-width:220px}
  .horror-hero .text-action {justify-content:flex-start}
  #catalog .section-head {grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
  .catalog-title-panel {grid-template-columns:minmax(0,1fr) 80px;gap:var(--space-4)}
  .splash-catalog {width:80px}
  .splash-merch {width:96px}
  .merch-action-row {gap:var(--space-4)}
  .merch-action-row .btn {padding-inline:var(--space-4)}
  .about-title-panel,.help-title-panel {display:grid;grid-template-columns:minmax(0,1fr) 100px;align-items:center;gap:var(--space-5)}
  .splash-about,.splash-help {width:100px;margin:0}
  .splash-contacts {width:var(--contact-art-size);max-width:100%;margin:var(--space-5) 0 0}
  #cartDialog {width:min(100%,540px);max-width:100%}
  #cartDialog .dialog-head {padding:var(--space-5) var(--space-6);min-height:100px}
  #cartDialog .drawer-body {padding:var(--space-6)}
  .cart-actions {padding-inline:var(--space-6)}
  .cart-line {grid-template-columns:72px minmax(0,1fr);gap:var(--space-4)}
  .cart-thumb {width:72px;height:96px}
  .cart-line .quantity button {width:44px;height:44px}
  .cart-line .price {font-size:var(--text-base)}
}
@media(max-width:380px) {
  .splash-merch {width:64px}
  .about-title-panel,.help-title-panel {grid-template-columns:minmax(0,1fr) 80px;gap:var(--space-4)}
  .splash-about,.splash-help {width:80px}
  #cartTitle {font-size:clamp(24px,7.8vw,30px)}
  :root {--cart-title-size:34px;--cart-empty-size:32px;--drawer-art-size:180px}
  #cartDialog .dialog-head,#cartDialog .drawer-body {padding-inline:var(--space-4)}
  .cart-actions {padding-inline:var(--space-4)}
}
@media(max-height:700px) {
  :root {--drawer-art-size:160px}
  .empty-cart {padding-block:var(--space-4)}
  .empty-cart-art {margin-bottom:var(--space-4)}
}
@media(prefers-reduced-motion:reduce) {
  .chapter-link::after,.nav-links .chapter-link {transition:none}
  #cartDialog::backdrop {backdrop-filter:none}
}
@media print {.ink-splash {display:none}}

/* v3: outlined Cyrillic artwork is independent of font loading and HTML filters. */
.poster-title .poster-lettering {display:block;height:1.13em;max-width:none;fill:currentColor;stroke:none;overflow:visible;flex:none}
.poster-title .ink-text {vertical-align:top;line-height:0;filter:none;mask-image:none}
.poster-title .glyph-flow {top:.872em;width:var(--drip-width);height:var(--drip-length);background:none;border-radius:0;color:var(--poster-red)}
.poster-title .glyph-flow::before {content:none}
.poster-title .drip-shape {display:block;width:100%;height:100%;fill:currentColor;stroke:none;overflow:visible}
/* One column owns the contact links and decoration. No offset can move preceding sections. */
.footer-top {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:var(--space-12)}
.contact-panel {display:flex;flex-direction:column;align-items:flex-start}
.contact-panel h2 {margin-bottom:var(--space-4)}
.contact-links {gap:var(--space-2)}
.footer-address {align-self:start}
.cart-trigger:active {transform:translateY(1px)}
.cart-trigger:disabled {opacity:.5;cursor:not-allowed}
@media(max-width:700px) {
 .footer-top {grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
 .poster-title .glyph-flow {top:.872em;width:var(--drip-width);height:var(--drip-length)}
 .poster-line-first .glyph-flow:nth-child(n+5) {display:block}
}