/* ==========================================================================
   Rindposh — The Boutique and Bridal House
   The palette, the double gold rule and the tracked capitals are taken from
   the Rindposh tap-card, which is the brand's existing visual language.
   The magazine commits to that one world, so every colour is painted
   explicitly rather than inherited from whatever theme the viewer runs.
   ========================================================================== */

:root {
  /* Navy, sampled from the card artwork */
  --ink-980: #040B1F;
  --ink-950: #060F2A;
  --ink-900: #0A1C44;
  --ink-850: #0C1F48;
  --ink-800: #132E67;
  --ink-700: #1B3C83;
  --ink-600: #274BA0;

  /* Gold, sampled from the wordmark */
  --gold-700: #6E4A0C;
  --gold-600: #8A5A12;
  --gold-500: #C99729;
  --gold-400: #D9AE4E;
  --gold-300: #E7C86E;
  --gold-200: #F7E08A;
  --gold-100: #FDF0B0;

  --cream: #F6F1E4;
  --cream-dim: #C6BDA8;
  --paper-text: #DFE5F2;

  /* Metallic foil: bright, dark band, bright — the wordmark's own banding */
  --foil: linear-gradient(174deg,
      #FBEFC0 0%, #E3C065 18%, #C0891F 40%,
      #7A4E0A 52%, #C99729 64%, #EFD583 84%, #FFF6D0 100%);
  /* A block of page edges seen side-on. The page casts a shadow where the
     two meet, the stack curves up into the light, then falls away to the
     outer lip. Warm ivory under a gilt wash, not a bar of brass. */
  --block: linear-gradient(90deg, rgba(8,19,46,.95) 0%, rgba(30,28,26,.72) 3%, #4A3C1F 8%, #7E6A3A 15%, #A89056 23%, #CDB983 33%, #E6DAB6 43%, #F1E9D2 49%, #DCC894 57%, #B39A5C 70%, #7E6A38 83%, #4A3C1C 93%, #241D0C 100%);
  --block-flip: linear-gradient(90deg, #241D0C 0%, #4A3C1C 7%, #7E6A38 17%, #B39A5C 30%, #DCC894 43%, #F1E9D2 51%, #E6DAB6 57%, #CDB983 67%, #A89056 77%, #7E6A3A 85%, #4A3C1F 92%, rgba(30,28,26,.72) 97%, rgba(8,19,46,.95) 100%);

  --foil-rule: linear-gradient(90deg,
      rgba(201,151,41,0) 0%, rgba(215,175,80,.8) 14%,
      rgba(251,223,91,.95) 50%, rgba(215,175,80,.8) 86%, rgba(201,151,41,0) 100%);

  --serif: "Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif;
  --sans: "Jost", Futura, "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --trim: clamp(8px, 1.4vw, 16px);     /* the rounded outer corner of a page */
  --ease: cubic-bezier(.42, .03, .22, 1);
  --flip-ms: 880ms;
}

@property --flip {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ink-980);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}

:where(button, a, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ------------------------------------------------------------- the room ---- */

.stage {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto auto;
  height: 100%;
  padding: clamp(.6rem, 2vh, 1.6rem) 16px 0;
  background:
    radial-gradient(120% 78% at 50% -12%, rgba(39,75,160,.48) 0%, rgba(10,28,68,0) 62%),
    radial-gradient(90% 60% at 50% 114%, rgba(20,46,104,.40) 0%, rgba(6,15,42,0) 70%),
    var(--ink-980);
  opacity: 0;
  transition: opacity .8s ease;
}
.is-ready .stage { opacity: 1; }

.stage::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(135% 105% at 50% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,.30) 74%, rgba(0,0,0,.62) 100%);
}

.stage__book {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;   /* never let the book inflate the box that measures it */
  min-height: 0;
}

/* ------------------------------------------------------------- the book ---- */

.book {
  position: relative;
  perspective: 2600px;
  perspective-origin: 50% 46%;
  touch-action: none;            /* every gesture belongs to the page turn */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.book__inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--flip-ms) var(--ease);
}

.book::after {
  content: "";
  position: absolute;
  left: 5%; right: 5%; bottom: -3%;
  height: 6.5%;
  background: radial-gradient(58% 100% at 50% 0%, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 72%);
  filter: blur(7px);
  pointer-events: none;
}

/* The block of leaves still to be read, thinning as you move through */
.book__edge {
  position: absolute;
  top: 0.5%; bottom: 0.5%;
  pointer-events: none;
  opacity: var(--depth, 0);
  transition: opacity var(--flip-ms) var(--ease), width var(--flip-ms) var(--ease),
              transform var(--flip-ms) var(--ease);
  background:
    linear-gradient(180deg,
      rgba(3,9,26,.80) 0%, rgba(3,9,26,.14) 5%,
      rgba(3,9,26,0) 16%, rgba(3,9,26,0) 84%,
      rgba(3,9,26,.14) 95%, rgba(3,9,26,.80) 100%),
    repeating-linear-gradient(90deg, rgba(38,28,10,.26) 0 .4px, rgba(255,255,255,0) .4px 1.4px),
    repeating-linear-gradient(90deg, rgba(255,248,224,.13) 0 .4px, rgba(255,255,255,0) .4px 2.3px),
    repeating-linear-gradient(90deg, rgba(38,28,10,.11) 0 .6px, rgba(255,255,255,0) .6px 3.7px),
    var(--block);
}

.book__edge--left {
  right: calc(100% - 3px);
  border-radius: var(--trim) 0 0 var(--trim);
  background-image:
    linear-gradient(180deg,
      rgba(3,9,26,.80) 0%, rgba(3,9,26,.14) 5%,
      rgba(3,9,26,0) 16%, rgba(3,9,26,0) 84%,
      rgba(3,9,26,.14) 95%, rgba(3,9,26,.80) 100%),
    repeating-linear-gradient(90deg, rgba(38,28,10,.26) 0 .4px, rgba(255,255,255,0) .4px 1.4px),
    repeating-linear-gradient(90deg, rgba(255,248,224,.13) 0 .4px, rgba(255,255,255,0) .4px 2.3px),
    repeating-linear-gradient(90deg, rgba(38,28,10,.11) 0 .6px, rgba(255,255,255,0) .6px 3.7px),
    var(--block-flip);
}

.book__edge--right {
  left: calc(100% - 3px);
  border-radius: 0 var(--trim) var(--trim) 0;
}

/* ---------------------------------------------------------------- leaves --- */

.leaf {
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--flip, 0) * -180deg));
  will-change: transform;
}
.book[data-mode="single"] .leaf { width: 100%; }
.leaf.is-turned { --flip: 1; }

/* While a leaf turns, JavaScript drives it frame by frame, so the transition
   must stand aside; the flat sheet hides and the bending column takes over. */
.leaf.is-turning { transition: none; }
.leaf.is-turning .leaf__flat { visibility: hidden; }
.leaf:not(.is-turning) .leaf__curl { visibility: hidden; }

.leaf__flat, .leaf__curl {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
}

.strip {
  position: absolute;
  top: 0; left: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  will-change: transform;
}
.strip__face {
  position: absolute; inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--ink-900);
}
.strip__face--back { transform: rotateY(180deg); }
.strip__page { position: absolute; top: 0; }

/* The same raking light the flat sheet gets, so a bend does not flatten out
   the shading half way through a turn. */
.strip__face::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
      rgba(255,246,214,.16) 0%, rgba(255,246,214,.04) 18%, rgba(0,0,0,0) 34%,
      rgba(2,8,24,.42) 76%, rgba(2,8,24,.78) 100%);
  opacity: calc(var(--flip, 0) * .95);
}
.strip__face--back::after {
  background: linear-gradient(260deg,
      rgba(255,246,214,.15) 0%, rgba(255,246,214,.03) 18%, rgba(0,0,0,0) 36%,
      rgba(2,8,24,.44) 78%, rgba(2,8,24,.76) 100%);
  opacity: calc((1 - var(--flip, 0)) * .95);
}

.leaf__face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  background: var(--ink-900);
}
.leaf__face--front {
  border-radius: 0 var(--trim) var(--trim) 0;
  box-shadow: 3px 0 6px -3px rgba(2,8,24,.72);
}
.leaf__face--back {
  border-radius: var(--trim) 0 0 var(--trim);
  box-shadow: -3px 0 6px -3px rgba(2,8,24,.72);
  transform: rotateY(180deg);
}

/* Light raking off the sheet as it lifts. --flip runs 0 → 1 across a turn. */
.leaf__face::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(100deg,
      rgba(255,246,214,.16) 0%, rgba(255,246,214,.04) 18%, rgba(0,0,0,0) 34%,
      rgba(2,8,24,.42) 76%, rgba(2,8,24,.78) 100%);
  opacity: calc(var(--flip, 0) * .95);
}
.leaf__face--back::after {
  background: linear-gradient(260deg,
      rgba(255,246,214,.15) 0%, rgba(255,246,214,.03) 18%, rgba(0,0,0,0) 36%,
      rgba(2,8,24,.44) 78%, rgba(2,8,24,.76) 100%);
  opacity: calc((1 - var(--flip, 0)) * .95);
}

/* ----------------------------------------------------------------- pages --- */

.page {
  position: relative;
  container-type: inline-size;
  --pad: clamp(1.05rem, 6.2cqw, 2.9rem);
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background:
    radial-gradient(112% 64% at 50% -8%, rgba(39,75,160,.38) 0%, rgba(19,46,103,0) 60%),
    linear-gradient(190deg, var(--ink-850) 0%, var(--ink-900) 58%, var(--ink-950) 100%);
  color: var(--cream);
  isolation: isolate;
}

/* A whisper of tooth so the navy is not a dead flat fill */
.page::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .26;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* The card's double rule, inset from the trim */
.page__frame {
  position: absolute;
  inset: clamp(0.55rem, 2.97cqw, 1rem);
  border: 1px solid rgba(201,151,41,.44);
  border-radius: calc(var(--trim) * .55);
  pointer-events: none;
  z-index: 3;
}
.page__frame::after {
  content: "";
  position: absolute;
  inset: clamp(0.275rem, 1.59cqw, .5rem);
  border: 1px solid rgba(201,151,41,.2);
  border-radius: calc(var(--trim) * .38);
}

.page__gutter { position: absolute; top: 0; bottom: 0; width: 12%; pointer-events: none; z-index: 2; }
.leaf__face--front .page__gutter {
  left: 0;
  background: linear-gradient(90deg, rgba(2,8,24,.58) 0%, rgba(2,8,24,.14) 44%, rgba(2,8,24,0) 100%);
}
.leaf__face--back .page__gutter {
  right: 0;
  background: linear-gradient(270deg, rgba(2,8,24,.58) 0%, rgba(2,8,24,.14) 44%, rgba(2,8,24,0) 100%);
}
.book[data-mode="single"] .page__gutter { width: 6%; }

.page__body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex; flex-direction: column;
  padding: var(--pad);
  overflow: hidden;
}

.page__folio {
  position: absolute;
  bottom: clamp(0.825rem, 4.45cqw, 1.5rem);
  z-index: 3;
  font-family: var(--serif);
  font-size: clamp(0.72rem, 2.12cqw, .8rem);
  letter-spacing: .24em;
  color: rgba(231,200,110,.58);
  font-variant-numeric: tabular-nums;
}
.leaf__face--front .page__folio { right: clamp(1.595rem, 7.21cqw, 2.9rem); }
.leaf__face--back  .page__folio { left:  clamp(1.595rem, 7.21cqw, 2.9rem); }

/* -------------------------------------------------------- shared elements -- */

.foil { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* A running head names the collection you are inside — wayfinding, not a label */
.runhead {
  font-size: clamp(0.625rem, 1.82cqw, .62rem);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(231,200,110,.72);
  margin: 0 0 .9rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(201,151,41,.2);
  flex: none;
}

.rule { display: flex; align-items: center; gap: .65rem; margin: clamp(0.55rem, 3.39cqw, 1rem) 0; flex: none; }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: var(--foil-rule); }
.rule__buta { width: clamp(9px, 3.18cqw, 13px); flex: none; }

.display {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

.prose {
  font-family: var(--serif);
  font-size: clamp(0.918rem, 2.97cqw, 1.02rem);
  line-height: 1.72;
  color: var(--paper-text);
  margin: 0;
  max-width: 44ch;
}

/* ---------------------------------------------------------------- cover ---- */

.page--cover {
  background:
    radial-gradient(94% 54% at 50% -6%, rgba(46,84,178,.76) 0%, rgba(19,46,103,0) 58%),
    linear-gradient(188deg, var(--ink-800) 0%, var(--ink-900) 46%, var(--ink-950) 100%);
}
.page--cover .page__body { align-items: center; justify-content: center; text-align: center; }

.cover__monogram { width: clamp(70px, 16%, 124px); aspect-ratio: 1; filter: drop-shadow(0 6px 18px rgba(0,0,0,.55)); }
.cover__wordmark { width: min(78%, 400px); margin-top: clamp(0.522rem, 3.18cqw, .95rem); filter: drop-shadow(0 4px 14px rgba(0,0,0,.45)); }


.is-ready 


.cover__tagline {
  font-size: clamp(0.648rem, 2.12cqw, .72rem);
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin: clamp(0.55rem, 3.6cqw, 1rem) 0 0;
}
.cover__headline { margin-top: clamp(1.4rem, 9cqw, 3rem); font-size: clamp(2.52rem, 9.33cqw, 2.8rem); }
.cover__subhead {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(0.9rem, 3.07cqw, 1rem);
  line-height: 1.5; color: var(--cream-dim);
  max-width: 32ch; margin: .5rem auto 0; text-wrap: balance;
}
.cover__issue {
  position: absolute; left: 0; right: 0;
  bottom: clamp(1.705rem, 10.6cqw, 3.1rem);
  font-size: clamp(0.625rem, 1.95cqw, .68rem);
  letter-spacing: .38em; text-transform: uppercase; color: var(--gold-300);
}

/* ------------------------------------------------------------- the note ---- */

.page--note .page__body { justify-content: center; }
.note__title { font-size: clamp(1.8rem, 6.78cqw, 2rem); }
.note__sign {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(0.882rem, 2.86cqw, .98rem);
  color: var(--gold-300);
  margin: clamp(0.715rem, 4.45cqw, 1.3rem) 0 0;
}

/* -------------------------------------------------------------- contents --- */

.contents__title { font-size: clamp(1.8rem, 6.78cqw, 2rem); }
.contents__list {
  list-style: none; margin: clamp(0.55rem, 3.39cqw, 1rem) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: clamp(0.44rem, 2.54cqw, .8rem);
  overflow: hidden;
}
.contents__row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: baseline; gap: .55rem;
  background: none; border: 0; padding: .15rem 0; margin: 0;
  color: inherit; font: inherit; text-align: left; width: 100%; cursor: pointer;
}
.contents__name {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 3.82cqw, 1.25rem);
  color: var(--cream);
  transition: color .2s;
}
.contents__row:hover .contents__name { color: var(--gold-200); }
.contents__sub {
  display: block; font-family: var(--sans);
  font-size: clamp(0.625rem, 1.87cqw, .63rem);
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(198,189,168,.68); margin-top: .2rem;
}
.contents__dots { border-bottom: 1px dotted rgba(201,151,41,.42); transform: translateY(-.3em); min-width: 1.2rem; }
.contents__folio {
  font-family: var(--serif); font-size: clamp(0.918rem, 3.07cqw, 1.02rem);
  color: var(--gold-300); font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- divider --- */

.page--divider {
  background:
    radial-gradient(82% 50% at 50% 0%, rgba(39,75,160,.55) 0%, rgba(10,28,68,0) 62%),
    linear-gradient(196deg, var(--ink-900) 0%, var(--ink-950) 100%);
}
.page--divider .page__body { align-items: center; justify-content: center; text-align: center; }
.divider__mark { width: clamp(44px, 10%, 76px); opacity: .9; margin-bottom: clamp(0.605rem, 3.82cqw, 1.1rem); }
.divider__chinar {
  width: clamp(46px, 11%, 84px);
  margin-bottom: clamp(0.632rem, 3.82cqw, 1.15rem);
  filter: drop-shadow(0 3px 9px rgba(0,0,0,.45));
}
.divider__title { font-size: clamp(2.7rem, 10.18cqw, 3rem); }
.divider__sub {
  font-size: clamp(0.625rem, 1.99cqw, .68rem); letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold-300); margin: .65rem 0 0;
}
.divider__intro {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(0.9rem, 3.07cqw, 1rem); line-height: 1.6;
  color: var(--cream-dim); max-width: 34ch;
  margin: clamp(0.688rem, 4.24cqw, 1.25rem) auto 0; text-wrap: balance;
}

/* --------------------------------------------------------------- product --- */

.product { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.product__head { margin-top: 0; }

/* The mehrab niche. One arch serves a photograph and an empty plate alike. */
.niche {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-bottom: clamp(0.55rem, 3.39cqw, 1rem);
}
.niche__clip {
  position: absolute; inset: 0;
  clip-path: url(#rp-mehrab);
  overflow: hidden;
  background:
    radial-gradient(90% 60% at 50% 12%, rgba(39,75,160,.42) 0%, rgba(10,28,68,0) 68%),
    linear-gradient(200deg, var(--ink-700) 0%, var(--ink-900) 55%, var(--ink-950) 100%);
}
.niche__outline { position: absolute; inset: 0; width: 100%; height: 100%; }
.niche__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.niche__jali {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: .55;
}
.niche__buta {
  position: absolute;
  left: 50%; top: 47%;
  width: 34%;
  transform: translate(-50%, -50%);
  opacity: .9;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.45));
}
.niche__await {
  position: absolute;
  left: 0; right: 0; bottom: 7%;
  margin: 0;
  text-align: center;
  font-size: clamp(0.625rem, 1.61cqw, .55rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(198,189,168,.5);
}

.product__badge {
  align-self: flex-start;
  margin: 0 0 .3rem;
  padding: .2rem .6rem;
  border: 1px solid rgba(201,151,41,.5);
  color: var(--gold-200);
  font-size: clamp(0.625rem, 1.57cqw, .54rem);
  letter-spacing: .24em;
  text-transform: uppercase;
}

.product__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-top: clamp(0.578rem, 3.6cqw, 1.05rem);
}
.product__name { font-family: var(--serif); font-weight: 600; font-size: clamp(1.53rem, 5.3cqw, 1.7rem); line-height: 1.1; margin: 0; }
.product__price {
  font-family: var(--serif); font-size: clamp(1.152rem, 4.03cqw, 1.28rem);
  color: var(--gold-200); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.product__desc {
  font-family: var(--serif); font-size: clamp(0.855rem, 2.76cqw, .95rem);
  line-height: 1.6; color: var(--paper-text); margin: .5rem 0 0; max-width: 46ch;
}
.product__sku {
  font-size: clamp(0.625rem, 1.7cqw, .58rem); letter-spacing: .26em;
  text-transform: uppercase; color: rgba(198,189,168,.55); margin: .55rem 0 0;
}

/* ----------------------------------------------------------------- visit --- */

.page--visit {
  background:
    radial-gradient(90% 52% at 50% -4%, rgba(46,84,178,.6) 0%, rgba(19,46,103,0) 60%),
    linear-gradient(190deg, var(--ink-800) 0%, var(--ink-950) 100%);
}
.page--visit .page__body, .page--back .page__body {
  align-items: center; justify-content: center; text-align: center;
}
/* vh tracks the page height on a phone, so a tall sheet breathes wider */
.page--visit .page__body { gap: clamp(.15rem, 1.1vh, .7rem); }
.visit__title { font-size: clamp(1.845rem, 7.21cqw, 2.05rem); }
.visit__body {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(0.864rem, 2.97cqw, .96rem); line-height: 1.55;
  color: var(--cream-dim); max-width: 30ch; margin: .5rem auto 0; text-wrap: balance;
}

.actions {
  display: flex; gap: clamp(0.825rem, 5.51cqw, 1.5rem);
  justify-content: center; margin: clamp(0.88rem, 5.3cqw, 1.6rem) 0 0; flex-wrap: wrap;
}
.action {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  text-decoration: none; color: var(--gold-300);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.action__ring {
  display: grid; place-items: center;
  width: clamp(2.035rem, 16.96cqw, 3.7rem); aspect-ratio: 1;
  border: 1px solid rgba(201,151,41,.5); border-radius: 50%;
  background: rgba(10,28,68,.6);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.action svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.4; }
.action span {
  font-size: clamp(0.625rem, 1.7cqw, .56rem); letter-spacing: .26em; text-transform: uppercase;
}
.action:hover { color: var(--gold-100); transform: translateY(-2px); }
.action:hover .action__ring { background: rgba(27,60,131,.85); border-color: var(--gold-300); }

.visit__numbers {
  display: flex; flex-direction: column; gap: .2rem;
  margin: clamp(0.825rem, 5.09cqw, 1.5rem) 0 0;
}
.visit__number {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 4.88cqw, 1.5rem);
  color: var(--gold-200); text-decoration: none;
  font-variant-numeric: tabular-nums; letter-spacing: .05em;
  transition: color .2s;
}
.visit__number:hover { color: var(--gold-100); }
.visit__hours {
  font-size: clamp(0.625rem, 1.87cqw, .62rem); letter-spacing: .26em;
  text-transform: uppercase; color: rgba(198,189,168,.68);
  margin: clamp(0.66rem, 4.24cqw, 1.2rem) 0 0;
}

/* ------------------------------------------------------------ back cover --- */

.page--back {
  background:
    radial-gradient(92% 54% at 50% -4%, rgba(46,84,178,.55) 0%, rgba(19,46,103,0) 60%),
    linear-gradient(190deg, var(--ink-800) 0%, var(--ink-950) 100%);
}
.back__mark { width: clamp(52px, 12%, 88px); margin-bottom: clamp(0.55rem, 3.39cqw, 1rem); }
.back__codes { display: flex; gap: clamp(1.1rem, 6.36cqw, 2rem); justify-content: center; margin: clamp(0.77rem, 4.66cqw, 1.4rem) 0 0; flex-wrap: wrap; }
a.back__code, .back__code { display: flex; flex-direction: column; align-items: center; gap: .45rem; text-decoration: none; }
.back__code img { width: clamp(72px, 33.92cqw, 124px); height: auto; display: block; }
.back__code span {
  font-size: clamp(0.625rem, 1.7cqw, .56rem); letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold-300);
}
.back__handle {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(0.918rem, 3.18cqw, 1.02rem);
  color: var(--cream-dim); text-decoration: none;
  margin-top: clamp(0.66rem, 4.24cqw, 1.2rem);
}
.back__handle:hover { color: var(--gold-200); }
.back__ftap {
  position: absolute; left: 0; right: 0;
  bottom: clamp(1.705rem, 10.6cqw, 3.1rem);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
}
.back__ftap img { width: clamp(58px, 13%, 92px); opacity: .8; }
.back__ftap span {
  font-size: clamp(0.625rem, 1.57cqw, .52rem); letter-spacing: .32em;
  text-transform: uppercase; color: rgba(198,189,168,.45);
}

/* ------------------------------------------------------------ navigation --- */

.controls {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(0.632rem, 3.82cqw, 1.15rem);
  padding: clamp(.65rem, 1.7vh, 1rem) 0;
  padding-bottom: calc(clamp(.65rem, 1.7vh, 1rem) + env(safe-area-inset-bottom, 0px));
  position: relative; z-index: 5;
}
.ctrl {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid rgba(201,151,41,.48);
  background: rgba(10,28,68,.72);
  color: var(--gold-300);
  cursor: pointer; border-radius: 50%;
  transition: background .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease), transform .18s var(--ease), opacity .28s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.ctrl:hover:not(:disabled) { background: rgba(27,60,131,.9); border-color: var(--gold-300); color: var(--gold-100); }
.ctrl:active:not(:disabled) { transform: scale(.93); }
.ctrl:disabled { opacity: .28; cursor: default; }
.ctrl svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.5; }

.controls__readout {
  font-family: var(--serif); font-size: .92rem; letter-spacing: .14em;
  color: var(--cream-dim); font-variant-numeric: tabular-nums;
  min-width: 7rem; text-align: center; margin: 0;
}
.controls__readout b { color: var(--gold-200); font-weight: 500; }

/* Tap the outer edge of a page to turn it, the way you would a real one */
.book__zone {
  position: absolute; top: 0; bottom: 0; width: 24%; z-index: 40;
  border: 0; padding: 0; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.book__zone--prev { left: 0; }
.book__zone--next { right: 0; }
.book__zone:disabled { cursor: default; }

/* --------------------------------------------------------------- opening --- */

.loader {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--ink-980); z-index: 60;
  transition: opacity .7s ease, visibility .7s;
}
.is-ready .loader { opacity: 0; visibility: hidden; }
.loader img { width: 78px; animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

.hint {
  margin: 0;
  padding-top: clamp(.35rem, 1vh, .7rem);
  text-align: center; z-index: 6; pointer-events: none;
  font-size: .56rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(231,200,110,.72);
}
.hint.is-gone { opacity: 0; transition: opacity .6s var(--ease); }

.error-note {
  margin: auto; max-width: 32ch; text-align: center;
  font-family: var(--serif); font-size: 1rem; line-height: 1.6; color: var(--cream-dim);
}

/* ------------------------------------------------------------ responsive --- */

@media (max-width: 720px) {
  :root { --flip-ms: 760ms; }
  .controls { gap: .55rem; }
  .controls__readout { font-size: .84rem; min-width: 5.5rem; letter-spacing: .1em; }
  .ctrl { width: 3rem; height: 3rem; }        /* a comfortable thumb target */
  .ctrl svg { width: 1.15rem; height: 1.15rem; }
  .hint { font-size: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --flip-ms: 1ms; }
  .book__inner, .leaf, .book__edge { transition-duration: 1ms; }
  .loader img { animation: none; }
  .stage { transition: none; }
}