/* ================================================================
   Theravada Tipitaka Press
   Palette sampled from the imprint mark (gold Dhamma-wheel, twin
   lions, ruby dots). Set as a fine-press catalogue: a lacquered
   title page, then parchment leaves.
   ================================================================ */

:root {
  --ink:          #150d09;
  --ink-2:        #1d1310;
  --ink-3:        #241813;
  --ink-line:     #3b2820;
  --ink-line-2:   #55392c;

  --gold:         #f4d875;
  --gold-bright:  #fce56c;
  --gold-dim:     #c9ab63;
  --saffron:      #f99d29;
  --saffron-lit:  #febb2a;
  --saffron-deep: #b8590f;

  --ruby:         #ab0a0f;
  --ruby-lit:     #d2232a;
  --umber:        #8e2b1c;

  --paper:        #f7f1e4;
  --paper-2:      #f1e8d7;
  --paper-3:      #e9dcc6;
  --paper-line:   #ddd0b7;
  --paper-rule:   #c9b898;
  --text:         #241c15;
  --text-dim:     #63523f;
  --text-faint:   #8d7a63;

  --measure: 33rem;
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --ease: cubic-bezier(.2, .7, .2, 1);

  --display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --body: "EB Garamond", "Iowan Old Style", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: clamp(1.04rem, .46vw + .94rem, 1.19rem);
  line-height: 1.66;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 500; line-height: 1.06;
  margin: 0; letter-spacing: .005em;
}

/* letterspaced caps — the press's voice for all labels */
.caps {
  font-size: .715rem; letter-spacing: .3em; text-transform: uppercase;
  font-family: var(--body); font-weight: 500;
}
.label { composes: caps; }
.label {
  font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 .5rem;
}
.ink .label { color: var(--saffron); opacity: .82; }

/* ---------------------------------------------------- ornamental rules */
.rule { display: flex; align-items: center; gap: 1rem; margin: 2.6rem 0; }
.rule::before, .rule::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--paper-rule) 20%, var(--paper-rule) 80%, transparent);
}
.rule i { width: 5px; height: 5px; border-radius: 50%; background: var(--ruby); font-style: normal;
  box-shadow: 0 0 0 3.5px rgba(171,10,15,.10); }
.ink .rule::before, .ink .rule::after {
  background: linear-gradient(90deg, transparent, var(--ink-line-2) 20%, var(--ink-line-2) 80%, transparent); }
.ink .rule i { background: var(--saffron); box-shadow: 0 0 10px rgba(249,157,41,.55); }

/* short centred rule with a ruby, for title-page use */
.diamond { display: flex; align-items: center; justify-content: center; gap: .85rem; margin: 1.9rem 0; }
.diamond::before, .diamond::after { content: ""; width: clamp(48px, 9vw, 104px); height: 1px; background: var(--ink-line-2); }
.diamond i { width: 5px; height: 5px; background: var(--ruby-lit); transform: rotate(45deg);
  box-shadow: 0 0 9px rgba(210,35,42,.6); }

.wrap { width: min(74rem, 100% - 2 * var(--gut)); margin-inline: auto; }
.narrow { width: min(44rem, 100% - 2 * var(--gut)); margin-inline: auto; }

.ink { background: var(--ink); color: #ede2cf; position: relative; isolation: isolate; }
.ink::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(62% 48% at 50% 2%, rgba(249,157,41,.15), transparent 64%),
    radial-gradient(40% 36% at 88% 92%, rgba(171,10,15,.11), transparent 72%);
}
.ink::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .045; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- header */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(21,13,9,.9); backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--ink-line);
}
.masthead .bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .62rem 0; }
.brandmark { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.brandmark img { width: 30px; filter: drop-shadow(0 0 7px rgba(249,157,41,.34)); }
.brandmark span {
  font-family: var(--body); font-size: .74rem; color: var(--gold);
  letter-spacing: .26em; text-transform: uppercase;
}
.nav { display: flex; gap: 1.5rem; }
.nav a {
  color: #d9c9b2; text-decoration: none; font-size: .715rem; letter-spacing: .19em;
  text-transform: uppercase; padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.nav a:hover { color: var(--gold); border-color: var(--saffron); }
@media (max-width: 52rem) { .nav { display: none; } }

/* ------------------------------------------------- hero as a title page */
.hero { padding: clamp(3.4rem, 8vw, 6.6rem) 0 0; text-align: center; }
.hero .seal {
  width: clamp(74px, 10vw, 104px); margin: 0 auto clamp(1.6rem, 3vw, 2.4rem);
  filter: drop-shadow(0 0 24px rgba(249,157,41,.4));
  animation: rise .9s var(--ease) both;
}
.hero h1 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.75rem, 5.4vw, 3.5rem);
  letter-spacing: clamp(.1em, .5vw, .17em); text-transform: uppercase;
  color: var(--gold); line-height: 1.16; margin: 0;
  animation: rise .9s .07s var(--ease) both;
}
.hero h1 span { display: block; }
.hero .diamond { animation: rise .9s .13s var(--ease) both; }
.hero .promise {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.3rem, 3vw, 2rem); color: var(--saffron-lit);
  margin: 0; letter-spacing: .01em; animation: rise .9s .18s var(--ease) both;
}
.hero .creed {
  max-width: 38rem; margin: clamp(1.6rem, 3vw, 2.2rem) auto 0;
  color: #cdbda6; font-size: 1.03rem; line-height: 1.7;
  animation: rise .9s .24s var(--ease) both;
}
/* the colophon line, in place of a dashboard of statistics */
.hero .colophon {
  margin: clamp(1.8rem, 3.4vw, 2.6rem) auto 0; max-width: 44rem;
  font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-dim); line-height: 2.1;
  animation: rise .9s .3s var(--ease) both;
}
.hero .colophon b { font-weight: 500; color: var(--gold-bright); }
.hero .colophon em { font-style: normal; color: var(--ink-line-2); margin: 0 .55rem; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- the shelf */
/* A rail of covers gliding past, printed twice so the loop closes seamlessly.
   Items carry margin-right rather than a flex gap, so one copy is exactly 50%
   of the track and the -50% translation lands with no jump. */
.shelf {
  padding: clamp(2.6rem, 5.5vw, 4.4rem) 0 clamp(2.8rem, 6vw, 4.6rem);
  position: relative;
}
.shelf-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.shelf-track {
  --gap: clamp(.7rem, 1.5vw, 1.5rem);
  display: flex; align-items: flex-end; width: max-content;
  animation: glide 96s linear infinite;
  will-change: transform;
}
.shelf-viewport:hover .shelf-track,
.shelf-viewport:focus-within .shelf-track { animation-play-state: paused; }

.shelf-track a {
  flex: 0 0 auto; display: block; text-decoration: none;
  margin-right: var(--gap);
  height: clamp(176px, 21vw, 296px);
  filter: brightness(.92) saturate(.97);
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
.shelf-track a img {
  height: 100%; width: auto; border-radius: 1px;
  box-shadow: 0 16px 34px rgba(0,0,0,.6), 0 0 0 1px rgba(244,216,117,.13);
  transition: box-shadow .5s var(--ease);
}
.shelf-track a:hover { transform: translateY(-14px) scale(1.03); filter: none; z-index: 2; }
.shelf-track a:hover img { box-shadow: 0 26px 48px rgba(0,0,0,.72), 0 0 0 1px var(--saffron); }

@keyframes glide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* the rail the books stand on */
.shelf::after {
  content: ""; position: absolute; left: 0; right: 0;
  bottom: clamp(2.8rem, 6vw, 4.6rem); height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-line-2) 12%, var(--ink-line-2) 88%, transparent);
}

/* No animation for readers who ask for none: fall back to a scrollable rail
   and drop the duplicate copy so nothing is listed twice. */
@media (prefers-reduced-motion: reduce) {
  .shelf-viewport { overflow-x: auto; }
  .shelf-track { animation: none; }
  .shelf-track a[aria-hidden="true"] { display: none; }
}

/* -------------------------------------------------------------- sections */
.section { padding: clamp(3.4rem, 7.5vw, 6rem) 0; }
.section + .section { border-top: 1px solid var(--paper-line); }
.section-head { max-width: 41rem; margin-bottom: clamp(2.2rem, 4.4vw, 3.4rem); }
.section-head .num {
  font-family: var(--display); font-size: .78rem; letter-spacing: .34em;
  text-transform: uppercase; color: var(--saffron-deep); display: block; margin-bottom: .8rem;
}
.section-head h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); margin: 0 0 .9rem; }
.section-head p { color: var(--text-dim); margin: 0; max-width: 38rem; }
.ink .section-head p { color: #c3b299; }

/* ----------------------------------------------------------- book entry */
.entry {
  display: grid;
  grid-template-columns: 3.2rem minmax(140px, 210px) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.8rem);
  padding: clamp(2rem, 4vw, 3.2rem) 0;
  border-top: 1px solid var(--paper-line);
  align-items: start;
}
.entry:first-of-type { border-top: 0; padding-top: 0; }
.folio {
  font-family: var(--display); font-size: 1.15rem; color: var(--saffron-deep);
  letter-spacing: .1em; padding-top: .55rem; text-align: right; opacity: .75;
}
@media (max-width: 46rem) {
  .entry { grid-template-columns: 1fr; gap: 1.2rem; }
  .folio { display: none; }
  .entry .art { max-width: 168px; }
}

.art { position: relative; }
.art img {
  width: 100%; border-radius: 1px;
  box-shadow: 0 9px 24px rgba(36,28,21,.22), 0 0 0 1px rgba(36,28,21,.09);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.art:hover img { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(36,28,21,.3), 0 0 0 1px var(--saffron); }

.art .nocover {
  aspect-ratio: 1 / 1.55;
  background: linear-gradient(168deg, #241813, var(--ink));
  border: 1px solid var(--ink-line-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 1.5rem 1rem; gap: .8rem;
  box-shadow: 0 9px 24px rgba(36,28,21,.22);
}
.art .nocover i { font-style: normal; color: var(--saffron); font-size: 1.3rem; opacity: .85; }
.art .nocover b { font-family: var(--display); font-weight: 500; color: var(--gold);
  font-size: 1.16rem; line-height: 1.18; }
.art .nocover em { font-style: normal; font-size: .56rem; letter-spacing: .22em;
  text-transform: uppercase; color: #9c8a74; }

.entry h3 { font-size: clamp(1.6rem, 3.1vw, 2.2rem); margin: -.28rem 0 .3rem; }
.entry h3 a {
  text-decoration: none;
  background-image: linear-gradient(var(--saffron), var(--saffron));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .45s var(--ease);
}
.entry h3 a:hover { background-size: 100% 1px; }
.entry .sub {
  font-family: var(--display); font-style: italic; font-size: 1.12rem;
  color: var(--umber); margin: 0 0 .85rem; line-height: 1.34;
}
.entry .blurb { margin: 0 0 1.15rem; max-width: var(--measure); color: #382c22; }

.meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem;
  font-size: .68rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 1.15rem;
}
.meta span + span::before { content: "·"; color: var(--paper-rule); margin-right: .75rem; }

.tag {
  display: inline-block; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  padding: .25rem .55rem; border-radius: 2px; vertical-align: .35em; margin-left: .5rem;
}
.tag.new  { background: var(--ruby); color: #fdf4e8; }
.tag.soon { background: transparent; color: var(--umber); border: 1px solid rgba(142,43,28,.45); }

/* ------------------------------------------------------------------ CTAs */
.actions { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.15rem;
  text-decoration: none; border-radius: 2px; font-family: var(--body);
  font-size: .715rem; letter-spacing: .17em; text-transform: uppercase;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-primary {
  background: linear-gradient(168deg, var(--saffron-lit), var(--saffron-deep));
  color: #22130a; font-weight: 600; box-shadow: 0 3px 12px rgba(184,89,15,.28);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(184,89,15,.4); }
.btn-ghost { border: 1px solid var(--paper-rule); color: var(--text-dim); }
.btn-ghost:hover { border-color: var(--umber); color: var(--umber); }
.ink .btn-ghost { border-color: var(--ink-line-2); color: #cbb9a3; }
.ink .btn-ghost:hover { border-color: var(--saffron); color: var(--saffron); }

/* --------------------------------------------------- inside-the-book strip */
.gallery { display: flex; gap: .5rem; margin-top: 1.3rem; flex-wrap: wrap; align-items: center; }
.gallery .cap {
  font-size: .62rem; color: var(--text-faint); letter-spacing: .22em;
  text-transform: uppercase; margin-right: .35rem;
}
.gallery button {
  padding: 0; border: 1px solid var(--paper-line); background: #fffdf8; cursor: zoom-in;
  width: clamp(104px, 14vw, 146px); aspect-ratio: 1.69;
  border-radius: 1px; overflow: hidden; line-height: 0;
  box-shadow: 0 3px 10px rgba(36,28,21,.10);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.gallery button img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.gallery button:hover {
  transform: translateY(-3px); border-color: var(--saffron);
  box-shadow: 0 10px 22px rgba(36,28,21,.2);
}

/* --------------------------------------------------------------- lightbox */
.lb {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: rgba(12,7,5,.95); backdrop-filter: blur(7px);
  align-items: center; justify-content: center; padding: 3vh 4vw;
}
.lb.on { display: flex; }
.lb img { max-height: 94vh; max-width: 100%; width: auto;
  box-shadow: 0 30px 70px rgba(0,0,0,.72); border-radius: 2px; }
.lb .x, .lb .nav-btn {
  position: absolute; background: none; border: 0; color: var(--gold);
  cursor: pointer; font-family: var(--display); line-height: 1;
}
.lb .x { top: 1rem; right: 1.4rem; font-size: 2.1rem; }
.lb .nav-btn { top: 50%; transform: translateY(-50%); font-size: 2.8rem; opacity: .55; padding: 1rem; }
.lb .nav-btn:hover { opacity: 1; }
.lb .prev { left: .3rem; } .lb .next { right: .3rem; }

/* ----------------------------------------------------------- detail page */
.book-hero { padding: clamp(2.6rem, 6vw, 4.6rem) 0 clamp(2.6rem, 6vw, 4.2rem); }
.book-hero .grid {
  display: grid; grid-template-columns: minmax(170px, 286px) minmax(0, 1fr);
  gap: clamp(1.8rem, 5vw, 4.2rem); align-items: center;
}
@media (max-width: 46rem) {
  .book-hero .grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .book-hero .art { max-width: 210px; }
  .book-hero .actions { justify-content: center; }
}
.book-hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); color: var(--gold); margin: .4rem 0 .55rem; }
.book-hero .sub {
  font-family: var(--display); font-style: italic; color: var(--saffron-lit);
  font-size: clamp(1.1rem, 2.3vw, 1.42rem); margin: 0 0 1rem; line-height: 1.34;
}
.book-hero .byline { color: #c8b69e; margin: 0 0 1.7rem; font-size: 1rem; }
.book-hero .art img { box-shadow: 0 24px 55px rgba(0,0,0,.6), 0 0 0 1px rgba(244,216,117,.15); }

.book-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(226px, 292px);
  gap: clamp(2rem, 5.5vw, 4.6rem); align-items: start;
}
@media (max-width: 54rem) { .book-body { grid-template-columns: 1fr; } }

.prose { max-width: var(--measure); }
.prose > p:first-of-type::first-letter {
  float: left; font-family: var(--display); font-size: 3.5em; line-height: .82;
  padding: .06em .09em 0 0; color: var(--umber); font-weight: 500;
}
.prose p { margin: 0 0 1.05rem; }
.prose h4 {
  font-size: 1.02rem; margin: 2.2rem 0 .8rem; color: var(--saffron-deep);
  font-family: var(--body); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
}
.prose ul { margin: 0 0 1.2rem; padding-left: 1.15rem; }
.prose li { margin-bottom: .5rem; }
.prose li::marker { color: var(--saffron-deep); }

.side { position: sticky; top: 5rem; }
.side .card {
  background: var(--paper-2); border: 1px solid var(--paper-line);
  padding: 1.55rem 1.45rem; border-radius: 2px; box-shadow: 0 2px 14px rgba(36,28,21,.05);
}
.side .card .btn { width: 100%; justify-content: center; margin-top: 1.35rem; }
.specs { border-top: 1px solid var(--paper-line); margin-top: .9rem; padding-top: 1.05rem; }
.specs dl { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.1rem; margin: 0; font-size: .88rem; }
.specs dt { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); padding-top: .22em; }
.specs dd { margin: 0; color: var(--text); }

.spread { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.spread figure { margin: 0; }
.spread img {
  border: 1px solid var(--paper-line); background: #fff; cursor: zoom-in;
  box-shadow: 0 7px 18px rgba(36,28,21,.14); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.spread img:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(36,28,21,.22); }
.spread figcaption {
  font-size: .64rem; color: var(--text-faint); margin-top: .55rem;
  letter-spacing: .18em; text-transform: uppercase;
}

/* -------------------------------------------------------------- pullquote */
.pull {
  font-family: var(--display); font-style: italic; color: var(--gold);
  font-size: clamp(1.5rem, 3.3vw, 2.35rem); line-height: 1.34;
  text-align: center; max-width: 42rem; margin: 0 auto;
}
.pull cite {
  display: block; font-family: var(--body); font-style: normal; font-size: .66rem;
  letter-spacing: .28em; text-transform: uppercase; color: var(--saffron);
  margin-top: 1.5rem; opacity: .85;
}

/* ----------------------------------------------------------------- footer */
.foot { padding: clamp(3rem, 6vw, 4.5rem) 0 2.4rem; }
.foot .cols { display: grid; gap: 2.6rem; grid-template-columns: 1.5fr 1fr 1fr; }
@media (max-width: 50rem) { .foot .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .foot .cols { grid-template-columns: 1fr; } }
.foot img.seal { width: 54px; margin-bottom: 1.1rem; opacity: .9; }
.foot h5 {
  font-family: var(--body); font-size: .66rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--saffron); margin: 0 0 1rem; font-weight: 500;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .5rem; }
.foot a { color: #c2b19a; text-decoration: none; font-size: .93rem; transition: color .3s var(--ease); }
.foot a:hover { color: var(--gold); }
.foot .fine {
  margin-top: 2.8rem; padding-top: 1.6rem; border-top: 1px solid var(--ink-line);
  font-size: .72rem; letter-spacing: .1em; color: #8a7a67;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem;
}

/* -------------------------------------------------------------- utilities */
.skip { position: absolute; left: -9999px; background: var(--gold); color: var(--ink); padding: .7rem 1.1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 2px solid var(--saffron); outline-offset: 3px; }

[data-rise] { opacity: 0; transform: translateY(20px); }
[data-rise].seen { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-rise] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}