/* ==========================================================================
   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 raking light must span the whole sheet once. Hung on each strip, the
   full gradient squeezed into every 40px slice and repeated across the page
   as bands. The clone inside each strip is full page width, so shading it
   keeps one continuous gradient that each strip shows its own slice of. */
.strip__page::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
}
.strip__face--front .strip__page::after {
  background: linear-gradient(100deg,
      rgba(255,246,214,.14) 0%, rgba(255,246,214,.03) 22%, rgba(0,0,0,0) 40%,
      rgba(2,8,24,.34) 74%, rgba(2,8,24,.62) 100%);
  opacity: calc(var(--flip, 0) * .9);
}
.strip__face--back .strip__page::after {
  background: linear-gradient(260deg,
      rgba(255,246,214,.13) 0%, rgba(255,246,214,.03) 22%, rgba(0,0,0,0) 42%,
      rgba(2,8,24,.36) 76%, rgba(2,8,24,.6) 100%);
  opacity: calc((1 - var(--flip, 0)) * .9);
}


.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)); }


.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; }
}


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

/* Tracked capitals are the card's own voice, but at .36em a phone page cannot
   hold the tagline on one line and strands its last word. On a narrow page,
   close the tracking so it fits; if a label still has to wrap anywhere,
   balance it so no single word is left alone. */
.cover__tagline, .cover__issue, .divider__sub, .runhead,
.visit__hours, .contents__sub, .product__sku { text-wrap: balance; }

@container (max-width: 360px) {
  .cover__tagline { letter-spacing: .22em; }
  .cover__issue   { letter-spacing: .26em; }
  .divider__sub   { letter-spacing: .2em; }
}