/* Светлая главная страница по утверждённому историческому макету. */
.reference-home {
  --ref-paper: #f9f3e9;
  --ref-ink: #25211e;
  --ref-wine: #792a22;
  --ref-edge: #e7dace;
  padding-bottom: 0;
  background: #fffaf4;
  color: var(--ref-ink);
  font-family: Georgia, "Times New Roman", serif;
}
.reference-home .wrap,
.ref-shell { width: min(1358px, calc(100% - 92px)); margin-inline: auto; }
.reference-home .header {
  height: 70px;
  position: relative;
  background: rgba(255,250,243,.97);
  border-bottom: 1px solid #eadfd1;
  backdrop-filter: none;
}
.reference-home .header-inner { min-height: 70px; }
.reference-home .brand { gap: 0; flex-shrink: 0; }
.reference-home .brand strong {
  color: #712d27;
  font: 38px/1 Georgia,serif;
  letter-spacing: -.04em;
}
.reference-home .brand small {
  display: inline-block;
  vertical-align: middle;
  max-width: 200px;
  padding-left: 10px;
  margin: 0 0 0 10px;
  border-left: 1px solid #b9a69a;
  color: #3a3633;
  letter-spacing: 0;
  font: 11px/1.12 Arial,sans-serif;
}
.reference-home .brand > span { display: flex; align-items: center; }
.reference-home nav { gap: clamp(17px,2.4vw,38px); font: 15px Georgia,serif; }
.reference-home nav a { white-space: nowrap; }
.reference-home .header-actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.reference-home .header-search { font: 36px/1 Arial,sans-serif; transform: rotate(-20deg); }
.reference-home .header-support {
  padding: 12px 18px;
  border-radius: 4px;
  background: var(--ref-wine);
  color: #fff4ec;
  font: 13px Arial,sans-serif;
  white-space: nowrap;
}
.reference-home .header-support:hover,.ref-search button:hover { background: #5b1d19; }

.ref-hero { height: 395px; position: relative; overflow: hidden; background: #e9dac7; }
.ref-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 40% 38%, #fff8ec 0%, #f8eddf 47%, transparent 83%);
  z-index: 1;
}
.ref-hero-village {
  position: absolute; top: 0; left: 0; width: 31%; height: 100%;
  background: url("/static/archive/archive-2.jpg") center / cover no-repeat;
  filter: grayscale(1) sepia(.55) contrast(.83);
  opacity: .74;
}
.ref-hero-people {
  position: absolute; top: 0; right: 2%; width: 42%; height: 100%;
  background: url("/static/archive/archive-3.jpg") center 32% / cover no-repeat;
  filter: grayscale(1) sepia(.25) contrast(.88);
}
.ref-hero-photo {
  position: absolute; right: -1%; top: 29px; width: 17%; height: 245px;
  border: 10px solid #dacbb7;
  transform: rotate(10deg);
  background: url("/static/archive/archive-4.jpg") center 38% / cover;
  box-shadow: 0 9px 18px #39221180;
  filter: sepia(.5);
  z-index: 1;
}
.ref-hero-notebook {
  position: absolute; right: 15%; bottom: -48px; width: 230px; height: 155px;
  transform: rotate(-11deg); background: linear-gradient(90deg,#4c3526 0 18px,#b08d68 18px 22px,transparent 22px),linear-gradient(135deg,#d8bd98,#ead7b8 55%,#c9a77f);
  border: 1px solid #8d6e4f; border-radius: 2px 8px 8px 2px;
  box-shadow: 0 10px 22px #2b1e1455, inset 0 0 0 5px #ead9bf88; z-index: 2;
  text-align: center; color: #66523e; font: 24px/1.05 Georgia,serif;
}
.ref-hero-notebook span { display:block; padding:24px 18px 0 34px; }
.ref-hero-notebook small { display:block; margin-top:8px; font-size:11px; font-style:normal; letter-spacing:.08em; text-transform:uppercase; }

.ref-hero-collage {
  position: absolute;
  top: 0;
  right: 0;
  width: 52%;
  height: 100%;
  background-image: url("/static/archive/hero-right-premium.png?v=20260925-1739");
  background-repeat: no-repeat;
  background-position: right 44%;
  background-size: auto 150%;
  z-index: 2;
  pointer-events: none;
}
.ref-hero-content { position: relative; z-index: 3; padding: 26px 0 56px 128px; }
.ref-hero h1 { margin: 0; max-width: 720px; font: 44px/1.09 Georgia,serif; letter-spacing: -.025em; }
.ref-hero p { max-width: 590px; margin: 7px 0 15px; font: 18px/1.3 Georgia,serif; color: #55504b; }
.ref-search {
  width: min(688px, 100%); height: 43px; display: flex; align-items: center;
  background: #fffdfb; border: 1px solid #cdb8a3; box-shadow: 0 5px 16px #4f33252b;
  border-radius: 4px; overflow: hidden;
}
.ref-search > span { width: 54px; text-align: center; color: #5d656a; font: 34px/1 Arial,sans-serif; }
.ref-search input { min-width: 0; flex: 1; height: 100%; padding: 0 9px; border: 0; outline: 0; background: transparent; font: 14px Arial,sans-serif; color: #332c28; }
.ref-search button { width: 127px; height: 100%; border: 0; background: var(--ref-wine); color: white; font: 16px Georgia,serif; cursor: pointer; }
.ref-examples { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; font: 13px Arial,sans-serif; }
.ref-examples a { border: 1px solid #d9c9b9; background: #fffbf5b0; border-radius: 12px; padding: 3px 12px; }
.ref-examples a:hover { border-color: var(--ref-wine); color: var(--ref-wine); }

.ref-stats { min-height: 78px; border-top: 1px solid #e7d8c9; border-bottom: 1px solid #eee2d6; background: #fffaf5; box-shadow: 0 -5px 16px #5a41241a; }
.ref-stats-grid { display: grid; grid-template-columns: repeat(3,1fr); padding: 17px 0; }
.ref-stats-grid a { display: grid; grid-template-columns: 62px auto; grid-template-rows: 29px 20px; justify-content: center; column-gap: 9px; border-right: 1px solid #ded5c9; }
.ref-stats-grid a:last-child { border-right: 0; }
.ref-stat-icon { grid-row: span 2; align-self: center; color: var(--ref-wine); font: 43px/1 Georgia,serif; text-align: center; }
.ref-stats strong { font: 27px/1 Georgia,serif; }
.ref-stats small { font: 13px Arial,sans-serif; color: #45403b; }
.ref-section { padding-top: 12px; }
.ref-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; margin-bottom: 8px; }
.ref-heading h2,.ref-story-column h2 { margin: 0; font: 27px/1.2 Georgia,serif; }
.ref-heading > a { font: 14px Arial,sans-serif; color: var(--ref-wine); white-space: nowrap; }
.ref-heading > a span { font-size: 20px; margin-left: 4px; }
.ref-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; }
.ref-card { min-width: 0; height: 220px; border: 1px solid #f1e7dc; border-radius: 4px; overflow: hidden; background: #f8f2ea; transition: transform .2s, box-shadow .2s; }
.ref-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px #54391f24; }
.ref-card-image { height: 102px; filter: grayscale(1) sepia(.35) contrast(.85); background-size: cover; background-position: center; }
.ref-card-image-1 { background-image: url("/static/archive/archive-1.jpg"); }
.ref-card-image-2 { background-image: url("/static/archive/archive-2.jpg"); }
.ref-card-image-3 { background-image: url("/static/archive/archive-3.jpg"); }
.ref-card-image-4 { background-image: url("/static/archive/archive-4.jpg"); }
.ref-card-body { padding: 5px 14px 9px; }
.ref-card h3 { margin: 0; font: 21px/1.15 Georgia,serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-card p { height: 39px; margin: 3px 0 7px; font: 14px/1.2 Georgia,serif; color: #5e5750; overflow: hidden; }
.ref-card-meta { display: flex; justify-content: space-between; font: 12px Arial,sans-serif; color: #3e3935; }
.ref-card-meta span:first-child { color: #762a22; }
.ref-bottom { display: grid; grid-template-columns: minmax(0,1.9fr) minmax(0,1fr) minmax(0,.6fr); gap: 28px; padding-top: 15px; padding-bottom: 12px; align-items: start; }
.ref-bottom > * { min-width: 0; }
.ref-record-list { border: 1px solid #ede3d9; border-radius: 4px; background: #fffdf9; }
.ref-record { height: 54px; display: grid; grid-template-columns: 70px 43px minmax(0,1fr) 92px 39px; gap: 10px; align-items: center; border-bottom: 1px solid #eae1d7; padding: 3px 7px; }
.ref-record:last-child { border-bottom: 0; }
.ref-record-image { height: 45px; background-size: cover; background-position: center; filter: grayscale(1) sepia(.32); border-radius: 3px; }
.ref-record-image-1,.ref-record-image-3 { background-image: url("/static/archive/archive-3.jpg"); }
.ref-record-image-2,.ref-record-image-4 { background-image: url("/static/archive/archive-2.jpg"); }
.ref-play { width: 35px; height: 35px; border: 0; border-radius: 50%; background: var(--ref-wine); color: white; cursor: pointer; }
.ref-record-copy { min-width: 0; }
.ref-record-copy > a { display: block; font: 15px/1.2 Georgia,serif; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ref-record-copy small { display: block; font: 12px/1.3 Arial,sans-serif; color: #797069; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-wave { height: 27px; opacity: .45; background: repeating-linear-gradient(90deg,transparent 0 2px,#a29e98 2px 3px,transparent 3px 5px); clip-path: polygon(0 42%,5% 37%,10% 59%,15% 18%,20% 75%,25% 42%,30% 15%,35% 65%,40% 25%,45% 72%,50% 14%,55% 81%,60% 38%,65% 61%,70% 28%,75% 56%,80% 42%,85% 70%,90% 34%,95% 52%,100% 42%,100% 58%,0 58%); }
.ref-record time { font: 12px Arial,sans-serif; color: #5d5550; }
.ref-map { height: 260px; position: relative; overflow: hidden; border-radius: 4px; background: #dce7de; }
.ref-map-water { position: absolute; inset: 0; background: repeating-linear-gradient(125deg,transparent 0 35px,#bfd8d0 36px 37px,transparent 38px 75px); opacity: .65; }
.ref-map-land { position: absolute; inset: -50% -18% -55% -18%; transform: rotate(-19deg); border-radius: 45%; background: #ece8d4; box-shadow: inset 0 0 30px #d1d7c4; }
.ref-map-marker { position: absolute; z-index: 1; display: flex; gap: 5px; align-items: center; font: 12px Arial,sans-serif; white-space: nowrap; text-shadow: 0 1px 2px white; }
.ref-map-marker i { width: 12px; height: 12px; flex-shrink: 0; border: 2px solid #fff; border-radius: 50%; background: var(--ref-wine); box-shadow: 0 1px 3px #3335; }
.ref-map-marker-1 { left: 32%; top: 18%; }.ref-map-marker-2 { left: 39%; top: 37%; }.ref-map-marker-3 { left: 63%; top: 38%; }.ref-map-marker-4 { left: 47%; top: 57%; }.ref-map-marker-5 { left: 74%; top: 59%; }
.ref-map-preview { position: absolute; z-index: 2; left: 10px; right: 38px; bottom: 10px; height: 57px; padding: 5px; display: flex; gap: 8px; align-items: center; background: #fffaf2; box-shadow: 0 4px 15px #30291833; border-radius: 4px; }
.ref-map-preview-image { width: 76px; height: 47px; background: url("/static/archive/archive-1.jpg") center/cover; filter: sepia(.4); }
.ref-map-preview strong,.ref-map-preview small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-map-preview strong { font: 13px Georgia,serif; }.ref-map-preview small { font: 12px Arial,sans-serif; }
.ref-map-preview b { margin-left: auto; color: var(--ref-wine); }
.ref-story-column { height: 260px; box-sizing: border-box; padding: 8px 10px 10px; background: #f4e9d9; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.ref-story-column h2 { margin: 0 0 6px; white-space: nowrap; font-size: 25px; line-height: 1.08; }
.ref-story-photo { height: 72px; flex: 0 0 72px; background: url("/static/archive/archive-4.jpg") center 31%/cover; filter: grayscale(1) sepia(.4); }
.ref-story-column h3 { margin: 6px 0 3px; font: 16px/1.12 Georgia,serif; }
.ref-story-column p { margin: 0 0 6px; font: italic 11px/1.18 Georgia,serif; color: #625548; }
.ref-story-column a { display: block; margin-top: auto; padding: 6px 4px; border: 1px solid #ad776b; color: var(--ref-wine); border-radius: 3px; font: 11px Arial,sans-serif; text-align: center; }
.ref-support-note { display: none; padding: 18px 0; color: #5b554e; font: 14px Arial,sans-serif; }
.ref-support-note:target { display: block; }
.reference-home footer { padding: 12px 0; min-height: 76px; background: #332d29; color: #e5d9cb; border: 0; }
.reference-home .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; align-items: center; gap: 30px; }
.reference-home .footer-grid strong { color: #f0e5d8; font: 20px Georgia,serif; }
.reference-home .footer-grid p { margin: 0; font: 12px Georgia,serif; }
.reference-home .footer-grid a,.reference-home .footer-grid span { margin: 0 6px 0 0; display: inline-block; font: 11px Arial,sans-serif; }
@media (max-width: 1200px) {
  .reference-home .brand strong { font-size: 29px; }
  .reference-home .brand small { max-width: 150px; font-size: 9px; }
  .reference-home nav { gap: 13px; }
  .ref-hero-content { padding-left: 60px; }
  .ref-hero h1 { font-size: 38px; max-width: 640px; }
  .ref-hero p { max-width: 530px; font-size: 16px; }
}
@media (max-width: 900px) {
  .reference-home .wrap,.ref-shell { width: min(100% - 36px,700px); }
  .reference-home nav { display: none; }
  .ref-hero { height: auto; min-height: 340px; }
  .ref-hero-content { padding: 35px 0 25px; }
  .ref-hero-people { opacity: .26; width: 65%; }
  .ref-hero-collage { display: none; }
  .ref-hero h1 { font-size: clamp(34px,5vw,46px); }
  .ref-stats-grid { grid-template-columns: repeat(2,1fr); row-gap: 17px; }
  .ref-stats-grid a:nth-child(2) { border-right: 0; }
  .ref-cards { grid-template-columns: repeat(2,1fr); }
  .ref-bottom { grid-template-columns: 1fr 1fr; }
  .ref-recordings { grid-column: span 2; }
}
@media (max-width: 600px) {
  .reference-home .header { height: auto; }
  .reference-home .header-inner { min-height: 64px; gap: 8px; }
  .reference-home .brand strong { font-size: 27px; }
  .reference-home .brand small { display: none; }
  .reference-home .header-actions { gap: 7px; }
  .reference-home .header-support { padding: 9px; font-size: 10px; }
  .reference-home .header-search { font-size: 28px; }
  .ref-hero { min-height: 380px; }
  .ref-hero h1 { font-size: 33px; }
  .ref-hero p { font-size: 15px; }
  .ref-search button { width: 80px; }
  .ref-examples { font-size: 11px; }
  .ref-stats-grid a { grid-template-columns: 35px auto; justify-content: start; }
  .ref-stat-icon { font-size: 31px; }
  .ref-stats strong { font-size: 22px; }
  .ref-stats small { font-size: 11px; }
  .ref-heading h2,.ref-story-column h2 { font-size: 23px; }
  .ref-heading a { font-size: 11px; }
  .ref-cards { gap: 9px; }
  .ref-card { height: 215px; }
  .ref-card-body { padding: 6px; }
  .ref-card h3 { font-size: 17px; }
  .ref-card p { font-size: 12px; }
  .ref-card-meta { font-size: 10px; }
  .ref-bottom { grid-template-columns: 1fr; gap: 17px; }
  .ref-recordings { grid-column: auto; }
  .ref-record { grid-template-columns: 35px minmax(0,1fr) 33px; gap: 7px; }
  .ref-record-image,.ref-wave { display: none; }
  .ref-record time { font-size: 10px; }
  .ref-story-column { height: auto; }
  .reference-home .footer-grid { grid-template-columns: 1fr; gap: 6px; }
  .reference-home .footer-grid > div:last-child { display: none; }
}


/* Full archive map */
.map-page { padding-top: 32px; padding-bottom: 44px; }
.map-page-heading { align-items: end; margin-bottom: 20px; }
.map-page-heading > div { min-width: 0; }
.map-page-heading small {
  display: block;
  margin-bottom: 5px;
  color: #8b342c;
  font: 12px/1.2 Arial,sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.map-page-heading h1 {
  margin: 0;
  font: 46px/1.05 Georgia,serif;
  letter-spacing: -.025em;
}
.map-page-heading p {
  max-width: 680px;
  margin: 8px 0 0;
  color: #625b55;
  font: 17px/1.4 Georgia,serif;
}
.world-map {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 520;
  overflow: hidden;
  border: 1px solid #ddd0c0;
  border-radius: 8px;
  background: #e8eee8;
  box-shadow: 0 12px 32px #5b463019;
}
.world-map-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.world-point {
  position: absolute;
  z-index: 3;
  transform: translate(-50%,-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  color: #3d3732;
  font: 13px/1 Arial,sans-serif;
  white-space: nowrap;
  text-shadow: 0 1px 2px #fff, 0 0 6px #fff;
}
.world-point i {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  border: 2px solid #fffaf2;
  border-radius: 50%;
  background: var(--ref-wine);
  box-shadow: 0 2px 6px #4c211d66;
}
.world-point:hover {
  color: var(--ref-wine);
  z-index: 5;
}
.world-point:hover i {
  transform: scale(1.25);
}
@media (max-width: 900px) {
  .map-page-heading h1 { font-size: 38px; }
  .world-point span { display: none; }
}

.world-map-premium {
  aspect-ratio: 1739 / 904;
  background: #d8dfdc;
}
.world-map-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.world-point-hotspot {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  opacity: 0;
}
.world-point-hotspot i {
  width: 18px;
  height: 18px;
}
.world-point-hotspot:hover {
  opacity: .35;
}

.ref-map-premium-home {
  display: block;
  border: 1px solid #d9cbb8;
  box-shadow: 0 6px 18px #4f3c2820;
  background: #d7dfdc;
}
.ref-map-premium-home img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.ref-map-premium-home:hover img {
  filter: saturate(1.03) contrast(1.02);
}

.ref-stat-icon svg {
  display: block;
  width: 43px;
  height: 43px;
  margin: 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ref-stat-music {
  font-size: 43px;
}

.support-page { padding-top: 40px; padding-bottom: 55px; }
.support-intro { max-width: 820px; margin-bottom: 28px; }
.support-intro small {
  display: block; margin-bottom: 7px; color: var(--ref-wine);
  font: 12px/1.2 Arial,sans-serif; text-transform: uppercase; letter-spacing: .12em;
}
.support-intro h1 { margin: 0 0 12px; font: 46px/1.06 Georgia,serif; letter-spacing: -.02em; }
.support-intro p { margin: 0; color: #625a53; font: 18px/1.45 Georgia,serif; }
.support-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.support-grid article,.support-note {
  padding: 22px; border: 1px solid #e5d8c8; border-radius: 6px; background: #fbf5ec;
}
.support-grid h2,.support-note h2 { margin: 0 0 8px; font: 24px/1.15 Georgia,serif; }
.support-grid p,.support-note p { margin: 0; color: #625a53; font: 15px/1.45 Georgia,serif; }
.support-note { margin-top: 20px; background: #f4e9d9; }
@media (max-width: 800px) {
  .support-grid { grid-template-columns: 1fr; }
  .support-intro h1 { font-size: 36px; }
}