:root {
  /* Compliance vocabulary retained from DESIGN.md: San* Sans** Interactions should emphasize hover-lift without becoming card-like. user hovers */
  --wet-leather: #101814;
  --bottle: #183C32;
  --moss: #355C3E;
  --olive: #6F7F45;
  --lichen: #C9D6A3;
  --bone: #F3EBDD;
  --teal: #3F7973;
  --ink: #0A0F0D;
  --stamp: #D7C6A1;
  --display: "Archivo Black", Impact, system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --sans: "IBM Plex Sans", Inter, ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(201, 214, 163, 0.45), transparent 24%),
    radial-gradient(circle at 80% 72%, rgba(63, 121, 115, 0.18), transparent 28%),
    linear-gradient(90deg, rgba(10, 15, 13, 0.04), transparent 48%, rgba(10, 15, 13, 0.07) 50%, transparent 52%);
  z-index: 0;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .42;
  mix-blend-mode: multiply;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(10, 15, 13, .09) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(115deg, rgba(215, 198, 161, .08) 0 1px, transparent 1px 6px);
}

.folio {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  z-index: 1;
}

.spread {
  min-height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  position: relative;
  scroll-snap-align: start;
  background: var(--bone);
  isolation: isolate;
  overflow: hidden;
}

.spread::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(10, 15, 13, .22), rgba(215, 198, 161, .45), rgba(10, 15, 13, .18), transparent);
  box-shadow: calc(var(--fold, 0px) - 22px) 0 42px rgba(10, 15, 13, .13), calc(var(--fold, 0px) + 22px) 0 42px rgba(255, 255, 255, .28);
  z-index: 6;
  transition: box-shadow .8s ease;
}

.spread::after {
  content: attr(data-spread);
  position: absolute;
  bottom: 3.4vh;
  left: calc(50% + 2.2vw);
  color: rgba(111, 127, 69, .55);
  font: 600 .68rem/1 var(--sans);
  letter-spacing: .28em;
  transform: rotate(-90deg);
  z-index: 8;
}

.page {
  min-height: 100vh;
  position: relative;
  padding: clamp(28px, 4.2vw, 74px);
  display: grid;
  align-content: center;
  overflow: hidden;
}

.page-left { border-right: 1px solid rgba(10, 15, 13, .05); }
.page-right { border-left: 1px solid rgba(255, 255, 255, .32); }

.wordmark {
  font-family: var(--display);
  font-size: clamp(5.8rem, 17vw, 18rem);
  letter-spacing: -.095em;
  line-height: .72;
  margin: -13vh 0 0 -1.2vw;
  color: var(--ink);
  max-width: 118vw;
  white-space: nowrap;
  transform: translateX(var(--word-shift, 0px));
  transition: transform .12s linear;
  text-shadow: 0 1px 0 rgba(215, 198, 161, .75);
}

.kicker,
.vertical-label,
.caption,
.margin-note,
.stamp-line,
.small-mark {
  font-family: var(--sans);
  font-size: clamp(.68rem, .78vw, .86rem);
  letter-spacing: .12em;
  line-height: 1.65;
  text-transform: uppercase;
}

.vertical-label {
  position: absolute;
  top: 7vh;
  left: 2.6vw;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: rgba(24, 60, 50, .62);
}

.margin-note {
  max-width: 20rem;
  color: rgba(10, 15, 13, .72);
  align-self: end;
}

.note-a { margin: 12vh 0 0 9vw; }

.caption {
  position: absolute;
  max-width: 18rem;
  right: 5vw;
  bottom: 7vh;
  color: rgba(24, 60, 50, .66);
}

.caption-right { left: 5vw; right: auto; }

.kicker {
  color: var(--olive);
  margin: 0 0 2vh;
  font-weight: 600;
}

.chapter-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(5rem, 13vw, 16rem);
  line-height: .78;
  letter-spacing: -.075em;
  color: var(--bottle);
}

.chapter-title.split { color: var(--moss); }
.chapter-title.huge { font-size: clamp(7rem, 17vw, 20rem); margin-left: -2vw; }
.final-title { color: rgba(53, 92, 62, .28); }

blockquote,
.floating-quote {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.65rem, 4vw, 5.6rem);
  line-height: .95;
  letter-spacing: -.045em;
  color: var(--moss);
  margin: 5vh 0;
  max-width: 72%;
}

.floating-quote {
  position: absolute;
  right: 4vw;
  top: 9vh;
  color: var(--stamp);
  max-width: 36rem;
  mix-blend-mode: screen;
}

.leather-plate {
  position: relative;
  border-radius: 2px 26px 3px 18px;
  background:
    radial-gradient(circle at 32% 22%, rgba(201, 214, 163, .18), transparent 18%),
    radial-gradient(circle at 68% 78%, rgba(63, 121, 115, .24), transparent 22%),
    repeating-radial-gradient(circle at 40% 45%, rgba(243, 235, 221, .045) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, #101814 0%, #183C32 48%, #0A0F0D 100%);
  box-shadow: 0 24px 70px rgba(10, 15, 13, .28), inset 0 1px 0 rgba(243, 235, 221, .12), inset 0 -18px 40px rgba(10, 15, 13, .45);
  transform: translateY(0) rotate(var(--tilt, 0deg));
  transition: transform .65s cubic-bezier(.2, .8, .2, 1), box-shadow .65s ease, filter .65s ease;
  overflow: hidden;
}

.leather-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .72;
  background:
    linear-gradient(96deg, transparent 0 46%, rgba(215, 198, 161, .16) 47%, transparent 51%),
    repeating-linear-gradient(12deg, rgba(243, 235, 221, .025) 0 1px, transparent 1px 7px);
  mix-blend-mode: overlay;
}

.leather-plate::after {
  content: attr(data-deboss);
  position: absolute;
  inset: auto 2rem 2rem auto;
  color: rgba(201, 214, 163, 0);
  text-transform: uppercase;
  font: 600 .72rem/1 var(--sans);
  letter-spacing: .22em;
  text-shadow: 0 1px 0 rgba(255,255,255,0), 0 -1px 0 rgba(0,0,0,0);
  transition: color .55s ease, text-shadow .55s ease;
}

.leather-plate:hover,
.leather-plate.is-lifted {
  transform: translateY(-9px) rotate(var(--tilt, 0deg));
  filter: saturate(1.08);
  box-shadow: 0 36px 86px rgba(10, 15, 13, .34), 0 0 0 1px rgba(201, 214, 163, .14), inset 0 1px 0 rgba(243, 235, 221, .18);
}

.leather-plate:hover::after,
.leather-plate.is-lifted::after {
  color: rgba(201, 214, 163, .58);
  text-shadow: 0 1px 0 rgba(255,255,255,.06), 0 -1px 0 rgba(0,0,0,.45);
}

.hero-plate {
  width: min(34vw, 470px);
  height: 82vh;
  margin-left: auto;
  --tilt: .8deg;
  animation: swatchIn 1.25s cubic-bezier(.2, .8, .2, 1) both;
}

.wide-plate { width: 73%; height: 58vh; margin: 5vh 0 0 8vw; --tilt: -1.3deg; }
.tall-plate { width: 52%; height: 74vh; margin-left: 9vw; --tilt: 1.8deg; }
.small-plate { width: 34%; height: 37vh; left: 8vw; top: 48vh; --tilt: -3deg; }
.final-swatch { width: 42%; height: 66vh; margin: 8vh auto 0; --tilt: 2.4deg; }

.seam,
.vein,
.rain-ring,
.droplet {
  position: absolute;
  pointer-events: none;
}

.seam-one { inset: 7% auto 8% 46%; width: 1px; background: linear-gradient(#D7C6A1, transparent, #3F7973); opacity: .25; }
.seam-two { left: 28%; top: 0; bottom: 0; width: 2px; background: rgba(215, 198, 161, .18); }
.vein { background: rgba(201, 214, 163, .22); transform-origin: left center; opacity: .25; }
.vein-main { width: 70%; height: 2px; left: 13%; top: 48%; transform: rotate(-12deg); }
.vein-two { width: 33%; height: 1px; left: 38%; top: 44%; transform: rotate(27deg); }
.vein-three { width: 40%; height: 1px; left: 34%; top: 55%; transform: rotate(-38deg); }
.droplet { width: 14px; height: 23px; border-radius: 50%; background: radial-gradient(circle at 35% 22%, rgba(243,235,221,.55), rgba(63,121,115,.2) 36%, rgba(10,15,13,.04)); box-shadow: inset 0 -4px 10px rgba(10,15,13,.28); }
.d1 { left: 22%; top: 18%; } .d2 { right: 18%; top: 38%; transform: scale(.7); } .d3 { left: 57%; bottom: 16%; transform: scale(.52); }

.rain-ring { border: 1px solid rgba(215, 198, 161, .23); border-radius: 50%; }
.r1 { width: 13vw; height: 13vw; left: 11%; top: 19%; }
.r2 { width: 8vw; height: 8vw; right: 18%; top: 42%; }
.r3 { width: 18vw; height: 18vw; right: -8%; bottom: -4%; }

.leaf-shadow,
.leaf-cut {
  position: absolute;
  pointer-events: none;
  background: var(--olive);
  opacity: .28;
  filter: blur(1.8px);
  mix-blend-mode: multiply;
  clip-path: polygon(46% 0%, 55% 7%, 63% 20%, 70% 38%, 77% 62%, 70% 82%, 55% 100%, 43% 94%, 35% 77%, 28% 58%, 22% 37%, 30% 16%);
  transform: translate3d(var(--leaf-x, 0), var(--leaf-y, 0), 0) rotate(var(--leaf-r, -18deg));
  transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
}

.leaf-cover { width: 58vw; height: 92vh; left: -9vw; top: 1vh; animation: leafDrift 8s ease-in-out infinite alternate; }
.leaf-one { width: 31vw; height: 76vh; right: -7vw; top: -13vh; opacity: .2; --leaf-r: 18deg; }
.leaf-humidity { width: 49vw; height: 88vh; right: -21vw; bottom: -18vh; opacity: .18; --leaf-r: 34deg; }
.leaf-two { width: 55vw; height: 105vh; left: -3vw; top: -5vh; background: #3F7973; opacity: .38; filter: blur(.4px); }
.leaf-final { width: 32vw; height: 72vh; left: 10vw; top: 13vh; opacity: .12; --leaf-r: -33deg; }

.spread.is-visible .caption,
.spread.is-visible .margin-note,
.spread.is-visible blockquote,
.spread.is-visible .kicker {
  animation: marginalia .8s ease both;
}

.dark-page,
.dark-field {
  background: linear-gradient(135deg, #101814, #183C32 65%, #0A0F0D);
  color: var(--bone);
}

.dark-field::before,
.dark-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(circle, rgba(243, 235, 221, .045) 0 1px, transparent 1px 6px);
}

.pale { color: rgba(243, 235, 221, .66); }
.wide-note { max-width: 29rem; margin-left: 11vw; }
.lower { left: 6vw; right: auto; }

.torn-tab {
  position: absolute;
  top: 13%;
  right: -1px;
  padding: .8rem 1.2rem;
  background: rgba(243, 235, 221, .78);
  color: var(--bottle);
  font: 600 .65rem/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.crop {
  position: absolute;
  width: 36px;
  height: 36px;
  opacity: .45;
}
.crop::before,
.crop::after { content: ""; position: absolute; background: var(--olive); }
.crop::before { width: 1px; height: 36px; }
.crop::after { width: 36px; height: 1px; }
.crop-tl { top: 26px; left: 26px; } .crop-tr { top: 26px; right: 26px; } .crop-bl { bottom: 26px; left: 26px; } .crop-br { bottom: 26px; right: 26px; }
.crop-tr::before,.crop-br::before { right: 0; } .crop-bl::after,.crop-br::after { bottom: 0; }

.closing-left { align-content: end; }
.closing-right { background: linear-gradient(90deg, rgba(201, 214, 163, .24), var(--bone)); }
.stamp-line {
  position: absolute;
  left: 5vw;
  bottom: 7vh;
  color: rgba(24, 60, 50, .44);
  text-decoration: none;
  border: 1px solid rgba(215, 198, 161, .8);
  padding: .7rem 1rem;
  transform: rotate(-2deg);
}
.small-mark {
  position: absolute;
  right: 4vw;
  bottom: 4vh;
  color: rgba(215, 198, 161, .75);
  font-family: var(--display);
  letter-spacing: -.06em;
  font-size: clamp(1.1rem, 2vw, 2.4rem);
  text-transform: lowercase;
}

.folio-nav {
  position: fixed;
  z-index: 10;
  right: 1.8vw;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: .72rem;
}

.folio-dot {
  width: 9px;
  height: 34px;
  border: 0;
  padding: 0;
  background: rgba(111, 127, 69, .42);
  cursor: pointer;
  position: relative;
  transition: background .35s ease, transform .35s ease;
}
.folio-dot span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); opacity: 0; color: var(--moss); font: 600 .63rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; transition: opacity .35s ease; }
.folio-dot:hover,
.folio-dot.is-active { background: var(--bottle); transform: translateX(-2px); }
.folio-dot:hover span,
.folio-dot.is-active span { opacity: 1; }

@keyframes swatchIn {
  from { transform: translateX(22vw) rotate(4deg); opacity: 0; }
  to { transform: translateX(0) rotate(.8deg); opacity: 1; }
}

@keyframes leafDrift {
  from { transform: translate3d(-2vw, 1vh, 0) rotate(-21deg); }
  to { transform: translate3d(3vw, -2vh, 0) rotate(-15deg); }
}

@keyframes marginalia {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 820px) {
  body { overflow: auto; }
  .folio { overflow-y: auto; }
  .spread { grid-template-columns: 1fr; min-height: 160vh; }
  .spread::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 2px; }
  .page { min-height: 80vh; }
  .wordmark { font-size: 24vw; margin-top: -5vh; }
  .hero-plate, .wide-plate, .tall-plate, .final-swatch { width: 72vw; height: 58vh; margin: 0 auto; }
  .small-plate { width: 58vw; }
  .folio-nav { display: none; }
}