/* Louisbaton Journal — warm paper, editorial typography and photographic covers. */
.jr {
  --jr-paper: #f8f5ed; --jr-ink: #292720; --jr-dim: #716e64; --jr-rule: #d9d3c6;
  --jr-accent: #803f2e; --jr-serif: Georgia, 'Times New Roman', serif;
  background: #e5e1d8; padding: 0 0 56px;
}
html[data-theme="dark"] .jr { background: #22211e; }
.jr__wrap { width: calc(100% - 2 * var(--gutter)); max-width: 1280px; margin: 0 auto; }
.jr .crumbs { justify-content: flex-start; }
.jr-reader-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0 10px; }
.jr-reader-head p { display: flex; gap: 18px; align-items: baseline; margin: 0; }
.jr-reader-head p > span:first-child { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.jr-reader-head p > span:last-child { font-size: 12px; color: var(--text-dim); }
.jr-reader-head button { min-height: 44px; padding: 8px 0 8px 14px; border: 0; background: none; color: var(--text); font: 500 12px var(--font); cursor: pointer; }
.jr-reader-head button span { margin-left: 12px; }
.jr-book { scroll-margin-top: 140px; }
.jr-spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 40px; box-shadow: 0 22px 60px -28px #33281666; }
.jr-spread::after { content: ''; position: absolute; inset: 0 auto 0 50%; width: 42px; transform: translateX(-50%); pointer-events: none; z-index: 5; background: linear-gradient(90deg, transparent, #2920140a 35%, #29201426 49%, #fff7 51%, #29201408 62%, transparent); }
.jr-page { position: relative; display: flex; flex-direction: column; min-height: 800px; padding: 32px 34px 26px; background: var(--jr-paper); color: var(--jr-ink); isolation: isolate; }
.jr-page__body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.jr-run { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 26px; padding-bottom: 10px; border-bottom: 1px solid var(--jr-rule); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--jr-dim); }
.jr-folio { margin: 22px 0 0; padding-top: 10px; border-top: 1px solid var(--jr-rule); color: var(--jr-dim); font-size: 11px; letter-spacing: .1em; }
.jr-folio.is-right { text-align: right; }
.jr-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jr a[class$="__photo"], .jr-look__hero { display: block; overflow: hidden; background: #ded9cd; }
.jr a:focus-visible, .jr button:focus-visible { outline: 2px solid var(--jr-accent); outline-offset: 4px; }
.jr-kicker { margin: 0 0 9px; font-size: 10px; font-weight: 600; line-height: 1.45; letter-spacing: .13em; text-transform: uppercase; color: var(--jr-accent); }
.jr-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--jr-dim); }
.jr-note--big .jr-text { font: italic 21px/1.3 var(--jr-serif); color: var(--jr-ink); }
.jr-shop { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 3px 8px; margin-top: 10px; color: var(--jr-ink); font-size: 13px; line-height: 1.45; text-decoration: none; }
.jr-shop span { text-decoration: underline; text-decoration-color: var(--jr-rule); text-underline-offset: 4px; }
.jr-shop b { font-size: 12px; font-weight: 500; white-space: nowrap; }
.jr-shop svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; align-self: center; }
.jr-shop:hover span { text-decoration-color: var(--jr-accent); }
.jr-section { margin: 0 0 18px; font-size: 10px; line-height: 1.4; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--jr-accent); }
.jr-h2 { margin: 0 0 20px; font: 400 42px/1.04 var(--jr-serif); letter-spacing: -.045em; text-wrap: balance; }
.jr-h2--big { font-size: 52px; }
.jr-h2 em { font-weight: 400; }
.jr-editor { margin: 0 0 22px; font: 18px/1.5 var(--jr-serif); color: var(--jr-dim); max-width: 44ch; }

/* Full-bleed cover: type is laid directly over the photograph. */
.jr-cover { padding: 28px 30px; overflow: hidden; min-height: 800px; background: #374433; color: #fffaf0; }
.jr-cover__photo { position: absolute; inset: 0; }
.jr-cover__photo .jr-img { position: absolute; inset: 0; object-position: 50% 44%; }
.jr-cover__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,#121b19a6 0%,#121b191c 30%,transparent 44%,#18211880 70%,#131910d9 100%); }
.jr-issue { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 8px; margin: 0 0 18px; padding-bottom: 9px; border-bottom: 1px solid #fff7; font-size: 9px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.jr-mast { position: relative; z-index: 1; margin: 0; color: inherit; text-align: center; font-weight: 400; }
.jr-mast > span { display: block; font: 400 51px/.95 var(--jr-serif); text-transform: uppercase; letter-spacing: -.055em; }
.jr-mast > em { display: block; margin: 6px 0 0; font: italic 54px/1 var(--jr-serif); letter-spacing: -.04em; }
.jr-cover__side { position: absolute; z-index: 1; right: 15px; top: 250px; margin: 0; writing-mode: vertical-rl; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.jr-cover__story { position: absolute; z-index: 1; left: 30px; right: 30px; bottom: 105px; }
.jr-cover .jr-kicker { color: inherit; font-size: 9px; margin-bottom: 14px; }
.jr-cover__line { margin: 0; color: inherit; font: 400 94px/.82 var(--jr-serif); letter-spacing: -.055em; }
.jr-cover__line em { font-weight: 400; }
.jr-cover__deck { margin: 23px 0 0; font-size: 13px; line-height: 1.5; letter-spacing: .01em; }
.jr-cover__foot { position: absolute; z-index: 1; bottom: 26px; left: 30px; right: 30px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid #fff6; }
.jr-cover__foot a { color: inherit; font-size: 10px; font-weight: 500; line-height: 1.5; letter-spacing: .03em; text-decoration: none; }
.jr-cover__foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.jr-cover__foot a span { margin-left: 10px; }
.jr-cover a:focus-visible { outline-color: #fffaf0; }
.jr-barcode { display: block; flex: none; width: 54px; height: 31px; border: 5px solid #fffaf0; background: repeating-linear-gradient(90deg,#272620 0 1px,#fffaf0 1px 3px,#272620 3px 5px,#fffaf0 5px 6px); }

/* Contents, folios and a short editor's note. */
.jr-contents__title { font-size: 47px; }
.jr-contents .jr-editor { font-size: 17px; }
.jr-contents__label { margin: 0 0 4px; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; }
.jr-toc { list-style: none; margin: 0; padding: 0; }
.jr-toc a { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--jr-rule); color: var(--jr-ink); text-decoration: none; }
.jr-toc li:last-child a { border-bottom: 1px solid var(--jr-rule); }
.jr-toc__n { font: italic 34px/1 var(--jr-serif); color: var(--jr-accent); }
.jr-toc__t b { display: block; font: 400 21px/1.18 var(--jr-serif); }
.jr-toc__t small { display: block; margin-top: 5px; font-size: 11px; color: var(--jr-dim); }
.jr-toc a:hover .jr-toc__t b { text-decoration: underline; text-underline-offset: 4px; }
.jr-editor__sign { margin: auto 0 0; padding-top: 22px; font-size: 12px; }
.jr-editor__sign em { margin-left: 7px; font: italic 25px var(--jr-serif); }
.jr-reading-note { margin: 12px 0 0; font-size: 10px; line-height: 1.5; color: var(--jr-dim); }

/* Opening spreads and editorial product notes. */
.jr-page.jr-page--bleed { padding: 0; }
.jr-page--bleed .jr-page__body { min-height: 800px; }
.jr-page--bleed .jr-folio { position: absolute; z-index: 2; bottom: 18px; left: 25px; margin: 0; padding: 0; border: 0; color: #fff; text-shadow: 0 1px 4px #0008; }
.jr-bleed { position: relative; flex: 1; min-height: 800px; overflow: hidden; }
.jr-bleed .jr-img { position: absolute; inset: 0; }
.jr-bleed::after { content: ''; position: absolute; inset: 35% 0 0; pointer-events: none; background: linear-gradient(transparent,#13161299); }
.jr-plate { position: absolute; z-index: 1; left: 30px; right: 30px; bottom: 60px; color: #fffaf0; }
.jr-plate .jr-kicker { color: #fffaf0; }
.jr-plate__h { margin: 0 0 20px; max-width: 9ch; font: 400 67px/.95 var(--jr-serif); letter-spacing: -.045em; }
.jr-plate .jr-shop, .jr-plate .jr-shop span { color: inherit; }
.jr-caption { position: absolute; z-index: 1; left: 25px; right: 25px; bottom: 42px; margin: 0; color: #fff; font-size: 12px; line-height: 1.5; }
.jr-stack { display: flex; flex-direction: column; gap: 24px; flex: 1; justify-content: space-between; }
.jr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: center; }
.jr-row.is-flip .jr-row__photo { order: 2; }
.jr-row__photo { aspect-ratio: 1; }
.jr-diary { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px; }
.jr-d { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.jr-d.is-tall { grid-column: 1 / -1; }
.jr-d.is-tall .jr-d__photo { aspect-ratio: 2 / 1; object-position: 50% 38%; }
.jr-d.is-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: end; }
.jr-d.is-wide .jr-d__photo { aspect-ratio: 4 / 5; }
.jr-d.is-sq .jr-d__photo { aspect-ratio: 1; }
.jr-quote { margin: auto 0 0; padding: 28px 0 0; color: var(--jr-accent); font: italic 29px/1.2 var(--jr-serif); letter-spacing: -.03em; }
.jr-look__hero { flex: 1; min-height: 330px; position: relative; }
.jr-look__hero .jr-img { position: absolute; inset: 0; }
.jr-look__total { margin: 20px 0 0; font-size: 13px; }
.jr-look__total b { display: block; margin-top: 5px; font: 400 30px var(--jr-serif); }
.jr-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; }
.jr-step { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.jr-step__photo { aspect-ratio: 1; }
.jr-step__n { margin: 4px 0; font: italic 26px var(--jr-serif); }
.jr-more { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 22px; color: var(--jr-ink); font-size: 13px; text-underline-offset: 4px; }
.jr-more svg, .jr-back__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.jr-drop { margin: 0; font: 17px/1.55 var(--jr-serif); }
.jr-drop::first-letter { float: left; margin: 5px 10px 0 0; font-size: 64px; line-height: .8; color: var(--jr-accent); }
.jr-shop--inline { margin-top: 16px; }
.jr-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: auto; padding-top: 26px; }
.jr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px; }
.jr-grid .jr-g:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.jr-g { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.jr-g__photo { aspect-ratio: 1; }
.jr-grid .jr-g:first-child:nth-last-child(odd) .jr-g__photo { aspect-ratio: 2 / 1; }
.jr-back { margin-top: auto; padding: 26px 0 0; border-top: 1px solid var(--jr-rule); }
.jr-back__h { margin: 0 0 20px; font: 400 33px/1.05 var(--jr-serif); letter-spacing: -.035em; }
.jr-back__btn { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--jr-ink); font-size: 12px; text-decoration: underline; text-underline-offset: 6px; }

/* Printed stock stays ivory in both themes; the reading surface follows the site. */
.jr-page::before { content: ''; position: absolute; z-index: 4; inset: 0; pointer-events: none; opacity: .025; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
@media (max-width: 900px) {
  .jr { padding-bottom: 30px; }
  .jr__wrap { width: calc(100% - 24px); max-width: 580px; }
  .jr-reader-head { padding: 12px 4px 0; gap: 10px; }
  .jr-reader-head p { display: block; }
  .jr-reader-head p > span { display: block; }
  .jr-reader-head p > span:first-child { font-size: 10px; }
  .jr-reader-head p > span:last-child { margin-top: 3px; font-size: 10px; }
  .jr-reader-head button { font-size: 11px; }
  .jr-reader-head button span { margin-left: 4px; }
  .jr-book { scroll-margin-top: 72px; }
  .jr-spread { grid-template-columns: 1fr; gap: 16px; }
  .jr-spread::after { display: none; }
  .jr-page { min-height: 0; padding: 26px 24px 22px; }
  .jr-run { margin-bottom: 23px; font-size: 8px; }
  .jr-cover { min-height: 660px; padding: 24px; }
  .jr-mast > span { font-size: clamp(31px, 8vw, 52px); }
  .jr-mast > em { font-size: 45px; }
  .jr-issue { font-size: 8px; letter-spacing: .07em; }
  .jr-cover__story { left: 24px; right: 24px; bottom: 115px; }
  .jr-cover__line { font-size: 80px; }
  .jr-cover__foot { left: 24px; right: 24px; }
  .jr-cover__deck { font-size: 12px; }
  .jr-cover__side { top: 200px; font-size: 7px; right: 9px; }
  .jr-h2, .jr-h2--big, .jr-contents__title { font-size: 40px; }
  .jr-toc a { grid-template-columns: 36px 1fr; gap: 10px; }
  .jr-toc__t b { font-size: 20px; }
  .jr-toc__t small { font-size: 11px; }
  .jr-page--bleed .jr-page__body, .jr-bleed { min-height: 620px; }
  .jr-plate { left: 24px; right: 24px; }
  .jr-plate__h { font-size: 57px; }
  .jr-look__hero { min-height: 380px; }
  .jr-quote { margin-top: 25px; font-size: 26px; }
  .jr-pair, .jr-diary, .jr-grid, .jr-steps { gap: 22px 14px; }
  .jr-text { font-size: 13px; }
  .jr-shop { font-size: 12px; }
  .jr-shop b { font-size: 11px; }
  .jr-back { margin-top: 28px; }
}
@media (max-width: 560px) {
  .jr-row { grid-template-columns: 1fr; gap: 15px; }
  .jr-row__photo { aspect-ratio: 4 / 3; }
  .jr-row.is-flip .jr-row__photo { order: 0; }
  .jr-d.is-wide { grid-template-columns: 1fr 1fr; gap: 14px; }
  .jr-page { padding-left: 20px; padding-right: 20px; }
}

/* ═══ Книга ════════════════════════════════════════════════════════ */
.jr--book .crumbs { display: none; }
.jr--book .jr-spread { opacity: 1; transform: none; transition: none; margin: 0; box-shadow: none; }
.jr-book {
  display: grid; grid-template-columns: 52px auto 52px; grid-template-areas: "prev frame next" "bar bar bar";
  justify-content: center; align-items: center; column-gap: 18px; row-gap: 14px;
  padding: 22px 0 6px;
}
.jr-book__frame { grid-area: frame; position: relative; }
.jr-arrow {
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0;
  border: 0; border-radius: 50%; background: var(--sys-card); color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 22px rgba(0, 0, 0, .1); cursor: pointer;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.jr-arrow.is-prev { grid-area: prev; } .jr-arrow.is-next { grid-area: next; }
.jr-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.jr-arrow:hover:not(:disabled) { transform: scale(1.06); }
.jr-arrow:disabled { opacity: .3; cursor: default; }
.jr-book__bar { grid-area: bar; display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 13px; color: var(--text-dim); }
.jr-book__count { min-width: 120px; text-align: right; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.jr-book__dots { display: flex; gap: 8px; }
.jr-dot { display: grid; place-items: center; width: 24px; height: 32px; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.jr-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--text) 22%, transparent); }
.jr-dot[aria-current="true"]::before { background: var(--text); transform: scale(1.2); }
.jr-book__hint { min-width: 120px; }

/* разворот: все лежат стопкой, виден текущий */
.jr--spreads .jr-book__frame { width: var(--book-w); height: var(--book-h); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 30px 70px -30px rgba(0, 0, 0, .35); }
.jr--spreads .jr-book__stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; perspective: 2800px; }
.jr--spreads .jr-spread { position: absolute; inset: 0; visibility: hidden; }
.jr--spreads .jr-spread.is-current { visibility: visible; z-index: 2; }
.jr--spreads .jr-spread.is-under { visibility: visible; z-index: 1; }
.jr--spreads .jr-spread.hide-right > .jr-page:last-of-type,
.jr--spreads .jr-spread.hide-left > .jr-page:first-of-type { visibility: hidden; }
.jr--spreads .jr-book__stage.is-measuring .jr-spread { position: relative; visibility: visible; }
.jr--spreads .jr-page { min-height: 0; }

/* лист, который переворачивается */
.jr-leaf { position: absolute; top: 0; height: 100%; z-index: 6; transform-style: preserve-3d; pointer-events: none; }
.jr-leaf.is-right { left: 50%; width: 50%; transform-origin: left center; }
.jr-leaf.is-left { left: 0; width: 50%; transform-origin: right center; }
.jr-leaf.is-page { left: 0; width: 100%; transform-origin: left center; }
.jr-leaf__face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--jr-paper); }
.jr-leaf__face.is-back { transform: rotateY(180deg); }
.jr-leaf__face > .jr-page { height: 100%; min-height: 0; }
.jr-leaf__shade { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; }
.jr-leaf.is-right .is-front .jr-leaf__shade, .jr-leaf.is-page .is-front .jr-leaf__shade { background: linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .05) 60%); }
.jr-leaf.is-right .is-back .jr-leaf__shade, .jr-leaf.is-page .is-back .jr-leaf__shade { background: linear-gradient(270deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .05) 60%); }
.jr-leaf.is-left .is-front .jr-leaf__shade { background: linear-gradient(270deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .05) 60%); }
.jr-leaf.is-left .is-back .jr-leaf__shade { background: linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .05) 60%); }
.jr-leaf__face.is-blank::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .11; mix-blend-mode: multiply;
}

/* загнутые уголки: чуть видны, при наведении — сильнее */
.jr-corner { position: absolute; bottom: 0; z-index: 8; width: 64px; height: 64px; padding: 0; border: 0; background: none; cursor: pointer; }
.jr-corner.is-next { right: 0; } .jr-corner.is-prev { left: 0; }
.jr-corner:disabled { display: none; }
.jr-corner::before {
  content: ""; position: absolute; bottom: 0; width: 20px; height: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .18); transition: width .25s var(--ease), height .25s var(--ease);
}
.jr-corner.is-next::before { right: 0; background: linear-gradient(315deg, var(--sys-page) 0 50%, #e7e3da 50%, #f7f5ef 100%); }
.jr-corner.is-prev::before { left: 0; background: linear-gradient(45deg, var(--sys-page) 0 50%, #e7e3da 50%, #f7f5ef 100%); }
html[data-theme="dark"] .jr-corner.is-next::before { background: linear-gradient(315deg, var(--sys-page) 0 50%, #2c2c2e 50%, #3a3a3c 100%); }
html[data-theme="dark"] .jr-corner.is-prev::before { background: linear-gradient(45deg, var(--sys-page) 0 50%, #2c2c2e 50%, #3a3a3c 100%); }
.jr-corner:hover::before, .jr-corner:focus-visible::before { width: 46px; height: 46px; }

/* ── телефон: страницы по одной ── */
.jr--pages .jr-book { grid-template-columns: 44px 1fr 44px; grid-template-areas: "frame frame frame" "prev bar next"; column-gap: 8px; padding-top: 12px; }
.jr--pages .jr-book__frame { width: 100%; }
.jr--pages .jr-book__stage { position: relative; perspective: 1800px; transition: height .3s var(--ease); }
.jr--pages .jr-spread { display: contents; }
.jr--pages .jr-page { position: absolute; top: 0; left: 0; right: 0; visibility: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 18px 40px -20px rgba(0, 0, 0, .3); }
.jr--pages .jr-page.is-current { position: relative; visibility: visible; z-index: 2; }
.jr--pages .jr-page.is-under { visibility: visible; z-index: 1; }
.jr--pages .jr-page.is-hidden { visibility: hidden; }
.jr--pages .jr-corner, .jr--pages .jr-book__hint { display: none; }
.jr--pages .jr-arrow { width: 44px; height: 44px; }
.jr--pages .jr-book__count { min-width: 0; text-align: center; }
.jr--pages .jr-book__bar { flex-direction: column; gap: 8px; }

/* Keep the complete spread and controls within the available desktop height. */
.jr--book { padding-bottom: 12px; }
.jr--book .jr-reader-head { padding-top: 8px; padding-bottom: 4px; }
.jr--book .jr-book { padding-top: 8px; padding-bottom: 4px; row-gap: 10px; }
.jr--spreads .jr-book__frame { overflow: clip; }

/* A phone reads one full-size page; only its contents scroll, never the controls. */
.jr--pages .jr-book__frame {
  height: var(--page-h, 65svh); overflow: auto; overscroll-behavior-y: contain;
  scrollbar-width: thin; scrollbar-color: var(--jr-rule) var(--jr-paper);
  background: var(--jr-paper);
}
.jr--pages .jr-book__stage { overflow: clip; }
.jr--pages .jr-page { min-height: var(--page-h, 65svh); }
.jr--pages .jr-cover { height: var(--page-h, 65svh); padding: 20px; }
.jr--pages .jr-cover__story { bottom: 88px; left: 20px; right: 20px; }
.jr--pages .jr-cover__line { font-size: clamp(48px, 15vw, 72px); }
.jr--pages .jr-cover__deck { margin-top: 14px; }
.jr--pages .jr-cover__foot { bottom: 18px; left: 20px; right: 20px; padding-top: 10px; }
.jr--pages .jr-cover__side { display: none; }
.jr--pages .jr-page--bleed .jr-page__body, .jr--pages .jr-bleed { min-height: var(--page-h, 65svh); }
.jr--pages .jr-book__bar { gap: 0; min-width: 0; }
.jr--pages .jr-book__dots { gap: 2px; }
.jr--pages .jr-dot { height: 28px; }
.jr--pages .jr-book__count { font-size: 12px; }
@media (max-width: 900px) and (max-height: 700px) {
  .jr--pages .jr-cover { min-height: 400px; }
}

/* ═══ Телефон: страница целиком в экране, без прокрутки ═════════════
   Вёрстка ужата (фото ниже, текст в 2–3 строки, лишнее скрыто), а что не
   влезло — страница уменьшается под высоту экрана (js/ui/book.js → fitPage). */
.jr--pages .jr-book__frame { overflow: hidden; }
.jr--pages .jr-page { transform-origin: top center; }
.jr--pages .jr-leaf__face:not(.is-blank) { background: transparent; }
.jr--pages .jr-page:not(.jr-cover):not(.jr-page--bleed) { padding: 16px 16px 12px; }
.jr--pages .jr-run { margin: 0 0 12px; font-size: 8px; }
.jr--pages .jr-folio { margin: 10px 0 0; font-size: 9px; }
.jr--pages .jr-folio::before { margin-bottom: 6px; }
.jr--pages .jr-section { margin-bottom: 8px; padding-bottom: 6px; font-size: 10px; border-bottom-width: 2px; }
.jr--pages .jr-h2, .jr--pages .jr-h2--big, .jr--pages .jr-contents__title { font-size: 28px; margin-bottom: 8px; }
.jr--pages .jr-kicker { margin-bottom: 3px; font-size: 9px; }
.jr--pages .jr-text, .jr--pages .jr-editor, .jr--pages .jr-drop {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.jr--pages .jr-text { -webkit-line-clamp: 2; font-size: 12px; line-height: 1.4; }
.jr--pages .jr-editor { -webkit-line-clamp: 3; margin-bottom: 10px; font-size: 12.5px; line-height: 1.45; }
.jr--pages .jr-drop { -webkit-line-clamp: 5; font-size: 13px; line-height: 1.5; }
.jr--pages .jr-drop::first-letter { font-size: 46px; }
.jr--pages .jr-shop { margin-top: 4px; font-size: 11.5px; }
.jr--pages .jr-quote { display: none; }

/* содержание */
.jr--pages .jr-contents .jr-editor { -webkit-line-clamp: 2; }
.jr--pages .jr-toc a { padding: 9px 0; grid-template-columns: 34px 1fr; gap: 8px; }
.jr--pages .jr-toc__n { font-size: 20px; }
.jr--pages .jr-toc__t b { font-size: 15px; }
.jr--pages .jr-toc__t small { font-size: 11px; }

/* ряды «фото + текст»: фото слева небольшим квадратом */
.jr--pages .jr-stack { gap: 12px; justify-content: flex-start; }
.jr--pages .jr-row, .jr--pages .jr-row.is-flip { grid-template-columns: 38% 1fr; gap: 12px; align-items: center; }
.jr--pages .jr-row.is-flip .jr-row__photo { order: 0; }
.jr--pages .jr-row__photo { aspect-ratio: 1; }
.jr--pages .jr-note--big .jr-text { font-size: 12.5px; }

/* дневник */
.jr--pages .jr-diary { gap: 12px 10px; }
.jr--pages .jr-d { gap: 6px; }
.jr--pages .jr-d.is-tall .jr-d__photo { aspect-ratio: 16 / 9; }
.jr--pages .jr-d.is-wide { grid-template-columns: 42% 1fr; gap: 12px; align-items: center; }
.jr--pages .jr-d.is-wide .jr-d__photo { aspect-ratio: 1; }
.jr--pages .jr-d.is-sq .jr-d__photo { aspect-ratio: 4 / 3; }

/* образ */
.jr--pages .jr-look__hero { min-height: 0; flex: none; aspect-ratio: 16 / 10; }
.jr--pages .jr-look__total { margin-top: 10px; font-size: 13px; }
.jr--pages .jr-look__total b { font-size: 18px; }
.jr--pages .jr-steps { gap: 12px 10px; }
.jr--pages .jr-step { gap: 4px; }
.jr--pages .jr-step__photo { aspect-ratio: 4 / 3; }
.jr--pages .jr-step__n { font-size: 16px; }
.jr--pages .jr-step .jr-text, .jr--pages .jr-step .jr-kicker { display: none; }
.jr--pages .jr-more { padding-top: 10px; font-size: 13px; }

/* платья и мелочи */
.jr--pages .jr-pair { gap: 10px; padding-top: 12px; }
.jr--pages .jr-pair .jr-d__photo, .jr--pages .jr-g__photo { aspect-ratio: 4 / 3; }
.jr--pages .jr-grid { gap: 12px 10px; }
.jr--pages .jr-g { gap: 6px; }
.jr--pages .jr-grid .jr-g:first-child:nth-last-child(odd) .jr-g__photo { aspect-ratio: 2 / 1; }
.jr--pages .jr-back { margin-top: 14px; padding-top: 12px; }
.jr--pages .jr-back__h { margin-bottom: 10px; font-size: 20px; }
.jr--pages .jr-back__btn { min-height: 40px; font-size: 13px; }

/* режим чтения на телефоне: без подвала и лишних полей — страница сайта не прокручивается */
body:has(.jr--pages) .site-footer { display: none; }
.jr.jr--pages { padding-bottom: 0; }
.jr--pages .jr-contents .jr-editor { display: none; }

/* ═══ Телефон: журнал на весь экран, поверх сайта; выход — крестик, «Назад», Esc ═══ */
.jr-reader-head__acts { display: flex; align-items: center; gap: 4px; }
.jr-close { display: none; }
html.jr-fullscreen, html.jr-fullscreen body { overflow: hidden; }
html.jr-fullscreen body { padding-bottom: 0 !important; }
html.jr-fullscreen .site-header, html.jr-fullscreen .tabbar, html.jr-fullscreen .site-footer { display: none !important; }
.jr.jr--full {
  position: fixed; inset: 0; z-index: 300; overflow: hidden;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
.jr--full .jr__wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; width: calc(100% - 20px); max-width: 580px; }
.jr--full .jr-reader-head { padding: 10px 2px 0; }
.jr--full .jr-book { flex: 1; align-content: center; padding-top: 8px; padding-bottom: 8px; }
.jr--full .jr-close {
  display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; padding: 0;
  border-radius: 50%; background: var(--sys-card); color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 16px rgba(0, 0, 0, .08);
}
.jr--full .jr-close span { margin: 0; }
.jr--full .jr-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }