@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

:root {
  /* ── Colors ─────────────────────────────────────────────── */
  --color-surface: #ffffff;
  --color-g90: rgba(0, 0, 0, 0.9);
  --color-g40: rgba(0, 0, 0, 0.4);
  --color-g20: rgba(0, 0, 0, 0.2);
  --color-g10: rgba(0, 0, 0, 0.1);
  --color-g05: rgba(0, 0, 0, 0.05);
  --color-g03: rgba(0, 0, 0, 0.03);
  --color-w20: rgba(255, 255, 255, 0.2);

  /* ── Typography ──────────────────────────────────────────── */
  --font-family: "Inter", sans-serif;

  --font-size-base: 14px;
  --font-size-nav:  12px;

  --font-weight-semibold: 600;
  --font-weight-medium:   500;

  --line-height-base: 20px;
  --line-height-nav:  16px;

  --letter-spacing-base: -0.14px;
  --letter-spacing-nav:  -0.12px;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-4:   4px;
  --space-8:   8px;
  --space-10:  10px;
  --space-12:  12px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-48:  48px;
  --space-64:  64px;
  --space-80:  80px;
  --space-120: 120px;
  --space-128: 128px;

  /* ── Layout ──────────────────────────────────────────────── */
  --nav-width:     140px;
  --nav-left:      var(--space-80);
  --content-width: 560px;
  --page-top:      var(--space-120);

  /* ── Icons ───────────────────────────────────────────────── */
  --icon-size:         20px;
  --icon-stroke-width: 2;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-media: 8px;
  --radius-pill:  24px;

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   250ms ease;
  --transition-normal: 500ms ease;
}

/* ============================================================
   TEXT STYLES
   ============================================================ */

body {
  margin: 0;
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Page Layout ─────────────────────────────────────────────────────────────
   Three-column structure: nav (sticky) | body (centered, max 560px) | plug
   The plug mirrors the nav width so the body stays optically centered.

   <div class="page-vual">          ← fixed top-edge gradient fade
   <div class="page-layout">
     <nav class="page-nav">…</nav>  ← sticky left column
     <main class="page-body">…</main>
     <div class="page-plug">…</div> ← empty right spacer
   </div>
*/
.page-vual {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);
  pointer-events: none;
  z-index: 10;
}

.page-vual--home {
  height: 40px;
}

.page-layout {
  display: grid;
  grid-template-columns: var(--nav-width) 1fr var(--nav-width);
  gap: var(--space-64);
  align-items: flex-start;
  padding: var(--page-top) var(--nav-left);
}

.page-layout--home {
  display: flex;
  gap: var(--space-32);
  align-items: flex-start;
}

.page-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  max-width: var(--content-width);
  min-width: 0;
  width: 100%;
  margin: 0 auto;
}

.page-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

/* .page-plug — empty spacer, width set by grid-template-columns */


/* ── Icons ───────────────────────────────────────────────────── */
.icon {
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
}

/* ── Entrance animation ──────────────────────────────────────── */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-item {
  opacity: 0;
  will-change: opacity, transform;
}

.animate-item.is-visible {
  /* cubic-bezier(0.16, 1, 0.3, 1) — резкий старт, плавный финиш */
  animation: fade-in 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

figure {
  margin: 0;
}

::selection {
  background: var(--color-g10);
  color: var(--color-g90);
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

/* H1 — role heading: title + date meta, no top padding
   Structure:
   <div class="text-h1">
     <span class="text-h1__name">Role Name</span>
     <div class="text-h1__meta">
       <span>2021 – 2024</span>
       <span class="text-h1__duration"><span>·</span><span>3+ years</span></span>
     </div>
   </div>
*/
.text-h1 {
  display: flex;
  flex-direction: column;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
}

.text-h1__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-g90);
}

.text-h1__meta {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-weight: var(--font-weight-medium);
  color: var(--color-g40);
  white-space: nowrap;
}

.text-h1__duration {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* H2 — section label: "Work", "About Me" */
.h2 {
  padding-top: var(--space-64);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-g90);
}

/* H3 — sub-heading with stretching line to the right */
.text-h3 {
  padding-top: var(--space-48);
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-g90);
}

.text-h3::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-g10);
  min-width: 1px;
}

/* Text — body paragraph */
.text-body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-g90);
}

ul,
ol {
  margin: 0;
  padding-left: 21px;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-g90);
}

/* Nav / H4 — sidebar navigation items */
.text-nav {
  font-family: var(--font-family);
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-nav);
  letter-spacing: var(--letter-spacing-nav);
  color: var(--color-g40);
}

/* Link — inline external link */
.text-link {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-g90);
  text-decoration: underline;
  text-decoration-color: var(--color-g20);
  text-decoration-style: solid;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-fast);
}

.text-link:hover {
  text-decoration-color: var(--color-g90);
}

.text-link--external {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.text-link--external .icon {
  --icon-stroke-width: 1.4;
  color: var(--color-g20);
  transition: color var(--transition-fast);
}

.text-link--external:hover .icon {
  color: var(--color-g90);
}

/* Reset browser default <mark> styles */
mark {
  background: none;
  color: inherit;
}

/* ── Table ───────────────────────────────────────────────────────────────────
   <table class="table">
     <thead>
       <tr><th class="table__header" colspan="3">Заголовок</th></tr>
     </thead>
     <tbody>
       <tr>
         <td class="table__year">2025</td>
         <td class="table__body">
           <span class="table__title">Row Title <mark class="text-highlight">New!</mark></span>
           <span class="table__duration">4 months</span>  ← optional
         </td>
       </tr>
     </tbody>
   </table>
*/
.table {
  width: 100%;
  border-collapse: collapse;
}

.table__header {
  padding: 12px 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-g40);
  text-align: left;
}

.table tbody tr {
  border-top: 1px solid var(--color-g10);
}

.table__year {
  padding: 12px 24px 12px 0;
  width: 40px;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-g40);
  vertical-align: middle;
  white-space: nowrap;
}

.table__body {
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: var(--space-32);
  transition: opacity var(--transition-fast);
}

.table__title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-g90);
  white-space: nowrap;
}

.table__title-link {
  color: inherit;
  text-decoration: none;
}

.table__duration {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-g40);
  white-space: nowrap;
  display: none;
}

/* Hover: fade all rows except the one under cursor */
.table tbody:has(tr:hover) tr .table__body {
  opacity: 0.4;
}
.table tbody:has(tr:hover) tr:hover .table__body {
  opacity: 1;
}

/* Responsive gaps and duration visibility */
@media (min-width: 430px) {
  .table__year {
    padding-right: 64px;
  }
}

@media (min-width: 560px) {
  .table__duration {
    display: block;
  }
}

/* ── Media Item ──────────────────────────────────────────────────────────────
   Optional wrapper that adds a caption below any media element.

   <figure class="media-item">
     <div class="media">…</div>
     <figcaption class="media-caption">Подпись</figcaption>  ← optional
   </figure>
*/
.media-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.media-caption {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-g40);
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Media Bento ─────────────────────────────────────────────────────────────
   Variants: media-bento--1 | --2 | --3 | --4 | --5

   <div class="media-bento media-bento--3">
     <div class="media-bento__col">
       <div class="media-bento__item"><img class="media-bento__img" src="…" alt="…"></div>
     </div>
     <div class="media-bento__col">
       <div class="media-bento__item"><img class="media-bento__img" src="…" alt="…"></div>
       <div class="media-bento__item"><img class="media-bento__img" src="…" alt="…"></div>
     </div>
   </div>
*/
.media-bento {
  display: flex;
  gap: var(--space-12);
}

.media-bento__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.media-bento__item {
  flex: 1;
  border-radius: var(--radius-media);
  background: var(--color-g03);
  box-shadow: 0 0 0 1px var(--color-g05);
  overflow: hidden;
  min-height: 0;
}

.media-bento__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* --1: single image, whole block is 4:3 */
.media-bento--1 {
  aspect-ratio: 4 / 3;
}

/* --2: two images side by side, each cell is 4:3 */
.media-bento--2 .media-bento__item {
  aspect-ratio: 4 / 3;
  flex: none;
}

/* --3: left col 1 tall image, right col 2 stacked — whole block is 4:3 */
.media-bento--3 {
  aspect-ratio: 4 / 3;
}

/* --4: two cols, 2 stacked each — whole block is 4:3 */
.media-bento--4 {
  aspect-ratio: 4 / 3;
}

/* --5: three images, left tile spans two rows */
.media-bento--5 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  aspect-ratio: 4 / 3;
}

.media-bento--5 .media-bento__item {
  min-height: 0;
}

.media-bento--5 .media-bento__item:first-child {
  grid-row: span 2;
}

/* ── Media ───────────────────────────────────────────────────────────────────
   Structure:
   <div class="media">
     <video class="media__video" src="…" playsinline preload="metadata"></video>
     <button class="video-btn" …>…</button>
   </div>
*/
.media {
  position: relative;
  border-radius: var(--radius-media);
  background: var(--color-g03);
  box-shadow: 0 0 0 1px var(--color-g05);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.media__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.media__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Button sits in the top-right corner of the media container */
.media > .video-btn {
  position: absolute;
  top: 11px;
  right: 11px;
}

/* ── Video Button ────────────────────────────────────────────────────────────
   Variants: video-btn--light-bg | video-btn--dark-bg

   <button class="video-btn video-btn--light-bg" type="button" aria-label="…">
     <span class="video-btn__content">
       <svg class="video-btn__ring" …><circle class="video-btn__ring-progress"/></svg>
       <svg class="icon"><use href="#icon-pause"/></svg>
     </span>
   </button>
*/
.video-btn {
  position: relative;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

/* light-bg: white tint + blur */
.video-btn--light-bg {
  background: var(--color-w20);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* dark-bg: dark tint + blur */
.video-btn--dark-bg {
  background: var(--color-g10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.video-btn__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.video-btn:hover .video-btn__content {
  opacity: 1;
}

/* dark-bg: white icon */
.video-btn--dark-bg .video-btn__content {
  color: var(--color-surface);
}

/* light-bg and no modifier: g40 icon */
.video-btn:not(.video-btn--dark-bg) .video-btn__content {
  color: var(--color-g40);
}

.video-btn__ring {
  position: absolute;
  inset: 0;
  width: 32px;
  height: 32px;
  /* start progress from the top */
  transform: rotate(-90deg);
}

.video-btn__ring-progress {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke-width);
  stroke-linecap: round;
  /* circumference = 2π × r(14) ≈ 87.96 */
  stroke-dasharray: 87.96;
  stroke-dashoffset: 87.96;
  transition: stroke-dashoffset 100ms linear, opacity 200ms ease-out;
}

/* ── Icon crossfade animations ───────────────────────────────── */
@keyframes icon-out {
  from { opacity: 1; transform: scale(1);    filter: blur(0px); }
  to   { opacity: 0; transform: scale(0.6);  filter: blur(3px); }
}

@keyframes icon-in {
  from { opacity: 0; transform: scale(0.75); filter: blur(3px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0px); }
}

.video-btn .icon.is-exiting {
  animation: icon-out 120ms ease-in forwards;
}

.video-btn .icon.is-entering {
  /* slight spring overshoot for a snappy feel */
  animation: icon-in 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Page Navigation ─────────────────────────────────────────────────────────
   Sidebar nav built from H1 and H2 page headings.

   Structure:
   <nav class="page-nav" aria-label="Page navigation">
     <div class="page-nav__block">
       <a class="page-nav__item" href="#">↑ Back to top</a>
     </div>
     <div class="page-nav__block">
       <a class="page-nav__item" href="#…">H1 label</a>
       <a class="page-nav__item" href="#…">H2 item</a>
       <a class="page-nav__item is-active" href="#…">H2 item (active)</a>
     </div>
   </nav>
*/
.page-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  width: var(--nav-width);
  flex-shrink: 0;
  position: sticky;
  top: var(--page-top);
}

.page-nav__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.page-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-family);
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-nav);
  letter-spacing: var(--letter-spacing-nav);
  color: var(--color-g40);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.page-nav__item:hover {
  color: var(--color-g90);
}

.page-nav .icon {
  --icon-size: 16px;
}

/* ── Highlight — inline marker, like ==text== in markdown */
.text-highlight {
  display: inline;
  padding: 2px 6px;
  border-radius: 12px 4px 12px 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image:
    linear-gradient(270deg, rgba(252, 237, 119, 1) 0%, rgba(252, 237, 119, 0) 13.2%),
    linear-gradient( 90deg, rgba(252, 237, 119, 1) 0%, rgba(252, 237, 119, 0) 10.4%),
    linear-gradient( 90deg, rgba(252, 237, 119, 0.15) 0%, rgba(252, 237, 119, 0.7) 100%);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-g90);
  white-space: nowrap;
}

/* ── Popover ─────────────────────────────────────────────────────────────────
   Single shared instance, positioned and filled by JS on hover.
   Variants controlled by presence of child elements:
     — Full:           .popover__image + .popover__title + .popover__desc
     — No description: .popover__image + .popover__title
     — No image:       .popover__title + .popover__desc
     — Title only:     .popover__title

   Trigger: any element with data-popover-title (+ optional data-popover-desc,
   data-popover-image).

   <div class="popover" role="tooltip">
     <div class="popover__image"><img …></div>   ← optional
     <div class="popover__details">
       <p class="popover__title">…</p>
       <p class="popover__desc">…</p>             ← optional
     </div>
   </div>
*/
.popover {
  display: none;
  position: fixed;
  z-index: 100;
  width: 220px;
  background: var(--color-surface);
  outline: 1px solid var(--color-g05);
  border-radius: var(--radius-media);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.04),
    0 4px 24px rgba(0, 0, 0, 0.02);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px) scale(0.97);
}

/* Step 1: put in DOM so height is measurable, still invisible */
.popover.is-shown {
  display: block;
}

/* Step 2: animate in — transition only on this class so hiding is instant */
.popover.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 400ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.popover__image {
  aspect-ratio: 220 / 165;
  background: var(--color-g03);
  overflow: hidden;
}

.popover__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popover__details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-12) 16px;
}

.popover__title {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-g90);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

.popover__desc {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-g40);
}

@media (hover: none), (pointer: coarse) {
  .popover {
    display: none !important;
  }
}

/* ── Responsive ──────────────────────────────────────────────────────────────
   Must be last so mobile overrides aren't undercut by later component rules.
*/
/* ── Chapters Navigation ─────────────────────────────────────────────────────
   Wrapper that holds the optional back button + the Read Next block.
   Back button is optional — omit it on the first page.

   <nav class="chapters-nav">
     <a class="chapters-nav__back" href="/prev-page" aria-label="Previous page">
       <svg class="icon" aria-hidden="true"><use href="#icon-option"/></svg>
       <svg class="icon" aria-hidden="true"><use href="#icon-arrow-prev"/></svg>
     </a>
     <a class="next-chapter" href="/next-page">…</a>
   </nav>
*/
.chapters-nav {
  display: flex;
  gap: var(--space-12);
  align-items: stretch;
}

.chapters-nav__back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 68px;
  flex-shrink: 0;
  border-radius: var(--radius-media);
  border: 1px solid var(--color-g05);
  background: var(--color-surface);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.chapters-nav__back:hover {
  background: var(--color-g03);
}

.chapters-nav__back .icon {
  --icon-size: 16px;
  color: var(--color-g20);
}

/* When inside chapters-nav, next-chapter fills the remaining space */
.chapters-nav .next-chapter {
  flex: 1;
  min-width: 0;
}

/* ── Next Chapter ────────────────────────────────────────────────────────────
   Navigation block at the bottom of a page.

   <a class="next-chapter" href="/next-page">
     <div class="next-chapter__body">
       <span class="next-chapter__label">Read next</span>
       <span class="next-chapter__title">Page Title</span>
     </div>
     <div class="next-chapter__hotkey" aria-hidden="true">
       <svg class="icon next-chapter__icon"><use href="#icon-option"/></svg>
       <svg class="icon next-chapter__icon"><use href="#icon-arrow-next"/></svg>
     </div>
   </a>
*/
.next-chapter {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) 16px;
  border-radius: var(--radius-media);
  border: 1px solid var(--color-g05);
  background: var(--color-surface);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.next-chapter:hover {
  background: var(--color-g03);
}

.next-chapter__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
}

.next-chapter__label {
  color: var(--color-g40);
}

.next-chapter__title {
  color: var(--color-g90);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.next-chapter__hotkey {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.next-chapter__icon {
  --icon-size: 16px;
  color: var(--color-g20);
}

@media (max-width: 1080px) {
  .page-layout {
    display: flex;
    flex-direction: column;
    padding: var(--space-48) var(--space-24);
  }

  .page-nav {
    position: static;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }

  .page-plug {
    display: none;
  }
}