:root {
  --ink: #171512;
  --muted: #6d685f;
  --paper: #f5f0e7;
  --paper-2: #ebe2d3;
  --gold: #b68d4c;
  --gold-light: #d7bf91;
  --line: rgba(23, 21, 18, 0.14);
  --shadow: 0 26px 70px rgba(26, 20, 13, 0.16);
  --radius: 22px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(213, 194, 160, 0.22), transparent 24rem),
    var(--paper);
  font-family: Tahoma, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #d3ac69;
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  inset: 12px auto auto 12px;
  padding: 10px 14px;
  color: #fff;
  background: var(--ink);
  border-radius: 10px;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: relative;
  z-index: 10;
  max-width: 1440px;
  height: 92px;
  margin: auto;
  padding: 0 clamp(24px, 5vw, 78px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.brand img {
  border-radius: 13px;
  box-shadow: 0 7px 18px rgba(23, 21, 18, 0.16);
}

.brand span {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand strong {
  font-size: 19px;
  letter-spacing: -0.04em;
}

.brand small {
  margin-top: 6px;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 8px;
  letter-spacing: 0.2em;
}

.site-header nav {
  display: flex;
  gap: 38px;
  color: #58534c;
  font-size: 13px;
}

.site-header nav a {
  position: relative;
}

.site-header nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 -8px;
  width: 0;
  height: 1px;
  margin: auto;
  background: var(--gold);
  transition: width 200ms ease;
}

.site-header nav a:hover::after {
  width: 100%;
}

.header-cta,
.button {
  border: 0;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.header-cta {
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  background: var(--ink);
  border-radius: 100px;
  font-size: 12px;
}

.header-cta:hover,
.button:hover {
  transform: translateY(-2px);
}

.hero {
  position: relative;
  min-height: 720px;
  max-width: 1440px;
  margin: auto;
  padding: 58px clamp(24px, 6.4vw, 92px) 76px;
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(460px, 1.1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 72px);
  overflow: hidden;
}

.hero::before {
  content: "F";
  position: absolute;
  z-index: -1;
  inset: -115px auto auto -5px;
  color: rgba(23, 21, 18, 0.027);
  font-family: Georgia, serif;
  font-size: 650px;
  line-height: 1;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #7b6848;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.eyebrow i {
  width: 28px;
  height: 1px;
  background: var(--gold);
}

.hero h1 {
  margin: 26px 0 24px;
  font-size: clamp(54px, 6vw, 92px);
  line-height: 1.08;
  letter-spacing: -0.065em;
}

.hero h1 em {
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

.hero-copy > p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 2;
}

.hero-actions {
  margin-top: 34px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.button {
  min-height: 51px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  border-radius: 100px;
  font-size: 13px;
}

.button-primary {
  color: #fff;
  background: var(--ink);
}

.button-ghost {
  background: transparent;
  border: 1px solid var(--line);
}

.hero-meta {
  margin-top: 44px;
  display: flex;
  gap: 0;
}

.hero-meta span {
  min-width: 122px;
  padding: 0 20px;
  color: var(--muted);
  border-inline-start: 1px solid var(--line);
  font-size: 10px;
}

.hero-meta span:first-child {
  padding-inline-start: 0;
}

.hero-meta b {
  margin-inline-end: 5px;
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: 24px;
}

.hero-visual {
  position: relative;
  min-height: 560px;
  display: grid;
  place-items: center;
  perspective: 1600px;
}

.halo {
  position: absolute;
  width: min(490px, 85%);
  aspect-ratio: 1;
  border: 1px solid rgba(175, 139, 82, 0.3);
  border-radius: 50%;
  box-shadow:
    0 0 0 44px rgba(255, 255, 255, 0.18),
    0 0 0 45px rgba(175, 139, 82, 0.07),
    inset 0 0 80px rgba(183, 143, 75, 0.08);
}

.sample-book {
  position: relative;
  z-index: 2;
  width: min(338px, 62vw);
  aspect-ratio: 0.73;
  transform: rotateY(-15deg) rotateX(4deg) rotateZ(3deg);
  transform-style: preserve-3d;
  filter: drop-shadow(-35px 42px 35px rgba(31, 24, 16, 0.22));
}

.sample-book::after {
  content: "";
  position: absolute;
  z-index: -5;
  inset: 1% -9px -9px 2%;
  background: #c8bda8;
  transform: translateZ(-14px);
  box-shadow: inset -6px 0 0 rgba(0, 0, 0, 0.11);
}

.sample-page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 3px 13px 13px 3px;
  transform-origin: right center;
  backface-visibility: hidden;
}

.sample-page::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.46;
  background:
    repeating-linear-gradient(94deg, transparent 0 2px, rgba(255,255,255,.18) 3px, transparent 4px 8px),
    repeating-linear-gradient(2deg, rgba(0,0,0,.05) 0 1px, transparent 2px 5px);
  mix-blend-mode: soft-light;
}

.sample-page-4 { background: #91877d; transform: translate3d(-24px, 13px, -20px) rotateZ(-7deg); }
.sample-page-3 { background: #c3aa8b; transform: translate3d(-15px, 8px, -14px) rotateZ(-4.5deg); }
.sample-page-2 { background: #e6ded0; transform: translate3d(-7px, 4px, -8px) rotateZ(-2.2deg); }

.sample-page-1 {
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #f0dfbe;
  background:
    radial-gradient(circle at 80% 20%, rgba(221,190,134,.18), transparent 27%),
    #1c1a17;
}

.sample-page-1 span {
  font-family: Georgia, serif;
  font-size: 46px;
}

.sample-page-1 div {
  font-family: Arial, sans-serif;
  font-size: clamp(37px, 4vw, 57px);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.07em;
}

.sample-page-1 small {
  align-self: flex-end;
  font-family: Arial, sans-serif;
  letter-spacing: 0.12em;
}

.hero-note {
  position: absolute;
  z-index: 3;
  min-width: 138px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(250, 247, 240, 0.82);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(45, 35, 22, 0.1);
  backdrop-filter: blur(10px);
}

.hero-note small { color: var(--muted); font-size: 9px; }
.hero-note strong { font-size: 11px; }
.hero-note-top { inset: 18% auto auto 0; }
.hero-note-bottom { inset: auto 2% 20% auto; }

.mini-swatches {
  display: flex;
}

.mini-swatches i {
  width: 19px;
  height: 19px;
  margin-inline-start: -5px;
  border: 2px solid #f7f3eb;
  border-radius: 50%;
  background: #f2eadb;
}

.mini-swatches i:nth-child(2) { background: #b2aaa1; }
.mini-swatches i:nth-child(3) { background: #282725; }

.gesture-hint {
  position: absolute;
  inset: auto 4% 8% auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
}

.gesture-hint span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 50%;
  animation: nudge 1.8s ease-in-out infinite;
}

@keyframes nudge {
  50% { transform: translateX(-5px); }
}

.intro-strip {
  padding: 22px clamp(24px, 6vw, 92px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #dfd4c4;
  background: var(--ink);
}

.intro-strip p {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
}

.intro-strip div {
  display: flex;
  gap: 32px;
  color: #978f82;
  font-size: 10px;
}

.intro-strip span::before {
  content: "◆";
  margin-inline-end: 9px;
  color: var(--gold);
  font-size: 6px;
  vertical-align: 2px;
}

.catalog-section {
  max-width: 1440px;
  margin: auto;
  padding: 105px clamp(24px, 6.4vw, 92px) 120px;
}

.section-heading {
  display: grid;
  grid-template-columns: 1fr minmax(290px, 430px);
  align-items: end;
  gap: 40px;
}

.section-heading h2 {
  margin: 18px 0 0;
  font-size: clamp(40px, 5vw, 68px);
  letter-spacing: -0.06em;
}

.section-heading > p {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 2;
}

.filter-row {
  margin: 52px 0 30px;
  padding-bottom: 16px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}

.filter-chip {
  flex: 0 0 auto;
  min-width: 88px;
  padding: 9px 17px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 100px;
  cursor: pointer;
  font-size: 11px;
}

.filter-chip.is-active {
  color: #fff;
  background: var(--ink);
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.catalog-card {
  --cover: #d8d0c2;
  position: relative;
  min-height: 410px;
  padding: 32px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 22px;
  overflow: hidden;
  text-align: right;
  background: #eee8de;
  border: 1px solid rgba(23, 21, 18, 0.08);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.catalog-card:nth-child(4n + 2),
.catalog-card:nth-child(4n + 3) {
  background: #e5dccd;
}

.catalog-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.catalog-card.is-hidden {
  display: none;
}

.card-copy {
  position: relative;
  z-index: 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.card-number {
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: 13px;
}

.card-copy h3 {
  margin: auto 0 10px;
  font-size: clamp(24px, 2.7vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.045em;
}

.card-copy p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
}

.card-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 15px;
  border-top: 1px solid rgba(23,21,18,.12);
  font-size: 10px;
}

.card-action i {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  color: #fff;
  background: var(--ink);
  border-radius: 50%;
  font-style: normal;
  transition: transform 200ms ease;
}

.catalog-card:hover .card-action i {
  transform: translateX(-5px);
}

.catalog-mockup {
  position: relative;
  height: 310px;
  display: grid;
  place-items: center;
  perspective: 1000px;
}

.mock-book {
  position: relative;
  width: 180px;
  aspect-ratio: .72;
  transform: rotateY(-12deg) rotateZ(2deg);
  transform-style: preserve-3d;
  transition: transform 350ms cubic-bezier(.2,.8,.2,1);
  filter: drop-shadow(-22px 25px 18px rgba(23,21,18,.2));
}

.catalog-card:hover .mock-book {
  transform: rotateY(-21deg) rotateZ(0) translateY(-6px);
}

.mock-cover,
.mock-leaf {
  position: absolute;
  inset: 0;
  border-radius: 2px 9px 9px 2px;
  transform-origin: right;
}

.mock-leaf {
  background: #f7f1e6;
  border: 1px solid rgba(23,21,18,.08);
}

.mock-leaf:nth-child(1) { transform: translate3d(-9px, 7px, -10px) rotateZ(-3deg); }
.mock-leaf:nth-child(2) { transform: translate3d(-5px, 4px, -5px) rotateZ(-1.5deg); }

.mock-cover {
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--cover-ink, #fff);
  background:
    repeating-linear-gradient(94deg, transparent 0 2px, rgba(255,255,255,.12) 3px, transparent 4px 8px),
    var(--cover);
  box-shadow: inset -7px 0 11px rgba(0,0,0,.12);
}

.mock-cover b {
  font-family: Georgia, serif;
  font-size: 34px;
}

.mock-cover strong {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: .95;
  letter-spacing: -.04em;
}

.mock-cover small {
  align-self: flex-end;
  font-size: 8px;
}

.mock-swatches {
  position: absolute;
  inset: auto 0 1px auto;
  display: flex;
  gap: 4px;
}

.mock-swatches i {
  width: 18px;
  height: 18px;
  border: 2px solid #eee8de;
  border-radius: 50%;
}

.closing-panel {
  min-height: 430px;
  padding: 70px clamp(24px, 7vw, 100px);
  display: grid;
  grid-template-columns: 0.55fr 1.45fr auto;
  align-items: center;
  gap: 40px;
  color: #f1e8d9;
  background:
    radial-gradient(circle at 20% 50%, rgba(187,145,79,.2), transparent 26rem),
    #191714;
}

.closing-panel > div span {
  color: var(--gold-light);
  font: 700 25px Georgia, serif;
}

.closing-panel > div p {
  max-width: 150px;
  color: #898174;
  font-size: 10px;
  line-height: 1.8;
}

.closing-panel h2 {
  margin: 0;
  font-size: clamp(31px, 4.2vw, 58px);
  line-height: 1.35;
  letter-spacing: -0.045em;
}

.button-light {
  color: var(--ink);
  background: var(--paper);
}

footer {
  min-height: 100px;
  padding: 22px clamp(24px, 6vw, 92px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #888075;
  background: #100f0d;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 10px;
}

.footer-brand { color: #eee4d5; }
.footer-brand img { box-shadow: none; }

/* Viewer */

.viewer {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #ede6da;
  background: #161512;
  border: 0;
}

.viewer::backdrop {
  background: rgba(8,7,6,.88);
  backdrop-filter: blur(8px);
}

.viewer-shell {
  min-height: 100%;
  display: grid;
  grid-template-rows: 72px 1fr auto 28px;
  background:
    radial-gradient(circle at 64% 38%, rgba(210,176,116,.12), transparent 29rem),
    linear-gradient(130deg, #1b1916, #0f0e0c);
}

.viewer-header {
  position: relative;
  z-index: 30;
  padding: 0 clamp(18px, 3vw, 46px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.viewer-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.viewer-brand img { border-radius: 9px; }

.viewer-brand span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.viewer-brand small { color: #7e776c; font-size: 8px; }
.viewer-brand strong { font-size: 12px; }

.viewer-actions {
  display: flex;
  gap: 7px;
}

.icon-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #d6cdc0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  cursor: pointer;
}

.icon-button[aria-pressed="true"] {
  color: #171512;
  background: var(--gold-light);
}

.close-button {
  margin-inline-start: 10px;
  color: #fff;
  background: rgba(255,255,255,.12);
  font-size: 22px;
}

.viewer-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(190px, 250px) 1fr;
}

.catalog-info {
  padding: clamp(30px, 5vh, 64px) 32px 25px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255,255,255,.08);
}

.catalog-number {
  color: var(--gold-light);
  font: 28px Georgia, serif;
}

.catalog-kicker {
  margin: auto 0 10px;
  color: #a79984;
  font-size: 9px;
  letter-spacing: .08em;
}

.catalog-info h3 {
  margin: 0 0 18px;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.15;
  letter-spacing: -.05em;
}

.catalog-info > p:not(.catalog-kicker) {
  margin: 0;
  color: #8f887e;
  font-size: 10px;
  line-height: 1.9;
}

.catalog-info dl {
  margin: 26px 0 0;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.09);
}

.catalog-info dl div {
  padding: 6px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 8px;
}

.catalog-info dt { color: #6f6961; }
.catalog-info dd { margin: 0; color: #c3baad; }

.book-area {
  position: relative;
  min-width: 0;
  min-height: 470px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.book-light {
  position: absolute;
  z-index: -1;
  width: min(820px, 80%);
  height: 72%;
  background: radial-gradient(ellipse, rgba(236,208,158,.11), transparent 65%);
  filter: blur(2px);
}

.book-shell {
  position: relative;
  width: min(74vw, 880px);
  aspect-ratio: 1.72;
  perspective: 1900px;
  touch-action: pan-y;
  user-select: none;
}

.book {
  position: absolute;
  inset: 0;
  display: flex;
  transform: rotateX(2deg);
  transform-style: preserve-3d;
  filter: drop-shadow(0 30px 24px rgba(0,0,0,.43));
}

.book::after {
  content: "";
  position: absolute;
  z-index: 20;
  inset: auto 4% -18px;
  height: 24px;
  background: radial-gradient(ellipse, rgba(0,0,0,.65), transparent 67%);
  filter: blur(8px);
  transform: translateZ(-25px);
}

.fabric-page,
.flipper-face {
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  color: var(--page-ink, #201e1a);
  background-color: var(--fabric, #e6e0d6);
  background-image:
    linear-gradient(110deg, rgba(255,255,255,.23), transparent 28%, rgba(0,0,0,.08) 63%, rgba(255,255,255,.12)),
    repeating-linear-gradient(var(--weave-angle, 93deg), transparent 0 2px, rgba(255,255,255,.12) 3px, transparent 4px 7px),
    repeating-linear-gradient(calc(var(--weave-angle, 93deg) - 91deg), rgba(0,0,0,.025) 0 1px, transparent 2px 5px);
  box-shadow: inset 0 0 35px rgba(0,0,0,.08);
  backface-visibility: hidden;
}

.fabric-page::before,
.flipper-face::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.24), transparent 19%),
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 14%, transparent 84%, rgba(0,0,0,.06));
  mix-blend-mode: soft-light;
}

.page-left {
  border-radius: 4px 0 0 9px;
  box-shadow: inset -18px 0 24px -22px rgba(0,0,0,.55);
}

.page-right {
  border-radius: 0 4px 9px 0;
  box-shadow: inset 18px 0 24px -22px rgba(0,0,0,.55);
}

.fabric-page.is-empty {
  opacity: .16;
}

.page-content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: clamp(20px, 3vw, 43px);
  display: flex;
  flex-direction: column;
  text-shadow: 0 1px 1px rgba(255,255,255,.16);
}

.page-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: clamp(7px, .7vw, 9px);
  letter-spacing: .08em;
}

.page-topline b {
  width: 30px;
  height: 1px;
  margin-inline-start: auto;
  background: currentColor;
  opacity: .45;
}

.page-color-name {
  margin: auto 0 5px;
  font-size: clamp(24px, 3.7vw, 52px);
  line-height: 1;
  letter-spacing: -.06em;
}

.page-color-arabic {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(14px, 1.6vw, 21px);
  font-weight: 400;
  opacity: .68;
}

.page-footer {
  margin-top: clamp(18px, 3vw, 36px);
  padding-top: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid currentColor;
  font-size: clamp(7px, .65vw, 9px);
}

.page-footer span:last-child {
  width: 17px;
  height: 17px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.flipper {
  position: absolute;
  z-index: 12;
  top: 0;
  right: 50%;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: right center;
  pointer-events: none;
  opacity: 0;
}

.flipper-face {
  position: absolute;
  inset: 0;
  width: 100%;
}

.flipper-front {
  border-radius: 4px 0 0 9px;
}

.flipper-back {
  border-radius: 0 4px 9px 0;
  transform: rotateY(180deg);
}

.book.is-flipping-next .flipper {
  opacity: 1;
  animation: flip-next 720ms cubic-bezier(.37,.02,.18,1) forwards;
}

.book.is-flipping-prev .flipper {
  right: auto;
  left: 50%;
  opacity: 1;
  transform-origin: left center;
  animation: flip-prev 720ms cubic-bezier(.37,.02,.18,1) forwards;
}

@keyframes flip-next {
  0% { transform: rotateY(0deg); filter: brightness(1); }
  45% { filter: brightness(.58); }
  100% { transform: rotateY(180deg); filter: brightness(1); }
}

@keyframes flip-prev {
  0% { transform: rotateY(0deg); filter: brightness(1); }
  45% { filter: brightness(.58); }
  100% { transform: rotateY(-180deg); filter: brightness(1); }
}

.book-spine {
  position: absolute;
  z-index: 24;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  width: 3px;
  background: linear-gradient(90deg, rgba(0,0,0,.19), rgba(255,255,255,.16), rgba(0,0,0,.13));
  box-shadow: 0 0 17px rgba(0,0,0,.27);
  pointer-events: none;
}

.page-stack {
  position: absolute;
  z-index: -1;
  top: 5px;
  bottom: -9px;
  width: calc(50% - 3px);
  background: repeating-linear-gradient(#e7dfd1 0 2px, #bdb4a7 3px, #eee7dc 4px);
  box-shadow: 0 8px 7px rgba(0,0,0,.24);
}

.page-stack-left { left: 4px; border-radius: 4px 0 0 8px; }
.page-stack-right { right: 4px; border-radius: 0 4px 8px 0; }

.binder-rings { display: none; }

.page-nav {
  position: absolute;
  z-index: 30;
  top: 50%;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: #ddd3c4;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 160ms ease, transform 160ms ease;
}

.page-nav:hover { background: rgba(255,255,255,.14); }
.page-nav:disabled { opacity: .24; cursor: not-allowed; }
.page-nav-prev { right: clamp(12px, 2vw, 32px); }
.page-nav-next { left: clamp(12px, 2vw, 32px); }

.page-progress {
  position: absolute;
  inset: auto 50% 15px auto;
  width: min(220px, 36%);
  display: flex;
  align-items: center;
  gap: 12px;
  color: #8e867b;
  font: 10px Arial, sans-serif;
  transform: translateX(50%);
}

.page-progress > div {
  flex: 1;
  height: 2px;
  overflow: hidden;
  background: rgba(255,255,255,.13);
}

.page-progress i {
  display: block;
  width: 10%;
  height: 100%;
  background: var(--gold-light);
  transition: width 300ms ease;
}

.thumbnail-drawer {
  min-height: 79px;
  padding: 10px clamp(18px, 3vw, 46px);
  display: flex;
  align-items: center;
  gap: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.thumbnail-drawer > span {
  color: #777067;
  font-size: 8px;
}

.thumbnail-list {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.thumbnail {
  --thumb: #eee;
  position: relative;
  width: 42px;
  height: 50px;
  flex: 0 0 auto;
  overflow: hidden;
  background:
    repeating-linear-gradient(93deg, transparent 0 2px, rgba(255,255,255,.16) 3px, transparent 4px 7px),
    var(--thumb);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 4px;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease;
}

.thumbnail::after {
  content: attr(data-number);
  position: absolute;
  inset: auto auto 3px 4px;
  color: var(--thumb-ink, #222);
  font: 7px Arial, sans-serif;
}

.thumbnail:hover,
.thumbnail.is-active {
  transform: translateY(-3px);
  border-color: var(--gold-light);
}

.viewer-help {
  padding-inline-end: 30px;
  color: #5d5852;
  font-size: 8px;
  text-align: left;
}

.toast {
  position: fixed;
  z-index: 2000;
  inset: auto 50% 24px auto;
  padding: 10px 17px;
  color: #f2eadf;
  background: rgba(18,17,15,.92);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 100px;
  box-shadow: 0 10px 32px rgba(0,0,0,.22);
  font-size: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translate(50%, 12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(50%, 0);
}

/* Ten distinct book personalities */

.book-shell[data-mode="soft"] .book { transform: rotateX(5deg) rotateZ(-1deg); }
.book-shell[data-mode="soft"] .fabric-page,
.book-shell[data-mode="soft"] .flipper-face { border-radius: 12px 12px 18px 18px; }

.book-shell[data-mode="stack"] .book { transform: rotateX(5deg) rotateZ(2deg); }
.book-shell[data-mode="stack"] .page-stack-left { transform: translate(-14px, 10px) rotate(-3deg); }
.book-shell[data-mode="stack"] .page-stack-right { transform: translate(14px, 10px) rotate(3deg); }

.book-shell[data-mode="fan"] { transform: scale(.88) rotate(-2deg); }
.book-shell[data-mode="fan"] .page-stack-left { transform: translate(-38px, 14px) rotate(-8deg); }
.book-shell[data-mode="fan"] .page-stack-right { transform: translate(38px, 14px) rotate(8deg); }

.book-shell[data-mode="binder"] .binder-rings {
  position: absolute;
  z-index: 28;
  top: 8%;
  bottom: 8%;
  left: calc(50% - 11px);
  width: 22px;
  display: block;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 12%, #9d8f78 12.5% 16%, transparent 16.5% 25%);
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,.45));
}

.book-shell[data-mode="vertical"] { transform: scale(.91) rotateX(4deg); }
.book-shell[data-mode="vertical"] .book { transform: rotateX(7deg); }
.book-shell[data-mode="vertical"] .fabric-page,
.book-shell[data-mode="vertical"] .flipper-face { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.09) 0 1px, transparent 2px 6px), linear-gradient(120deg, rgba(255,255,255,.2), transparent 55%); }

.book-shell[data-mode="luxury"] .book { outline: 5px solid #6a5232; outline-offset: 3px; }
.book-shell[data-mode="luxury"] .fabric-page { box-shadow: inset 0 0 0 7px rgba(181,143,82,.25), inset 0 0 40px rgba(0,0,0,.13); }

.book-shell[data-mode="swatch"] { width: min(58vw, 680px); aspect-ratio: 1.5; }
.book-shell[data-mode="swatch"] .book { transform: rotateZ(-2deg); }
.book-shell[data-mode="swatch"] .fabric-page,
.book-shell[data-mode="swatch"] .flipper-face { border-radius: 18px; }
.book-shell[data-mode="swatch"] .book-spine { opacity: .3; }

.book-shell[data-mode="night"] .book { outline: 1px solid rgba(212,177,115,.5); outline-offset: 7px; }
.book-shell[data-mode="night"] .page-stack { background: #352f28; }

.book-shell[data-mode="minimal"] .book { filter: drop-shadow(0 20px 16px rgba(0,0,0,.25)); }
.book-shell[data-mode="minimal"] .book-spine { opacity: .32; }
.book-shell[data-mode="minimal"] .page-stack { display: none; }

@media (max-width: 980px) {
  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .hero-copy {
    position: relative;
    z-index: 3;
    max-width: 650px;
  }

  .hero-visual { min-height: 520px; }
  .catalog-card { min-height: 370px; padding: 24px; }
  .mock-book { width: 145px; }
  .closing-panel { grid-template-columns: 1fr auto; }
  .closing-panel > div { display: none; }

  .viewer-body { grid-template-columns: 1fr; }
  .catalog-info { display: none; }
  .book-shell { width: min(86vw, 850px); }
}

@media (max-width: 720px) {
  .site-header { height: 76px; }
  .site-header nav { display: none; }
  .header-cta { padding: 10px 14px; font-size: 10px; }

  .hero { padding-top: 45px; }
  .hero h1 { font-size: clamp(48px, 15vw, 72px); }
  .hero-visual { min-height: 460px; }
  .sample-book { width: min(270px, 65vw); }
  .hero-note-top { left: 1%; }
  .hero-note-bottom { right: 0; }
  .hero-meta span { min-width: 95px; padding: 0 11px; }

  .intro-strip { align-items: flex-start; }
  .intro-strip div { flex-direction: column; gap: 10px; }

  .catalog-section { padding-top: 74px; }
  .section-heading { grid-template-columns: 1fr; }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-card { min-height: 345px; grid-template-columns: .9fr 1.1fr; }

  .closing-panel { min-height: 350px; grid-template-columns: 1fr; }
  footer { flex-direction: column; justify-content: center; text-align: center; }

  .viewer-shell { grid-template-rows: 64px 1fr auto 0; }
  .book-area { min-height: 380px; }
  .book-shell,
  .book-shell[data-mode="swatch"] {
    width: min(75vw, 430px);
    aspect-ratio: .75;
  }

  .fabric-page,
  .flipper-face { width: 100%; }
  .page-left,
  .page-stack-left { display: none; }
  .page-right { border-radius: 5px 12px 12px 5px; }
  .book-spine { left: 0; }

  .flipper {
    right: 0;
    width: 100%;
    transform-origin: left center;
  }

  .book.is-flipping-next .flipper { animation-name: flip-mobile-next; }
  .book.is-flipping-prev .flipper {
    left: 0;
    transform-origin: right center;
    animation-name: flip-mobile-prev;
  }

  .page-stack-right { width: calc(100% - 4px); }
  .page-nav { top: auto; bottom: 18px; transform: none; }
  .page-nav-prev { right: 18px; }
  .page-nav-next { left: 18px; }
  .page-progress { bottom: 31px; }
  .thumbnail-drawer { min-height: 71px; }
  .viewer-help { display: none; }
  .page-content { padding: 32px; }
  .page-color-name { font-size: clamp(38px, 10vw, 58px); }
  .page-color-arabic { font-size: 21px; }
}

@keyframes flip-mobile-next {
  from { transform: rotateY(0); filter: brightness(1); }
  48% { filter: brightness(.5); }
  to { transform: rotateY(-180deg); filter: brightness(1); }
}

@keyframes flip-mobile-prev {
  from { transform: rotateY(0); filter: brightness(1); }
  48% { filter: brightness(.5); }
  to { transform: rotateY(180deg); filter: brightness(1); }
}

@media (max-width: 480px) {
  .header-cta span { display: none; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-meta { justify-content: center; }
  .hero-meta span { display: flex; flex-direction: column; gap: 4px; }
  .hero-meta b { margin: 0; }
  .hero-visual { min-height: 410px; }
  .hero-note { min-width: 116px; padding: 10px; }
  .gesture-hint { display: none; }
  .catalog-card { padding: 20px; grid-template-columns: 1fr 1.15fr; }
  .catalog-mockup { height: 260px; }
  .mock-book { width: 120px; }
  .card-copy h3 { font-size: 25px; }
  .viewer-actions .icon-button:nth-child(1) { display: none; }
  .book-shell,
  .book-shell[data-mode="swatch"] { width: min(72vw, 340px); }
  .page-nav { width: 40px; height: 40px; }
  .page-progress { width: 35%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}