:root {
  color-scheme: light;
  font-family: Georgia, "Times New Roman", serif;
  color: #171c1c;
  background: #eee2ce;
  --gold: #d7a752;
  --night: #09151b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 280px; margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
section, article, footer { scroll-margin-top: 16px; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.icon { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.site-header {
  position: relative;
  z-index: 3;
  color: #f4ebdb;
  background: linear-gradient(100deg, #071419, #111b21 55%, #050f14);
  border-bottom: 1px solid rgb(215 167 82 / 24%);
}
.site-header__inner {
  width: min(88%, 1320px);
  min-height: 72px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.author-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.author-logo__feather { color: var(--gold); filter: drop-shadow(0 0 8px #b47c32); }
.author-logo span { font-size: 22px; letter-spacing: 3px; text-transform: uppercase; white-space: nowrap; }
.author-logo small { display: block; color: var(--gold); font: 9px Arial, sans-serif; letter-spacing: 5px; margin-top: 5px; text-align: center; }
.navigation { display: flex; gap: clamp(18px, 3vw, 44px); font: 13px Arial, sans-serif; }
.navigation a { position: relative; padding: 26px 0; text-decoration: none; }
.navigation a:hover { color: var(--gold); }
.navigation a[aria-current="page"]::after { content: ""; position: absolute; bottom: 15px; left: 0; right: 0; height: 1px; background: var(--gold); box-shadow: 0 0 8px var(--gold); }

.hero { position: relative; height: clamp(330px, 34vw, 570px); overflow: hidden; background: var(--night); color: #f4ebdb; }
.hero__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(0deg, #071419 0%, transparent 32%, rgb(3 12 16 / 32%) 100%); pointer-events: none; }
.hero__wave { position: absolute; bottom: -1px; width: 100%; height: 65px; }
.ornament { display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--gold); margin-top: 6px; font-size: 24px; }
.ornament::before, .ornament::after { content: ""; height: 1px; width: 70px; background: linear-gradient(90deg, transparent, var(--gold)); }
.ornament::after { transform: rotate(180deg); }

.book-section { position: relative; isolation: isolate; background: #eee2ce; }
.book-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.55;
  background:
    radial-gradient(ellipse at 5% 80%, #b49b73, transparent 30%),
    radial-gradient(ellipse at 90% 85%, #b49b73, transparent 30%),
    repeating-linear-gradient(115deg, transparent 0 3px, rgb(153 125 81 / 5%) 3px 4px),
    radial-gradient(ellipse at 50% 45%, #fffdf4, transparent 70%);
}
.book-section__inner { position: relative; width: min(72%, 1100px); margin: auto; display: grid; grid-template-columns: 1.55fr 1fr; align-items: center; gap: clamp(45px, 8vw, 130px); padding: 35px 0 50px; }
.book__copy { font-size: clamp(14px, 1.2vw, 18px); line-height: 1.4; }
.book__copy p { margin: 0 0 14px; }
.book__copy .eyebrow { font: 11px Arial, sans-serif; line-height: 1.6; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 14px; }
.book__copy h2 { font-size: clamp(27px, 3.1vw, 45px); font-weight: 400; font-style: italic; line-height: 1.05; margin: 0 0 20px; }
.book__mockup { position: relative; width: 100%; max-width: 310px; justify-self: center; perspective: 900px; transition: transform 350ms ease; }
.book__mockup::before { content: ""; position: absolute; inset: 2% -9px 1% auto; width: 14px; transform: skewY(22deg); background: repeating-linear-gradient(90deg, #aca99c 0 1px, #e0d7c3 1px 2px); border: 3px solid #262623; box-shadow: 8px 10px 12px rgb(0 0 0 / 30%); }
.book__mockup::after { content: ""; position: absolute; left: -10%; bottom: -24px; width: 120%; height: 24px; background: #342b1a; filter: blur(14px); opacity: 0.45; border-radius: 50%; z-index: -1; }
.book__cover { display: block; width: 100%; height: auto; aspect-ratio: 1023 / 1536; transform: rotateY(-7deg); transform-origin: left; border: 1px solid #645843; box-shadow: -6px 3px 4px rgb(0 0 0 / 45%), 0 0 22px rgb(227 176 83 / 40%); }
.book-section--first .book__cover { border-color: var(--gold); box-shadow: -6px 3px 4px rgb(0 0 0 / 45%), 0 0 18px rgb(255 210 116 / 85%), 0 0 45px rgb(227 176 83 / 65%), 0 0 75px rgb(227 176 83 / 30%); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .book__mockup:hover { transform: translateY(-12px) rotate(-2deg) scale(1.03); }
}
.button { display: inline-flex; align-items: center; gap: 20px; margin-top: 5px; padding: 12px 24px; border: 1px solid #a77126; border-radius: 5px; background: linear-gradient(#f8edcf, #dcc49a); box-shadow: inset 0 0 8px #fff4dc, 0 2px 4px rgb(112 78 28 / 15%); color: #231e16; font: 11px Arial, sans-serif; font-weight: 600; letter-spacing: 1.5px; text-decoration: none; text-transform: uppercase; }
.button span { font-size: 18px; line-height: 0.6; }
.button:hover { filter: brightness(1.12); }
.ornament--short { justify-content: flex-start; margin: -8px 0 14px; font-size: 18px; gap: 5px; }
.ornament--short::before, .ornament--short::after { width: 48px; }

.book-section--dark { background: transparent; color: #f0e6d2; }
.book-section--dark::before { opacity: 1; background: radial-gradient(ellipse at 80% 80%, #27434d, transparent 55%), linear-gradient(110deg, #0a1820, #16232b 50%, #061219); clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%); }
.book-section__scenery { position: absolute; z-index: -1; inset: 0; opacity: 0.22; background: url("images/The-Warrior-from-Siata-End-of-Days.jpeg") right 39% / 50% auto no-repeat; mask-image: linear-gradient(to right, transparent 35%, #000); clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%); }
.book-section--dark .book-section__inner { grid-template-columns: 1fr 1.55fr; padding: 50px 0; }
.book-section--dark .book__copy { grid-column: 2; grid-row: 1; }
.book-section--dark .book__mockup { grid-column: 1; grid-row: 1; }
.book-section--dark .eyebrow { color: var(--gold); }
.book-section--dark h2 { color: #f4dfb6; }
.button--dark { background: linear-gradient(#394447, #162329); color: #edc36e; box-shadow: inset 0 0 6px rgb(255 219 152 / 24%), 0 0 12px rgb(237 178 66 / 40%); border-color: var(--gold); }
.book-section--third .book-section__inner { padding: 20px 0 50px; }

.features { position: relative; background: radial-gradient(ellipse at top, #3a382b, transparent 60%), #101b20; color: #e7d8ba; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.features__inner { width: min(88%, 1320px); margin: auto; padding: 35px 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.feature { display: flex; gap: 16px; padding: 0 22px; border-right: 1px solid rgb(215 167 82 / 25%); }
.feature:first-child { padding-left: 0; }
.feature:last-child { border: 0; padding-right: 0; }
.feature .icon { color: var(--gold); }
.feature h3 { margin: 0 0 7px; color: #efc266; font: 14px Arial, sans-serif; }
.feature p { margin: 0; font-size: 13px; line-height: 1.35; }

.footer { position: relative; color: #f2e8d8; background: radial-gradient(ellipse at 50% 0, #5b4534, transparent 55%), linear-gradient(#14212a, #040e13); }
.footer__inner { width: min(88%, 1320px); min-height: 190px; margin: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; padding: 30px 0; }
.author-logo--footer { flex-direction: column; gap: 4px; }
.author-logo--footer .icon { color: var(--gold); width: 62px; height: 62px; filter: drop-shadow(0 0 7px #9f7333); }
.author-logo--footer span { font-size: clamp(23px, 2.2vw, 32px); letter-spacing: 5px; }
.author-logo--footer small { font-size: 11px; letter-spacing: 10px; }
.footer__email { display: flex; align-items: center; justify-self: end; gap: 10px; font: 13px Arial, sans-serif; text-decoration: none; }
.footer__email .icon { width: 20px; height: 20px; color: #d9bd85; }
.footer__email:hover { color: var(--gold); }
.footer__credit { color: #d8c4a2; font-size: 12px; }
.footer__credit { display: flex; align-items: center; gap: 8px; }
.characters-footer .footer__credit { justify-content: center; }
.about-author { background: #eee2ce; border-top: 1px solid var(--gold); }
.about-author__inner { width: min(78%, 1050px); margin: auto; padding: 65px 0; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); align-items: center; gap: clamp(35px, 7vw, 100px); }
.about-author__portrait { display: block; width: 100%; max-width: 310px; height: auto; border: 1px solid var(--gold); border-radius: 6px; box-shadow: 0 8px 25px rgb(40 30 13 / 20%); }
.media-section { width: min(88%, 1000px); margin: 45px auto; }
.media-card { display: flex; align-items: center; min-height: 500px; padding: clamp(24px, 5vw, 55px); border: 1px solid #c6ad7d; border-radius: 6px; background: linear-gradient(90deg, rgb(3 14 19 / 85%), rgb(3 14 19 / 40%) 48%, transparent 75%), url("images/UnderTwoMoonBG.png") center / cover no-repeat; color: #fff7e9; box-shadow: 0 8px 25px rgb(40 30 13 / 20%); }
.media-card__copy { width: min(100%, 410px); }
.media-card h2, .trailer-notice h2 { font-size: 32px; font-weight: 400; font-style: italic; }
.media-card h2 { margin: 12px 0 20px; font-size: clamp(32px, 4vw, 48px); text-shadow: 0 2px 6px #000; }
.media-card .eyebrow { color: #f2cf89; font: 11px Arial, sans-serif; letter-spacing: 3px; text-transform: uppercase; }
.media-card audio { display: block; width: 100%; margin: 0; }
.media-card audio[hidden], .song-player[hidden] { display: none; }
.song-player { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid rgb(232 194 122 / 45%); border-radius: 12px; background: rgb(5 18 23 / 82%); box-shadow: 0 10px 24px rgb(0 0 0 / 30%), inset 0 1px rgb(255 255 255 / 10%); }
.song-player__play { display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; padding: 13px; border: 1px solid #f6db9d; border-radius: 50%; color: #281d0b; background: linear-gradient(145deg, #f8e0a6, #c58c38); box-shadow: 0 3px 14px rgb(215 167 82 / 35%); cursor: pointer; }
.song-player__play:hover { filter: brightness(1.12); }
.song-player__play svg { width: 100%; height: 100%; fill: currentColor; }
.song-player__pause-icon, .song-player--playing .song-player__play-icon { display: none; }
.song-player--playing .song-player__pause-icon { display: block; }
.song-player__timeline { flex: 1 1 auto; min-width: 0; }
.song-player input[type="range"] { display: block; width: 100%; height: 18px; margin: 0; padding: 0; appearance: none; background: transparent; cursor: pointer; }
.song-player input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, #e1b45e var(--progress, 100%), rgb(255 255 255 / 28%) var(--progress, 100%)); }
.song-player input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, #e1b45e var(--progress, 100%), rgb(255 255 255 / 28%) var(--progress, 100%)); }
.song-player input[type="range"]::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; appearance: none; border: 0; border-radius: 50%; background: #f6d893; }
.song-player input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #f6d893; }
.song-player input:focus-visible, .song-player__play:focus-visible { outline: 2px solid #f6d893; outline-offset: 3px; }
.song-player__times { display: flex; justify-content: space-between; color: #e4d1ad; font: 11px Arial, sans-serif; font-variant-numeric: tabular-nums; }
.song-player__volume { display: flex; flex: 0 0 80px; align-items: center; gap: 6px; }
.song-player__volume svg { width: 18px; height: 18px; fill: none; stroke: #e4d1ad; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.song-lyrics { margin-top: 22px; text-shadow: 0 2px 6px #000; }
.song-lyrics__label { margin: 0 0 7px; color: #f2cf89; font: 10px Arial, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }
.song-lyrics__line { margin: 0; font-size: clamp(17px, 2vw, 21px); font-style: italic; line-height: 1.45; }
.media-status { line-height: 1.5; }
.media-status:empty { display: none; }
.lyrics-timing { width: min(88%, 760px); margin: 40px auto; color: #171c1c; line-height: 1.6; }
.lyrics-timing h1, .lyrics-timing h2 { font-weight: 400; font-style: italic; }
.lyrics-timing .eyebrow { color: #7c5822; font: 11px Arial, sans-serif; letter-spacing: 3px; text-transform: uppercase; }
.lyrics-timing audio { display: block; width: 100%; margin: 24px 0; }
.lyrics-timing__next { font-size: 20px; font-weight: bold; }
.lyrics-timing__buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.lyrics-timing .button { cursor: pointer; }
.lyrics-timing .button:disabled { opacity: 0.5; cursor: default; }
.lyrics-timing__status:empty { display: none; }
.lyrics-timing__lines { max-height: 350px; overflow-y: auto; padding: 18px 18px 18px 50px; border: 1px solid #c6ad7d; background: #f7eedf; }
.lyrics-timing__current { color: #85580f; font-weight: bold; }
.lyrics-timing__result textarea { display: block; width: 100%; margin: 8px 0; padding: 12px; resize: vertical; font: 14px monospace; }
.trailer-notice { margin-top: 30px; padding: 25px; border: 1px solid #c6ad7d; text-align: center; }

.characters-intro { padding: 60px 6% 40px; background: radial-gradient(ellipse at top, #283c42, var(--night) 75%); color: #f0e6d2; text-align: center; border-bottom: 1px solid var(--gold); }
.characters-intro .eyebrow { color: var(--gold); font: 11px Arial, sans-serif; letter-spacing: 3px; text-transform: uppercase; }
.characters-intro h1 { margin: 15px 0; font-size: clamp(32px, 5vw, 56px); font-weight: 400; font-style: italic; }
.character-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; width: min(88%, 900px); margin: 45px auto; align-items: start; }
.character-card { overflow: hidden; border: 1px solid #c6ad7d; border-radius: 6px; background: #f7eedf; box-shadow: 0 5px 16px rgb(40 30 13 / 10%); }
.character-card img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain; background: var(--night); }
.character-card__copy { padding: 24px; }
.character-card h2 { margin: 0 0 14px; font-size: 28px; font-weight: 400; font-style: italic; }
.character-card p { margin: 0; font-size: 16px; line-height: 1.65; }
.character-card--text { border-top: 3px solid var(--gold); background: linear-gradient(140deg, #fff8e9, #e6d5b9); }
.character-portrait { display: block; width: 100%; padding: 0; border: 0; background: var(--night); cursor: zoom-in; }
.character-portrait-wrap { position: relative; }
.character-portrait__embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.character-card .character-card__attribution { margin-top: 14px; font-size: 13px; }
.character-portrait:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.character-portrait__status { padding: 8px 16px; }
.character-portrait__status:empty { display: none; }
.character-dialog { width: min(92vw, 650px); max-height: 90dvh; padding: 24px; border: 1px solid var(--gold); border-radius: 8px; background: #f7eedf; color: #171c1c; }
.character-dialog::backdrop { background: rgb(3 12 16 / 85%); }
.character-dialog__close { float: right; margin: 0 0 16px 16px; cursor: pointer; }
.character-dialog h2 { font-size: 30px; font-weight: 400; font-style: italic; margin: 4px 0 16px; }
.character-dialog__image { display: block; width: 100%; height: 55dvh; object-fit: contain; background: var(--night); clear: both; }
.character-dialog__image[hidden], .character-dialog__embed[hidden], .character-dialog__attribution[hidden] { display: none; }
.character-dialog__embed { display: block; width: min(100%, 480px); height: min(55dvh, 723px); margin: 0 auto; border: 0; clear: both; }
.character-dialog__description { line-height: 1.65; }
.character-dialog__status:empty { display: none; }
.characters-page:has(.character-dialog[open]) { overflow: hidden; }
.characters-back { text-align: center; padding: 0 6% 45px; }
.characters-footer { text-align: center; padding: 30px 6%; }
.characters-footer > a { display: inline-block; font-size: 14px; }
.book-list { width: min(88%, 1100px); margin: 55px auto 24px; display: grid; gap: 35px; perspective: 1800px; }
.book-list__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 680px; border: 1px solid #b69868; border-radius: 5px 12px 12px 5px; background: linear-gradient(90deg, #e1cfad 0%, #fff8e9 8%, #f5e8d0 48.8%, #cbb38e 50%, #f7ead3 51.2%, #fff8e9 94%, #ddc9a7 100%); box-shadow: 0 5px 0 #b9a17c, 0 10px 0 #e7d8bd, 0 15px 0 #a88d66, 0 22px 35px rgb(40 30 13 / 25%); perspective: 1800px; }
.book-list__item[hidden], .book-controls[hidden] { display: none; }
.book-list__cover { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #10191c; }
.book-list__item .book__copy { min-height: 0; overflow-y: auto; padding: clamp(24px, 4vw, 48px); }
.book-list__item .book__copy:focus-visible { outline: 2px solid #92621d; outline-offset: -2px; }
.book-turn { position: absolute; inset: 0; z-index: 1; pointer-events: none; perspective: 1800px; }
.book-turn__stationary, .book-turn__leaf { position: absolute; top: 0; width: 50%; height: 100%; }
.book-turn--forward .book-turn__stationary, .book-turn--backward .book-turn__leaf { left: 0; }
.book-turn--backward .book-turn__stationary, .book-turn--forward .book-turn__leaf { right: 0; }
.book-turn__leaf { transform-style: preserve-3d; }
.book-turn--forward .book-turn__leaf { transform-origin: left center; animation: page-turn-forward 1s ease-in-out both; }
.book-turn--backward .book-turn__leaf { transform-origin: right center; animation: page-turn-backward 1s ease-in-out both; }
.book-turn__face { position: absolute; inset: 0; overflow: hidden; background: #f7ead3; backface-visibility: hidden; }
.book-turn__face .book__copy { height: 100%; overflow: hidden; }
.book-turn__back { transform: rotateY(180deg); }
.book-list__hint { margin: 0 auto; padding: 0 6%; color: #66583f; text-align: center; font-size: 13px; }
.book-controls { width: min(88%, 1100px); margin: 35px auto 60px; display: flex; justify-content: center; align-items: center; gap: 20px; }
.book-controls__button { flex: 0 0 auto; padding: 12px 18px; border: 1px solid #a77126; border-radius: 4px; background: #f7eedf; color: #231e16; font: 600 11px Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.book-controls__button:hover:not(:disabled) { background: #e9d3ae; }
.book-controls__button:focus-visible { outline: 2px solid #92621d; outline-offset: 3px; }
.book-controls__button:disabled { opacity: 0.45; cursor: default; }
.book-controls__status { min-width: 0; margin: 0; text-align: center; font-size: 14px; line-height: 1.4; }
@keyframes page-turn-forward { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
@keyframes page-turn-backward { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }

@media (max-width: 900px) {
  .character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header__inner { width: 92%; gap: 18px; }
  .author-logo span { font-size: 17px; letter-spacing: 2px; }
  .navigation { gap: 17px; font-size: 11px; }
  .book-section__inner { width: 78%; gap: 40px; }
  .book__copy h2 { font-size: 30px; }
  .book__copy .eyebrow { font-size: 9px; letter-spacing: 2px; }
  .feature { gap: 10px; padding: 0 12px; }
  .feature .icon { width: 32px; height: 32px; }
  .feature h3 { font-size: 12px; }
  .feature p { font-size: 11px; }
  .footer__inner { gap: 20px; }
  .footer__email { font-size: 11px; gap: 6px; }
}

@media (max-width: 650px) {
  .book-list__item { grid-template-columns: minmax(0, 1fr); grid-template-rows: 40% minmax(0, 1fr); height: 780px; background: linear-gradient(100deg, #e1cfad, #fff8e9 12%, #f7ead3 88%, #ddc9a7); }
  .book-list__item .book__copy { padding: 24px; }
  .book-turn__stationary { display: none; }
  .book-turn__leaf { width: 100%; }
  .book-turn__face { display: grid; grid-template-rows: 40% minmax(0, 1fr); }
  .book-turn__face .book-list__cover { grid-row: 1; }
  .book-turn__face .book__copy { grid-row: 2; }
  .book-controls { flex-wrap: wrap; gap: 12px; }
  .book-controls__status { order: -1; width: 100%; }
  .about-author__inner { grid-template-columns: minmax(0, 1fr); }
  .about-author__portrait { justify-self: center; max-width: 240px; }
  .media-card { min-height: 380px; align-items: flex-end; padding: 22px; background: linear-gradient(0deg, #09151b 0%, rgb(9 21 27 / 90%) 28%, transparent 75%), url("images/UnderTwoMoonBG.png") center top / 100% auto no-repeat, #09151b; }
  .song-player { flex-wrap: wrap; gap: 12px; padding: 12px; }
  .song-player__volume { flex-basis: 100%; padding-left: 64px; }
  .footer__credit { justify-content: center; }
  .character-grid { grid-template-columns: minmax(0, 1fr); gap: 25px; width: 86%; }
  .site-header__inner { flex-direction: column; gap: 2px; padding-top: 12px; }
  .navigation { width: 100%; justify-content: center; flex-wrap: wrap; gap: 0 18px; font-size: 10px; }
  .navigation a { padding: 12px 0; }
  .navigation a[aria-current="page"]::after { bottom: 5px; }
  .hero { height: auto; }
  .hero__image { height: auto; }
  .hero__wave { height: min(40px, 8vw); }
  .book-section__inner, .book-section--dark .book-section__inner { width: 84%; grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 32px 0 45px; }
  .book__copy, .book-section--dark .book__copy { grid-column: 1; grid-row: 2; }
  .book__mockup, .book-section--dark .book__mockup { grid-column: 1; grid-row: 1; width: 65%; max-width: 230px; }
  .book__copy { font-size: 15px; }
  .book__copy h2 { font-size: 30px; }
  .book-section--dark::before, .book-section__scenery { clip-path: polygon(0 0, 100% 3%, 100% 97%, 0 100%); }
  .book-section--third .book-section__inner { padding-top: 30px; }
  .features__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 16px; padding: 28px 0; }
  .feature, .feature:first-child, .feature:last-child { padding: 0; border: 0; }
  .footer__inner { grid-template-columns: minmax(0, 1fr); gap: 20px; text-align: center; padding: 25px 0; }
  .author-logo--footer { grid-row: 1; }
  .footer__email { grid-row: 2; justify-self: center; font-size: 12px; }
  .footer__credit { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .book__mockup { transition: none; }
  .book-turn__leaf { animation: none; }
}