/* Tentang Kita — "Langkah ke Cahaya"
   Quiet paper like the book covers, one warm light, lowercase type. */

:root {
  --paper: #f7f4ef;
  --paper-2: #efeae2;
  --white: #fffdf9;
  --ink: #1f1a15;
  --ink-2: #5e554c;
  --line: rgba(31, 26, 21, 0.14);
  --gold: #c99a4b;
  --gold-ink: #8a6424;
  --glow: #f3c77a;
  --dark: #17120d;
  --dark-2: #2a2119;
  --moon: #fbf6ee;
  --moon-2: #d8cdbf;

  --text: "Jost", system-ui, sans-serif;
  --arabic: "Amiri", serif;

  --wrap: 1280px;
  --gut: clamp(16px, 4vw, 40px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --muted: var(--ink-2);
  --btn-bg: var(--ink);
  --btn-ink: var(--moon);
  --hdr-ink: var(--ink);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: rgba(31, 26, 21, 0.3) transparent;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-underline-offset: 0.24em;
  text-decoration-thickness: 1px;
}

button {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--glow);
  color: var(--ink);
}

:focus-visible {
  outline: 1.5px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.w-dark :focus-visible {
  outline-color: var(--glow);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gut) * 2);
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* one warm light drifts down the page as you read */
.beam {
  position: fixed;
  z-index: -1;
  top: -20vh;
  left: 0;
  width: 70vw;
  height: 140vh;
  pointer-events: none;
  background: radial-gradient(45% 38% at 50% 45%, rgba(243, 199, 122, 0.16), rgba(243, 199, 122, 0) 72%);
  transform: translateX(var(--beam-x, -10vw)) rotate(-8deg);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .4  0 0 0 1.2 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* hours kept as names; this world has paper and one dark band */
.w-night,
.w-dusk,
.w-day {
  color: var(--ink);
}

.w-dark {
  background: var(--dark);
  color: var(--moon);
  --muted: var(--moon-2);
  --line: rgba(251, 246, 238, 0.16);
  --btn-bg: var(--glow);
  --btn-ink: var(--dark);
}

/* ---------- header ---------- */

.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  color: var(--hdr-ink);
  transition: background-color 0.5s var(--ease-out), color 0.4s, box-shadow 0.5s;
}

.hdr.on-dark {
  --hdr-ink: var(--moon);
}

.hdr.is-solid {
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow: 0 1px 0 var(--line);
}

.hdr__in {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 36px);
  height: 76px;
}

.logo {
  font-size: 1.05rem;
  letter-spacing: 0.32em;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 300;
}

.logo b {
  font-weight: 500;
}

.nav {
  display: flex;
  gap: clamp(16px, 2.4vw, 34px);
  margin-left: auto;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.nav a {
  text-decoration: none;
  padding: 6px 0;
  position: relative;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.hdr__tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
  text-decoration: none;
}

.icon-btn:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.icon {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--gold);
  color: var(--dark);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transform: scale(0);
  transition: transform 0.4s var(--ease-out);
}

.cart-count.has {
  transform: scale(1);
}

.menu-btn {
  display: none;
}

/* ---------- type ---------- */

.display {
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

.h2 {
  font-weight: 300;
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

.h3 {
  font-weight: 400;
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0 0 0.4em;
}

.lede {
  font-size: clamp(1.08rem, 1.35vw, 1.22rem);
  font-weight: 300;
  line-height: 1.65;
  max-width: 34em;
  color: var(--muted);
  margin: 0 0 1.8em;
}

.muted {
  color: var(--muted);
}

.arab {
  font-family: var(--arabic);
  direction: rtl;
}

/* ---------- controls ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-weight: 400;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s, background-color 0.3s;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -16px rgba(31, 26, 21, 0.45);
}

.btn--ghost {
  background: transparent;
  color: inherit;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
}

.btn--ghost:hover {
  border-color: currentColor;
  box-shadow: none;
}

.btn--sm {
  min-height: 42px;
  padding: 0 18px;
  font-size: 0.9rem;
}

.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn .icon {
  width: 18px;
  height: 18px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: gap 0.35s var(--ease-out), border-color 0.3s;
}

.link-arrow:hover {
  gap: 14px;
  border-color: currentColor;
}

.link-arrow .icon {
  width: 17px;
  height: 17px;
}

.price {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.price s {
  font-weight: 300;
  color: var(--muted);
  margin-left: 6px;
  font-size: 0.86em;
}

/* ---------- book object ---------- */

.book {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

/* the turned book and its shadow reach a little below the box, so the title
   keeps a gap that grows with the book (larger covers spill further) */
.book__cover {
  position: relative;
  display: block;
  padding: 0 12% 0 6%;
  margin-bottom: clamp(10px, 6%, 30px);
}

/* ---------- the 3D book ---------- */

.b3d {
  --turn: 26deg;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 0.66;
  perspective: 1600px;
}

/* the ground shadow the book casts */
.b3d::after {
  content: "";
  position: absolute;
  left: 8%;
  right: -6%;
  bottom: -4%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(70, 50, 25, 0.32), rgba(70, 50, 25, 0));
  transition: transform 0.9s var(--ease-out), opacity 0.9s;
}

.b3d__book {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(var(--turn));
  transition: transform 0.9s var(--ease-out);
}

.book:hover .b3d__book,
.book:focus-within .b3d__book,
.b3d.is-front .b3d__book {
  transform: rotateY(0deg) translateY(-8px);
}

.book:hover .b3d::after,
.b3d.is-front::after {
  transform: scaleX(0.92) translateY(6px);
  opacity: 0.7;
}

.b3d__front,
.b3d__back,
.b3d__spine,
.b3d__pages {
  position: absolute;
  top: 0;
  height: 100%;
  backface-visibility: hidden;
}

.b3d__front {
  left: 0;
  width: 100%;
  object-fit: cover;
  border-radius: 1px 3px 3px 1px;
  transform: translateZ(calc(var(--t) * 0.5px));
}

/* the hinge: a soft crease along the spine side of the front cover */
.b3d__book::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateZ(calc(var(--t) * 0.5px + 0.5px));
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0%, rgba(255, 255, 255, 0.14) 1.6%, rgba(0, 0, 0, 0.06) 3.2%, rgba(0, 0, 0, 0) 6%);
  border-radius: 1px 3px 3px 1px;
  pointer-events: none;
}

.b3d__back {
  left: 0;
  width: 100%;
  background: var(--spine);
  filter: brightness(0.8);
  transform: translateZ(calc(var(--t) * -0.5px)) rotateY(180deg);
}

.b3d__spine {
  left: calc(var(--t) * -0.5px);
  width: calc(var(--t) * 1px);
  display: grid;
  place-items: center;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(255, 255, 255, 0.08) 40%, rgba(0, 0, 0, 0.12)), var(--spine);
  color: var(--spine-ink);
  transform: rotateY(-90deg);
  overflow: hidden;
}

.b3d__spine em {
  writing-mode: vertical-rl;
  font-style: normal;
  font-size: clamp(0.5rem, calc(var(--t) * 0.022rem), 0.72rem);
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 86%;
}

.b3d__pages {
  left: calc(100% - var(--t) * 0.5px);
  width: calc(var(--t) * 1px);
  top: 1.2%;
  height: 97.6%;
  background: repeating-linear-gradient(90deg, rgba(120, 100, 70, 0.12) 0 1px, transparent 1px 3px), linear-gradient(90deg, #ece5d8, #fffdf9 45%, #e8e0d2);
  transform: rotateY(90deg);
}

.book__t {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.3;
  margin: 0;
  text-wrap: balance;
}

.book__a {
  font-size: 0.86rem;
  color: var(--muted);
  margin: 2px 0 0;
}

.book__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

.add {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  flex: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out);
}

.add:hover,
.add.done {
  background: var(--btn-bg);
  color: var(--btn-ink);
  border-color: transparent;
}

.add .icon {
  width: 17px;
  height: 17px;
}

/* ---------- sections ---------- */

section {
  position: relative;
}

.pad {
  padding: clamp(110px, 16vh, 190px) 0;
}

/* hero: a man turned toward the light */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--dark);
  color: var(--moon);
  --muted: var(--moon-2);
  --btn-bg: var(--moon);
  --btn-ink: var(--dark);
}

.hero__media {
  position: absolute;
  inset: 0;
  margin: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 30%;
  transform: scale(1.04);
  animation: settle 3.2s var(--ease-out) forwards;
}

@keyframes settle {
  to {
    transform: none;
  }
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(23, 18, 13, 0.78) 0%, rgba(23, 18, 13, 0.5) 30%, rgba(23, 18, 13, 0) 56%),
    linear-gradient(0deg, rgba(23, 18, 13, 0.55) 0%, rgba(23, 18, 13, 0) 40%);
}

/* the light: beams falling from a high window toward his face */
.rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  overflow: hidden;
}

.rays span {
  position: absolute;
  top: -30%;
  left: var(--x);
  width: var(--w);
  height: 150%;
  background: linear-gradient(180deg, rgba(255, 226, 170, 0.95), rgba(255, 205, 140, 0.32) 50%, rgba(255, 200, 130, 0) 85%);
  filter: blur(var(--b, 18px));
  transform: rotate(-24deg);
  transform-origin: top center;
  opacity: 0;
  animation: ray 3.4s var(--d, 0.4s) var(--ease-out) forwards, sway 9s calc(var(--d, 0.4s) + 3.4s) ease-in-out infinite alternate;
}

/* the window itself: a warm bloom high on the left where the beams begin */
.rays::before {
  content: "";
  position: absolute;
  left: -10%;
  top: -25%;
  width: 70%;
  height: 80%;
  background: radial-gradient(closest-side, rgba(255, 214, 150, 0.5), rgba(255, 214, 150, 0));
  opacity: 0;
  animation: ray 3s 0.2s var(--ease-out) forwards;
  --o: 1;
}

@keyframes ray {
  to {
    opacity: var(--o, 0.7);
  }
}

@keyframes sway {
  from {
    opacity: var(--o, 0.7);
  }
  to {
    opacity: calc(var(--o, 0.7) * 0.55);
  }
}

.motes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__copy {
  position: relative;
  z-index: 2;
  padding-top: 140px;
  padding-bottom: clamp(64px, 12vh, 120px);
  max-width: 640px;
}

.hero .display {
  font-size: clamp(2.7rem, 5.4vw, 5rem);
  margin-bottom: 0.45em;
}

.hero__cite {
  display: block;
  font-size: 0.9rem;
  color: var(--moon-2);
  margin: -0.6em 0 2.2em;
  letter-spacing: 0.02em;
}

.hero .lede {
  color: var(--moon-2);
  max-width: 30em;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__cap {
  position: absolute;
  z-index: 2;
  right: var(--gut);
  bottom: 32px;
  font-size: 0.84rem;
  color: var(--moon-2);
  text-align: right;
}

.hero__cap b {
  display: block;
  font-weight: 500;
  color: var(--moon);
}

/* feeling picker */
.feel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.feel__list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.feel__opt {
  width: 100%;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 18px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--muted);
  transition: color 0.3s, padding 0.5s var(--ease-out);
}

.feel__opt::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid currentColor;
  translate: 0 -2px;
  transition: background-color 0.3s, box-shadow 0.4s, border-color 0.3s;
}

.feel__opt:hover {
  color: var(--ink);
}

.feel__opt[aria-selected="true"] {
  color: var(--ink);
  padding-left: 12px;
}

.feel__opt[aria-selected="true"]::before {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 5px rgba(243, 199, 122, 0.35);
}

.feel__opt small {
  grid-column: 2;
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin-top: 4px;
  color: var(--muted);
}

.feel__panel {
  min-height: 420px;
}

.feel__shelf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
  align-items: end;
  padding-top: 8px;
}

.feel__panel .book {
  animation: rise 0.8s var(--ease-out) both;
}

.feel__panel .book:nth-child(2) {
  animation-delay: 0.07s;
}

.feel__panel .book:nth-child(3) {
  animation-delay: 0.14s;
}

.feel__panel .book:nth-child(4) {
  animation-delay: 0.21s;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.feel__more {
  margin-top: 28px;
}

/* flagship: a cover alone in a field of light */
.flag {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

.flag__art {
  position: relative;
  aspect-ratio: 1 / 1.02;
  display: grid;
  place-items: end center;
}

.flag__art::before {
  content: "";
  position: absolute;
  inset: 8% 4% 0;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(60% 55% at 50% 60%, rgba(243, 199, 122, 0.45), rgba(243, 199, 122, 0) 70%);
}

.juz {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  overflow: visible;
}

.juz__dot {
  fill: rgba(31, 26, 21, 0.14);
  transition: fill 0.6s;
}

.juz.lit .juz__dot {
  fill: var(--gold);
}

.juz__label {
  font-family: var(--text);
  font-size: 13px;
  fill: var(--ink-2);
  letter-spacing: 0.08em;
}

.flag__cover {
  position: relative;
  width: 52%;
  margin-bottom: 4%;
  filter: drop-shadow(0 34px 34px rgba(70, 50, 25, 0.3));
}

.flag .display {
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  margin-bottom: 0.4em;
}

.quote {
  margin: 34px 0;
  padding: 0;
  font-weight: 300;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.45;
  text-wrap: pretty;
}

/* a quote standing alone under a chapter title sits on the same centre line */
.quote--center {
  margin: 0 auto;
  max-width: 34em;
  text-align: center;
}

.quote--center::before {
  margin-inline: auto;
}

.quote::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 22px;
}

.quote cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-size: 0.86rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.facts {
  margin: 0 0 30px;
  color: var(--muted);
  max-width: 34em;
  font-weight: 300;
}

.facts strong {
  color: var(--ink);
  font-weight: 500;
}

.buyrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

.buyrow .price {
  font-size: 1.35rem;
}

/* kad refleksi */
.kad {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

.kad__photo {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 40px 70px -40px rgba(70, 50, 25, 0.5);
}

.kad__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flow {
  list-style: none;
  margin: 32px 0 36px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 10px;
}

.flow__step {
  display: grid;
  gap: 10px;
  font-size: 0.95rem;
  line-height: 1.45;
  font-weight: 300;
}

.flow__step .icon {
  width: 30px;
  height: 30px;
  stroke-width: 1.2;
  color: var(--gold-ink);
}

.flow__arrow {
  width: 40px;
  height: 34px;
  color: var(--muted);
}

.juzpick {
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  gap: 6px;
  margin: 14px 0 20px;
}

.juzpick button {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

.juzpick button:hover {
  border-color: currentColor;
}

.juzpick button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--moon);
}

.juzpick button:disabled:not([aria-pressed="true"]) {
  color: rgba(31, 26, 21, 0.28);
  border-color: rgba(31, 26, 21, 0.08);
  background: rgba(31, 26, 21, 0.04);
  cursor: not-allowed;
}

.juzpick button[aria-pressed="true"]:disabled {
  cursor: default;
}

.kad__step {
  margin: 0 0 10px;
  font-size: 0.92rem;
  color: var(--muted);
}

/* step 1: the package, a three-way choice */
.kadtype {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 26px;
}

.kadtype button {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.3s;
}

.kadtype button b {
  font-weight: 500;
  font-size: 0.95rem;
}

.kadtype button .price {
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--muted);
}

.kadtype button:hover {
  border-color: currentColor;
}

.kadtype button[aria-checked="true"] {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}

.kad__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.kad__buy .price {
  font-size: 1.2rem;
}

.kad__combos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 18px;
  font-size: 0.95rem;
}

.kad__combos button {
  border: 0;
  background: none;
  padding: 0 0 2px;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.kad__combos button:hover {
  border-color: currentColor;
}

/* the writer: the one dark band */
/* the writer band: a framed portrait beside his words, inside the page column */
.author {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
  padding-top: clamp(88px, 12vh, 140px);
  padding-bottom: clamp(88px, 12vh, 140px);
}

.author__photo {
  margin: 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  box-shadow: 0 40px 80px -44px rgba(70, 50, 25, 0.55);
}

.author__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 30%;
}

.author__photo--wide {
  aspect-ratio: 3 / 2;
  max-width: 560px;
}

.author__photo--wide img {
  object-position: 50% 50%;
}

.author__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 560px;
}

.author__copy > .btn {
  align-self: flex-start;
}

.author .display {
  font-size: clamp(2.8rem, 5vw, 4.6rem);
  margin-bottom: 0.4em;
}

.said {
  font-weight: 300;
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  line-height: 1.5;
  margin: 0 0 32px;
  max-width: 28em;
}

.shelf {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(130px, 12vw, 164px);
  gap: clamp(18px, 2vw, 30px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 24px 0 18px;
  scrollbar-width: thin;
}

.shelf > * {
  scroll-snap-align: start;
}

/* shop */
.shop {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(300px, 4fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.grid-books {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(30px, 3vw, 48px) clamp(16px, 2.4vw, 32px);
}

.kombo {
  position: sticky;
  top: 100px;
  padding: 30px;
  border-radius: 6px;
  background: var(--white);
  box-shadow: 0 30px 60px -36px rgba(70, 50, 25, 0.35), 0 0 0 1px var(--line);
}

.kombo .h3 {
  margin-bottom: 6px;
}

.kombo__slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 20px 0 16px;
}

.slot {
  aspect-ratio: 0.66;
  border-radius: 3px;
  border: 1px dashed rgba(31, 26, 21, 0.25);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 0.8rem;
}

.slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: rise 0.5s var(--ease-out);
}

.slot button {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.kombo__meter {
  height: 3px;
  border-radius: 2px;
  background: var(--paper-2);
  overflow: hidden;
  margin-bottom: 10px;
}

.kombo__meter span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(var(--fill, 0));
  transform-origin: left;
  background: var(--gold);
  transition: transform 0.6s var(--ease-out);
}

.kombo__note {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0 0 18px;
  font-weight: 300;
}

.kombo__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}

.kombo .btn {
  width: 100%;
  justify-content: center;
}

.addk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.addk .icon {
  width: 13px;
  height: 13px;
}

.addk:hover {
  color: var(--ink);
}

/* story */
.story {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: clamp(12px, 2vw, 28px);
  align-items: start;
}

.story__step {
  display: grid;
  gap: 14px;
}

.story__step svg {
  width: 64px;
  height: 64px;
  color: var(--gold-ink);
}

.story__yr {
  font-weight: 300;
  font-size: 2.2rem;
  letter-spacing: -0.02em;
  line-height: 1;
}

.story__step p {
  margin: 0;
  color: var(--ink-2);
  font-weight: 300;
  max-width: 24em;
}

.story .flow__arrow {
  margin-top: 26px;
}

.pray {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px clamp(20px, 4vw, 56px);
  align-items: baseline;
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.pray b {
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.02em;
}

.pray p {
  margin: 0;
  color: var(--muted);
  max-width: 40em;
  font-weight: 300;
}

.pray a {
  color: var(--ink);
}

/* footer */
.ftr {
  padding: 84px 0 40px;
  background: var(--paper-2);
}

.ftr__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 40px;
}

.ftr h3 {
  font-size: 0.95rem;
  margin: 0 0 14px;
  font-weight: 500;
}

.ftr ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  color: var(--ink-2);
  font-weight: 300;
}

.ftr a {
  text-decoration: none;
}

.ftr a:hover {
  text-decoration: underline;
}

.ftr__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 60px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
  color: var(--ink-2);
}

.event {
  display: grid;
  gap: 4px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
  font-weight: 300;
}

.event b {
  font-weight: 500;
}

/* ---------- cart drawer ---------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s 0.55s;
}

.drawer.open {
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(23, 18, 13, 0.4);
  opacity: 0;
  transition: opacity 0.4s;
}

.drawer.open .drawer__scrim {
  opacity: 1;
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  background: var(--white);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.55s var(--ease-out);
}

.drawer.open .drawer__panel {
  transform: none;
}

.drawer__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.drawer__hd .h3 {
  margin: 0;
}

.drawer__items {
  flex: 1;
  overflow-y: auto;
  padding: 8px 22px;
}

.line-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.line-item img {
  width: 56px;
  height: 80px;
  object-fit: contain;
}

.line-item h5 {
  font-size: 0.96rem;
  font-weight: 400;
  margin: 0 0 4px;
  line-height: 1.25;
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.qty button {
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1rem;
}

.qty span {
  min-width: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}

.drawer__empty {
  padding: 48px 0;
  text-align: center;
  color: var(--ink-2);
}

.drawer__ft {
  padding: 20px 22px 24px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
}

.drawer__sum {
  display: flex;
  justify-content: space-between;
  font-size: 1.05rem;
}

.drawer__note {
  font-size: 0.85rem;
  color: var(--ink-2);
  margin: 0;
}

.drawer__ft .btn {
  justify-content: center;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 80;
  translate: -50% 0;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--moon);
  font-size: 0.92rem;
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s, transform 0.5s var(--ease-out);
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: none;
}

.pitch {
  font-size: 0.8rem;
}

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

.page-hd {
  padding: 168px 0 56px;
}

.page-hd .display {
  font-size: clamp(2.8rem, 5.6vw, 5rem);
  margin-bottom: 0.3em;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 44px;
}

.chip {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

.chip:hover {
  border-color: currentColor;
}

.chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--moon);
  border-color: transparent;
}

.search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
}

.search input {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.95rem;
  color: inherit;
  width: 200px;
  outline: none;
}

.search input::placeholder {
  color: var(--muted);
}

.search:focus-within {
  border-color: currentColor;
}

.sort {
  font: inherit;
  font-size: 0.9rem;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  color: inherit;
}

.count-line {
  font-size: 0.9rem;
  color: var(--muted);
  margin: -24px 0 28px;
}

.empty {
  grid-column: 1 / -1;
  padding: 60px 0;
  text-align: center;
  color: var(--muted);
}

.grid-books--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.featured {
  display: grid;
  grid-template-columns: minmax(160px, 260px) 1fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  padding: 56px 0;
}

.featured__cover img {
  filter: drop-shadow(0 30px 30px rgba(70, 50, 25, 0.28));
}

/* product page */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px);
  padding-top: 130px;
  padding-bottom: 40px;
  align-items: start;
}

.gallery {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
}

.gallery__thumbs {
  display: grid;
  gap: 10px;
  align-content: start;
}

.gallery__thumbs button {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0;
  background: transparent;
  cursor: pointer;
  aspect-ratio: 0.8;
  overflow: hidden;
  opacity: 0.6;
  transition: opacity 0.25s, border-color 0.25s;
}

.gallery__thumbs button[aria-pressed="true"] {
  opacity: 1;
  border-color: currentColor;
}

.gallery__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__main {
  position: relative;
  aspect-ratio: 0.86;
  display: grid;
  place-items: center;
  border-radius: 4px;
  overflow: hidden;
  background: radial-gradient(60% 50% at 50% 55%, rgba(243, 199, 122, 0.4), rgba(243, 199, 122, 0) 72%), var(--paper-2);
}

.gallery__main img {
  max-height: 100%;
  object-fit: contain;
}

.gallery__main img.photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__main img.cover {
  width: 62%;
  filter: drop-shadow(0 34px 34px rgba(70, 50, 25, 0.3));
}

.pdp__info {
  position: sticky;
  top: 100px;
}

.pdp__info .display {
  font-size: clamp(2.2rem, 3.6vw, 3.3rem);
  margin-bottom: 0.3em;
}

.pdp__by {
  margin: 0 0 22px;
  color: var(--muted);
  font-weight: 300;
}

.pdp__by a {
  color: inherit;
}

.award {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0 0 24px;
  font-size: 0.94rem;
  font-weight: 300;
}

.award svg {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--gold-ink);
}

.pdp__price {
  font-size: 1.9rem;
  margin: 0 0 6px;
}

.save {
  display: inline-block;
  font-size: 0.82rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(243, 199, 122, 0.35);
  margin-bottom: 20px;
}

.pdp__buy {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.pdp__buy .btn {
  flex: 1;
  justify-content: center;
}

.qty--lg button {
  width: 44px;
  height: 50px;
}

.ship {
  font-size: 0.9rem;
  color: var(--muted);
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 300;
}

.ship li {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ship .icon {
  width: 17px;
  height: 17px;
  flex: none;
}

.juzband {
  padding: clamp(90px, 13vh, 150px) 0;
}

.juzrow {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  gap: 4px;
  margin: 40px 0 16px;
  align-items: end;
}

.juzrow button {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: 0.7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.juzrow button span {
  display: block;
  width: 100%;
  max-width: 6px;
  border-radius: 3px;
  background: rgba(201, 154, 75, 0.35);
  transition: background-color 0.3s;
}

.juzrow button:hover span,
.juzrow button[aria-pressed="true"] span {
  background: var(--gold);
}

.juzrow button[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 600;
}

.inside {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
}

.pairline {
  width: 100%;
  display: grid;
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 300;
  line-height: 1.4;
}

.pairs li:first-child .pairline {
  border-top: 1px solid var(--line);
}

.pairline__d {
  color: var(--muted);
  transition: color 0.4s;
}

.pairline__q {
  display: block;
  max-height: 0;
  overflow: hidden;
  font-weight: 400;
  color: var(--gold-ink);
  opacity: 0;
  transition: max-height 0.7s var(--ease-out), opacity 0.6s, margin 0.7s var(--ease-out);
}

.pairline:hover .pairline__d,
.pairline[aria-expanded="true"] .pairline__d {
  color: var(--ink);
}

.pairline:hover .pairline__q,
.pairline[aria-expanded="true"] .pairline__q {
  max-height: 8em;
  opacity: 1;
  margin-top: 8px;
}

.kombo-deal {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(20px, 3vw, 32px);
  margin-top: 36px;
  border-radius: 6px;
  background: var(--white);
  box-shadow: 0 30px 60px -40px rgba(70, 50, 25, 0.35), 0 0 0 1px var(--line);
}

.kombo-deal img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
}

.pair {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin-top: 40px;
}

/* author page */
/* writer page opening: name and words beside a framed portrait, one column wide */
.a-hero {
  padding: clamp(120px, 16vh, 160px) 0 clamp(64px, 10vh, 110px);
}

.a-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.a-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.a-hero__photo {
  margin: 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-height: 74vh;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  justify-self: end;
  box-shadow: 0 40px 80px -44px rgba(70, 50, 25, 0.55);
}

.a-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 28%;
}

.a-hero__photo .rays span {
  --x: 0%;
}

.a-hero .display {
  font-size: clamp(3.2rem, 6vw, 5.4rem);
  margin-bottom: 0.3em;
}

.desk {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: 40px;
}

.desk figure {
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.desk img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.desk figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.92);
  color: var(--ink);
  font-size: 0.8rem;
}

.desk .d1 {
  grid-column: span 5;
  aspect-ratio: 4 / 5;
}

.desk .d2 {
  grid-column: span 4;
  aspect-ratio: 4 / 5;
  margin-top: 60px;
}

.desk .d3 {
  grid-column: span 3;
  aspect-ratio: 3 / 4;
}

.timeline {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}

.timeline li {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.timeline img {
  width: 68px;
  filter: drop-shadow(0 10px 12px rgba(70, 50, 25, 0.25));
}

.listen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin-top: 36px;
}

.listen a {
  display: grid;
  gap: 8px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
}

.listen a:hover .h3 {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- the journey: chapters, a path, and a traveller of light ---------- */

main {
  position: relative;
}

/* a chapter opens with one word, set large, and a line that says where we are */
.bab {
  position: relative;
  padding-top: clamp(96px, 14vh, 160px);
  text-align: center;
}

/* a chapter opens like a page in a book: one painting, the traveller further along,
   and the chapter word in the calm sky above him */
.cover {
  position: relative;
  min-height: min(88vh, 860px);
  display: grid;
  align-items: start;
  justify-items: center;
  overflow: hidden;
  text-align: center;
}

.cover__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

/* on a tall phone screen, keep the traveller in the frame */
@media (max-width: 860px) {
  .cover__img {
    object-position: var(--fx, 50%) 62%;
  }
}

/* the painting rises out of the paper and sinks back into it */
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 0%, transparent) 18%),
    linear-gradient(0deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 0%, transparent) 22%);
}

.cover__text {
  position: relative;
  z-index: 1;
  padding: clamp(110px, 17vh, 190px) var(--gut) 0;
  max-width: 44rem;
}

/* a soft haze of paper behind the words keeps dark ink readable on any sky */
.cover__text::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -12%;
  right: -12%;
  top: 30%;
  bottom: -40%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--paper) 86%, transparent), color-mix(in srgb, var(--paper) 55%, transparent) 55%, color-mix(in srgb, var(--paper) 0%, transparent));
}

.cover .bab__t {
  margin-bottom: 14px;
}

/* the chapter number, like the small line above a chapter in a printed book */
.bab__no {
  margin: 0 0 18px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--gold-ink, var(--muted));
}

.bab__no::after {
  content: "";
  display: block;
  width: 1px;
  height: 28px;
  margin: 14px auto 0;
  background: linear-gradient(180deg, var(--gold), rgba(201, 154, 75, 0));
}

.cover .bab__line {
  color: var(--ink-2);
}

.bab__t {
  font-weight: 300;
  font-size: clamp(3.6rem, 9vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}

.bab__line {
  font-weight: 300;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 30em;
  margin: 0 auto;
  text-wrap: balance;
}

/* a chapter closes with a line that hands over to the next one */
.bridge {
  padding: clamp(72px, 12vh, 140px) 0 0;
  text-align: center;
}

.bridge p {
  margin: 0 auto;
  max-width: 24em;
  font-weight: 300;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.bridge p::before {
  content: "";
  display: block;
  width: 1px;
  height: 56px;
  margin: 0 auto 26px;
  background: linear-gradient(180deg, rgba(201, 154, 75, 0), var(--gold));
}

/* a chapter's first section sits close to its title; a bridge follows its last section */
.bab + .pad,
.bab + section {
  padding-top: clamp(40px, 6vh, 72px);
}

.pad + .bridge {
  padding-top: 0;
}

.cover + .pad,
.cover + section {
  padding-top: clamp(24px, 4vh, 48px);
}

.bab + section .author,
.cover + section .author {
  padding-top: 0;
}

.juzband + .bridge {
  padding-top: 0;
}

.w-dark .author__photo {
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}

.hs + .bridge,
.author + .bridge {
  padding-top: clamp(40px, 6vh, 72px);
}

/* the tumbuh chapter opens on the painting itself */
.bab--on-dawn {
  color: var(--moon);
}

.bab--on-dawn .bab__t {
  text-shadow: 0 2px 24px rgba(23, 18, 40, 0.35);
}

.bab--on-dawn .bab__line {
  color: rgba(251, 246, 238, 0.88);
  max-width: 32em;
}

/* the end of the road */
.ending {
  position: relative;
  padding-top: clamp(40px, 6vh, 72px);
  padding-bottom: clamp(96px, 14vh, 150px);
}

.ending__line {
  margin: 0 0 8px;
  font-weight: 300;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.35;
  max-width: 24em;
}

.ending .pray {
  margin-top: 40px;
}

/* ---------- the world inside the book (painted hero) ---------- */

.hero--world {
  align-items: start;
  background: #dfe9ee;
  color: var(--ink);
  --muted: var(--ink-2);
  --btn-bg: var(--ink);
  --btn-ink: var(--moon);
}

.hero--world .hero__media img {
  object-position: 50% 70%;
  transform-origin: 54% 62%;
  animation: none;
}

/* a soft haze of paper behind the words, so they read on the sky */
.hero--world .hero__media::after {
  background:
    radial-gradient(60% 75% at 18% 30%, color-mix(in srgb, var(--paper) 88%, transparent), color-mix(in srgb, var(--paper) 55%, transparent) 45%, color-mix(in srgb, var(--paper) 0%, transparent) 75%),
    linear-gradient(0deg, color-mix(in srgb, var(--paper) 100%, transparent) 0%, color-mix(in srgb, var(--paper) 0%, transparent) 14%);
}

.hero--world .hero__copy {
  padding-top: clamp(130px, 20vh, 210px);
  padding-bottom: 0;
}

.hero--world .hero__cite,
.hero--world .lede {
  color: var(--ink-2);
}

.hero--world .motes {
  mix-blend-mode: screen;
}

/* the rasa section opens onto a painted world for each feeling */
.feel__panel {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 clamp(18px, 2.4vw, 32px) 28px;
  box-shadow: 0 40px 80px -50px rgba(70, 50, 25, 0.5);
}

.feel__world {
  position: absolute;
  inset: 0;
  margin: 0;
}

.feel__world img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transition: opacity 1.1s var(--ease-out), transform 6s var(--ease-out);
}

.feel__world img:not(.is-on) {
  opacity: 0;
  transform: scale(1.06);
}

.feel__world::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, color-mix(in srgb, var(--paper) 97%, transparent) 0%, color-mix(in srgb, var(--paper) 90%, transparent) 34%, color-mix(in srgb, var(--paper) 0%, transparent) 62%);
}

.feel__panel .feel__shelf,
.feel__panel .feel__more {
  position: relative;
}

/* the closing band: a tree growing from the fold of a book */
.dawn {
  position: relative;
  min-height: min(78vh, 760px);
  display: grid;
  align-items: start;
  overflow: hidden;
  color: var(--moon);
}

.dawn__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 70%;
}

.dawn::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 18%;
  background: linear-gradient(0deg, var(--paper), color-mix(in srgb, var(--paper) 0%, transparent));
}

.dawn .wrap {
  position: relative;
  z-index: 1;
  padding-top: clamp(80px, 12vh, 140px);
}

.dawn .h2 {
  color: var(--moon);
  text-shadow: 0 2px 24px rgba(23, 18, 40, 0.35);
}

.dawn .lede {
  color: rgba(251, 246, 238, 0.86);
  max-width: 32em;
}

/* inner pages: a painted world opens the page and fades into paper */
.page-hd--world {
  position: relative;
  overflow: hidden;
  min-height: 62vh;
  display: grid;
  align-items: end;
}

.page-hd--world .page-hd__img {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(62%, 900px);
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(0deg, transparent 0%, #000 30%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(0deg, transparent 0%, #000 30%);
  mask-composite: intersect;
}

/* wide screens: the painting ends where the 1280px column ends, and fades out on that side too */
@media (min-width: 1281px) {
  .page-hd--world .page-hd__img {
    right: calc(50% - 640px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 86%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 30%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 86%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 30%);
  }
}

.page-hd--world .wrap {
  position: relative;
}

.band-world {
  position: relative;
  height: clamp(260px, 42vh, 460px);
  overflow: hidden;
}

.band-world img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

.band-world::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 0%, transparent) 22%, color-mix(in srgb, var(--paper) 0%, transparent) 70%, var(--paper) 100%);
}

/* ---------- karya: books pass through the light (pinned horizontal) ---------- */

.hs {
  position: relative;
  overflow: hidden;
}

.hs__pin {
  position: relative;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  align-items: center;
  gap: 0;
  padding-left: max(var(--gut), calc((100vw - var(--wrap)) / 2));
}

.hs__info {
  position: relative;
  z-index: 2;
  padding-right: 40px;
}

.hs__now {
  min-height: 15em;
}

.hs__now h3 {
  font-weight: 300;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.12;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.hs__now p {
  color: var(--muted);
  font-weight: 300;
  margin: 0 0 22px;
  max-width: 30em;
}

.hs__count {
  margin-top: 26px;
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.hs__count b {
  color: var(--ink);
  font-weight: 500;
}

.hs__viewport {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* books fade out before they reach the words on the left */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
}

/* the light the books pass through */
.hs__viewport::before {
  content: "";
  position: absolute;
  left: 28%;
  top: 8%;
  width: 46%;
  height: 84%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(243, 199, 122, 0.55), rgba(243, 199, 122, 0));
  pointer-events: none;
}

.hs__track {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(48px, 6vw, 110px);
  /* the first and last books start and end in the light (51% across) */
  padding: 0 calc(49% - clamp(170px, 25vh, 260px) / 2) 0 calc(51% - clamp(170px, 25vh, 260px) / 2);
  will-change: transform;
}

.hs__item {
  flex: none;
  width: clamp(170px, 25vh, 260px);
  text-decoration: none;
  color: inherit;
  opacity: 0.55;
  transition: opacity 0.6s var(--ease-out);
}

.hs__item .b3d {
  --turn: 34deg;
}

.hs__item.is-lit {
  opacity: 1;
}

.hs__item.is-lit .b3d__book {
  transform: rotateY(0deg) translateY(-10px) scale(1.08);
}

/* ---------- rak: the shelf view ---------- */

.viewtoggle {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  background: var(--white);
}

.viewtoggle button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-size: 0.88rem;
  white-space: nowrap;
}

.viewtoggle button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--moon);
}

.rak {
  --row: 340px;
  padding: 0 4px;
  overflow-x: clip;
}

/* one shelf: books stand on a hairline ledge */
.rak__row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  background: linear-gradient(0deg, rgba(70, 50, 25, 0.06) 0 9px, rgba(31, 26, 21, 0.12) 9px 10px, transparent 10px);
}

.rak[hidden],
.grid-books[hidden] {
  display: none;
}

/* each book stands spine-out on the shelf; on hover it swings out to 45 degrees
   and shows its front cover */
.spot {
  position: relative;
  height: var(--row);
  display: flex;
  align-items: flex-end;
  padding-bottom: 10px;
  perspective: 1400px;
  perspective-origin: 50% 30%;
  margin-right: 0;
  transition: margin-right 0.85s var(--ease-out);
}

/* the opened book takes the room its cover needs; the books to its right slide over */
.spot:hover,
.spot:focus-within,
.spot:has([aria-pressed="true"]) {
  margin-right: calc(var(--h) * 0.5 - var(--t) * 0.25px);
}

.spot:hover,
.spot:focus-within,
.spot:has([aria-pressed="true"]) {
  z-index: 3;
}

.shelfbook {
  position: relative;
  width: calc(var(--t) * 1px);
  height: var(--h);
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
}

.shelfbook:focus-visible {
  outline: 1.5px solid var(--gold-ink);
  outline-offset: 4px;
}

.sb {
  position: absolute;
  top: 0;
  left: calc(var(--t) * 0.5px);
  width: calc(var(--h) * 0.66);
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: 0 50%;
  transform: rotateY(90deg);
  transition: transform 0.85s var(--ease-out);
}

.shelfbook:hover .sb,
.shelfbook:focus-visible .sb,
.shelfbook[aria-pressed="true"] .sb {
  transform: translate3d(0, -14px, 40px) rotateY(45deg);
}

.sb > * {
  position: absolute;
  top: 0;
  height: 100%;
  backface-visibility: hidden;
}

.sb__front {
  left: 0;
  width: 100%;
  object-fit: cover;
  border-radius: 1px 3px 3px 1px;
  transform: translateZ(calc(var(--t) * 0.5px));
}

.sb__back {
  left: 0;
  width: 100%;
  background: var(--spine);
  filter: brightness(0.8);
  transform: translateZ(calc(var(--t) * -0.5px)) rotateY(180deg);
}

.sb__pages {
  left: calc(100% - var(--t) * 0.5px);
  width: calc(var(--t) * 1px);
  top: 1%;
  height: 98%;
  background: repeating-linear-gradient(90deg, rgba(120, 100, 70, 0.12) 0 1px, transparent 1px 3px), linear-gradient(90deg, #ece5d8, #fffdf9 45%, #e8e0d2);
  transform: rotateY(90deg);
}

.spine {
  left: calc(var(--t) * -0.5px);
  width: calc(var(--t) * 1px);
  border-radius: 2px 2px 1px 1px;
  padding: 16px 0 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--spine-ink);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.16)), var(--spine);
  transform: rotateY(-90deg);
  overflow: hidden;
}

.spine::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 9px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}

.spine em {
  writing-mode: vertical-rl;
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 78%;
}

.spine small {
  writing-mode: vertical-rl;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  max-height: 30%;
}

.featured .b3d {
  max-width: 260px;
}

.featured {
  padding: 24px 0 64px;
}

.featured[hidden] {
  display: none;
}

.viewbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -20px 0 36px;
}

.count-line__desc {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.viewbar .count-line {
  margin: 0;
}

.featured__book {
  perspective: 1600px;
}

/* a book's own page: the same book-off-the-shelf panel, opening the page */
.featured--page {
  padding-top: clamp(120px, 16vh, 170px);
  grid-template-columns: minmax(180px, 340px) minmax(0, 1fr);
}

.featured--page .b3d {
  max-width: 340px;
}

.featured--page .featured__text {
  max-width: 36rem;
}

.featured--page .pdp__price {
  margin-top: 8px;
}

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

@media (max-width: 1180px) {
  .grid-books {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-books--5 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .feel,
  .flag,
  .kad,
  .inside,
  .shop,
  .pdp {
    grid-template-columns: 1fr;
  }
  .author,
  .a-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .author__photo,
  .a-hero__photo {
    max-width: 420px;
    max-height: none;
    justify-self: start;
  }
  .a-hero__photo {
    order: -1;
  }
  .kombo,
  .pdp__info {
    position: relative;
    top: 0;
  }
  .flag__art {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
  }
  .kad__photo {
    max-width: 520px;
  }
  .ftr__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .nav {
    display: none;
  }
  .menu-btn {
    display: inline-grid;
  }
  .hdr__tools {
    margin-left: auto;
  }
  .nav.open {
    display: grid;
    position: fixed;
    inset: 76px 0 auto;
    padding: 18px var(--gut) 28px;
    background: var(--paper);
    color: var(--ink);
    gap: 4px;
    font-size: 1.4rem;
    font-weight: 300;
    box-shadow: 0 30px 40px -30px rgba(0, 0, 0, 0.3);
  }
  .nav.open a {
    padding: 10px 0;
  }
  .grid-books,
  .grid-books--5,
  .feel__shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .flow,
  .story {
    grid-template-columns: 1fr;
  }
  .flow__arrow {
    rotate: 90deg;
  }
  .story .flow__arrow {
    margin-top: 0;
  }
  .juzpick {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .juzrow {
    grid-template-columns: repeat(15, minmax(0, 1fr));
    row-gap: 18px;
  }
  .search {
    margin-left: 0;
    width: 100%;
  }
  .search input {
    width: 100%;
  }
  .gallery {
    grid-template-columns: 1fr;
  }
  .gallery__thumbs {
    grid-template-columns: repeat(4, 64px);
    order: 2;
  }
  .pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kombo-deal {
    grid-template-columns: 1fr;
  }
  .desk .d1,
  .desk .d2 {
    grid-column: span 6;
    margin-top: 0;
  }
  .desk .d3 {
    grid-column: span 12;
    aspect-ratio: 16 / 10;
  }
  .listen {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 1rem;
  }
  .pad {
    padding: 84px 0;
  }
  /* phones: the photo first, the words beneath it in the dark */
  .hero {
    display: block;
    min-height: 0;
  }
  .hero__media {
    position: relative;
    height: 66svh;
  }
  .hero__media img {
    object-position: 50% 18%;
  }
  .hero__media::after {
    background: linear-gradient(0deg, var(--dark) 0%, rgba(23, 18, 13, 0.4) 30%, rgba(23, 18, 13, 0) 55%);
  }
  .rays,
  .motes {
    height: 66svh;
  }
  .hero__copy {
    padding-top: 0;
    margin-top: -12svh;
    padding-bottom: 64px;
  }
  .hero__cap {
    display: none;
  }
  .logo {
    letter-spacing: 0.22em;
    font-size: 0.98rem;
  }
  .ftr__grid {
    grid-template-columns: 1fr;
  }
  .timeline li {
    grid-template-columns: 64px 1fr;
  }
  .timeline li > div:last-child {
    grid-column: 2;
  }
  .pray {
    grid-template-columns: 1fr;
  }
  .kombo {
    padding: 22px;
  }
}

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

/* karya + rak on tablets and phones: no pin, a swipeable row; smaller spines */
@media (max-width: 860px) {
  .hs__pin {
    height: auto;
    display: block;
    padding: 84px 0 56px;
  }
  .hs__info {
    padding: 0 var(--gut);
  }
  .hs__now {
    min-height: 0;
  }
  .hs__viewport {
    height: auto;
    display: block;
  }
  .hs__viewport::before {
    left: 15%;
    width: 70%;
    top: 0;
    height: 100%;
  }
  .hs__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 36px 27vw 48px;
    gap: 34px;
    scrollbar-width: none;
  }
  .hs__item {
    width: 46vw;
    scroll-snap-align: center;
  }
  .rak {
    --row: 250px;
  }
  .spine em {
    font-size: 0.72rem;
  }
  .featured {
    grid-template-columns: 1fr;
  }
  .featured .b3d {
    max-width: 190px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .b3d__book,
  .hs__item.is-lit .b3d__book {
    transform: none;
  }
}

.nw {
  white-space: nowrap;
}

/* on phones the painting sits above the title instead of behind it, so the words stay clear */
@media (max-width: 860px) {
  .page-hd--world {
    display: block;
    min-height: 0;
    /* the painting starts below the 76px header, so its top edge never cuts across the menu */
    padding-top: 76px;
  }
  .page-hd--world .page-hd__img {
    position: relative;
    inset: auto;
    width: 100%;
    height: 44vh;
    margin-bottom: -48px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 60%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 60%, transparent 100%);
  }
}

/* ============================================================
   Kedai buku: the shop hero. A question and a search box on the
   misty left; on the right, the books stand on a hilltop in the
   dawn light; a row of ways in overlaps the bottom edge.
   ============================================================ */
.shop-hero {
  position: relative;
  min-height: clamp(640px, calc(100svh - 96px), 820px);
  padding: 140px 0 150px;
  display: grid;
  align-items: center;
  overflow: hidden;
}

/* the painted world is sized like object-fit: cover, so the books can be pinned to the hill in % */
.shop-hero__scene {
  position: absolute;
  inset: 0;
  container-type: size;
  overflow: hidden;
  pointer-events: none;
}

.shop-hero__world {
  --ww: max(100cqw, 100cqh * 16 / 9);
  --wh: max(100cqh, 100cqw * 9 / 16);
  --ax: 0.72;
  position: absolute;
  width: var(--ww);
  height: var(--wh);
  left: calc((100cqw - var(--ww)) * var(--ax));
  top: calc((100cqh - var(--wh)) * 0.5);
  container-type: inline-size;
  transform-origin: 79% 56%;
}

.shop-hero__world > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the misty left is lifted to paper so the words always read */
.shop-hero__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--paper) 92%, transparent) 0%, color-mix(in srgb, var(--paper) 70%, transparent) 30%, transparent 58%),
    linear-gradient(0deg, var(--paper) 0%, transparent 22%);
}

/* the word in the clouds, like the letters on the building */
.shop-hero__kita {
  position: absolute;
  left: 58%;
  top: 9%;
  margin: 0;
  font-weight: 300;
  font-size: 19cqw;
  line-height: 1;
  letter-spacing: 0.06em;
  color: #fff;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  user-select: none;
}

.shop-hero__glow {
  position: absolute;
  left: 79%;
  top: 46%;
  width: 34cqw;
  height: 20cqw;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 236, 190, 0.85), rgba(255, 226, 160, 0.25) 55%, rgba(255, 226, 160, 0));
}

/* a slider of books on the hilltop. The stage is the point where the front book stands
   (bottom centre); kedai.js sets --bw (front book width, as tall as the words) and --off
   (how far the side books sit). Each book has a slot: 0 in front, ±1 at the sides,
   ±2 out in the light. CSS moves and fades it between slots. */
.shop-hero__ring {
  --bw: 300px;
  --off: 190px;
  position: absolute;
  left: 79%;
  top: 58%;
  width: 0;
  height: 0;
}

.shop-hero__book {
  --slot: 0;
  position: absolute;
  left: calc(var(--bw) * -0.5);
  bottom: 0;
  width: var(--bw);
  transform-origin: 50% 100%;
  transform: translateX(calc(var(--slot) * var(--off))) scale(var(--sc, 1));
  opacity: var(--op, 1);
  filter: blur(var(--bl, 0px)) saturate(var(--sa, 1));
  transition: transform 1.3s var(--ease-out), opacity 1.3s var(--ease-out), filter 1.3s var(--ease-out);
  will-change: transform, opacity;
  pointer-events: auto;
  border-radius: 2px;
}

.shop-hero__book[data-slot="0"] {
  --slot: 0;
  z-index: 3;
}

.shop-hero__book[data-slot="1"],
.shop-hero__book[data-slot="-1"] {
  --sc: 0.74;
  --op: 0.42;
  --sa: 0.75;
  z-index: 2;
  cursor: pointer;
}

.shop-hero__book[data-slot="1"] { --slot: 1; }
.shop-hero__book[data-slot="-1"] { --slot: -1; }

.shop-hero__book[data-slot="2"],
.shop-hero__book[data-slot="-2"] {
  --sc: 0.56;
  --op: 0;
  --bl: 4px;
  z-index: 1;
  pointer-events: none;
}

.shop-hero__book[data-slot="2"] { --slot: 1.7; }
.shop-hero__book[data-slot="-2"] { --slot: -1.7; }

/* the front book faces you; the side books turn a little towards it */
.shop-hero__book .b3d {
  --turn: calc(var(--slot) * -14deg);
}

.shop-hero__book .b3d__book {
  transition: transform 1.3s var(--ease-out);
}

/* a pool of light on the hilltop under the front book */
.shop-hero__orbit {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--bw) * 2.4);
  height: calc(var(--bw) * 0.34);
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 240, 200, 0.85), rgba(255, 236, 190, 0.35) 55%, rgba(255, 236, 190, 0));
}

.shop-hero__book[data-slot="0"]:hover .b3d__book,
.shop-hero__book[data-slot="0"]:focus-visible .b3d__book {
  transform: rotateY(0deg) translateY(-10px);
}

.shop-hero__book:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 8px;
}

.shop-hero .motes {
  mix-blend-mode: screen;
}

.shop-hero__copy {
  position: relative;
  max-width: 600px;
}

.shop-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px 6px 6px;
  margin-bottom: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--white) 70%, transparent);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color 0.3s, background-color 0.3s;
}

.shop-pill b {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--dark);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.shop-pill .icon {
  width: 16px;
  height: 16px;
  transition: translate 0.4s var(--ease-out);
}

.shop-pill:hover {
  border-color: var(--gold);
  background: var(--white);
}

.shop-pill:hover .icon {
  translate: 4px 0;
}

.shop-hero .display {
  font-size: clamp(3rem, 6.4vw, 5.8rem);
  margin-bottom: 0.32em;
}

.shop-hero .lede {
  margin-bottom: 1.6em;
  color: var(--ink-2);
}

.shop-search {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 560px;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px -28px rgba(70, 50, 25, 0.45);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.shop-search:focus-within {
  border-color: var(--gold);
  box-shadow: 0 24px 50px -24px rgba(70, 50, 25, 0.5), 0 0 0 4px rgba(201, 154, 75, 0.18);
}

.shop-search .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--ink-2);
}

.shop-search input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
}

.shop-search input::placeholder {
  color: color-mix(in srgb, var(--ink-2) 75%, transparent);
}

.shop-search .btn {
  min-height: 48px;
  padding: 0 26px;
}

.shop-popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 0.84rem;
  color: var(--ink-2);
}

.shop-popular a {
  padding: 5px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--white) 55%, transparent);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.3s, background-color 0.3s;
}

.shop-popular a:hover {
  border-color: var(--gold);
  background: var(--white);
}

/* the ways in: one card, eight doors, half over the painting */
.ways {
  position: relative;
  z-index: 2;
  margin-top: -96px;
}

.ways__row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 40px 80px -46px rgba(70, 50, 25, 0.55);
  overflow: hidden;
}

.ways__row li + li {
  border-left: 1px solid var(--line);
}

.way {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 26px 12px 22px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.4s;
}

.way__ic {
  position: relative;
  width: 52px;
  height: 52px;
  color: var(--gold-ink);
  transition: translate 0.5s var(--ease-out);
}

.way__ic svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the small gold seal on each icon */
.way__ic::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--white);
}

.way b {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
}

.way small {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.way:hover {
  background: color-mix(in srgb, var(--paper) 70%, var(--white));
}

.way:hover .way__ic {
  translate: 0 -4px;
}

.way:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: -6px;
  border-radius: 16px;
}

@media (max-width: 1180px) {
  .ways__row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ways__row li + li {
    border-left: 0;
  }
  .ways__row li:not(:nth-child(4n + 1)) {
    border-left: 1px solid var(--line);
  }
  .ways__row li:nth-child(n + 5) {
    border-top: 1px solid var(--line);
  }
}

/* tablet and phone: words first, then the hill with its books */
@media (max-width: 860px) {
  .shop-hero {
    display: block;
    min-height: 0;
    padding: 112px 0 0;
  }
  .shop-hero__scene {
    position: relative;
    inset: auto;
    height: clamp(300px, 62vw, 460px);
    margin-top: -24px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
  }
  .shop-hero__world {
    --ax: 0.9;
  }
  .shop-hero__scene::after {
    background: linear-gradient(0deg, var(--paper) 0%, transparent 26%);
  }
  .ways {
    margin-top: 40px;
  }
}

@media (max-width: 560px) {
  .shop-hero .display {
    font-size: clamp(2.6rem, 11vw, 3.4rem);
  }
  .shop-search {
    padding-left: 16px;
  }
  .shop-search .btn {
    padding: 0 18px;
  }
  .way {
    padding: 18px 6px 16px;
    gap: 8px;
  }
  .way__ic {
    width: 40px;
    height: 40px;
  }
  .way__ic::after {
    width: 10px;
    height: 10px;
  }
  .way b {
    font-size: 0.8rem;
  }
  .way small {
    display: none;
  }
}

/* ============================================================
   Kedai buku: the sections under the hero. Best-sellers with the
   kombo beside them, four painted worlds by feeling, Kad Refleksi,
   and the next event as the one dark band.
   ============================================================ */
.sec-hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 48px;
  margin-bottom: clamp(36px, 4vw, 56px);
}

.sec-hd .lede {
  margin-bottom: 0;
}

.sec-hd .link-arrow {
  flex: none;
  margin-bottom: 6px;
}

/* sections that follow one another share one gap, not two */
.shop-sec + .shop-sec {
  padding-top: 0;
}

/* three steps in the kombo panel, kept on one row */
.flow--mini {
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 4px;
  margin: 0 0 6px;
}

.flow--mini .flow__step {
  font-size: 0.78rem;
  gap: 6px;
  color: var(--ink-2);
}

.flow--mini .flow__step .icon {
  width: 22px;
  height: 22px;
}

.flow--mini .flow__arrow {
  width: 22px;
  height: 20px;
  margin-top: 2px;
  rotate: none;
}

/* pilih ikut rasa: each feeling is a card. The painted world sits on top with
   three of its books standing in it; the words sit below on a clean white panel,
   the count and arrow always on the same bottom line. */
.realms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.realms > li {
  display: flex;
}

.realm {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 40px 80px -56px rgba(70, 50, 25, 0.6), 0 0 0 1px var(--line);
  transition: translate 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}

.realm__scene {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  isolation: isolate;
}

.realm__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: scale 1.4s var(--ease-out);
}

/* the painting melts into the white panel below */
.realm__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, var(--white) 0%, color-mix(in srgb, var(--white) 0%, transparent) 34%);
}

.realm__books {
  position: absolute;
  left: 50%;
  bottom: 9%;
  width: 70%;
  translate: -50% 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: translate 0.9s var(--ease-out);
}

.realm__books .b3d {
  width: 33%;
  flex: none;
  margin: 0 -2%;
}

.realm__books .b3d:first-child { --turn: 28deg; }
.realm__books .b3d:nth-child(2) { --turn: 0deg; width: 38%; z-index: 1; }
.realm__books .b3d:last-child { --turn: -28deg; }

.realm__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 6px clamp(20px, 1.8vw, 26px) clamp(20px, 1.8vw, 24px);
}

.realm__body b {
  font-size: clamp(1.4rem, 1.9vw, 1.7rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* two lines are kept for the feeling, so every card's bottom line matches */
.realm__feel {
  min-height: 3em;
  margin: 10px 0 22px;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: balance;
}

.realm__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.realm__foot em {
  font-style: normal;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--gold-ink);
}

.realm__go {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}

.realm__go .icon {
  width: 16px;
  height: 16px;
}

.realm:hover {
  translate: 0 -6px;
  box-shadow: 0 50px 90px -56px rgba(70, 50, 25, 0.7), 0 0 0 1px var(--line);
}

.realm:hover .realm__img,
.realm:focus-visible .realm__img {
  scale: 1.06;
}

.realm:hover .realm__books,
.realm:focus-visible .realm__books {
  translate: -50% -8px;
}

.realm:hover .realm__go,
.realm:focus-visible .realm__go {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--moon);
}

.realm:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 4px;
}

/* the event: his photo on the right, the words in the dark on the left */
.acara {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.acara__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
  z-index: -2;
}

.acara::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--dark) 0%, color-mix(in srgb, var(--dark) 88%, transparent) 34%, color-mix(in srgb, var(--dark) 10%, transparent) 70%, transparent 100%);
}

.acara__in {
  padding-top: clamp(110px, 16vh, 170px);
  padding-bottom: clamp(110px, 16vh, 170px);
}

.acara__in > * {
  max-width: 540px;
}

.acara__kick {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  font-size: 0.9rem;
  color: var(--moon-2);
}

.acara__kick b {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--dark);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.acara .display {
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  margin-bottom: 28px;
}

.acara__facts {
  display: grid;
  gap: 12px;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
  font-size: 1.05rem;
  font-weight: 300;
}

.acara__facts li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.acara__facts .icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--glow);
}

@media (max-width: 1024px) {
  .realms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .realm__scene {
    aspect-ratio: 16 / 10;
  }
  .realm__books {
    width: 52%;
  }
}

@media (max-width: 860px) {
  .sec-hd {
    flex-direction: column;
    align-items: flex-start;
  }
  .flow--mini {
    grid-template-columns: 1fr auto 1fr auto 1fr;
  }
  /* phones and tablets: the photo on top, the words below in the dark */
  .acara__img {
    position: relative;
    height: clamp(260px, 60vw, 440px);
    object-position: 72% 30%;
  }
  .acara::before {
    background: linear-gradient(0deg, var(--dark) 0%, color-mix(in srgb, var(--dark) 0%, transparent) 40%);
    height: clamp(260px, 60vw, 440px);
    bottom: auto;
  }
  .acara__in {
    padding-top: 8px;
    padding-bottom: 88px;
  }
}

@media (max-width: 560px) {
  /* the four worlds become a row to swipe through */
  .realms {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 78%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin: 0 calc(var(--gut) * -1);
    padding: 0 var(--gut) 12px;
    scroll-padding: 0 var(--gut);
    scrollbar-width: none;
  }
  .realms > li {
    scroll-snap-align: start;
  }
  .realm__scene {
    aspect-ratio: 1 / 1;
  }
  .realm__books {
    width: 70%;
  }
}

/* tablets: the best-sellers stay four across instead of two huge covers */
@media (min-width: 561px) and (max-width: 1180px) {
  #laris {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ============================================================
   Acara: the event page. The dark band grows into a full opening
   with صلاة written large behind him, as on the store's poster;
   then two tickets, one strip of when and where, and his books.
   ============================================================ */
.acara--page .acara__in {
  padding-top: clamp(170px, 24vh, 230px);
  padding-bottom: clamp(110px, 16vh, 160px);
}

.acara--page .display {
  font-size: clamp(2.8rem, 5.6vw, 5rem);
  margin-bottom: 16px;
}

/* the word from the poster, written large in faint gold in the dark behind the words */
.acara__salah {
  position: absolute;
  left: max(2vw, calc(50% - 700px));
  bottom: -0.12em;
  z-index: -1;
  margin: 0;
  font-family: "Amiri", serif;
  font-size: clamp(9rem, 22vw, 20rem);
  line-height: 1;
  color: var(--glow);
  opacity: 0.1;
  pointer-events: none;
}

.acara__tag {
  margin: 0 0 30px;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 300;
  color: var(--glow);
}

.acara__state {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--moon-2);
}

.acara__state i,
.ticket__open i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c4554a;
}

/* tickets: a stub and a body, torn along a dotted line */
.tickets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
}

.ticket {
  --notch: 14px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(130px, 2fr) minmax(0, 5fr);
  background: var(--white);
  border-radius: 22px;
  box-shadow: 0 40px 80px -50px rgba(70, 50, 25, 0.6), 0 0 0 1px var(--line);
  overflow: hidden;
  /* the two half-circles where the stub tears off */
  -webkit-mask: radial-gradient(circle var(--notch) at var(--tear) 0, transparent 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at var(--tear) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle var(--notch) at var(--tear) 0, transparent 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at var(--tear) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  --tear: calc(2 / 7 * 100%);
}

.ticket__stub {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(22px, 2.4vw, 32px);
  background: linear-gradient(160deg, #f6e6c4, #f0d9a6);
  border-right: 2px dashed rgba(138, 100, 36, 0.35);
}

.ticket__kind {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.ticket__stub h3 {
  margin: 0;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.ticket__open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 0.85rem;
  color: var(--ink-2);
}

.ticket:not(.ticket--full) .ticket__open i {
  background: #4f8a5b;
}

.ticket__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(22px, 2.4vw, 32px);
}

.ticket__price {
  margin: 0;
  font-size: clamp(1.8rem, 2.6vw, 2.3rem);
}

.ticket__feat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 300;
}

.ticket__feat li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ticket__feat .icon {
  width: 18px;
  height: 18px;
  color: var(--gold-ink);
}

.ticket__go {
  align-self: flex-start;
  margin-top: auto;
}

.ticket--full .ticket__stub {
  background: var(--paper-2);
}

.ticket--full .ticket__body > *:not(.ticket__go) {
  opacity: 0.55;
}

.ticket--full .ticket__go {
  background: var(--paper-2);
  color: var(--ink-2);
  cursor: not-allowed;
}

.ticket__stamp {
  position: absolute;
  right: 22px;
  top: 22px;
  padding: 4px 14px;
  border: 2px solid #c4554a;
  border-radius: 6px;
  color: #c4554a;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  rotate: 8deg;
}

/* when and where: one white strip, divided like the ways in */
.when {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 40px 80px -50px rgba(70, 50, 25, 0.5);
  overflow: hidden;
}

.when > li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(24px, 3vw, 40px);
}

.when > li + li {
  border-left: 1px solid var(--line);
}

.when .icon {
  width: 30px;
  height: 30px;
  stroke-width: 1.2;
  color: var(--gold-ink);
}

.when b {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 400;
}

.when small {
  color: var(--ink-2);
  font-size: 0.92rem;
}

.when__date {
  background: linear-gradient(160deg, #f6e6c4, #f0d9a6);
}

.when__date span {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.when__date b {
  font-size: clamp(3.4rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 0.9;
}

@media (max-width: 1024px) {
  .tickets {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
  }
}

@media (max-width: 860px) {
  .acara--page .acara__in {
    padding-top: 8px;
  }
  .acara__salah {
    left: auto;
    right: 4vw;
    bottom: -0.2em;
    font-size: clamp(7rem, 34vw, 13rem);
  }
  .when {
    grid-template-columns: minmax(0, 1fr);
  }
  .when > li + li {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 560px) {
  .ticket {
    grid-template-columns: minmax(0, 1fr);
    --tear: 0;
    -webkit-mask: none;
    mask: none;
  }
  .ticket__stub {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    border-right: 0;
    border-bottom: 2px dashed rgba(138, 100, 36, 0.35);
  }
  .ticket__kind {
    width: 100%;
  }
  .ticket__open {
    margin: 0 0 0 auto;
  }
  .ticket__stamp {
    top: auto;
    bottom: 22px;
  }
}

.acara__facts s {
  margin-left: 4px;
  color: var(--moon-2);
}

.acara .buyrow .link-arrow {
  color: var(--moon);
}

/* wide screens: the photo stays inside the 1280px column, fading into the dark at both ends */
@media (min-width: 1281px) {
  .acara__img {
    inset: 0 calc(50% - 640px) 0 auto;
    width: min(1040px, 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 84%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 84%, transparent 100%);
  }
}

/* narrower desktops: slide the photo so his face clears the words */
@media (min-width: 861px) and (max-width: 1180px) {
  .acara__img {
    object-position: 30% 30%;
  }
}

/* tk.js marks a paragraph or quote that fits on one line in its column; let it */
main .is-oneline {
  max-width: none !important;
}

/* the words beside a section's link take the whole row, so a short intro can stay on one line */
.sec-hd > div {
  flex: 1 1 auto;
  min-width: 0;
}

/* the kedai's other product, sitting above the shelf like a counter display */
.shop-kad {
  display: grid;
  grid-template-columns: clamp(110px, 16vw, 200px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  margin: 8px 0 clamp(36px, 4vw, 56px);
  padding: clamp(14px, 1.6vw, 20px);
  border-radius: 22px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 40px 80px -56px rgba(70, 50, 25, 0.6), 0 0 0 1px var(--line);
  transition: translate 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}

.shop-kad[hidden] {
  display: none;
}

.shop-kad img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

.shop-kad__txt {
  display: grid;
  gap: 8px;
}

.shop-kad__txt b {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.shop-kad__txt > span:not(.shop-kad__row) {
  color: var(--ink-2);
  font-weight: 300;
}

.shop-kad__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-top: 6px;
}

.shop-kad:hover {
  translate: 0 -4px;
  box-shadow: 0 50px 90px -56px rgba(70, 50, 25, 0.7), 0 0 0 1px var(--line);
}

.shop-kad:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 4px;
}

@media (max-width: 560px) {
  .shop-kad {
    grid-template-columns: minmax(0, 1fr);
  }
  .shop-kad img {
    aspect-ratio: 16 / 9;
  }
}

.viewbar[hidden] {
  display: none;
}

/* ============================================================
   Sinopsis on every book page: the publisher's own words from the
   store, a quiet heading on the left and the text on the right.
   ============================================================ */
.syn__in {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: start;
}

.syn__hd {
  position: sticky;
  top: 120px;
}

.syn__kick {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.syn__hd .h2 {
  margin: 0;
}

.syn__text {
  max-width: 40em;
  padding-left: clamp(20px, 2.4vw, 32px);
  border-left: 1px solid var(--line);
}

.syn__text p {
  margin: 0 0 1.1em;
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-2);
}

/* the opening line reads a little larger, like the first line on a back cover */
.syn__text p:first-child {
  font-size: clamp(1.15rem, 1.5vw, 1.32rem);
  line-height: 1.6;
  color: var(--ink);
}

.syn__text .syn__lines {
  color: var(--ink);
  font-style: italic;
}

.syn__text--poem p:first-child {
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  line-height: 1.9;
  font-style: italic;
}

.syn__text .syn__by {
  margin-top: 1.4em;
  font-size: 0.9rem;
  color: var(--gold-ink);
  font-style: normal;
}

@media (max-width: 860px) {
  .syn__in {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .syn__hd {
    position: static;
  }
}

/* ============================================================
   Kombo siap in the kedai: the store's ready-made sets. A row to
   swipe under Semua, a full grid under the Kombo filter. Each card
   fans its books out on a soft light, then the price and one button.
   ============================================================ */
.kstrip {
  margin: 0 0 clamp(44px, 5vw, 64px);
}

.kstrip[hidden] {
  display: none;
}

.kstrip__hd {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 20px;
}

.kstrip__t {
  margin: 0;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.kstrip__n {
  color: var(--ink-2);
  font-size: 0.92rem;
}

.kstrip__all {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.kstrip__row {
  display: grid;
  grid-auto-flow: column;
  /* three across (two on tablets); a minmax here would collapse to its minimum in a scroller */
  grid-auto-columns: calc((100% - 2 * 20px) / 3);
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 16px;
  scrollbar-width: thin;
}

.kstrip__row > * {
  scroll-snap-align: start;
}

.kstrip--all .kstrip__row {
  grid-auto-flow: row;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  overflow: visible;
}

.kstrip--all .kstrip__all {
  display: none;
}

/* the kombo card borrows the feeling card (.realm); only what differs is here.
   A wide, low painting with the price tag in its corner, then one short panel. */
.kcard .realm__scene {
  aspect-ratio: 16 / 9;
}

.kcard__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  max-width: calc(100% - 28px);
  padding: 7px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--white) 90%, transparent);
  box-shadow: 0 8px 20px -12px rgba(70, 50, 25, 0.55);
}

.kcard__tag .price {
  font-size: 1rem;
}

.kcard__tag em {
  font-style: normal;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--gold-ink);
}

.kcard__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px clamp(18px, 1.6vw, 22px) clamp(16px, 1.6vw, 20px);
}

.kcard__body > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.kcard__n {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.kcard__body b {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  font-weight: 400;
  line-height: 1.3;
  text-wrap: balance;
}

.kcard__d {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--ink-2);
}

.kcard__add {
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}

.kcard__add .icon {
  width: 18px;
  height: 18px;
}

.kcard__add:hover,
.kcard__add:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--moon);
}

/* the set's books stand together in the painting, the middle one in front */
.kfan {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 84%;
  height: 70%;
  translate: -50% 0;
  transition: translate 0.9s var(--ease-out);
}

.kfan__b {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(31% - var(--n) * 1.8%);
  translate: calc(-50% + var(--o) * 60%) 0;
}

.kfan__b .b3d {
  --turn: calc(var(--o) * 22deg);
}

.kcard:hover .kfan {
  translate: -50% -6px;
}

@media (max-width: 1024px) {
  .kstrip__row {
    grid-auto-columns: calc((100% - 20px) / 2);
  }
  .kstrip--all .kstrip__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .kstrip__row {
    grid-auto-columns: 82%;
  }
  .kstrip--all .kstrip__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* the row of sets has arrows on its outer edges, so it reads as more than the three in view */
.kstrip__wrap {
  position: relative;
}

.kstrip__nav {
  position: absolute;
  top: calc((100% - 20px) * 0.34);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 14px 30px -14px rgba(70, 50, 25, 0.55);
  cursor: pointer;
  translate: 0 -50%;
  transition: opacity 0.35s, scale 0.35s var(--ease-out), background-color 0.3s, color 0.3s;
}

.kstrip__nav--prev {
  left: -24px;
}

.kstrip__nav--next {
  right: -24px;
}

.kstrip__nav--prev .icon {
  rotate: 180deg;
}

.kstrip__nav:hover,
.kstrip__nav:focus-visible {
  background: var(--ink);
  color: var(--moon);
}

.kstrip__nav:disabled {
  opacity: 0;
  scale: 0.8;
  pointer-events: none;
}

.kstrip--all .kstrip__nav {
  display: none;
}

.kcard {
  cursor: pointer;
}

@media (max-width: 1360px) {
  .kstrip__nav--prev {
    left: -12px;
  }
  .kstrip__nav--next {
    right: -12px;
  }
}

@media (max-width: 560px) {
  .kstrip__nav {
    width: 40px;
    height: 40px;
  }
  .kstrip__nav--prev {
    left: -6px;
  }
  .kstrip__nav--next {
    right: -6px;
  }
}

/* ============================================================
   A set, opened: its books slide past on the set's painting, one
   in front at a time, and beside them the list of every book the
   reader will receive, then the one cart button.
   ============================================================ */
html.kmod-lock {
  overflow: hidden;
}

.kmod {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: grid;
  place-items: center;
  padding: 24px;
}

.kmod[hidden] {
  display: none;
}

.kmod__scrim {
  position: absolute;
  inset: 0;
  background: rgba(31, 26, 21, 0.42);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.38s;
}

.kmod.open .kmod__scrim {
  opacity: 1;
}

.kmod__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  width: min(1080px, 100%);
  height: min(660px, calc(100dvh - 48px));
  border-radius: 28px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 60px 120px -50px rgba(31, 26, 21, 0.7);
  opacity: 0;
  translate: 0 28px;
  scale: 0.98;
  transition: opacity 0.38s, translate 0.6s var(--ease-out), scale 0.6s var(--ease-out);
}

.kmod.open .kmod__panel {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

.kmod__x {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line);
}

.kmod__x:hover {
  background: var(--ink);
  color: var(--moon);
}

.kmod__stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  touch-action: pan-y;
  user-select: none;
}

.kmod__world {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* a pool of light under the book in front */
.kmod__stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10%;
  z-index: -1;
  width: 70%;
  aspect-ratio: 2.4;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 244, 220, 0.85), rgba(255, 244, 220, 0));
}

.kmod__track {
  position: absolute;
  inset: 12% 0 18%;
}

.kmod__slide {
  --x: 0%;
  --s: 1;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(38%, 42vh * 0.66);
  translate: calc(-50% + var(--x)) 0;
  scale: var(--s);
  transform-origin: 50% 100%;
  transition: translate 0.9s var(--ease-out), scale 0.9s var(--ease-out), opacity 0.7s, filter 0.7s;
}

.kmod__slide[data-slot="0"] {
  z-index: 3;
}

.kmod__slide[data-slot="1"],
.kmod__slide[data-slot="-1"] {
  --s: 0.64;
  z-index: 2;
  opacity: 0.6;
  filter: saturate(0.7) blur(1px);
}

.kmod__slide[data-slot="1"] {
  --x: 100%;
}

.kmod__slide[data-slot="-1"] {
  --x: -100%;
}

.kmod__slide[data-slot="2"],
.kmod__slide[data-slot="-2"] {
  --s: 0.5;
  opacity: 0;
}

.kmod__slide[data-slot="2"] {
  --x: 160%;
}

.kmod__slide[data-slot="-2"] {
  --x: -160%;
}

.kmod__nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--white) 88%, transparent);
  color: var(--ink);
  box-shadow: 0 12px 26px -14px rgba(31, 26, 21, 0.6);
  cursor: pointer;
  translate: 0 -50%;
  transition: background-color 0.3s, color 0.3s;
}

.kmod__nav[hidden] {
  display: none;
}

.kmod__nav--prev {
  left: 16px;
}

.kmod__nav--next {
  right: 16px;
}

.kmod__nav--prev .icon {
  rotate: 180deg;
}

.kmod__nav:hover,
.kmod__nav:focus-visible {
  background: var(--ink);
  color: var(--moon);
}

.kmod__dots {
  position: absolute;
  left: 50%;
  bottom: 22px;
  display: flex;
  gap: 8px;
  translate: -50% 0;
}

.kmod__dots i {
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--white) 70%, transparent);
  box-shadow: 0 0 0 1px rgba(31, 26, 21, 0.08);
  transition: width 0.5s var(--ease-out), background-color 0.4s;
}

.kmod__dots i.on {
  width: 34px;
  background: var(--gold);
}

.kmod__info {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3vw, 40px) clamp(22px, 2.4vw, 30px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.kmod__t {
  margin: 10px 48px 10px 0;
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.kmod__d {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-2);
}

.kmod__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 16px;
}

.kmod__price .price {
  font-size: 1.45rem;
}

.kmod__price em {
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-ink);
}

.kmod__h {
  margin: 26px 0 12px;
  font-size: 1rem;
  font-weight: 500;
}

.kmod__list {
  display: grid;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.kmod__list button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s;
}

.kmod__list img {
  width: 38px;
  aspect-ratio: 0.66;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 4px 10px -4px rgba(31, 26, 21, 0.45);
}

.kmod__list b {
  display: block;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.3;
}

.kmod__list small {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--ink-2);
}

.kmod__list .icon {
  width: 18px;
  height: 18px;
  color: var(--gold-ink);
}

.kmod__list li.on button,
.kmod__list button:hover {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 9%, transparent);
}

/* the cart button stays in reach however long the list is */
.kmod__foot {
  position: sticky;
  bottom: calc(-1 * clamp(22px, 2.4vw, 30px));
  margin: auto calc(-1 * clamp(24px, 3vw, 40px)) calc(-1 * clamp(22px, 2.4vw, 30px));
  padding: 14px clamp(24px, 3vw, 40px) clamp(22px, 2.4vw, 30px);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--white) 0%, transparent), var(--white) 14px);
}

.kmod__add {
  justify-content: center;
  width: 100%;
}

@media (max-width: 760px) {
  .kmod {
    place-items: end center;
    padding: 0;
  }
  /* a sheet from the bottom: the books stay on top with the close button, only the list scrolls */
  .kmod__panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: auto;
    max-height: calc(100dvh - 16px);
    border-radius: 24px 24px 0 0;
    translate: 0 60px;
  }
  .kmod__stage {
    height: min(38vh, 300px);
  }
  .kmod__slide {
    width: min(34%, 25vh * 0.66);
  }
  .kmod__info {
    padding: 22px 20px 0;
  }
  .kmod__t {
    margin-right: 0;
  }
  .kmod__foot {
    bottom: 0;
    margin: 0 -20px;
    padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .kmod__panel,
  .kmod__slide {
    transition: none;
  }
}

/* ============================================================
   Cerita kami: a seed that grows into the word "tumbuh", three
   steps on one growing line, the store's numbers, a slow belt of
   real books, the founder, and the ways to reach us.
   ============================================================ */
.ck-kick {
  margin: 0 0 12px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.ck-vision__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ck-sprout {
  width: clamp(72px, 7vw, 104px);
  margin-bottom: 18px;
  fill: none;
  stroke: var(--gold-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.ck-sprout__sun {
  fill: var(--glow);
  stroke: none;
  filter: drop-shadow(0 0 10px rgba(243, 199, 122, 0.9));
}

.ck-vision__word {
  margin: 0 0 0.12em;
  font-size: clamp(4.4rem, 12vw, 10rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-shadow: 0 0 60px rgba(243, 199, 122, 0.55);
}

.ck-vision__line {
  max-width: 34em;
  margin: 0;
  font-size: clamp(1.12rem, 1.6vw, 1.4rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: balance;
}

/* three steps on one line that grows from the first to the last */
.ck-steps {
  --grow: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  margin: clamp(36px, 4vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}

.ck-steps::before {
  content: "";
  position: absolute;
  top: 64px;
  left: 6%;
  right: 6%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--glow));
  transform: scaleX(var(--grow));
  transform-origin: left;
}

.ck-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 40px 80px -56px rgba(70, 50, 25, 0.6), 0 0 0 1px var(--line);
}

.ck-step svg {
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
  fill: none;
  stroke: var(--gold-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ck-step .ck-dot {
  fill: var(--glow);
  stroke: none;
}

.ck-step__yr {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.ck-step b {
  font-size: clamp(1.3rem, 1.8vw, 1.55rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.ck-step p {
  margin: 0;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-2);
}

/* the store's numbers on a quiet band */
.ck-stats {
  padding: clamp(48px, 6vw, 80px) 0;
  background: color-mix(in srgb, var(--paper-2) 70%, transparent);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.ck-stats__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-stats__row li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  text-align: center;
}

.ck-stats__row li + li {
  border-left: 1px solid var(--line);
}

.ck-stats__row b {
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ck-stats__row span {
  max-width: 18em;
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--ink-2);
  text-wrap: balance;
}

/* a slow belt of every book, pausing under the hand */
.ck-belt {
  overflow: hidden;
  padding: 10px 0 30px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ck-belt__track {
  display: flex;
  gap: clamp(20px, 2.4vw, 34px);
  width: max-content;
  animation: ck-belt 120s linear infinite;
}

.ck-belt:hover .ck-belt__track,
.ck-belt:focus-within .ck-belt__track {
  animation-play-state: paused;
}

.ck-belt__b {
  display: block;
  width: clamp(96px, 9vw, 130px);
  transition: translate 0.6s var(--ease-out);
}

.ck-belt__b:hover,
.ck-belt__b:focus-visible {
  translate: 0 -8px;
}

@keyframes ck-belt {
  to {
    transform: translateX(calc(-50% - clamp(10px, 1.2vw, 17px)));
  }
}

/* the founder: a framed portrait beside his own words */
.ck-founder {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  padding-top: clamp(40px, 6vh, 80px);
}

.ck-founder__photo {
  margin: 0;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 40px 80px -44px rgba(70, 50, 25, 0.55);
}

.ck-founder__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 30%;
}

.ck-founder__copy .h2 {
  margin-bottom: 0.4em;
}

/* ways to reach us: one row of the same white cards */
.ck-meet__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}

.ck-meet__row a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: clamp(20px, 2vw, 26px);
  border-radius: 22px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 40px 80px -56px rgba(70, 50, 25, 0.6), 0 0 0 1px var(--line);
  transition: translate 0.6s var(--ease-out);
}

.ck-meet__row a:hover,
.ck-meet__row a:focus-visible {
  translate: 0 -5px;
}

.ck-meet__row .icon {
  width: 28px;
  height: 28px;
  margin-bottom: 6px;
  stroke-width: 1.3;
  color: var(--gold-ink);
}

.ck-meet__row b {
  font-size: 1.1rem;
  font-weight: 400;
}

.ck-meet__row span {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--ink-2);
}

@media (max-width: 1024px) {
  .ck-meet__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ck-founder {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  /* the steps stack, and the line runs down beside them */
  .ck-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .ck-steps::before {
    top: 4%;
    bottom: 4%;
    left: 22px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--gold), var(--glow));
    transform: scaleY(var(--grow));
    transform-origin: top;
  }
  .ck-step {
    margin-left: 44px;
  }
  .ck-stats__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .ck-stats__row li + li {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 28px;
  }
}

@media (max-width: 560px) {
  .ck-meet__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ck-belt {
    overflow-x: auto;
  }
  .ck-belt__track {
    animation: none;
  }
}

/* cerita kami hero: a soft dawn painting that melts into the paper on every side,
   kept inside the content column on wide screens, words centred in its pale sky */
.ck-hero {
  position: relative;
  display: grid;
  align-content: start;
  min-height: clamp(560px, 86vh, 780px);
  padding-top: clamp(130px, 17vh, 170px);
  text-align: center;
  overflow: hidden;
}

/* the painting starts below the words, so the tree grows up underneath them. It is sized
   by height (never cropped at the top or bottom) and fades out at its own sides. */
.ck-hero__art {
  position: absolute;
  top: clamp(225px, 33vh, 315px);
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.ck-hero__art img {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: none;
  translate: -50% 0;
  /* fades on all four sides, so no edge of the box ever shows against the page */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 24%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 24%, #000 70%, transparent 100%);
  mask-composite: intersect;
}

.ck-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ck-hero .display {
  margin-bottom: 0.25em;
  font-size: clamp(3.2rem, 7.4vw, 6.2rem);
}

.ck-hero .lede {
  max-width: 30em;
  margin: 0 auto;
  color: var(--ink);
  opacity: 0.78;
  text-wrap: balance;
}

/* the award: the store's photo of the night beside the words */
.ck-award__in {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.ck-award__photo {
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  aspect-ratio: 3 / 2;
  box-shadow: 0 40px 80px -48px rgba(70, 50, 25, 0.55);
}

.ck-award__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ck-award .lede {
  margin-bottom: 1.4em;
}

/* this page reads as one story: its sections sit closer together than elsewhere */
body[data-page="tentang"] main .pad {
  padding-top: clamp(64px, 9vh, 104px);
  padding-bottom: clamp(64px, 9vh, 104px);
}

body[data-page="tentang"] main .shop-sec + .shop-sec,
body[data-page="tentang"] main .pad.shop-sec:not(:first-child) {
  padding-top: clamp(16px, 2vh, 28px);
}

body[data-page="tentang"] .ck-founder {
  padding-top: 0;
  padding-bottom: clamp(56px, 8vh, 96px);
}

@media (max-width: 860px) {
  .ck-award__in {
    grid-template-columns: minmax(0, 1fr);
  }
  .ck-hero {
    min-height: clamp(600px, 160vw, 760px);
  }
  .ck-hero__art {
    top: clamp(290px, 82vw, 340px);
  }
}

/* ============================================================
   Hubungi: the cerita kami hero with a calmer painting, four
   contact cards rising over its bottom edge, then the form beside
   the address and the social accounts.
   ============================================================ */
.hb-hero {
  min-height: clamp(580px, 84vh, 740px);
}

.hb-hero .display {
  font-size: clamp(2.8rem, 6.2vw, 5.2rem);
}

.hb-ways {
  position: relative;
  margin-top: clamp(-72px, -5vw, -40px);
}

.hb-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: clamp(20px, 2vw, 26px);
  border-radius: 22px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 40px 80px -50px rgba(70, 50, 25, 0.6), 0 0 0 1px var(--line);
  transition: translate 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}

.hb-card:hover,
.hb-card:focus-visible {
  translate: 0 -6px;
  box-shadow: 0 50px 90px -50px rgba(70, 50, 25, 0.7), 0 0 0 1px var(--line);
}

.hb-card__ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: linear-gradient(160deg, #f6e6c4, #f0d9a6);
  color: var(--gold-ink);
}

.hb-card__ic .icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.4;
}

.hb-card__k {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.hb-card b {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.4;
}

.hb-card__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.86rem;
  color: var(--ink-2);
}

.hb-card__go .icon {
  width: 15px;
  height: 15px;
  transition: translate 0.4s var(--ease-out);
}

.hb-card:hover .hb-card__go .icon {
  translate: 4px 0;
}

/* the form and its side panel */
.hb-write__in {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.hb-form {
  padding: clamp(24px, 3vw, 40px);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 40px 80px -56px rgba(70, 50, 25, 0.6), 0 0 0 1px var(--line);
}

.hb-form .h2 {
  margin-bottom: 0.6em;
}

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

.hb-field {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

.hb-field > span {
  font-size: 0.85rem;
  color: var(--ink-2);
}

.hb-field input,
.hb-field select,
.hb-field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 300;
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}

.hb-field textarea {
  resize: vertical;
  min-height: 140px;
}

.hb-field input:focus,
.hb-field select:focus,
.hb-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(201, 154, 75, 0.18);
}

.hb-form__send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 8px;
}

.hb-side {
  display: grid;
  gap: clamp(18px, 2vw, 24px);
}

.hb-place,
.hb-social {
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 40px 80px -56px rgba(70, 50, 25, 0.6), 0 0 0 1px var(--line);
}

/* a drawn map, not a real one: two roads, a bend of river and a pin in a pool of light */
.hb-place__map {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 16px;
  border-radius: 14px;
  background: linear-gradient(160deg, #f6eedf, #efe4cf);
  fill: none;
  stroke: rgba(138, 100, 36, 0.28);
  stroke-width: 6;
  stroke-linecap: round;
}

.hb-place__glow {
  fill: rgba(243, 199, 122, 0.45);
  stroke: none;
}

.hb-place__pin {
  fill: var(--gold);
  stroke: var(--white);
  stroke-width: 2;
}

.hb-place__dot {
  fill: var(--white);
  stroke: none;
}

.hb-place b,
.hb-social b {
  display: block;
  margin-bottom: 6px;
  font-size: 1.1rem;
  font-weight: 400;
}

.hb-place p {
  margin: 0 0 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-2);
}

.hb-place__go {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.hb-social ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.hb-social a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.3s, border-color 0.3s;
}

.hb-social a:hover,
.hb-social a:focus-visible {
  background: var(--paper);
  border-color: var(--gold);
}

.hb-social .icon {
  grid-row: span 2;
  width: 24px;
  height: 24px;
  stroke-width: 1.4;
  color: var(--gold-ink);
}

.hb-social span {
  font-size: 0.95rem;
}

.hb-social small {
  font-size: 0.78rem;
  color: var(--ink-2);
}

@media (max-width: 1024px) {
  .hb-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hb-write__in {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .hb-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .hb-form__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .hb-social ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* cerita kami reads down the middle: the step and contact headings sit centred over
   their cards, and each card centres its icon and words */
.ck-path .ck-kick,
.ck-path .h2,
.ck-meet .ck-kick,
.ck-meet .h2 {
  text-align: center;
}

.ck-step {
  align-items: center;
  text-align: center;
}

.ck-step p {
  max-width: 26em;
  text-wrap: balance;
}

.ck-meet__row a {
  align-items: center;
  text-align: center;
}

body[data-page="tentang"] .ending__line {
  text-align: center;
}

/* ============================================================
   Phone menu (offcanvas): a paper panel from the right that opens
   as a circle growing out of the menu button. Logo and close on
   top, the pages in large type arriving one by one, a few quieter
   links, and a painted path fading up from the bottom.
   ============================================================ */
.oc {
  position: fixed;
  inset: 0;
  z-index: 90;
}

.oc[hidden] {
  display: none;
}

.oc__scrim {
  position: absolute;
  inset: 0;
  background: rgba(23, 18, 13, 0.32);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}

.oc.is-open .oc__scrim {
  opacity: 1;
}

.oc__panel {
  --ox: calc(100% - 40px);
  --oy: 38px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  padding: 0 var(--gut);
  overflow: hidden auto;
  background: var(--paper);
  box-shadow: -30px 0 80px -40px rgba(23, 18, 13, 0.5);
  clip-path: circle(0px at var(--ox) var(--oy));
  transition: clip-path 0.7s cubic-bezier(0.7, 0, 0.2, 1);
}

.oc.is-open .oc__panel {
  clip-path: circle(150vmax at var(--ox) var(--oy));
}

.oc__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  height: 76px;
}

.oc__nav {
  display: grid;
  gap: 2px;
  margin-top: clamp(12px, 3vh, 32px);
}

.oc__nav a {
  position: relative;
  width: fit-content;
  padding: 6px 0;
  font-size: clamp(2rem, 9vw, 2.6rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-decoration: none;
  color: var(--ink);
}

/* the page you are on carries a small gold dot */
.oc__nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: -18px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

.oc__more {
  display: grid;
  gap: 10px;
  margin: 28px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.oc__more a {
  font-size: 0.98rem;
  font-weight: 300;
  color: var(--ink-2);
  text-decoration: none;
}

/* each line arrives on its own once the paper has opened */
.oc__nav a,
.oc__more li {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.6s var(--ease-out), translate 0.8s var(--ease-out);
}

.oc.is-open .oc__nav a,
.oc.is-open .oc__more li {
  opacity: 1;
  translate: 0 0;
  transition-delay: calc(0.22s + var(--i, 0) * 0.06s);
}

/* the painted path at the foot of the panel, rising out of the paper */
.oc__art {
  flex: 1 0 200px;
  position: relative;
  margin: 24px calc(var(--gut) * -1) 0;
  min-height: 220px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 38%);
}

.oc__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 92%;
  opacity: 0;
  scale: 1.08;
  transition: opacity 1s var(--ease-out) 0.3s, scale 1.6s var(--ease-out) 0.3s;
}

.oc.is-open .oc__art img {
  opacity: 1;
  scale: 1;
}

.oc-lock,
.oc-lock body {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .oc__panel,
  .oc__nav a,
  .oc__more li,
  .oc__art img {
    transition: none;
  }
}

/* ============================================================
   Step flows (Kad Refleksi): each step centred under a large icon
   in a warm circle; the arrows sit on the icons' centre line. When
   the flow comes into view the circles open one by one, each icon
   draws itself, and the arrow after it draws towards the next step.
   ============================================================ */
.flow:not(.flow--mini) {
  align-items: start;
  gap: 8px;
}

.flow:not(.flow--mini) .flow__step {
  justify-items: center;
  text-align: center;
  gap: 14px;
  text-wrap: balance;
}

.flow:not(.flow--mini) .flow__step .icon {
  box-sizing: border-box;
  width: 72px;
  height: 72px;
  padding: 19px;
  border-radius: 50%;
  background: linear-gradient(160deg, #f6e6c4, #f0d9a6);
  box-shadow: 0 18px 36px -22px rgba(138, 100, 36, 0.7);
  stroke-width: 1.4;
}

.flow:not(.flow--mini) > li[aria-hidden] {
  display: grid;
  place-items: center;
  height: 72px;
}

/* animated only once tk.js/motion.js marks the flow as watched (.flow-anim) */
.flow-anim .flow__step .icon {
  scale: 0.5;
  opacity: 0;
  transition: scale 0.9s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s var(--ease-out);
  transition-delay: calc(var(--k, 0) * 0.5s);
}

.flow-anim .flow__step .icon * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease-out);
  transition-delay: calc(var(--k, 0) * 0.5s + 0.3s);
}

.flow-anim .flow__step > :not(svg),
.flow-anim .flow__step {
  transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out);
}

.flow-anim .flow__step {
  opacity: 0;
  transform: translateY(14px);
  transition-delay: calc(var(--k, 0) * 0.5s + 0.15s);
}

.flow-anim .flow__arrow path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 0.8s var(--ease-out);
  transition-delay: calc(var(--k, 0) * 0.5s + 0.35s);
}

.flow-anim.is-in .flow__step {
  opacity: 1;
  transform: none;
}

.flow-anim.is-in .flow__step .icon {
  scale: 1;
  opacity: 1;
}

.flow-anim.is-in .flow__step .icon *,
.flow-anim.is-in .flow__arrow path {
  stroke-dashoffset: 0;
}

@media (max-width: 860px) {
  /* phones: one centred column, the arrows pointing down between the circles */
  .flow:not(.flow--mini) {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 6px;
  }
  .flow:not(.flow--mini) > li[aria-hidden] {
    height: 44px;
  }
  .flow:not(.flow--mini) .flow__step {
    max-width: 22em;
  }
}

/* ============================================================
   Scroll reveal: motion.js gives sections' content the .rv class and
   adds .is-in as it scrolls into view. It uses transform (not the
   translate property), so cards keep their CSS hover lifts.
   ============================================================ */
.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: var(--rv-d, 0s);
}

.rv.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .rv,
  .flow-anim .flow__step,
  .flow-anim .flow__step .icon {
    opacity: 1;
    transform: none;
    scale: 1;
    transition: none;
  }
  .flow-anim .flow__step .icon *,
  .flow-anim .flow__arrow path {
    stroke-dashoffset: 0;
    transition: none;
  }
}