/* The landing as the department's archive (concept C, chosen 10.10.2026): a table with the case file and the duty
   clipboard, then the aisle and its steel shelves with one box per case, then more shelves with the rest. Every object
   keeps the proportions of the real thing (art-src/landing-ru/README.md). Prefix ar-. */

:root {
  --ar-wrap: 1240px;
  --ar-gutter: 32px;
  --ar-sect: 120px;
  --ar-ink: #1f1b16;
  --ar-ink-2: #4a4033;
  --ar-light: #f2eadb;
  --ar-light-2: #d9cfbd;
  --ar-red: #a8241b;
  --ar-red-dark: #6e130d;
  --ar-green: #2f6b3a;
  --ar-shadow: 0 1px 1px rgb(0 0 0 / .35), 0 14px 28px -12px rgb(0 0 0 / .75);
  --ar-drop: drop-shadow(0 1px 1px rgb(0 0 0 / .4)) drop-shadow(0 14px 16px rgb(0 0 0 / .45));
  /* the camera, set by js/pages/landing.js while the ride is on; these are the still page */
  --ar-bg-s: 1.06;
  --ar-soft: .9;
  --ar-shade: .5;
  --ar-hint: 1;
  --ar-fg-s: 1;
  --ar-fg-y: 0px;
  --ar-fg-o: 1;
}
@media (max-width: 719px) { :root { --ar-gutter: 16px; --ar-sect: 80px; } }

html { scroll-padding-top: 88px; }
.ar-page { background: #120e0a; color: var(--ar-ink); }
.ar-main { position: relative; z-index: 1; display: block; }
.ar-wrap { box-sizing: border-box; width: 100%; max-width: calc(var(--ar-wrap) + 2 * var(--ar-gutter)); margin-inline: auto; padding-inline: var(--ar-gutter); }
.ar-visually { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the aisle behind everything: sharp at the end of the ride, out of focus while something nearer is in focus */
.ar-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #120e0a; }
.ar-bg__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--ar-bg-s)); transform-origin: 50% 46%;
  will-change: transform, opacity;
}
.ar-bg__img--soft { opacity: var(--ar-soft); filter: brightness(.9); }
.ar-bg__shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgb(18 14 10 / 0), rgb(18 14 10 / .55)),
    rgb(14 11 8 / var(--ar-shade));
}

/* header: two labels in brass holders */
.ar-page .st-header { position: fixed; inset: 0 0 auto; z-index: 20; padding-block: 14px 0; pointer-events: none; }
.ar-page .st-header__in { max-width: calc(var(--ar-wrap) + 2 * var(--ar-gutter)); padding-inline: var(--ar-gutter); }
.ar-page .st-brand, .ar-page .st-nav {
  pointer-events: auto;
  transform: none;
  border-style: solid;
  border-width: 9px 12px;
  border-image: var(--tx-site-plate) 66 74 fill / 9px 12px stretch;
  filter: var(--ar-drop);
}
.ar-page .st-brand { padding: 2px 10px; font-size: 21px; }
.ar-page .st-nav { padding: 0 2px; }
.ar-page .st-nav__link { min-height: 40px; font-size: 12.5px; }
.ar-page .st-nav__link:hover { text-decoration-color: var(--ar-red); }

/* buttons */
.ar-btn {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px;
  border: 2px solid var(--ar-ink); border-radius: 3px;
  background: #f6f1e4; color: var(--ar-ink);
  font: 700 15px/1 var(--rs-font-type); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 0 rgb(0 0 0 / .4);
}
.ar-btn:hover { background: #fffaf0; }
.ar-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgb(0 0 0 / .4); }
.ar-btn:focus-visible { outline: 3px solid #f0c060; outline-offset: 2px; }
.ar-btn--red { border-color: var(--ar-red-dark); background: var(--ar-red); color: #fff; }
.ar-btn--red:hover { background: #8f1d15; }
.ar-btn--small { min-height: 42px; padding: 0 16px; font-size: 14px; }

.ar-kicker { margin: 0; font: 700 12px/1.35 var(--rs-font-type); letter-spacing: .16em; text-transform: uppercase; color: #5a4f3f; }
.ar-error { margin: 6px 0 0; color: #8d1c14; font: 700 14px/1.4 var(--rs-font-type); }

/* a rubber stamp */
.ar-stamp {
  display: inline-block; margin: 0; padding: 4px 12px 3px;
  border: 3px solid currentColor; border-radius: 4px;
  color: rgb(168 36 27 / .82);
  font: 700 20px/1.1 var(--rs-font-type); letter-spacing: .12em; text-transform: uppercase;
  mix-blend-mode: multiply;
  transform: rotate(-7deg);
}
.ar-stamp--green { color: rgb(30 96 44 / .92); font-size: 13px; border-width: 2px; padding: 3px 8px 2px; }

/* ---------- 1. the table ---------- */
.ar-hero { position: relative; }
.ar-stage { position: relative; padding-top: 96px; }
.ar-desk { position: relative; }
.ar-desk__row {
  box-sizing: border-box; position: relative; z-index: 1;
  display: grid; gap: 28px; justify-items: center;
  width: 100%; max-width: calc(var(--ar-wrap) + 2 * var(--ar-gutter)); margin-inline: auto; padding-inline: var(--ar-gutter);
}
/* the near edge of the oak table: the objects stand on its top */
.ar-desk__table {
  position: relative; z-index: 0;
  width: 100%; aspect-ratio: 2688 / 452;
  margin-top: calc(-1 * var(--ar-table-sink, 9vw));
  background: var(--tx-site-table) center top / 100% 100% no-repeat;
}

/* the case file: a manila folder with its top tab (1800×1307 with the tab) */
.ar-file {
  box-sizing: border-box; position: relative; container-type: inline-size;
  display: flex; flex-direction: column;
  width: 100%; aspect-ratio: 1800 / 1307;
  padding: 8.5cqi 7cqi 6.5cqi 6cqi;
  background: var(--tx-site-folder) center / 100% 100% no-repeat;
  color: var(--ar-ink);
  filter: var(--ar-drop);
}
.ar-file__tab {
  position: absolute; top: 1.15cqi; left: 74.5%; width: 21%; margin: 0;
  font: 700 max(11px, 1.75cqi)/1 var(--rs-font-type); letter-spacing: .14em; text-transform: uppercase; text-align: center; color: #5a4f3f;
}
.ar-file__label {
  padding: 2.6cqi 3.4cqi 2.8cqi;
  background: #f7f3ea var(--tx-paper) center / 600px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .25);
  transform: rotate(-.6deg);
}
.ar-file__label .ar-kicker { font-size: max(11px, 1.45cqi); }
.ar-file__title { margin: 1.4cqi 0 0; font: 700 max(28px, 6.6cqi)/1.04 var(--rs-font-display); letter-spacing: -.01em; text-wrap: balance; }
.ar-file__lede { margin: 3.4cqi 0 3cqi; max-width: 60ch; font: 400 max(15px, 2.3cqi)/1.5 var(--rs-font-type); text-wrap: pretty; }
.ar-file__facts {
  display: flex; flex-wrap: wrap; gap: .4cqi 2.6cqi;
  margin: auto 0 0; padding: 1.6cqi 0 0; list-style: none;
  border-top: 1.5px dashed rgb(31 27 22 / .45);
  font: 700 max(12px, 1.6cqi)/1.4 var(--rs-font-type); letter-spacing: .06em; text-transform: uppercase; color: var(--ar-ink-2);
}
.ar-file__stamp { position: absolute; right: 8cqi; bottom: 13cqi; font-size: max(15px, 2.8cqi); }

/* the duty clipboard (600×924, the sheet and clip are in the picture) */
.ar-board {
  box-sizing: border-box; position: relative; container-type: inline-size;
  width: 100%; aspect-ratio: 600 / 924;
  background: var(--tx-clipboard) center / 100% 100% no-repeat;
  filter: var(--ar-drop);
}
.ar-board__sheet {
  position: absolute; inset: 19% 9.5% 5% 9.5%;
  display: flex; flex-direction: column; align-items: stretch;
  color: var(--ar-ink);
}
.ar-board__head {
  display: flex; justify-content: space-between; gap: 8px;
  margin: 0 0 4.5cqi; padding-bottom: 2cqi; border-bottom: 1.5px solid rgb(31 27 22 / .55);
  font: 700 max(11px, 2.7cqi)/1.2 var(--rs-font-type); letter-spacing: .12em; text-transform: uppercase; color: var(--ar-ink-2);
}
.ar-board__title { margin: 0 0 4cqi; font: 700 max(22px, 6.6cqi)/1.1 var(--rs-font-display); }
.ar-board__note { margin: 2.2cqi 0 5.5cqi; font: 400 max(13px, 3.3cqi)/1.4 var(--rs-font-type); color: var(--ar-ink-2); text-wrap: pretty; }
.ar-join { margin-top: auto; padding-top: 3.5cqi; border-top: 1.5px dashed rgb(31 27 22 / .45); }
.ar-join__label { display: block; margin-bottom: 1.5cqi; font: 700 max(12px, 3cqi)/1.35 var(--rs-font-type); color: var(--ar-ink-2); }
.ar-join__row { display: flex; gap: 10px; align-items: flex-end; }
.ar-join__input {
  box-sizing: border-box; flex: 1; min-width: 0; min-height: 44px; padding: 0 6px;
  border: 0; border-bottom: 2px solid rgb(31 27 22 / .6); background: transparent; color: var(--ar-ink);
  font: 700 18px var(--rs-font-type); letter-spacing: .2em; text-transform: uppercase;
}
.ar-join__input::placeholder { letter-spacing: .06em; text-transform: none; color: #7a6f60; font-weight: 400; }
.ar-join__input:focus { outline: none; border-bottom-color: var(--ar-red); }

.ar-hint { display: none; }

/* the desk on a wide screen: file and clipboard side by side, standing on the table; with the ride on, the stage holds
   still while the camera moves, and the table, the file and the clipboard pass under it */
@media (min-width: 900px) {
  .ar-desk__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--ar-board-w, 400px));
    align-items: end; gap: 3.2vw;
  }
  .ar-file { justify-self: end; width: min(100%, var(--ar-file-w, 760px)); }
  .ar-board { width: 100%; }
  /* each object no taller than the room between the header and the table top */
  :root {
    --ar-room: calc(100svh - 96px - 6.5vw - 24px);
    --ar-file-w: min(760px, calc(var(--ar-room) * 1800 / 1307 * .9));
    --ar-board-w: min(400px, calc(var(--ar-room) * 600 / 924));
    --ar-table-sink: 9.6vw;
  }
}
.ar-ride .ar-hero { height: calc(100svh + 115svh); }
.ar-ride .ar-stage { position: sticky; top: 0; height: 100svh; padding-top: 0; overflow: hidden; }
.ar-ride .ar-desk {
  position: absolute; inset: auto 0 0;
  transform: translateY(var(--ar-fg-y)) scale(var(--ar-fg-s)); transform-origin: 50% 70%;
  opacity: var(--ar-fg-o);
  will-change: transform, opacity;
}
.ar-ride .ar-hint {
  position: absolute; left: 50%; bottom: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px;
  transform: translateX(-50%); opacity: var(--ar-hint);
  color: var(--ar-light); font: 700 12px var(--rs-font-type); letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  text-shadow: 0 1px 6px rgb(0 0 0 / .8);
}
.ar-ride .ar-hint::after { content: ""; width: 9px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); }

/* a phone: the folder stands on its side (tab on the right), the clipboard below it */
@media (max-width: 899px) {
  .ar-stage { padding-top: 84px; }
  .ar-file {
    aspect-ratio: 1307 / 1800;
    padding: 9cqi 13cqi 9cqi 7cqi;
    background-image: var(--tx-site-folder-v);
  }
  .ar-file__tab { top: 50%; left: auto; right: -2.6cqi; width: auto; transform: translateY(-50%) rotate(90deg); font-size: 2.6cqi; }
  .ar-file__label { padding: 4cqi 5cqi 4.4cqi; }
  .ar-file__label .ar-kicker { font-size: 11px; }
  .ar-file__title { margin-top: 2.4cqi; font-size: max(27px, 8.4cqi); }
  .ar-file__lede { margin-top: 5cqi; font-size: 15px; }
  .ar-file__facts { margin-top: 5cqi; padding-top: 3cqi; font-size: 12px; }
  .ar-file__stamp { right: 15cqi; bottom: 8cqi; font-size: 16px; }
  .ar-board { max-width: 420px; }
  .ar-desk__table { margin-top: -60px; }
}

/* ---------- 2. the shelves ---------- */
.ar-bay { position: relative; padding-block: var(--ar-sect) 0; scroll-margin-top: 0; }
.ar-bay--cases { padding-top: 40px; }
.ar-head { margin-bottom: 40px; max-width: 780px; }
/* a label in a brass holder, screwed to the bay */
.ar-plate {
  display: inline-block; margin: 0 0 18px; padding: 4px 16px 3px;
  border-style: solid; border-width: 10px 13px;
  border-image: var(--tx-site-plate) 66 74 fill / 10px 13px stretch;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / .5)) drop-shadow(0 8px 10px rgb(0 0 0 / .45));
  color: var(--ar-ink); font: 700 13px/1.3 var(--rs-font-type); letter-spacing: .18em; text-transform: uppercase;
}
.ar-head__title { margin: 0; color: var(--ar-light); font: 700 clamp(32px, 3.6vw, 50px)/1.08 var(--rs-font-display); text-wrap: balance; text-shadow: 0 2px 14px rgb(0 0 0 / .6); }
.ar-head__lede { margin: 16px 0 0; max-width: 62ch; color: var(--ar-light-2); font-size: 19px; line-height: 1.55; text-wrap: pretty; text-shadow: 0 1px 8px rgb(0 0 0 / .6); }

/* a bay of the steel rack: two uprights, a beam under each row of boxes */
.ar-rack { position: relative; padding-inline: 44px; }
.ar-rack::before, .ar-rack::after {
  content: ""; position: absolute; top: -40px; bottom: -40px; width: 44px;
  background: var(--tx-site-post) center top / 44px auto repeat-y;
  filter: drop-shadow(0 10px 12px rgb(0 0 0 / .55));
}
.ar-rack::before { left: 0; }
.ar-rack::after { right: 0; }
.ar-rack__shelves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 34px; }
.ar-case { position: relative; z-index: 1; padding-bottom: 52px; }
/* the beam a row stands on: drawn by every box of the row, from its left post to its right post */
.ar-case::after {
  content: ""; position: absolute; bottom: 0; height: 46px; z-index: -1;
  left: -78px; right: -78px;
  border-style: solid; border-width: 0 26px; border-image: var(--tx-site-beam) 0 52 fill / 0 26px stretch;
  filter: drop-shadow(0 12px 10px rgb(0 0 0 / .5));
}
.ar-case:nth-child(odd)::after { right: -18px; }
.ar-case:nth-child(even)::after { left: -18px; }

/* one archive box, its 15×10-inch front (1400×911 with the lid); every part sits where the picture has it: the lid ends
   at 11.4% of the height, the number holder's window is 10–25% × 19.7–28.7%, the hand hole 72.8–91.7% × 16.6–27.4% */
.ar-case { container-type: inline-size; }
.ar-case__box {
  position: relative; width: 100%; aspect-ratio: 1400 / 911;
  background: var(--tx-site-box) center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / .45)) drop-shadow(0 18px 18px rgb(0 0 0 / .4));
}
.ar-case__no {
  position: absolute; left: 10%; top: calc(65.07cqi * .197); width: 15%; height: calc(65.07cqi * .09); margin: 0;
  display: grid; place-items: center;
  background: #efe8d8; box-shadow: inset 0 1px 3px rgb(0 0 0 / .35);
  color: var(--ar-ink); font: 700 max(10px, 2.6cqi)/1 var(--rs-font-type); letter-spacing: .06em;
}
.ar-case__photo {
  position: absolute; left: 61%; top: calc(65.07cqi * .31); width: 33%; margin: 0; box-sizing: border-box;
  padding: 1.3cqi 1.3cqi 4cqi; background: #fbfaf6;
  box-shadow: 0 1px 2px rgb(0 0 0 / .35), 0 8px 14px -6px rgb(0 0 0 / .55);
  transform: rotate(2.2deg);
}
.ar-case__photo::before {
  content: ""; position: absolute; left: 32%; top: -2.2cqi; width: 36%; height: 4.4cqi;
  background: var(--tx-tape) center / 100% 100% no-repeat; opacity: .9; transform: rotate(-3deg);
}
.ar-case__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.9) contrast(1.02); }
.ar-case__trial { position: absolute; left: 30.5%; top: calc(65.07cqi * .155); z-index: 2; max-width: 40%; font-size: max(10.5px, 1.75cqi); letter-spacing: .06em; white-space: nowrap; transform: rotate(-3deg); }

/* a wide box: the label stuck on its front, the price and the buttons along its bottom */
.ar-case__card { display: contents; }
.ar-case__label {
  position: absolute; left: 6.5%; top: calc(65.07cqi * .335); width: 50%; box-sizing: border-box;
  padding: 2.2cqi 2.6cqi 2.4cqi;
  background: #f5f0e4 var(--tx-paper) center / 500px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .35), 0 6px 10px -6px rgb(0 0 0 / .5);
  color: var(--ar-ink);
}
.ar-case__where { margin: 0; font: 700 max(10px, 1.6cqi)/1.3 var(--rs-font-type); letter-spacing: .06em; text-transform: uppercase; color: #5a4f3f; }
.ar-case__title { margin: 1cqi 0 0; font: 700 max(20px, 4.3cqi)/1.08 var(--rs-font-display); text-wrap: balance; }
.ar-case__title a { display: inline-block; padding-block: 7px; margin-block: -4px; color: inherit; text-decoration: none; }
.ar-case__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ar-case__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .6em; margin: 1.2cqi 0 0; font: 700 max(10.5px, 1.75cqi)/1.4 var(--rs-font-type); letter-spacing: .02em; color: var(--ar-ink-2); }
.ar-case__tagline {
  margin: 1.2cqi 0 0; font: 400 max(12px, 2.1cqi)/1.35 var(--rs-font-text); color: var(--ar-ink-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.ar-case__buy {
  position: absolute; left: 6.5%; right: 6%; top: calc(65.07cqi * .965); transform: translateY(-100%);
  display: flex; align-items: center; gap: 2.6cqi;
}
.ar-case__price { margin: 0 auto 0 0; color: #20180f; font: 700 max(20px, 4cqi)/1 var(--rs-font-type); text-shadow: 0 1px 0 rgb(255 235 200 / .35); }
.ar-case__price--owned { font-size: max(15px, 2.8cqi); letter-spacing: .1em; text-transform: uppercase; }
.ar-case__buy .ar-btn { min-height: 44px; }
.ar-case__more { display: inline-flex; align-items: center; min-height: 44px; color: #20180f; font: 700 max(13px, 2.2cqi) var(--rs-font-type); letter-spacing: .04em; text-underline-offset: 4px; }

/* a narrow box (a phone): the front keeps the number and the photo; the label and the price go on a catalogue card
   lying in front of the box */
@container (max-width: 519.98px) {
  .ar-case__photo { left: 33%; width: 44%; top: calc(65.07cqi * .2); transform: rotate(1.6deg); }
  .ar-case__trial { left: 30%; top: calc(65.07cqi * .145); font-size: 10.5px; letter-spacing: .02em; }
  .ar-case__card {
    display: block; position: relative; z-index: 1; margin: -3cqi 2.5% 0;
    background: #fbf9f3 var(--tx-indexcard) center 14px / 100% auto no-repeat;
    box-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 18px -8px rgb(0 0 0 / .6);
  }
  .ar-case__label { position: static; width: auto; padding: 10px 18px 4px; background: none; box-shadow: none; }
  .ar-case__where { min-height: 20px; }
  .ar-case__where { font-size: 11px; }
  .ar-case__title { margin-top: 6px; font-size: 24px; }
  .ar-case__facts { margin-top: 8px; font-size: 12px; }
  .ar-case__tagline { margin-top: 8px; font-size: 15px; -webkit-line-clamp: 4; }
  .ar-case__buy { position: static; transform: none; padding: 10px 18px 16px; gap: 12px; flex-wrap: wrap; }
  .ar-case__price { font-size: 22px; text-shadow: none; }
  .ar-case__more { font-size: 13px; }
}
.ar-diff { display: inline-flex; gap: 3px; }
.ar-diff__dot { width: .62em; height: .62em; border: 1.5px solid var(--ar-red); border-radius: 50%; box-sizing: border-box; }
.ar-diff__dot.is-on { background: var(--ar-red); }

/* the gift: a box tied with red string, a bow on the lid */
.ar-case__string { position: absolute; left: 0; right: 0; top: 46%; height: 1.2cqi; background: linear-gradient(#c22a1f, #8e1b14); box-shadow: 0 1px 2px rgb(0 0 0 / .4); }
.ar-case__string--v { left: 46%; right: auto; top: 0; bottom: 0; width: 1.2cqi; height: auto; }
.ar-case__bow {
  position: absolute; left: 46.6%; top: 11.4%; width: 15cqi; height: 9cqi; transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 50%, #9c1f17 0 1.6cqi, transparent 1.7cqi),
    radial-gradient(ellipse 42% 34% at 26% 50%, #c22a1f 60%, transparent 62%),
    radial-gradient(ellipse 42% 34% at 74% 50%, #c22a1f 60%, transparent 62%);
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / .45));
}
.ar-case--gift .ar-case__label { left: 6%; top: calc(65.07cqi * .55); width: 37%; transform: rotate(-1.2deg); }
.ar-case--gift .ar-case__buy { left: 52%; right: 6%; justify-content: flex-end; }
@container (max-width: 519.98px) { .ar-case--gift .ar-case__label { width: auto; transform: none; } .ar-case--gift .ar-case__buy { justify-content: flex-start; } }

/* ---------- 3. the other shelves ---------- */
.ar-split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .ar-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.ar-copy__text { margin: 18px 0 26px; max-width: 58ch; color: var(--ar-light-2); font-size: 19px; line-height: 1.55; text-wrap: pretty; text-shadow: 0 1px 8px rgb(0 0 0 / .6); }
.ar-copy__list { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 58ch; }
.ar-copy__list li { position: relative; padding-left: 26px; color: var(--ar-light-2); font-size: 18px; line-height: 1.5; text-shadow: 0 1px 8px rgb(0 0 0 / .6); }
.ar-copy__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 2px; background: #d8473b; box-shadow: 0 0 6px rgb(216 71 59 / .5); }

/* the free chapter: a sealed clasp envelope (6×9 in) */
.ar-envelope {
  position: relative; width: min(100%, 560px); aspect-ratio: 760 / 504; justify-self: center;
  background: var(--tx-lib-envelope-manila) center / 100% 100% no-repeat;
  filter: var(--ar-drop); transform: rotate(-2deg);
}
.ar-envelope__label {
  position: absolute; left: 18%; right: 18%; top: 38%; margin: 0; padding: 12px 16px;
  background: #f6f2e8; box-shadow: 0 1px 2px rgb(0 0 0 / .3);
  color: var(--ar-ink); font: 700 clamp(13px, 1.4vw, 17px)/1.4 var(--rs-font-type); letter-spacing: .06em; text-align: center; text-transform: uppercase;
}
.ar-envelope__seal { position: absolute; right: 9%; bottom: 10%; width: 19%; aspect-ratio: 240 / 244; background: var(--tx-lib-seal) center / contain no-repeat; filter: drop-shadow(0 3px 3px rgb(0 0 0 / .45)); }

/* how it works: four prints of the game pinned to a cork board, joined by red string */
.ar-cork {
  position: relative; margin: 0; padding: 40px 34px 34px; list-style: none;
  display: grid; gap: 34px 30px; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #8a6a45 var(--tx-cork); background-size: 420px;
  border: 14px solid #5b4128; border-image: none;
  box-shadow: inset 0 2px 10px rgb(0 0 0 / .45), var(--ar-shadow);
}
.ar-shot { position: relative; display: flex; flex-direction: column; }
.ar-shot__print {
  margin: 0; padding: 8px 8px 10px; background: #fbfaf6;
  box-shadow: 0 1px 2px rgb(0 0 0 / .35), 0 10px 16px -8px rgb(0 0 0 / .6);
}
.ar-shot:nth-child(odd) .ar-shot__print { transform: rotate(-1.4deg); }
.ar-shot:nth-child(even) .ar-shot__print { transform: rotate(1.2deg); }
.ar-shot__print::before {
  content: ""; position: absolute; left: 50%; top: -9px; width: 18px; height: 18px; z-index: 2; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(circle at 38% 35%, #f06a5c, #a8241b 60%, #6e130d);
  box-shadow: 0 3px 4px rgb(0 0 0 / .5);
}
.ar-shot__print img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; background: #2a2219; }
.ar-shot__title {
  display: flex; align-items: baseline; gap: 10px;
  margin: 18px 0 8px; padding: 8px 12px 6px;
  background: #f7f3ea; box-shadow: 0 1px 2px rgb(0 0 0 / .3);
  color: var(--ar-ink); font: 700 17px/1.25 var(--rs-font-display);
}
.ar-shot__n { font: 700 14px var(--rs-font-type); color: var(--ar-red); }
.ar-shot__text { flex: 1; margin: 0; padding: 10px 12px 12px; text-wrap: pretty; background: #f7f3ea; box-shadow: 0 1px 2px rgb(0 0 0 / .3); color: var(--ar-ink-2); font: 400 15px/1.5 var(--rs-font-text); }
@media (max-width: 1099px) { .ar-cork { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .ar-cork { grid-template-columns: minmax(0, 1fr); padding: 30px 16px 20px; border-width: 10px; } }

/* what is in the box: the open box from above, numbered markers, and the inventory sheet */
.ar-kit {
  position: relative; margin: 0; width: 100%; aspect-ratio: 1400 / 903;
  background: var(--tx-site-kit) center / 100% 100% no-repeat;
  filter: var(--ar-drop);
}
.ar-kit__mark {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 34px; height: 30px;
  background: #f1c232; clip-path: polygon(50% 0, 100% 100%, 0 100%);
  color: #1a1408; font: 700 13px/1 var(--rs-font-type); padding-top: 9px; box-sizing: border-box;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / .5));
}
.ar-sheet {
  box-sizing: border-box; padding: 34px 36px 30px;
  background: #f4efe3 var(--tx-typesheet) center / 100% 100%;
  box-shadow: var(--ar-shadow); color: var(--ar-ink); transform: rotate(.6deg);
}
.ar-sheet__head { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1.5px solid rgb(31 27 22 / .5); font: 700 12px var(--rs-font-type); letter-spacing: .16em; text-transform: uppercase; color: var(--ar-ink-2); }
.ar-sheet__title { margin: 0 0 16px; font: 700 clamp(26px, 2.6vw, 34px)/1.1 var(--rs-font-display); }
.ar-list { margin: 0; padding: 0; list-style: none; counter-reset: ar; display: grid; gap: 12px; }
.ar-list li { counter-increment: ar; position: relative; padding-left: 34px; font: 400 16px/1.5 var(--rs-font-type); color: var(--ar-ink-2); }
.ar-list li::before { content: counter(ar); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 22px; background: #f1c232; clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 5px; box-sizing: border-box; color: #1a1408; font: 700 10px/1 var(--rs-font-type); }
.ar-list b { color: var(--ar-ink); }

/* one buys, everyone plays: a room pass on a red lanyard (card 3.375×2.125 in) */
.ar-pass { position: relative; justify-self: center; width: min(100%, 420px); aspect-ratio: 900 / 991; background: var(--tx-site-badge) center / 100% 100% no-repeat; filter: var(--ar-drop); transform: rotate(2deg); }
.ar-pass__card {
  position: absolute; left: 7%; right: 7%; top: 44.5%; bottom: 7%;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  color: var(--ar-ink); text-align: center;
}
.ar-pass__head { margin: 0; font: 700 clamp(11px, 1.1vw, 14px) var(--rs-font-type); letter-spacing: .18em; text-transform: uppercase; color: var(--ar-ink-2); }
.ar-pass__code { margin: 0; font: 700 clamp(36px, 4vw, 54px)/1 var(--rs-font-type); letter-spacing: .14em; }
.ar-pass__foot { margin: 0; font: 400 clamp(12px, 1.1vw, 15px) var(--rs-font-type); color: var(--ar-ink-2); }
.ar-split--pass .ar-pass { order: 2; }

/* who to bring: square sticky notes */
.ar-notes { margin: 0; padding: 0; list-style: none; display: grid; gap: 28px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ar-note {
  box-sizing: border-box; aspect-ratio: 1; padding: 22px 20px;
  background: var(--tx-pad-yellow) center / 100% 100% no-repeat;
  filter: var(--ar-drop); color: #2a2208;
}
.ar-note:nth-child(1) { transform: rotate(-2deg); }
.ar-note:nth-child(2) { transform: rotate(1.5deg); }
.ar-note:nth-child(3) { transform: rotate(-1deg); }
.ar-note:nth-child(4) { transform: rotate(2deg); }
.ar-note__title { margin: 0 0 8px; font: 700 clamp(24px, 2.2vw, 30px)/1.05 var(--rs-font-hand); }
.ar-note__text { margin: 0; font: 400 clamp(17px, 1.45vw, 20px)/1.25 var(--rs-font-hand); }
@media (max-width: 1099px) { .ar-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .ar-notes { gap: 16px; }
  .ar-note { padding: 14px 13px; }
  .ar-note__title { font-size: 21px; }
  .ar-note__text { font-size: 16px; line-height: 1.15; }
}

/* the gift: the letter out of its envelope */
.ar-letter { position: relative; justify-self: center; width: min(100%, 520px); aspect-ratio: 1 / 1.02; }
.ar-letter__env { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 760 / 504; background: var(--tx-lib-envelope-manila) center / 100% 100% no-repeat; filter: var(--ar-drop); transform: rotate(3deg); }
.ar-letter__sheet {
  position: absolute; left: 13%; right: 13%; top: 0; aspect-ratio: 600 / 840; box-sizing: border-box;
  padding: 9% 10%; background: var(--tx-typesheet) center / 100% 100% no-repeat;
  filter: var(--ar-drop); transform: rotate(-2.5deg); color: var(--ar-ink); text-align: center;
}
.ar-letter__head { margin: 0 0 12%; padding-bottom: 4%; border-bottom: 1.5px solid rgb(31 27 22 / .5); font: 700 clamp(10px, 1vw, 13px) var(--rs-font-type); letter-spacing: .18em; text-transform: uppercase; color: var(--ar-ink-2); }
.ar-letter__to { margin: 0 0 4%; font: 400 clamp(26px, 2.6vw, 36px)/1 var(--rs-font-hand); color: #23366b; }
.ar-letter__line { margin: 0 0 10%; font: 700 clamp(20px, 2vw, 28px)/1.15 var(--rs-font-display); }
.ar-letter__code { margin: 0 0 6%; padding: 4% 0; border: 2px dashed rgb(31 27 22 / .5); font: 700 clamp(16px, 1.7vw, 22px) var(--rs-font-type); letter-spacing: .12em; }
.ar-letter__note { margin: 0 0 8%; font: 400 clamp(17px, 1.6vw, 22px)/1.25 var(--rs-font-hand); color: #23366b; }
.ar-letter__sign { margin: 0; font: 400 clamp(11px, 1vw, 13px)/1.4 var(--rs-font-type); color: var(--ar-ink-2); }

/* questions: the catalogue drawer and its cards (3×5-in index cards) */
.ar-faq { display: grid; gap: 28px; justify-items: center; }
.ar-drawer { position: relative; width: min(100%, 560px); aspect-ratio: 1400 / 873; background: var(--tx-site-drawer) center / 100% 100% no-repeat; filter: var(--ar-drop); }
.ar-drawer__label { position: absolute; left: 32%; right: 32%; top: 30.5%; height: 13%; display: grid; place-items: center; color: var(--ar-ink); font: 700 clamp(14px, 1.5vw, 19px) var(--rs-font-type); letter-spacing: .18em; text-transform: uppercase; }
.ar-cards { width: 100%; max-width: 780px; display: grid; gap: 12px; }
.ar-card {
  box-sizing: border-box; padding: 0 22px;
  background: #fbf9f4;
  box-shadow: 0 1px 2px rgb(0 0 0 / .35), 0 8px 14px -8px rgb(0 0 0 / .55);
  color: var(--ar-ink);
}
.ar-card:nth-child(odd) { transform: rotate(-.3deg); }
.ar-card:nth-child(even) { transform: rotate(.25deg); }
.ar-card summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; cursor: pointer; list-style: none;
  border-bottom: 1.5px solid rgb(200 70 60 / .7);
  font: 700 18px/1.3 var(--rs-font-display);
}
.ar-card summary::-webkit-details-marker { display: none; }
.ar-card summary::after { content: "+"; flex: none; font: 700 22px var(--rs-font-type); color: var(--ar-red); }
.ar-card[open] summary::after { content: "−"; }
.ar-card:not([open]) summary { border-bottom-color: transparent; }
.ar-card summary:focus-visible { outline: 3px solid #c99a2e; outline-offset: 2px; }
.ar-card p { margin: 0; padding: 4px 0 24px; max-width: 70ch; font: 400 16px/26px var(--rs-font-text); color: var(--ar-ink-2); background: repeating-linear-gradient(transparent 0 25px, rgb(110 140 190 / .35) 25px 26px) 0 4px; }
.ar-card a { color: var(--ar-red); }

/* the last shelf */
.ar-bay--final { padding-bottom: 80px; }
.ar-final { display: grid; gap: 24px; justify-items: center; text-align: center; }
.ar-final__title { margin: 0; padding: 18px 34px 16px; border-style: solid; border-width: 14px 18px; border-image: var(--tx-site-plate) 66 74 fill / 14px 18px stretch; filter: var(--ar-drop); color: var(--ar-ink); font: 700 clamp(24px, 2.8vw, 38px)/1.15 var(--rs-font-display); text-wrap: balance; }
.ar-final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* footer over the dark aisle */
.ar-page .st-footer { position: relative; z-index: 1; }
.ar-page .st-footer .st-wrap { max-width: calc(var(--ar-wrap) + 2 * var(--ar-gutter)); padding-inline: var(--ar-gutter); }

/* a phone */
@media (max-width: 719px) {
  .ar-rack { padding-inline: 0; }
  .ar-rack::before, .ar-rack::after { display: none; }
  .ar-rack__shelves { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ar-case { padding-bottom: 40px; margin-bottom: 28px; }
  .ar-case::after, .ar-case:nth-child(odd)::after, .ar-case:nth-child(even)::after { left: -16px; right: -16px; height: 34px; border-width: 0 16px; }
  .ar-head__lede, .ar-copy__text { font-size: 17px; }
  .ar-copy__list li { font-size: 16px; }
  .ar-sheet { padding: 26px 20px 22px; }
  .ar-cards { gap: 10px; }
  .ar-card summary { font-size: 16px; }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .ar-rack__shelves { grid-template-columns: minmax(0, 1fr); }
  .ar-case:nth-child(odd)::after, .ar-case:nth-child(even)::after { left: -78px; right: -78px; }
}
@media (prefers-reduced-motion: reduce) { .ar-bg__img { transform: none; } }

/* ---------- the other pages of the site in the same archive ---------- */
.ar-page .st-main { position: relative; z-index: 1; padding-top: 78px; }
.ar-page .st-footer { margin-top: var(--ar-sect); }
.ar-page .st-section__tab, .ar-page .st-back {
  transform: none;
  border-style: solid; border-width: 10px 13px;
  border-image: var(--tx-site-plate) 66 74 fill / 10px 13px stretch;
  background: none; box-shadow: none;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / .5)) drop-shadow(0 8px 10px rgb(0 0 0 / .45));
  color: var(--ar-ink);
}
.ar-page .st-section__tab { padding: 4px 16px 3px; font-size: 13px; }
.ar-page .st-back { min-height: 40px; padding: 0 12px; }
.ar-page .st-section__title { color: var(--ar-light); text-shadow: 0 2px 14px rgb(0 0 0 / .6); }
.ar-page .st-section__lede { color: var(--ar-light-2); text-shadow: 0 1px 8px rgb(0 0 0 / .6); }

/* checkout: the steps of the order sheet, and the receipt with the case's photo clipped above it */
.ar-page .st-order__part { padding-top: 24px; }
.ar-page .st-order__legend { float: left; width: 100%; margin-bottom: 4px; }
.ar-page .st-order__legend + * { clear: both; }
.ar-page .st-order__hint { clear: both; }
.ar-page .st-receipt__photo {
  position: relative; z-index: 2; width: 74%; margin: 0 0 -26px 14%; padding: 8px 8px 22px; background: #fbfaf6;
  box-shadow: 0 1px 2px rgb(0 0 0 / .35), 0 10px 16px -8px rgb(0 0 0 / .6); transform: rotate(2.4deg);
}
.ar-page .st-receipt__photo::before {
  content: ""; position: absolute; right: 16%; top: -14px; width: 14px; height: 44px;
  background: var(--tx-clip) center / 100% 100% no-repeat; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .4));
}
.ar-page .st-receipt__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* activating a gift: the sealed envelope beside the form until the code opens the letter */
.ar-redeem__env { display: none; }
.st-redeem:has([data-letter][hidden]) { grid-template-columns: minmax(0, 1fr); justify-items: center; }
@media (min-width: 1000px) {
  .st-redeem:has([data-letter][hidden]) { grid-template-columns: minmax(0, 560px) minmax(0, 480px); justify-content: center; align-items: center; gap: 64px; padding-top: 70px; }
  .st-redeem:has([data-letter][hidden]) .ar-redeem__env { display: block; }
}
.st-redeem .st-redeem__form { width: 100%; }

/* the account's gate: a pass on its lanyard beside the sign-in sheet */
.ar-gate__pass { display: none; }
@media (min-width: 1000px) {
  .st-gate:not([hidden]) { display: grid; grid-template-columns: 360px minmax(0, 520px); justify-content: center; align-items: center; gap: 64px; padding-top: 40px; }
  .st-gate .ar-gate__pass { display: block; width: 100%; transform: rotate(-3deg); }
  .st-gate .ar-gate__pass .ar-pass__code { font-size: 36px; letter-spacing: .06em; }
  .st-gate .st-gate__sheet { margin: 0; width: 100%; }
}

/* the receipt: thermal paper with torn teeth top and bottom */
.ar-page .st-receipt { filter: drop-shadow(0 1px 1px rgb(0 0 0 / .35)) drop-shadow(0 16px 20px rgb(0 0 0 / .45)); }
.ar-page .st-receipt__paper {
  --t: 12px;
  padding: 30px 24px 30px; border: 0; border-image: none; filter: none; transform: rotate(-.8deg);
  background: #fbfaf5 var(--tx-paper) center / 380px;
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--t) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--t) 51% repeat-x;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--t) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--t) 51% repeat-x;
}

/* the cookie note: a slip in the corner until it is read */
.ar-cookie {
  position: fixed; left: 16px; bottom: 16px; z-index: 30; box-sizing: border-box;
  display: flex; align-items: center; gap: 14px; max-width: 440px; padding: 14px 16px;
  background: #f6f1e4 var(--tx-paper) center / 420px; color: var(--ar-ink);
  box-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 14px 26px -10px rgb(0 0 0 / .7);
}
.ar-cookie__text { margin: 0; font: 400 14px/1.45 var(--rs-font-type); }
.ar-cookie__text a { color: var(--ar-red); }
@media (max-width: 599px) { .ar-cookie { left: 8px; right: 8px; bottom: 8px; max-width: none; } }

/* the test till: a plain page of the payment service, not part of the archive */
.st-paytest { background: #eceff3; }

/* "have a gift code?" next to the room code and the buy buttons: the way to the gift page where people look */
.ar-join__gift, .st-giftlink { display: inline-flex; align-items: center; min-height: 40px; color: var(--ar-red); font: 700 14px var(--rs-font-type); text-underline-offset: 4px; }
.ar-join__gift { margin-top: 2px; font-size: max(12px, 3cqi); }
.st-giftlink { margin-top: 10px; }