/* ==========================================================================
   Главная: архивный стол и две папки.
   Материал: графит стола, картон двух цветов, бумага листов.
   Ни градиентов, ни размытий — только плотность краски и зерно.
   ========================================================================== */

.page-archive {
  background: var(--graphite);
  color: var(--paper);
  color-scheme: dark;
}

.page-archive::after {
  mix-blend-mode: screen;
  opacity: 0.2;
}

/* ---------- вступление ---------- */

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.66fr);
  align-items: end;
  gap: clamp(24px, 5vw, 88px);
  padding: clamp(40px, 7vw, 104px) var(--gutter) clamp(36px, 5vw, 64px);
}

.intro__title {
  font-family: var(--font-book);
  font-weight: 700;
  font-size: clamp(64px, 11.6vw, 168px);
  line-height: 0.84;
  letter-spacing: -0.03em;
  color: var(--paper);
  position: relative;
  margin-left: -0.05em;
}

/* типографский крестик-метка: furniture набора, а не декор */
.intro__title::before {
  content: "";
  position: absolute;
  left: 0.04em;
  top: -0.34em;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M7 0v14M0 7h14' stroke='%23e8e4d9' stroke-width='1' opacity='.55'/%3E%3C/svg%3E");
}

.intro__text {
  padding-bottom: 0.6em;
  max-width: 46ch;
}

.intro__lead {
  font-family: var(--font-book);
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  line-height: 1.55;
  color: rgba(232, 228, 217, 0.9);
  hanging-punctuation: first;
}

.intro__hint {
  margin-top: var(--u-5);
  padding-top: var(--u-3);
  border-top: 1px solid rgba(232, 228, 217, 0.22);
  font-family: var(--font-ui);
  font-size: var(--s-12);
  letter-spacing: 0.01em;
  color: rgba(232, 228, 217, 0.55);
  max-width: 34ch;
}

/* ---------- стол с папками ---------- */

.desk {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.84fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
  padding: clamp(16px, 3vw, 40px) var(--gutter) clamp(48px, 7vw, 104px);
}

/* ---------- папка ---------- */

.folder {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.folder--mayak { --tilt: -2.2deg; --board: var(--cardboard-red); --board-2: var(--cardboard-red-2); }
.folder--dost { --tilt: 1.6deg; --board: var(--cardboard-slate); --board-2: var(--cardboard-slate-2); margin-top: clamp(32px, 6vw, 108px); }

.folder__tilt {
  display: block;
  position: relative;
  aspect-ratio: 1.36;
  perspective: 1400px;
  perspective-origin: 50% 40%;
  transform: rotate(var(--tilt)) translateY(0);
  transition: transform var(--slow) var(--ease);
}

.folder:hover .folder__tilt,
.folder:focus-visible .folder__tilt,
.folder[data-open="true"] .folder__tilt {
  transform: rotate(var(--tilt)) translateY(-10px);
}

/* задняя створка с табом */
.folder__back {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--board);
  background-image: url("../img/cardboard.png");
  background-size: 220px 220px;
  background-blend-mode: soft-light;
  clip-path: polygon(0 12%, 30% 12%, 35% 4%, 65% 4%, 70% 12%, 100% 12%, 100% 100%, 0 100%);
  box-shadow: 0 26px 34px -26px rgba(0, 0, 0, 0.85);
  transition: box-shadow var(--slow) var(--ease);
}

.folder:hover .folder__back,
.folder:focus-visible .folder__back,
.folder[data-open="true"] .folder__back {
  box-shadow: 0 42px 48px -32px rgba(0, 0, 0, 0.9);
}

/* ярлык на табе — «Дело 1» / «Дело 2» */
.folder__tab {
  position: absolute;
  z-index: 2;
  top: 4.6%;
  left: 35%;
  width: 30%;
  text-align: center;
  font-family: var(--font-ui);
  font-size: clamp(9px, 0.78vw, 11px);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(232, 228, 217, 0.95);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

/* листы внутри папки */
.folder__papers {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: translate3d(calc(var(--mx, 0) * 7px), calc(var(--my, 0) * 5px), 0);
  transition: transform 320ms var(--ease);
}

.paper {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.55);
  color: var(--ink);
  transition: transform var(--slow) var(--ease) var(--d, 0ms);
}

.paper img { display: block; width: 100%; height: auto; }

/* портрет в паспарту */
.paper--portrait {
  left: 6%;
  top: 5%;
  width: 31%;
  padding: 4% 4% 12%;
  background: #efebe2;
  transform: translateY(34%) rotate(-4deg);
}

.paper--portrait img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: var(--face, 50% 18%);
  filter: grayscale(1) contrast(1.04);
}

/* полоска документа */
.paper--strip {
  right: 3%;
  top: 17%;
  width: 55%;
  padding: 2.2% 2.2% 2.6%;
  transform: translateY(34%) rotate(2deg);
  --d: 55ms;
}

/* карточка с крупной наборной строкой */
.paper--card {
  left: 52%;
  top: 3%;
  width: 30%;
  padding: 7% 6% 6%;
  gap: 0.5em;
  transform: translateY(40%) rotate(6deg);
  --d: 110ms;
}

.paper__word {
  font-family: var(--font-poster);
  font-weight: 800;
  font-size: clamp(13px, 1.8vw, 24px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--red);
}

.paper__line {
  font-family: var(--font-book);
  font-size: clamp(11px, 1.35vw, 17px);
  line-height: 1.25;
  color: var(--ink);
}

.paper__sign {
  font-family: var(--font-ui);
  font-size: clamp(7px, 0.72vw, 9px);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* раскрытие листов: каждый выезжает со своей задержкой и своим наклоном */
.folder:hover .paper--portrait,
.folder:focus-visible .paper--portrait,
.folder[data-open="true"] .paper--portrait {
  transform: translateY(-3%) rotate(-7deg);
}

.folder:hover .paper--strip,
.folder:focus-visible .paper--strip,
.folder[data-open="true"] .paper--strip {
  transform: translateY(-9%) rotate(2.4deg);
}

.folder:hover .paper--card,
.folder:focus-visible .paper--card,
.folder[data-open="true"] .paper--card {
  transform: translateY(4%) rotate(8deg);
}

.folder:hover .paper--sheet,
.folder:focus-visible .paper--sheet,
.folder[data-open="true"] .paper--sheet {
  transform: translateY(-7%) rotate(-1.4deg);
}

.folder:hover .paper--card-slate,
.folder:focus-visible .paper--card-slate,
.folder[data-open="true"] .paper--card-slate {
  transform: translateY(3%) rotate(-3.5deg);
}

/* лист Достоевского: узкая полоса с фразой */
.paper--sheet {
  right: 4%;
  top: 13%;
  width: 47%;
  padding: 4% 4% 4.5%;
  gap: 0.7em;
  background: #eae6db;
  transform: translateY(36%) rotate(-1.6deg);
  --d: 55ms;
}

.paper--card-slate {
  left: 55%;
  top: 4%;
  width: 27%;
  transform: translateY(42%) rotate(-5deg);
}

.paper--card-slate .paper__word {
  font-family: var(--font-book);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* раскрытие: створка поворачивается вокруг нижней кромки */
.folder__front {
  position: absolute;
  inset: 26% 0 0 0;
  z-index: 3;
  background-color: var(--board);
  background-image: url("../img/cardboard.png");
  background-size: 220px 220px;
  background-blend-mode: soft-light;
  border-radius: 3px 3px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 7px 12px -8px rgba(0, 0, 0, 0.55);
  transform-origin: bottom center;
  transform: rotateX(0deg);
  transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease);
}

.folder:hover .folder__front,
.folder:focus-visible .folder__front,
.folder[data-open="true"] .folder__front {
  transform: rotateX(19deg);
  box-shadow: inset 0 7px 12px -8px rgba(0, 0, 0, 0.55), 0 20px 24px -20px rgba(0, 0, 0, 0.85);
}

/* сгиб у нижней кромки */
.folder__fold {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  z-index: 4;
  background: var(--board-2);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* бумажный ярлык на створке */
.folder__label {
  position: absolute;
  left: 7%;
  top: 9%;
  width: 56%;
  padding: 3% 3.4% 3%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.22), 0 2px 6px -4px rgba(0, 0, 0, 0.5);
  transform: rotate(-0.7deg);
  transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease);
}

.folder:hover .folder__label,
.folder:focus-visible .folder__label,
.folder[data-open="true"] .folder__label {
  transform: rotate(-1.1deg) translateY(-1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.22), 0 6px 12px -8px rgba(0, 0, 0, 0.65);
}

.folder__name {
  display: block;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.02;
}

/* ярлык папки набран шрифтом её писателя — «опись по голосам» */
.folder--mayak .folder__name {
  font-family: var(--font-poster);
  font-size: clamp(15px, 2.05vw, 27px);
  letter-spacing: -0.03em;
}

.folder--dost .folder__name {
  font-family: var(--font-book);
  font-size: clamp(17px, 2.3vw, 31px);
  letter-spacing: 0.005em;
}

.folder__years {
  display: block;
  margin-top: 0.45em;
  padding-top: 0.45em;
  border-top: 1px solid rgba(26, 26, 24, 0.28);
  font-family: var(--font-ui);
  font-size: clamp(9px, 0.86vw, 12px);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  color: var(--ink-2);
}

.folder__marks {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 6%;
  display: flex;
  justify-content: space-between;
  gap: var(--u-3);
  font-family: var(--font-ui);
  font-size: clamp(8px, 0.72vw, 10px);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: rgba(232, 228, 217, 0.95);
}

/* подпись под папкой */
.folder__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--u-4);
  margin-top: var(--u-4);
  padding-top: var(--u-3);
  border-top: 1px solid rgba(232, 228, 217, 0.2);
  font-family: var(--font-ui);
  transition: border-color 240ms var(--ease);
}

.folder:hover .folder__caption,
.folder:focus-visible .folder__caption { border-top-color: rgba(232, 228, 217, 0.5); }

.folder__caption-name {
  font-size: var(--s-14);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--paper);
}

.folder__caption-open {
  font-size: var(--s-12);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: rgba(232, 228, 217, 0.6);
  white-space: nowrap;
}

.folder__arrow {
  display: inline-block;
  margin-left: 0.4em;
  transition: transform 320ms var(--ease);
}

.folder:hover .folder__arrow,
.folder:focus-visible .folder__arrow { transform: translateX(4px); }

/* ---------- линейка-разделитель ---------- */

.ruler {
  height: 22px;
  margin: 0 var(--gutter);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='22'%3E%3Cpath d='M0 22v-14M40 22v-9' stroke='%23e8e4d9' stroke-width='1' opacity='.34'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 80px 22px;
  border-bottom: 1px solid rgba(232, 228, 217, 0.18);
}

/* ---------- опись ---------- */

.inventory {
  max-width: 1080px;
  padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(48px, 7vw, 96px);
}

.inventory__title {
  font-family: var(--font-book);
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: clamp(24px, 3.4vw, 48px);
}

.inventory__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 88px);
}

.inventory__head {
  font-family: var(--font-ui);
  font-size: var(--s-12);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(232, 228, 217, 0.7);
  padding-bottom: var(--u-2);
  margin-bottom: var(--u-2);
}

.ledger li {
  display: flex;
  align-items: baseline;
  gap: var(--u-3);
  padding: 0.62em 0;
  border-bottom: 1px solid rgba(232, 228, 217, 0.1);
  font-family: var(--font-book);
  font-size: clamp(15px, 1.15vw, 18px);
  color: rgba(232, 228, 217, 0.92);
}

.ledger li:last-child { border-bottom: 0; }

.ledger__d {
  flex: 1 1 auto;
  min-width: var(--u-4);
  border-bottom: 1px dotted rgba(232, 228, 217, 0.28);
  transform: translateY(-0.28em);
}

.ledger__y {
  font-family: var(--font-ui);
  font-size: var(--s-12);
  letter-spacing: 0.02em;
  color: rgba(232, 228, 217, 0.6);
  white-space: nowrap;
}

/* ---------- колофон на графите ---------- */

.page-archive .colophon {
  color: rgba(232, 228, 217, 0.72);
  border-top-color: rgba(232, 228, 217, 0.22);
}

.page-archive .colophon h2 { color: rgba(232, 228, 217, 0.68); }
.page-archive .colophon p { color: rgba(232, 228, 217, 0.75); }
.page-archive .colophon a:hover { color: var(--paper); }
.page-archive code { font-family: var(--font-ui); font-size: 0.92em; opacity: 0.9; }

/* ---------- адаптив ---------- */

@media (max-width: 1000px) {
  .intro { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .intro__title { font-size: clamp(64px, 16vw, 132px); }
  .intro__text { max-width: 52ch; }
  .desk { grid-template-columns: minmax(0, 1fr); }
  .folder--dost { margin-top: clamp(48px, 10vw, 72px); }
  .inventory__cols { grid-template-columns: minmax(0, 1fr); gap: var(--u-7); }
}

@media (max-width: 560px) {
  .folder__tab { font-size: 8px; letter-spacing: 0.14em; }
  .folder__marks { font-size: 8px; letter-spacing: 0.04em; }
  .folder__label { padding: 3.4% 3.6% 3%; }
  .folder__caption { flex-wrap: wrap; gap: var(--u-1); }
  .paper--portrait { width: 34%; }
  .paper--strip { width: 58%; }
  .paper--card { width: 32%; }
}

/* На устройствах без наведения створка приоткрыта по умолчанию */
@media (hover: none) {
  .folder__front { transform: rotateX(13deg); }
  .paper--portrait { transform: translateY(22%) rotate(-6deg); }
  .paper--strip { transform: translateY(10%) rotate(2.2deg); }
  .paper--sheet { transform: translateY(12%) rotate(-1.8deg); }
  .paper--card { transform: translateY(18%) rotate(6deg); }
  .intro__hint { display: none; }
}

/* ---------- печать ---------- */

@media print {
  .page-archive { background: #fff; color: #000; }
  .folder__tilt { transform: none; }
  .folder__front { transform: none; }
  .folder__label, .paper { box-shadow: none; }
  .folder__back { box-shadow: none; clip-path: none; }
  .folder__caption-name { color: #000; }
  .ruler { display: none; }
}