:root {
  --bg: #f8f3ef;
  --surface: #fffdfa;
  --ink: #24191f;
  --muted: #756a72;
  --wine: #75485f;
  --wine-dark: #2d1d25;
  --line: rgba(45, 29, 37, .12);
  --paper: #fffaf2;
  --paper-2: #f3e9dd;
  --wood-1: #bc895f;
  --wood-2: #87593d;
  --wood-3: #5a3826;
  --wood-4: #40271d;
  --shadow: 0 28px 80px rgba(47, 29, 38, .14);
  --soft: 0 16px 38px rgba(47, 29, 38, .10);
  --ease: cubic-bezier(.2, .78, .2, 1);
  --ease-book: cubic-bezier(.18, .76, .16, 1);
  --max: 1220px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 3%, rgba(205, 158, 179, .15), transparent 28rem),
    linear-gradient(180deg, #fdf9f6 0%, var(--bg) 45%, #fffdf9 100%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
body.reader-open,
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(117, 72, 95, .32);
  outline-offset: 3px;
}
.container { width: min(calc(100% - 36px), var(--max)); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -.048em;
  line-height: .97;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 5000;
  padding: 10px 14px;
  border-radius: 12px;
  color: #fff;
  background: var(--wine-dark);
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: none; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--wine);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; }

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .08s; }

/* Header */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  padding: 18px 0;
  transition: padding .28s ease, background .28s ease, border-color .28s ease;
}
.header.scrolled {
  padding: 10px 0;
  background: rgba(253, 249, 246, .9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark {
  width: 46px;
  height: 46px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wine), #ae738d);
  box-shadow: 0 12px 26px rgba(117, 72, 95, .22);
}
.brand__mark img { width: 88%; height: 88%; object-fit: contain; }
.brand__text { display: grid; line-height: 1.05; }
.brand__text strong { font-size: .98rem; }
.brand__text small {
  margin-top: 4px;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { position: relative; font-size: .89rem; font-weight: 780; color: #51434b; }
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: var(--wine);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .24s ease;
}
.nav a:hover::after,
.nav a.active::after { transform: scaleX(1); transform-origin: left; }
.menu {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .82);
  cursor: pointer;
}
.menu i { display: block; width: 18px; height: 1.5px; margin: 4px auto; background: var(--ink); border-radius: 999px; transition: .24s ease; }

/* Hero */
.hero { min-height: auto; display: grid; align-items: center; padding: 140px 0 88px; }
.hero__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 42px; align-items: center; }
.hero h1 { margin-top: 18px; font-size: clamp(3.2rem, 7vw, 6.25rem); }
.hero h1 em { color: var(--wine); font-style: italic; }
.hero__copy > p {
  margin-top: 22px;
  max-width: 625px;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.08rem);
  line-height: 1.82;
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button {
  min-height: 52px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .91rem;
  font-weight: 850;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.button:hover { transform: translateY(-2px); }
.primary { color: #fff; background: var(--wine-dark); box-shadow: 0 14px 28px rgba(45, 29, 37, .18); }
.secondary { background: rgba(255, 255, 255, .78); border-color: var(--line); }

.hero__visual { position: relative; min-height: 640px; }
.hero__image { position: absolute; inset: 0; overflow: hidden; border-radius: 36px; background: #2b1b22; box-shadow: var(--shadow); }
.hero__image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.76) brightness(.73); }
.hero__image span { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,8,10,.02), rgba(13,8,10,.16) 45%, rgba(13,8,10,.58) 100%); }
.hero__books { position: absolute; left: 7%; right: 7%; bottom: 6%; z-index: 2; display: flex; align-items: flex-end; gap: 15px; perspective: 1400px; }
.hero__books figure { position: relative; flex: 1; margin: 0; transform-style: preserve-3d; filter: drop-shadow(0 28px 22px rgba(16,9,12,.34)); }
.hero__books figure:nth-child(1) { transform: rotateY(-14deg) rotateX(4deg); }
.hero__books figure:nth-child(2) { transform: translateY(-12px) rotateY(-8deg) rotateX(3deg); }
.hero__books figure:nth-child(3) { transform: rotateY(-12deg) rotateX(4deg); }
.hero__books img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px 14px 14px 8px; }
.hero__label {
  position: absolute;
  top: 22px;
  left: 22px;
  right: 22px;
  z-index: 3;
  padding: 14px 16px 13px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, rgba(45,29,37,.88), rgba(72,43,58,.76));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 36px rgba(20,10,15,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero__label-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.hero__label small {
  color: rgba(255,255,255,.82);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero__label-head > span {
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .98rem;
  line-height: 1;
}
.hero__steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
}
.hero__steps li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 11px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.08);
}
.hero__steps b {
  flex: 0 0 auto;
  color: #e9bfd1;
  font-size: .66rem;
  letter-spacing: .06em;
}
.hero__steps li > span {
  min-width: 0;
  overflow: hidden;
  color: rgba(255,255,255,.96);
  font-size: .72rem;
  font-weight: 760;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sections */
.library, .about, .contact { padding: 104px 0; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 500px); align-items: end; gap: clamp(32px, 5vw, 72px); margin-bottom: 42px; }
.section-head h2, .about h2, .contact h2 { margin-top: 14px; font-size: clamp(2.25rem, 4.5vw, 4rem); }
.section-head > p { max-width: 500px; justify-self: end; color: var(--muted); line-height: 1.8; }

/* Cabinet */
.cabinet {
  position: relative;
  overflow: hidden;
  padding: 38px 34px 32px;
  border-radius: 34px;
  background: linear-gradient(180deg, #9a6b4a, #71472f 58%, #563322);
  box-shadow: 0 34px 70px rgba(58,35,23,.22), inset 0 2px 0 rgba(255,255,255,.12);
}
.cabinet::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    repeating-linear-gradient(7deg, transparent 0 34px, rgba(255,255,255,.06) 35px 36px),
    repeating-linear-gradient(93deg, transparent 0 72px, rgba(38,19,10,.12) 73px 74px);
  mix-blend-mode: soft-light;
}
.cabinet__top, .cabinet__left, .cabinet__right {
  position: absolute;
  z-index: 4;
  background: linear-gradient(180deg, var(--wood-1), var(--wood-2) 55%, var(--wood-4));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14), 0 8px 14px rgba(35,19,12,.2);
}
.cabinet__top { left: 18px; right: 18px; top: 16px; height: 25px; border-radius: 10px; }
.cabinet__left, .cabinet__right { top: 17px; bottom: 18px; width: 25px; border-radius: 10px; }
.cabinet__left { left: 17px; }
.cabinet__right { right: 17px; }
.cabinet__niche {
  position: relative;
  min-height: 530px;
  padding: 78px 24px 74px;
  border-radius: 20px 20px 6px 6px;
  background:
    linear-gradient(180deg, rgba(255,247,234,.08), rgba(0,0,0,.08)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 74px),
    linear-gradient(180deg, #805339, #68422e);
  box-shadow: inset 0 20px 36px rgba(0,0,0,.16), inset 0 -18px 28px rgba(0,0,0,.13);
}
.cabinet__light { position: absolute; left: 8%; right: 8%; top: 28px; height: 160px; pointer-events: none; filter: blur(15px); background: radial-gradient(ellipse at center, rgba(255,224,181,.34), transparent 70%); }
.cabinet__plaque {
  position: absolute;
  z-index: 5;
  left: 50%; top: 24px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 8px 17px 7px;
  border: 1px solid rgba(97,63,30,.46);
  border-radius: 4px;
  color: #4b3425;
  background: linear-gradient(180deg, #e0c181, #b78b4e);
  box-shadow: 0 8px 12px rgba(31,17,10,.22), inset 0 1px 0 rgba(255,255,255,.44);
  font-family: Georgia, serif;
  font-size: .71rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.shelf-track {
  position: relative;
  z-index: 2;
  min-height: 372px;
  padding: 18px 10px 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 28px);
  perspective: 1800px;
  outline: none;
}
.shelf-track::before {
  content: "";
  position: absolute;
  left: 6%; right: 6%; bottom: 20px; height: 60px;
  pointer-events: none;
  filter: blur(13px);
  background: radial-gradient(ellipse at center, rgba(21,10,6,.38), transparent 70%);
}
.shelf-board {
  position: absolute;
  z-index: 3;
  left: 0; right: 0; bottom: 28px; height: 52px;
  background: linear-gradient(180deg, #b67f56, #8b593b 48%, #583521);
  box-shadow: 0 18px 24px rgba(27,14,8,.36), inset 0 2px 0 rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.18);
}
.shelf-board::before { content: ""; position: absolute; left: 0; right: 0; top: -7px; height: 9px; background: linear-gradient(180deg, #c28b61, #7f5034); box-shadow: 0 5px 8px rgba(27,14,8,.24); }
.shelf-board span { position: absolute; left: 4%; right: 4%; top: 9px; height: 1px; background: rgba(255,255,255,.13); }
.shelf-arrow {
  position: absolute;
  z-index: 8;
  top: 53%;
  width: 48px; height: 48px;
  display: none;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  color: #6a4b39;
  background: rgba(255,249,242,.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 14px 28px rgba(29,14,8,.18), inset 0 1px 0 rgba(255,255,255,.85);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
}
.shelf-arrow svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.shelf-arrow:hover { background: rgba(255,255,255,.96); box-shadow: 0 16px 30px rgba(29,14,8,.22), inset 0 1px 0 rgba(255,255,255,.92); }
.shelf-arrow--prev:hover { transform: translateY(-50%) translateX(-2px); }
.shelf-arrow--next:hover { transform: translateY(-50%) translateX(2px); }
.shelf-arrow:active { transform: translateY(-50%) scale(.95); }
.shelf-arrow:focus-visible { outline: 3px solid rgba(117,72,95,.24); outline-offset: 3px; }
.shelf-arrow--prev { left: 14px; }
.shelf-arrow--next { right: 14px; }
.shelf-arrow:disabled { opacity: .34; cursor: default; box-shadow: 0 8px 18px rgba(29,14,8,.12); }

.cabinet__base { position: relative; z-index: 2; min-height: 114px; padding: 22px 24px 4px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; color: #f9f0e8; }
.cabinet__base p { max-width: 420px; text-align: center; }
.cabinet__base small { display: block; color: #e8cdb5; font-size: .68rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.cabinet__base p span { display: block; margin-top: 7px; font-family: Georgia, serif; font-size: 1.06rem; line-height: 1.35; }
.decor { display: flex; align-items: flex-end; gap: 7px; }
.decor--right { justify-self: end; }
.decor i { display: block; border-radius: 3px; box-shadow: 0 8px 12px rgba(0,0,0,.2); }
.decor--left i:nth-child(1) { width: 18px; height: 48px; background: #8d6679; }
.decor--left i:nth-child(2) { width: 23px; height: 62px; background: #c7aa8e; }
.decor--left i:nth-child(3) { width: 18px; height: 43px; background: #77758a; }
.decor--right i { width: 55px; height: 15px; }
.decor--right i:first-child { background: #d0ad84; transform: rotate(-7deg); }
.decor--right i:last-child { background: #8c667b; transform: translate(-16px, 9px) rotate(4deg); }
.swipe-hint { display: none; margin-top: 12px; text-align: center; color: var(--muted); font-size: .76rem; }

/* Shelf books */
.shelf-book {
  position: relative;
  flex: 0 0 clamp(122px, 11.5vw, 158px);
  width: clamp(122px, 11.5vw, 158px);
  padding: 0 0 18px;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform-origin: 50% 100%;
  transition: transform .36s var(--ease), filter .3s ease, opacity .2s ease;
  filter: drop-shadow(0 20px 18px rgba(17,9,6,.3));
}
.shelf-book:hover,
.shelf-book:focus-visible { z-index: 5; transform: translateY(-14px) scale(1.025); }
.shelf-book__visual { position: relative; display: block; transform-style: preserve-3d; transform: perspective(1500px) rotateY(-10deg) rotateX(3deg); transition: transform .36s var(--ease); }
.shelf-book:hover .shelf-book__visual,
.shelf-book:focus-visible .shelf-book__visual { transform: perspective(1500px) rotateY(-5deg) rotateX(2deg); }
.shelf-book__cover { position: relative; display: block; overflow: hidden; aspect-ratio: 2 / 3; border-radius: 7px 13px 13px 7px; background: #ddd; box-shadow: 0 15px 28px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.12); }
.shelf-book__cover img { width: 100%; height: 100%; object-fit: cover; }
.shelf-book__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.16), transparent 11%, rgba(255,255,255,.09) 74%, rgba(0,0,0,.07)); }
.shelf-book__pages { display: none; }
.shelf-book__stand { position: absolute; left: 50%; bottom: -7px; z-index: -1; width: 54%; height: 28px; transform: translateX(-50%); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #e8d9cb, #a98972); box-shadow: 0 10px 14px rgba(0,0,0,.14); }
.shelf-book__meta { margin-top: 12px; text-align: center; color: #f9efe8; text-shadow: 0 2px 8px rgba(36,18,10,.34); transition: opacity .26s ease, transform .32s var(--ease); }
.shelf-book__meta strong { display: block; font-family: Georgia, serif; font-size: clamp(.82rem, .82vw, .95rem); line-height: 1.15; }
.shelf-book__meta small { display: block; margin-top: 4px; color: rgba(255,242,230,.72); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 820; }
.shelf-book__tooltip { position: absolute; left: 50%; bottom: -24px; transform: translate(-50%, 5px); opacity: 0; white-space: nowrap; padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.96); box-shadow: 0 8px 20px rgba(0,0,0,.18); font-size: .69rem; font-weight: 800; color: #44323b; pointer-events: none; transition: .2s ease; }
.shelf-book:hover .shelf-book__tooltip,
.shelf-book:focus-visible .shelf-book__tooltip { opacity: 1; transform: translate(-50%, 0); }
.shelf-book.is-hidden { opacity: 0; pointer-events: none; }
.shelf-book.is-centered { z-index: 6; }
.shelf-book.is-centered .shelf-book__visual { transform: perspective(1500px) rotateY(-4deg) rotateX(1deg) translateY(-3px); }
.shelf-book.is-centered .shelf-book__meta { opacity: 1; transform: translateY(0); }
.shelf-book.is-neighbour { z-index: 4; }

/* About & contact */
.about__grid, .contact__grid { display: grid; grid-template-columns: .94fr 1.06fr; gap: 34px; align-items: stretch; }
.about__visual, .about__copy, .contact__intro, .contact__form { border-radius: 32px; background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.88); box-shadow: var(--soft); }
.about__visual { position: relative; overflow: hidden; min-height: 500px; }
.about__visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.74) brightness(.72); }
.about__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(26,15,21,.82) 100%); }
.about__visual blockquote { position: absolute; z-index: 2; left: 34px; right: 34px; bottom: 34px; margin: 0; color: #fff; font-family: Georgia, serif; font-size: clamp(1.45rem, 2.5vw, 2.25rem); line-height: 1.15; }
.about__copy, .contact__intro, .contact__form { padding: clamp(32px, 5vw, 58px); }
.about__copy > p, .contact__intro > p { margin-top: 20px; color: var(--muted); line-height: 1.85; }
.about__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.about__cards article { padding: 16px; border-radius: 17px; background: var(--surface); border: 1px solid var(--line); }
.about__cards b { display: block; font-family: Georgia, serif; font-size: 1.18rem; font-weight: 500; }
.about__cards span { display: block; margin-top: 4px; color: var(--muted); font-size: .76rem; }
.email { display: inline-flex; margin-top: 24px; font-weight: 850; color: var(--wine); }
.contact__form { display: grid; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact__form label:not(.consent) { display: grid; gap: 7px; margin-bottom: 14px; }
.contact__form label > span { color: #594b52; font-size: .73rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.contact__form input, .contact__form textarea { width: 100%; padding: 14px 15px; border: 1px solid var(--line); border-radius: 14px; background: #fff; outline: none; }
.contact__form input:focus, .contact__form textarea:focus { border-color: rgba(117,72,95,.42); box-shadow: 0 0 0 4px rgba(117,72,95,.08); }
.contact__form textarea { min-height: 150px; resize: vertical; }
.consent { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; margin: 4px 0 20px; color: var(--muted); font-size: .81rem; }
.consent input { margin-top: 4px; accent-color: var(--wine); }
footer { padding: 20px 0 40px; }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 24px; color: var(--muted); font-size: .82rem; }
.footer__inner button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; }

/* Reader overlay */
.reader { position: fixed; inset: 0; z-index: 3000; display: none; opacity: 0; transition: opacity .22s ease; }
.reader.active { display: block; }
.reader.visible { opacity: 1; }
.reader__backdrop { position: absolute; inset: 0; background: rgba(19,12,16,.66); backdrop-filter: blur(11px); }
.reader__close, .reader__nav { position: fixed; z-index: 20; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.95); box-shadow: 0 14px 30px rgba(0,0,0,.18); cursor: pointer; }
.reader__close { top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); width: 48px; height: 48px; border-radius: 50%; font-size: 1.4rem; }
.reader__nav {
  top: 50%;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: var(--wine-dark);
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(108,65,85,.14);
  box-shadow: 0 12px 28px rgba(22,12,17,.18), inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.reader__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; }
.reader__nav:hover { background: #fff; border-color: rgba(108,65,85,.22); box-shadow: 0 15px 32px rgba(22,12,17,.22), inset 0 1px 0 rgba(255,255,255,.95); }
.reader__nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.reader__nav--next:hover { transform: translateY(-50%) translateX(2px); }
.reader__nav:active { transform: translateY(-50%) scale(.94); }
.reader__nav:focus-visible { outline: 3px solid rgba(117,72,95,.24); outline-offset: 3px; }
.reader__nav--prev { left: max(18px, env(safe-area-inset-left)); }
.reader__nav--next { right: max(18px, env(safe-area-inset-right)); }
.reader__footer { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 20; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: #f4e7ee; font-size: .76rem; opacity: 0; transition: opacity .2s ease; }
.reader.opened .reader__footer { opacity: 1; }
.reader__footer > div { display: flex; gap: 9px; }
.reader__footer button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.32); cursor: pointer; }
.reader__footer button.active { background: #fff; transform: scale(1.18); }

.book-stage { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; pointer-events: none; }
.book-rig { position: relative; width: var(--rig-w, 840px); height: var(--rig-h, 620px); perspective: 2400px; transform-style: preserve-3d; opacity: 0; transition: opacity .15s ease; }
.book-rig.ready { opacity: 1; }
.book-shadow { position: absolute; left: 9%; right: 9%; bottom: -8%; height: 20%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,.34), transparent 70%); filter: blur(20px); opacity: 0; transition: opacity .45s ease; }
.book-volume { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateX(-25%) rotateX(7deg) rotateY(-7deg); transition: transform .70s var(--ease-book); }
.book-back { position: absolute; left: 0; top: 0; width: 50%; height: 100%; border-radius: 14px 0 0 14px; background: linear-gradient(180deg, #684255, #37242e); transform: translateZ(-18px); box-shadow: 0 20px 40px rgba(0,0,0,.17); }
.book-page { position: absolute; top: 0; width: 50%; height: 100%; padding: 30px 32px 24px; background: linear-gradient(180deg, #fffdf8, #f4eadf); box-shadow: inset 0 0 0 1px rgba(92,66,52,.06); opacity: 0; pointer-events: none; transition: opacity .28s ease .18s, transform .72s var(--ease-book); z-index: 2; }
.book-page--left { left: 0; border-radius: 14px 0 0 14px; transform: translateX(14px); }
.book-page--right { right: 0; border-radius: 0 14px 14px 0; transform: translateX(-14px); }
.book-page--left::after, .book-page--right::after { content: ""; position: absolute; top: 0; bottom: 0; width: 18px; pointer-events: none; }
.book-page--left::after { right: -1px; background: linear-gradient(90deg, rgba(0,0,0,.13), transparent); }
.book-page--right::after { left: -1px; background: linear-gradient(90deg, transparent, rgba(0,0,0,.13)); }
.page-scroll { height: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(117,72,95,.25) transparent; transition: opacity .16s ease, transform .16s ease; }
.page-scroll::-webkit-scrollbar { width: 5px; }
.page-scroll::-webkit-scrollbar-thumb { background: rgba(117,72,95,.22); border-radius: 999px; }
.book-gutter { position: absolute; z-index: 4; left: calc(50% - 16px); top: 0; bottom: 0; width: 32px; background: linear-gradient(90deg, rgba(0,0,0,.13), rgba(255,255,255,.07), rgba(0,0,0,.14)); opacity: 0; transition: opacity .3s ease .28s; pointer-events: none; }
.front-cover { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; transform-origin: left center; transform: rotateY(0deg) translateZ(3px); transition: transform .72s cubic-bezier(.18,.74,.14,1), opacity .14s ease; z-index: 7; }
.front-cover.behind { z-index: 1; opacity: 0; pointer-events: none; }
.front-cover__outside, .front-cover__inside { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 0 14px 14px 0; overflow: hidden; transition: opacity .16s ease; }
.front-cover__outside { opacity: 1; background: #ddd; box-shadow: 0 28px 48px rgba(24,14,18,.25); }
.front-cover__outside img { width: 100%; height: 100%; object-fit: cover; }
.front-cover__outside span { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 10%, rgba(255,255,255,.09) 76%, rgba(0,0,0,.06)); }
.front-cover__inside { opacity: 0; transform: rotateY(180deg); padding: 28px 26px 24px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(180deg, #fffaf3, #efe4d8); box-shadow: inset 0 0 0 1px rgba(88,63,51,.08); }
.front-cover__inside small { align-self: flex-start; padding: 7px 10px; border-radius: 999px; background: #f2e3ea; color: var(--wine); font-size: .67rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.front-cover__inside blockquote { margin: 18px 0 0; font-family: Georgia, serif; font-size: clamp(1.4rem, 2vw, 1.95rem); line-height: 1.16; color: var(--wine-dark); }
.front-cover__inside p { color: var(--muted); font-size: .82rem; }
.reader.opened .book-volume { transform: translateX(0) rotateX(8deg) rotateY(-1.6deg) rotateZ(-.65deg); }
.reader.opened .front-cover { transform: rotateY(-162deg) translateZ(3px); }
.reader.opened .front-cover__outside { opacity: 0; transition-delay: .26s; }
.reader.opened .front-cover__inside { opacity: 1; transition-delay: .26s; }
.reader.opened .book-page { opacity: 1; pointer-events: auto; transform: translateX(0); }
.reader.opened .book-gutter { opacity: .62; }
.reader.opened .book-shadow { opacity: 1; }

.page-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--wine); font-size: .68rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.page-kicker::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.book-page h3 { margin-top: 14px; font-size: clamp(2rem, 3vw, 2.9rem); }
.page-series, .page-tagline { margin-top: 9px; color: #584851; font-size: .9rem; font-weight: 760; line-height: 1.6; }
.book-summary { display: grid; grid-template-columns: 112px 1fr; gap: 17px; align-items: center; margin-top: 22px; }
.book-summary figure { position: relative; overflow: hidden; margin: 0; aspect-ratio: 2 / 3; border-radius: 7px 11px 11px 7px; box-shadow: 0 14px 24px rgba(31,18,24,.14); }
.book-summary img { width: 100%; height: 100%; object-fit: cover; }
.book-summary p { color: var(--muted); font-size: .88rem; line-height: 1.7; }
.metadata { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 0; }
.metadata div { padding: 13px 14px; border: 1px solid rgba(85,61,73,.09); border-radius: 14px; background: rgba(255,255,255,.72); }
.metadata dt { color: var(--muted); font-size: .64rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.metadata dd { margin: 4px 0 0; color: var(--wine-dark); font-size: .86rem; font-weight: 800; }
.story-title { font-size: clamp(1.9rem, 2.8vw, 2.55rem) !important; }
.page-body { margin-top: 16px; color: var(--muted); font-size: .91rem; line-height: 1.8; }
.reader-notes { display: grid; gap: 9px; margin-top: 20px; }
.reader-notes p { padding: 11px 13px; border: 1px solid rgba(85,61,73,.08); border-radius: 14px; background: rgba(255,255,255,.7); color: #55464e; font-size: .84rem; line-height: 1.6; }
.reader-actions { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-top: 22px; padding-top: 17px; border-top: 1px solid rgba(85,61,73,.11); }
.reader-actions p { max-width: 220px; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.mobile-book-head { display: none; }

.pickup-clone { position: fixed; z-index: 4000; pointer-events: none; transform-origin: 0 0; filter: drop-shadow(0 24px 24px rgba(18,10,14,.28)); will-change: transform, opacity; backface-visibility: hidden; }
.pickup-clone__cover { position: absolute; inset: 0; overflow: hidden; border-radius: 7px 13px 13px 7px; background: #ddd; }
.pickup-clone__cover img { width: 100%; height: 100%; object-fit: cover; }
.pickup-clone__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.16), transparent 11%, rgba(255,255,255,.09) 74%, rgba(0,0,0,.07)); }


/* Physical book switching: while changing titles the closed volume turns on its vertical axis. */
.book-rig { will-change: transform, filter; }
.reader.opened .book-rig { transform-style: preserve-3d; }
.reader[data-mode="compact"] .book-stage { touch-action: pan-y; }
.reader[data-mode="compact"] .book-page--right { box-shadow: 0 24px 54px rgba(16,9,13,.24), inset 0 0 0 1px rgba(92,66,52,.06); }
.reader[data-mode="compact"] .front-cover__outside { box-shadow: 0 28px 54px rgba(16,9,13,.28); }
.reader[data-mode="compact"].opened .book-page--right { animation: compactPageSettle .46s var(--ease-book) both; }
@keyframes compactPageSettle {
  from { transform: perspective(1200px) rotateY(-2.5deg) translateX(5px); }
  to { transform: perspective(1200px) rotateY(0deg) translateX(0); }
}

@media (max-width: 1100px) {
  .hero__grid, .about__grid, .contact__grid { grid-template-columns: 1fr; }
  .hero { padding-top: 116px; }
  .hero__visual { min-height: 560px; }
  .section-head { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .section-head > p { max-width: 720px; justify-self: start; }
  .about__visual { min-height: 440px; }
}

@media (max-width: 900px) {
  .library, .about, .contact { padding: 78px 0; }
  .about__cards, .form-row { grid-template-columns: 1fr; }
  .cabinet { padding: 30px 18px 22px; border-radius: 28px; }
  .cabinet__top { left: 14px; right: 14px; top: 13px; }
  .cabinet__left, .cabinet__right { top: 14px; bottom: 14px; width: 20px; }
  .cabinet__left { left: 13px; }
  .cabinet__right { right: 13px; }
  .cabinet__niche { min-height: 500px; padding: 72px 12px 78px; }
  .cabinet__plaque { top: 20px; font-size: .64rem; letter-spacing: .12em; }
  .shelf-track {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: visible;
    min-height: 368px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc(50% - 78px);
    gap: 12px;
    padding-inline: calc(50% - 78px);
    scrollbar-width: none;
  }
  .shelf-track::-webkit-scrollbar { display: none; }
  .shelf-book { width: 156px; flex: 0 0 156px; padding-bottom: 24px; scroll-snap-align: center; opacity: .56; transform: translateY(8px) scale(.88); }
  .shelf-book.is-neighbour { opacity: .82; transform: translateY(4px) scale(.93); }
  .shelf-book.is-centered { opacity: 1; transform: translateY(-2px) scale(1); }
  .shelf-book__meta { max-width: 150px; margin-top: 24px; margin-inline: auto; opacity: 0; transform: translateY(10px); }
  .shelf-book__tooltip { display: none; }
  .shelf-arrow { display: grid; top: 68%; }
  .cabinet__base { grid-template-columns: 1fr; min-height: 126px; padding: 18px 18px 2px; }
  .decor { display: none; }
  .swipe-hint { display: block; }
}

@media (max-width: 760px) {
  .container { width: min(calc(100% - 28px), var(--max)); }
  .header { padding: 13px 0; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__text small { display: none; }
  .menu { display: block; }
  .nav {
    position: fixed;
    top: 70px;
    left: 14px;
    right: 14px;
    display: grid;
    gap: 0;
    padding: 10px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 22px 40px rgba(47,29,38,.14);
    transition: .24s ease;
  }
  .nav a { padding: 14px 8px; }
  .nav a + a { border-top: 1px solid rgba(45,29,37,.08); }
  body.menu-open .nav { opacity: 1; pointer-events: auto; transform: none; }
  body.menu-open .menu i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  body.menu-open .menu i:nth-child(2) { opacity: 0; }
  body.menu-open .menu i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  .hero { min-height: auto; padding: 104px 0 62px; }
  .hero h1 { font-size: clamp(2.85rem, 14vw, 4.2rem); }
  .hero__visual { min-height: 318px; margin-top: 18px; }
  .hero__label {
    top: 12px;
    left: 14px;
    right: 14px;
    padding: 10px 12px 9px;
    border-radius: 16px;
  }
  .hero__label-head { gap: 8px; padding-bottom: 6px; }
  .hero__label small { font-size: .56rem; letter-spacing: .14em; }
  .hero__label-head > span { font-size: .9rem; }
  .hero__steps { gap: 5px; margin-top: 6px; }
  .hero__steps li { gap: 5px; padding: 5px 7px; border-radius: 9px; }
  .hero__steps b { font-size: .58rem; }
  .hero__steps li > span { font-size: .6rem; }

  .hero__books {
    left: 6%;
    right: 6%;
    top: 132px;
    bottom: auto;
    gap: 9px;
  }

  .section-head h2, .about h2, .contact h2 { font-size: clamp(2.15rem, 11vw, 3.2rem); }
  .cabinet { margin-inline: -5px; padding: 28px 16px 20px; border-radius: 26px; }
  .cabinet__left, .cabinet__right { width: 16px; }
  .cabinet__niche { min-height: 478px; padding: 62px 8px 68px; }
  .cabinet__plaque { top: 18px; padding: 7px 12px; font-size: .61rem; }
  .shelf-track { min-height: 338px; gap: 10px; padding-inline: calc(50% - 74px); scroll-padding-inline: calc(50% - 74px); }
  .shelf-book { width: 148px; flex-basis: 148px; }
  .shelf-book__meta strong { font-size: .82rem; }
  .shelf-board { bottom: 24px; height: 40px; }
  .shelf-arrow { width: 44px; height: 44px; top: 69%; }
  .cabinet__base { min-height: 108px; padding-top: 18px; }
  .cabinet__base p span { font-size: .96rem; }

  .about__copy, .contact__intro, .contact__form { padding: 28px 22px; }
  .about__visual { min-height: 390px; }
  .about__visual blockquote { left: 24px; right: 24px; bottom: 24px; }

  .reader__nav { top: auto; bottom: max(18px, env(safe-area-inset-bottom)); width: 50px; height: 50px; border-radius: 17px; transform: none; }
  .reader__nav svg { width: 19px; height: 19px; }
  .reader__nav--prev:hover, .reader__nav--next:hover, .reader__nav:active { transform: none; }
  .reader__nav:active { transform: scale(.94); }
  .reader__nav--prev { left: 14px; }
  .reader__nav--next { right: 14px; }
  .reader__close { width: 44px; height: 44px; }
  .reader__footer { display: none; }
}

/* Compact reader for tablet/mobile */
.reader[data-mode="compact"] .book-rig {
  width: var(--rig-w) !important;
  height: var(--rig-h) !important;
  overflow: hidden;
  border-radius: 14px;
  contain: paint;
  isolation: isolate;
}
.reader[data-mode="compact"] .book-volume { transform: rotateX(2deg) rotateY(-2deg); }
.reader[data-mode="compact"] .book-back { left: 0; width: 100%; border-radius: 14px; }
.reader[data-mode="compact"] .book-page--left { display: none; }
.reader[data-mode="compact"] .book-page--right { left: 0; right: auto; width: 100%; border-radius: 14px; padding: 22px 20px 18px; transform: none; }
.reader[data-mode="compact"] .book-page--right::after { display: none; }
.reader[data-mode="compact"] .front-cover { left: 0; width: 100%; border-radius: 14px; transform-origin: left center; }
.reader[data-mode="compact"] .front-cover__outside,
.reader[data-mode="compact"] .front-cover__inside { border-radius: 14px; }
.reader[data-mode="compact"].opened .book-volume { transform: rotateX(1deg) rotateY(0deg); }
.reader[data-mode="compact"].opened .front-cover { transform: rotateY(-102deg) translateZ(3px); }
.reader[data-mode="compact"] .book-gutter { display: none; }
.reader[data-mode="compact"] .mobile-book-head { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(85,61,73,.11); }
.mobile-book-head img { width: 76px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px 9px 9px 6px; box-shadow: 0 10px 18px rgba(31,18,24,.13); }
.mobile-book-head span { display: block; color: var(--wine); font-size: .63rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.mobile-book-head h3 { margin-top: 5px !important; font-size: 1.65rem !important; line-height: 1 !important; }
.mobile-book-head p { margin-top: 5px; color: var(--muted); font-size: .77rem; font-weight: 760; }
.reader[data-mode="compact"] .page-scroll { padding-right: 2px; }
.reader[data-mode="compact"] .story-title { font-size: 1.7rem !important; }
.reader[data-mode="compact"] .page-body { font-size: .88rem; }
.reader[data-mode="compact"] .reader-actions { flex-direction: column; align-items: flex-start; }
.reader[data-mode="compact"] .reader-actions p { max-width: none; }
.reader[data-mode="compact"] .front-cover__inside { padding: 22px 20px; }
.reader[data-mode="compact"] .front-cover__inside blockquote { font-size: 1.45rem; }

@media (max-width: 420px), (max-height: 680px) and (max-width: 900px) {
  .reader[data-mode="compact"] .book-page--right { padding: 18px 17px 16px; }
  .reader[data-mode="compact"] .mobile-book-head { grid-template-columns: 64px 1fr; margin-bottom: 15px; padding-bottom: 14px; }
  .reader[data-mode="compact"] .mobile-book-head img { width: 64px; }
  .reader[data-mode="compact"] .story-title { font-size: 1.52rem !important; }
  .reader[data-mode="compact"] .page-tagline { font-size: .82rem; }
  .reader[data-mode="compact"] .page-body { font-size: .84rem; line-height: 1.7; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* =========================
   V5 — completion + polish
   ========================= */
.latest, .blog, .legal { padding: 96px 0; }
.latest { padding: 48px 0 54px; }
.latest + .library { padding-top: 58px; }
.latest__inner {
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
  gap: clamp(38px, 5vw, 68px);
  align-items: center;
  padding: clamp(34px, 4.5vw, 52px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 34px;
  background:
    radial-gradient(circle at 12% 5%, rgba(211,166,185,.18), transparent 26rem),
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(248,240,244,.78));
  box-shadow: var(--shadow-soft);
}
.latest__cover {
  position: relative;
  width: min(100%, 310px);
  justify-self: center;
  aspect-ratio: 2 / 3;
  border-radius: 8px 16px 16px 8px;
  overflow: hidden;
  background: #ddd;
  transform: perspective(1400px) rotateY(-10deg) rotateX(2deg);
  filter: drop-shadow(0 28px 24px rgba(42,22,32,.2));
}
.latest__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.13), transparent 10%, rgba(255,255,255,.08) 73%, rgba(0,0,0,.06));
}
.latest__cover img { width: 100%; height: 100%; object-fit: cover; }
.latest__copy { min-width: 0; align-self: center; }
.latest__copy .eyebrow { margin-bottom: 14px; }
.latest__copy h2 { max-width: 780px; }
.latest__copy > p { margin-top: 22px; max-width: 720px; color: var(--muted); line-height: 1.85; }
.latest__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.latest__tags span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(108,65,85,.11);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #5c4652;
  font-size: .73rem;
  font-weight: 820;
}
.latest__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.blog { background: rgba(255,255,255,.26); }
.blog__head { display: grid; grid-template-columns: 1fr .8fr; gap: 32px; align-items: end; margin-bottom: 34px; }
.blog__head p { max-width: 520px; color: var(--muted); line-height: 1.8; }
.blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.blog-card {
  min-height: 290px;
  padding: 28px;
  border: 1px solid rgba(45,29,37,.09);
  border-radius: 26px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 15px 36px rgba(43,26,34,.07);
}
.blog-card > span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--wine-dark);
  color: white;
  font-family: Georgia, serif;
  font-size: .82rem;
}
.blog-card h3 { margin-top: 34px; font-size: 1.65rem; }
.blog-card p { margin-top: 14px; color: var(--muted); line-height: 1.78; font-size: .92rem; }
.delay-2 { transition-delay: .16s; }

.legal { padding-top: 46px; }
.legal__wrap {
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid rgba(45,29,37,.08);
  border-radius: 30px;
  background: rgba(255,255,255,.66);
  box-shadow: 0 14px 38px rgba(43,26,34,.06);
}
.legal__wrap header { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 26px; }
.legal__wrap h2 { font-size: clamp(2rem, 4vw, 3.3rem); }
.legal__items { display: grid; gap: 10px; }
.legal details { border: 1px solid rgba(45,29,37,.09); border-radius: 18px; background: rgba(255,255,255,.72); overflow: clip; }
.legal summary { position: relative; padding: 17px 48px 17px 18px; cursor: pointer; font-weight: 820; list-style: none; }
.legal summary::-webkit-details-marker { display: none; }
.legal summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--wine); font-size: 1.2rem; }
.legal details[open] summary::after { content: "−"; }
.legal details > div { padding: 0 18px 18px; color: var(--muted); font-size: .88rem; line-height: 1.75; }
.legal details > div p + p { margin-top: 10px; }

footer { padding: 32px 0 42px; background: rgba(45,29,37,.035); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr .75fr auto;
  gap: 30px;
  align-items: start;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.footer__grid > div:first-child strong { font-family: Georgia, serif; font-size: 1.35rem; font-weight: 500; }
.footer__grid > div:first-child p { margin-top: 4px; color: var(--muted); font-size: .82rem; }
.footer__grid nav,
.footer__social { display: grid; gap: 8px; }
.footer__grid nav a,
.footer__social a { color: #5d5057; font-size: .84rem; font-weight: 730; }
.footer__grid nav a:hover,
.footer__social a:hover { color: var(--wine); }
.footer__grid #toTop { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: white; cursor: pointer; }
.footer__bottom { margin-top: 26px; color: var(--muted); font-size: .78rem; }

.social-link { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; color: var(--wine); font-weight: 820; }
.social-link::after { content: "↗"; font-size: .8rem; }
.reader-buy-links { display: flex; flex-wrap: wrap; gap: 8px; }
.hidden { display: none !important; }

/* More physical replacement when changing books */
.book-rig { will-change: transform, opacity, filter; }
.reader[data-mode="compact"].opened .front-cover { transform: rotateY(-102deg) translateZ(3px); }

@media (max-width: 900px) {
  .latest, .blog, .legal { padding: 76px 0; }
  .latest { padding: 38px 0 46px; }
  .latest + .library { padding-top: 46px; }
  .latest__inner { grid-template-columns: minmax(190px, 250px) minmax(0, 1fr); gap: 34px; padding: 30px; }
  .blog__head { grid-template-columns: 1fr; gap: 14px; }
  .blog__grid { grid-template-columns: 1fr; }
  .blog-card { min-height: 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .latest__inner { grid-template-columns: 1fr; padding: 24px 20px; border-radius: 26px; gap: 28px; }
  .latest__cover { width: min(72vw, 245px); transform: perspective(1200px) rotateY(-6deg); }
  .latest__copy { text-align: left; }
  .latest__actions .button { flex: 1 1 100%; }
  .blog-card { padding: 24px 22px; border-radius: 22px; }
  .legal__wrap { padding: 24px 18px; border-radius: 24px; }
  .legal__wrap header { display: grid; gap: 10px; }
  .footer__grid { grid-template-columns: 1fr auto; gap: 22px; }
  .footer__grid nav, .footer__social { grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .reader-buy-links { width: 100%; }
  .reader-buy-links .button { flex: 1 1 100%; }
}


@media (max-width: 480px) {
  .cabinet { margin-inline: -2px; }
  .cabinet__niche { padding-inline: 10px; }
  .shelf-track { padding-inline: calc(50% - 70px); scroll-padding-inline: calc(50% - 70px); }
  .shelf-book { width: 140px; flex-basis: 140px; }
  .cabinet__base p span { font-size: .98rem; }
}


/* V6.2 — precise mobile handoff and contained book opening */
.reader[data-mode="compact"] .front-cover {
  transform-origin: 0 50%;
  transition: transform .66s cubic-bezier(.2,.72,.16,1), opacity .14s ease;
  backface-visibility: hidden;
}
.reader[data-mode="compact"] .front-cover__outside,
.reader[data-mode="compact"] .front-cover__inside {
  backface-visibility: hidden;
}
.reader[data-mode="compact"].opened .front-cover {
  transform: perspective(1400px) rotateY(-102deg) translateZ(2px);
}
.reader[data-mode="compact"].opened .book-page--right {
  transform: none !important;
  animation: compactPageReveal .42s cubic-bezier(.2,.72,.16,1) both;
}
@keyframes compactPageReveal {
  0% { opacity: .2; filter: brightness(.96); }
  55% { opacity: .72; filter: brightness(.985); }
  100% { opacity: 1; filter: brightness(1); }
}
@media (max-width: 900px) {
  .book-stage { padding: max(68px, env(safe-area-inset-top)) 14px max(70px, env(safe-area-inset-bottom)); }
  .reader[data-mode="compact"] .book-rig {
    max-width: calc(100vw - 28px);
    max-height: calc(100dvh - 138px);
  }
}


/* V6.3 — physically correct cover layering on desktop and compact reader */
.front-cover.behind {
  z-index: 1;
  opacity: 1;
  pointer-events: none;
}
.front-cover__outside,
.front-cover__inside,
.reader.opened .front-cover__outside,
.reader.opened .front-cover__inside {
  opacity: 1;
  transition: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.reader.opened .front-cover {
  transform: rotateY(-170deg) translateZ(3px);
}
.reader[data-mode="compact"].opened .front-cover {
  transform: perspective(1400px) rotateY(-102deg) translateZ(2px);
}

/* V6.4 — keep the real cover visibly present inside the opened book */
@media (min-width: 901px) {
  .book-page--left .page-scroll {
    display: flex;
    flex-direction: column;
  }
  .book-page--left .book-summary {
    grid-template-columns: minmax(128px, 42%) 1fr;
    gap: 18px;
    align-items: center;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid rgba(85,61,73,.08);
    border-radius: 18px;
    background: rgba(255,255,255,.42);
  }
  .book-page--left .book-summary figure {
    width: 100%;
    max-width: 158px;
    justify-self: center;
    border-radius: 7px 12px 12px 7px;
    box-shadow: 0 18px 30px rgba(31,18,24,.18);
    transform: perspective(900px) rotateY(-4deg);
  }
  .book-page--left .book-summary figure::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0,0,0,.12), transparent 12%, rgba(255,255,255,.08) 74%, rgba(0,0,0,.05));
  }
  .book-page--left .book-summary p {
    font-size: .86rem;
    line-height: 1.65;
  }
  .book-page--left .metadata {
    margin-top: 14px;
  }
}

@media (max-width: 900px) {
  .reader[data-mode="compact"] .mobile-book-head {
    grid-template-columns: 106px 1fr;
    gap: 16px;
    align-items: center;
    padding: 12px 12px 18px;
    margin-bottom: 20px;
    border: 1px solid rgba(85,61,73,.08);
    border-radius: 18px;
    background: rgba(255,255,255,.42);
  }
  .reader[data-mode="compact"] .mobile-book-head img {
    width: 106px;
    border-radius: 7px 12px 12px 7px;
    box-shadow: 0 16px 28px rgba(31,18,24,.17);
    transform: perspective(850px) rotateY(-4deg);
  }
}

@media (max-width: 420px), (max-height: 680px) and (max-width: 900px) {
  .reader[data-mode="compact"] .mobile-book-head {
    grid-template-columns: 86px 1fr;
    gap: 13px;
    padding: 10px 10px 14px;
  }
  .reader[data-mode="compact"] .mobile-book-head img {
    width: 86px;
  }
}

/* =========================================================
   V6.5 — clean physical cover + permanent interior cover
   ========================================================= */

/* The old rear board was visible beside the closed volume on desktop.
   Depth is now supplied by page edges/shadows, so the board must never
   become a separate rectangle in the composition. */
.book-back {
  opacity: 0 !important;
  visibility: hidden !important;
  box-shadow: none !important;
}

/* Once the moving cover crosses the spine it is physically behind the
   page block. Hide the moving object completely at that point so its
   inside face can never cover the permanent left-hand page. */
.front-cover.behind {
  z-index: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Keep the cover visible while it is actually turning. */
.front-cover:not(.behind) {
  visibility: visible;
}

/* Desktop opened-book page: the real book cover stays visibly printed
   inside the book instead of being replaced by the cover's inner face. */
@media (min-width: 901px) {
  .book-page--left {
    padding: 24px 26px 22px;
  }

  .book-page--left .page-scroll {
    display: grid;
    grid-template-columns: minmax(132px, 43%) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 20px;
    align-content: start;
    overflow-x: hidden;
  }

  .book-page--left .page-kicker {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  .book-page--left #bookTitle {
    grid-column: 2;
    grid-row: 2;
    margin-top: 24px;
    font-size: clamp(1.62rem, 2.25vw, 2.35rem);
    line-height: .98;
  }

  .book-page--left .page-series {
    grid-column: 2;
    grid-row: 3;
    margin-top: 8px;
    align-self: start;
  }

  .book-page--left .book-summary {
    display: contents;
  }

  .book-page--left .book-summary figure {
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: start;
    width: 100%;
    max-width: none;
    margin: 0;
    aspect-ratio: 2 / 3;
    border-radius: 7px 12px 12px 7px;
    overflow: hidden;
    background: #ddd;
    box-shadow: 0 18px 32px rgba(31,18,24,.20);
    transform: perspective(1000px) rotateY(-3deg);
  }

  .book-page--left .book-summary figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .book-page--left .book-summary p {
    grid-column: 2;
    grid-row: 4;
    margin: 14px 0 0;
    padding: 12px 13px;
    border: 1px solid rgba(85,61,73,.08);
    border-radius: 14px;
    background: rgba(255,255,255,.55);
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.55;
  }

  .book-page--left .metadata {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 8px;
    margin-top: 18px;
  }

  .book-page--left .metadata div {
    min-width: 0;
    padding: 10px 10px 11px;
  }

  .book-page--left .metadata dd {
    font-size: .76rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
}

/* On narrower desktop windows keep the cover prominent but prevent the
   metadata row from becoming cramped. */
@media (min-width: 901px) and (max-width: 1120px) {
  .book-page--left .page-scroll {
    grid-template-columns: minmax(120px, 40%) minmax(0,1fr);
    column-gap: 16px;
  }
  .book-page--left .metadata {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

/* V6.7 — alignment pass */
@media (min-width: 901px) {
  .latest__cover { justify-self: start; }
  .latest__copy { padding-right: clamp(0px, 2vw, 24px); }
  .latest__actions .button { min-width: 142px; }
  .library .container, .latest__inner { box-sizing: border-box; }
}

@media (min-width: 1101px) {
  .latest__inner { grid-template-columns: 310px minmax(0, 1fr); }
}

/* V6.8 — desktop shelf typography & baseline alignment */
@media (min-width: 901px) {
  .shelf-track {
    min-height: 392px;
  }

  .shelf-book {
    padding-bottom: 24px;
  }

  .shelf-book__meta {
    margin-top: 22px;
    min-height: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .shelf-book__meta strong {
    width: 100%;
    min-height: 2.45em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    line-height: 1.22;
  }

  .shelf-book__meta small {
    margin-top: 8px;
    line-height: 1.25;
  }
}


/* V6.10 — keep the mobile reader centred after horizontal swipes */
.reader.active {
  overflow: hidden;
  overscroll-behavior-x: none;
}
.reader[data-mode="compact"] .book-stage {
  overscroll-behavior-x: none;
  touch-action: pan-y;
}
.reader[data-mode="compact"] .book-rig {
  transform-origin: 50% 50%;
}

/* V6.15 — mobile spacing: real block gap under covers + more readable section title */
@media (max-width: 900px) {
  .shelf-book__meta {
    display: block;
    margin-top: 30px;
  }

  .shelf-book__meta strong {
    line-height: 1.28;
  }

  .shelf-book__meta small {
    margin-top: 9px;
    line-height: 1.3;
  }

  .section-head h2 {
    line-height: 1.08;
  }

  .section-head > p {
    line-height: 1.9;
  }
}


/* =========================================================
   V6.20 — glitch-free physical opening
   The moving cover crosses the spine before the old delayed page fade began.
   Pages now reveal underneath the cover immediately on opening, while closing
   keeps a short delay so the reverse motion still looks physically coherent.
   ========================================================= */
.book-page {
  transition: opacity .22s ease .12s, transform .72s var(--ease-book);
}
.reader.opened .book-page {
  transition-delay: 0s, 0s;
}
.book-gutter {
  transition: opacity .26s ease .10s;
}
.reader.opened .book-gutter {
  transition-delay: .04s;
}

@media (max-width: 900px) {
  .reader[data-mode="compact"].opened .book-page--right {
    animation-delay: .02s;
  }
}


/* =========================================================
   V6.21 — first-open compositor flash fix
   The reader itself no longer fades as one giant composited layer. Only the
   lightweight dim backdrop and controls fade after the pickup cover exists.
   backdrop-filter is intentionally disabled here: first-use shader/layer
   creation on Chromium/Android can render a dark/blank frame.
   ========================================================= */
.reader {
  opacity: 1;
  transition: none;
}
.reader__backdrop {
  opacity: 0;
  background: rgba(25, 16, 21, .58);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: opacity .24s ease;
  will-change: opacity;
  pointer-events: none;
}
.reader.visible .reader__backdrop {
  opacity: 1;
  pointer-events: auto;
}
.reader__chrome {
  opacity: 0;
  transition: opacity .18s ease .035s;
  pointer-events: none;
}
.reader.visible .reader__chrome {
  opacity: 1;
  pointer-events: auto;
}


/* =========================================================
   V6.22 — deterministic book-opening pipeline
   No opacity cross-fades are used for the physical page block on compact
   readers. The page is fully opaque beneath the cover before the hinge moves,
   so the website can never show through the book during the opening.
   ========================================================= */
.book-rig {
  transition: none !important;
}

@media (max-width: 900px) {
  .reader[data-mode="compact"] .book-page--right,
  .reader[data-mode="compact"].opened .book-page--right {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .reader[data-mode="compact"] .page-scroll {
    opacity: 1 !important;
  }
}

/* V6.27 — contact form removed: keep the contact section as one clean card */
.contact__grid { grid-template-columns: 1fr; }
.contact__intro { max-width: 760px; width: 100%; margin-inline: auto; }

@media (max-width: 430px) {
  .hero__label { padding-inline: 10px; }
  .hero__label-head > span { font-size: .84rem; }
  .hero__steps li { align-items: flex-start; min-height: 36px; }
  .hero__steps li > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.08; }
}

/* V5 — mobile only: keep reading-order strip almost attached to covers */
@media (max-width: 430px) {
  .hero__visual { min-height: 324px; }
  .hero__books { top: 140px; }
}


/* V7 — separated contact links */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.contact-method {
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 17px 18px;
  border: 1px solid rgba(117,72,95,.12);
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 28px rgba(47,29,38,.07);
  transition: transform .22s var(--ease), border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.contact-method:hover {
  transform: translateY(-2px);
  border-color: rgba(117,72,95,.26);
  background: #fff;
  box-shadow: 0 16px 34px rgba(47,29,38,.11);
}
.contact-method__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--wine);
  background: rgba(117,72,95,.09);
}
.contact-method__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-method__icon .fill-dot { fill: currentColor; stroke: none; }
.contact-method__copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.contact-method__copy small {
  color: var(--muted);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.contact-method__copy strong {
  min-width: 0;
  color: var(--wine-dark);
  font-size: .88rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.contact-method__arrow {
  color: var(--wine);
  font-size: 1.05rem;
  transition: transform .22s ease;
}
.contact-method:hover .contact-method__arrow { transform: translate(2px,-2px); }

@media (max-width: 700px) {
  .contact-methods { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .contact-method { min-height: 82px; padding: 14px 15px; grid-template-columns: 44px minmax(0, 1fr) auto; }
  .contact-method__icon { width: 44px; height: 44px; border-radius: 14px; }
  .contact-method__copy strong { font-size: .9rem; }
}


/* --- Mi camino · retrato editorial V2 --- */
.about__visual.about__portrait {
  position: relative;
  isolation: isolate;
  min-height: 610px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 34px;
  background:
    radial-gradient(circle at 76% 24%, rgba(255,237,244,.30), transparent 23%),
    radial-gradient(circle at 66% 54%, rgba(188,117,150,.24), transparent 32%),
    linear-gradient(132deg, #35202b 0%, #553143 37%, #8e5c75 72%, #c695aa 100%);
  box-shadow: 0 34px 78px rgba(52,28,40,.22);
}
.about__visual.about__portrait::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 25px;
  pointer-events: none;
}
.about__visual.about__portrait::after {
  content: "ISABEL";
  position: absolute;
  z-index: 0;
  left: 28px;
  bottom: -12px;
  color: rgba(255,255,255,.055);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(6.5rem, 11vw, 10rem);
  line-height: .8;
  letter-spacing: -.07em;
  pointer-events: none;
}
.about__portrait-atmosphere {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(29,15,23,.72) 0%, rgba(29,15,23,.47) 32%, rgba(29,15,23,.05) 62%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 38%, rgba(25,12,18,.25) 100%);
  pointer-events: none;
}
.about__portrait-halo {
  position: absolute;
  z-index: 1;
  top: 55px;
  right: 7%;
  width: 300px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 0 0 34px rgba(255,255,255,.035),
    0 0 0 70px rgba(255,255,255,.02);
  pointer-events: none;
}
.about__visual.about__portrait .about__portrait-person {
  position: absolute;
  z-index: 2;
  right: -2%;
  bottom: -1%;
  width: 72%;
  height: 99%;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(-18px 24px 28px rgba(19,8,14,.30));
}
.about__portrait-quote {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 46px;
  width: min(42%, 340px);
  transform: translateY(-50%);
  color: #fff8f4;
}
.about__portrait-quote::before {
  content: "“";
  position: absolute;
  left: -8px;
  top: -58px;
  color: rgba(255,255,255,.12);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 7rem;
  line-height: 1;
  pointer-events: none;
}
.about__portrait-quote > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #efccd9;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.about__portrait-quote > span::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
.about__portrait-quote blockquote {
  position: static;
  inset: auto;
  margin: 0;
  color: #fffaf6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 2.45vw, 2.35rem);
  line-height: 1.12;
  text-wrap: balance;
}
.about__portrait-quote small {
  display: block;
  max-width: 270px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.18);
  color: rgba(255,244,239,.72);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.5;
}

@media (max-width: 1100px) and (min-width: 761px) {
  .about__visual.about__portrait { min-height: 620px; }
  .about__visual.about__portrait .about__portrait-person { width: 67%; }
  .about__portrait-quote { left: 38px; width: 38%; }
  .about__portrait-quote blockquote { font-size: 1.65rem; }
}

@media (max-width: 760px) {
  .about__visual.about__portrait {
    min-height: 680px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 28px;
    background:
      radial-gradient(circle at 54% 18%, rgba(255,236,244,.32), transparent 22%),
      linear-gradient(180deg, #a66f87 0%, #815069 43%, #4b2a3a 72%, #2f1b25 100%);
  }
  .about__visual.about__portrait::before {
    inset: 12px;
    border-radius: 21px;
  }
  .about__visual.about__portrait::after {
    left: 14px;
    bottom: 148px;
    font-size: 5.7rem;
  }
  .about__portrait-atmosphere {
    background:
      linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 45%, rgba(27,13,20,.12) 58%, rgba(27,13,20,.60) 100%);
  }
  .about__portrait-halo {
    top: 28px;
    right: 50%;
    width: 230px;
    transform: translateX(50%);
    box-shadow:
      0 0 0 25px rgba(255,255,255,.03),
      0 0 0 54px rgba(255,255,255,.018);
  }
  .about__visual.about__portrait .about__portrait-person {
    right: 50%;
    bottom: 146px;
    width: 98%;
    height: 78%;
    transform: translateX(50%);
    object-position: center bottom;
    filter: drop-shadow(0 22px 25px rgba(22,10,16,.25));
  }
  .about__portrait-quote {
    position: relative;
    z-index: 5;
    top: auto;
    left: auto;
    width: auto;
    min-height: 158px;
    transform: none;
    padding: 22px 24px 24px;
    color: #fff8f4;
    background: linear-gradient(180deg, rgba(47,27,37,.62), rgba(40,22,31,.92));
    border-top: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .about__portrait-quote::before { display: none; }
  .about__portrait-quote > span { margin-bottom: 10px; font-size: .58rem; }
  .about__portrait-quote blockquote {
    font-size: clamp(1.22rem, 5.7vw, 1.55rem);
    line-height: 1.16;
    text-wrap: pretty;
  }
  .about__portrait-quote small {
    margin-top: 13px;
    padding-top: 11px;
    font-size: .67rem;
  }
}

@media (max-width: 430px) {
  .about__visual.about__portrait { min-height: 640px; }
  .about__visual.about__portrait .about__portrait-person {
    bottom: 150px;
    width: 103%;
    height: 76%;
  }
  .about__portrait-quote { padding-inline: 20px; }
}

/* --- Mi camino · feature editorial V3 --- */
.about--feature {
  padding: clamp(82px, 9vw, 132px) 0;
}
.about-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, .76fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(72, 43, 56, .11);
  border-radius: 38px;
  background: #fbf7f3;
  box-shadow: 0 34px 90px rgba(47,29,38,.10);
}
.about-feature::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 34px;
  left: 34px;
  width: 74px;
  height: 3px;
  border-radius: 999px;
  background: var(--wine);
}
.about-feature__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 690px;
  padding: clamp(66px, 7vw, 94px) clamp(48px, 6vw, 84px);
  background:
    linear-gradient(90deg, rgba(117,72,95,.035) 1px, transparent 1px) 0 0 / 72px 100%,
    #fffdfa;
}
.about-feature__index {
  position: absolute;
  right: 30px;
  top: 24px;
  color: rgba(117,72,95,.09);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 7.5rem;
  line-height: 1;
  letter-spacing: -.08em;
  user-select: none;
}
.about-feature__content h2 {
  max-width: 720px;
  margin-top: 20px;
  font-size: clamp(3.25rem, 5.7vw, 6.25rem);
  line-height: .91;
  text-wrap: balance;
}
.about-feature__quote {
  position: relative;
  max-width: 760px;
  margin: 38px 0 0;
  padding: 26px 0 26px 32px;
  border-left: 3px solid var(--wine);
  color: #5d3a4b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.38rem, 2.1vw, 2.1rem);
  font-style: italic;
  line-height: 1.28;
}
.about-feature__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 32px;
}
.about-feature__body p {
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.82;
}
.about-feature__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 36px;
  border-top: 1px solid rgba(45,29,37,.10);
}
.about-feature__facts div {
  padding: 20px 18px 0 0;
}
.about-feature__facts div + div {
  padding-left: 18px;
  border-left: 1px solid rgba(45,29,37,.10);
}
.about-feature__facts strong,
.about-feature__facts span { display: block; }
.about-feature__facts strong {
  color: var(--wine-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 500;
}
.about-feature__facts span {
  margin-top: 3px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.about-feature__portrait {
  position: relative;
  z-index: 1;
  min-height: 690px;
  margin: 0;
  overflow: hidden;
  background: #eadde2;
}
.about-feature__portrait::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 470px;
  height: 470px;
  border-radius: 50%;
  right: -88px;
  top: 46px;
  border: 1px solid rgba(117,72,95,.19);
  box-shadow: 0 0 0 55px rgba(117,72,95,.035), 0 0 0 112px rgba(117,72,95,.022);
}
.about-feature__portrait::after {
  content: "AUTORA";
  position: absolute;
  z-index: 0;
  left: -12px;
  bottom: 98px;
  transform: rotate(-90deg);
  transform-origin: left bottom;
  color: rgba(117,72,95,.13);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .48em;
}
.about-feature__portrait img {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -2px;
  width: 108%;
  height: 94%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
  filter: drop-shadow(0 28px 34px rgba(54,32,43,.17));
}
.about-feature__portrait-art {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}
.about-feature__portrait-art span {
  position: absolute;
  right: 32px;
  width: 2px;
  border-radius: 2px;
  background: rgba(117,72,95,.30);
}
.about-feature__portrait-art span:nth-child(1) { top: 36px; height: 52px; }
.about-feature__portrait-art span:nth-child(2) { top: 36px; right: 42px; height: 28px; }
.about-feature__portrait-art span:nth-child(3) { bottom: 110px; right: 32px; height: 82px; }
.about-feature__portrait figcaption {
  position: absolute;
  z-index: 4;
  left: 24px;
  right: 24px;
  bottom: 22px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.66);
  border-radius: 18px;
  background: rgba(255,253,250,.84);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(47,29,38,.12);
}
.about-feature__portrait figcaption strong,
.about-feature__portrait figcaption span { display: block; }
.about-feature__portrait figcaption strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.13rem;
  font-weight: 500;
}
.about-feature__portrait figcaption span {
  max-width: 150px;
  color: var(--wine);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-align: right;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .about-feature {
    grid-template-columns: 1fr .78fr;
  }
  .about-feature__content,
  .about-feature__portrait { min-height: 650px; }
  .about-feature__content { padding: 62px 46px; }
  .about-feature__body { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 800px) {
  .about--feature { padding: 76px 0; }
  .about-feature {
    grid-template-columns: 1fr;
    border-radius: 28px;
  }
  .about-feature::before {
    top: 24px;
    left: 24px;
    width: 58px;
  }
  .about-feature__portrait {
    order: 1;
    min-height: 540px;
  }
  .about-feature__content {
    order: 2;
    min-height: auto;
    padding: 46px 26px 34px;
    background: #fffdfa;
  }
  .about-feature__index {
    top: 22px;
    right: 20px;
    font-size: 5.2rem;
  }
  .about-feature__content h2 {
    max-width: 100%;
    margin-top: 16px;
    font-size: clamp(2.7rem, 12vw, 4.4rem);
    line-height: .94;
  }
  .about-feature__quote {
    margin-top: 28px;
    padding: 20px 0 20px 22px;
    font-size: clamp(1.25rem, 5vw, 1.62rem);
  }
  .about-feature__body {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 26px;
  }
  .about-feature__body p { font-size: .92rem; line-height: 1.76; }
  .about-feature__facts {
    gap: 0;
    margin-top: 28px;
  }
  .about-feature__facts div { padding: 16px 10px 0 0; }
  .about-feature__facts div + div { padding-left: 10px; }
  .about-feature__facts strong { font-size: 1rem; }
  .about-feature__facts span { font-size: .64rem; }
  .about-feature__portrait::before {
    width: 370px;
    height: 370px;
    right: -120px;
    top: 40px;
  }
  .about-feature__portrait img {
    width: 102%;
    height: 94%;
  }
  .about-feature__portrait figcaption {
    left: 18px;
    right: 18px;
    bottom: 16px;
    padding: 14px 15px;
  }
}

@media (max-width: 480px) {
  .about-feature__portrait { min-height: 485px; }
  .about-feature__portrait img { width: 108%; height: 95%; }
  .about-feature__portrait figcaption { align-items: center; }
  .about-feature__portrait figcaption span { max-width: 112px; font-size: .58rem; }
  .about-feature__facts { grid-template-columns: 1fr 1fr 1fr; }
}