:root {
  --ink: #1c1b18;
  --cream: #eee8dc;
  --paper: #f7f3ea;
  --olive: #5f6650;
  --taupe: #9c8d7a;
  --white: #fffdf7;


  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --hand: "Nanum Pen Script", cursive;
}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
}


.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.08;


  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}




/* ---------------------------------
   GENERAL ACCESS PAGE
---------------------------------- */


.gate {
  position: fixed;
  inset: 0;
  z-index: 1000;


  display: grid;
  grid-template-columns: 1.05fr 0.95fr;


  background: var(--paper);


  transition:
    opacity 0.7s,
    visibility 0.7s;
}


.gate.unlocked {
  opacity: 0;
  visibility: hidden;
}


.gate-photo {
  background: url("images/river.jpg") center / cover;
}


.gate-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;


  padding: 8vw;
}


.gate h1,
.hero h1 {
  margin: 0.5em 0 0.35em;


  font-family: var(--serif);
  font-size: clamp(3.7rem, 7vw, 7rem);
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: -0.04em;
}


.gate h1 em,
.hero h1 em,
.chapter-title em,
.contents em {
  font-weight: 400;
}


.eyebrow,
.chapter-number {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}


.gate-copy {
  max-width: 450px;
  line-height: 1.8;
}


.access-form {
  margin-top: 2rem;
}


.access-form label {
  display: block;
  margin-bottom: 0.7rem;


  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


.access-row {
  display: flex;
  border-bottom: 1px solid var(--ink);
}


.access-row input {
  flex: 1;


  border: 0;
  outline: none;
  background: none;


  padding: 1rem 0;


  letter-spacing: 0.16em;
}


.access-row button {
  border: 0;
  background: none;


  padding: 0 0 0 1rem;


  font-family: var(--sans);
  cursor: pointer;
}


.access-message {
  min-height: 1.2em;
  font-size: 0.8rem;
}


.tiny {
  margin-top: 3rem;


  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


.book.is-locked {
  height: 100vh;
  overflow: hidden;
}




/* ---------------------------------
   WEBSITE HEADER
---------------------------------- */


.site-header {
  position: sticky;
  top: 0;
  z-index: 100;


  display: flex;
  align-items: center;
  gap: 2rem;


  padding: 1rem 3vw;


  background: rgba(247, 243, 234, 0.92);
  backdrop-filter: blur(12px);


  border-bottom: 1px solid rgba(28, 27, 24, 0.15);
}


.brand {
  color: inherit;
  text-decoration: none;


  font-family: var(--serif);
  font-size: 1.3rem;
}


.brand span {
  display: inline-grid;
  place-items: center;


  width: 32px;
  height: 32px;


  margin-right: 0.5rem;


  border: 1px solid;
  border-radius: 50%;


  font-family: var(--sans);
  font-size: 0.65rem;
}


.site-header nav {
  display: flex;
  gap: 1.4rem;
  margin: auto;
}


.site-header nav a,
.print-button {
  color: inherit;
  text-decoration: none;


  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


.print-button,
.menu-toggle {
  border: 0;
  background: none;
  cursor: pointer;
}


.menu-toggle {
  display: none;
}




/* ---------------------------------
   MAIN HERO
---------------------------------- */


.hero {
  position: relative;
  height: calc(100vh - 65px);


  overflow: hidden;
  color: var(--white);
}


.hero > img,
.chapter-opener > img,
.finale > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.hero-wash {
  position: absolute;
  inset: 0;


  background: linear-gradient(
    90deg,
    rgba(10, 10, 8, 0.66),
    rgba(10, 10, 8, 0.03)
  );
}


.hero-copy {
  position: absolute;
  left: 7vw;
  bottom: 10vh;
}


.hero-copy p {
  line-height: 1.7;
}


.light {
  color: var(--white);
}


.text-link {
  color: inherit;
  text-decoration: none;


  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


.film-mark {
  position: absolute;
  right: 2vw;
  bottom: 3vh;


  writing-mode: vertical-rl;


  font-size: 0.6rem;
  letter-spacing: 0.22em;
}




/* ---------------------------------
   COLOR BACKGROUNDS
---------------------------------- */


.cream {
  background: var(--cream);
}


.paper {
  background: var(--paper);
}


.dark {
  background: var(--ink);
  color: var(--white);
}




/* ---------------------------------
   QUOTE PAGE
---------------------------------- */


.quote-page {
  position: relative;


  display: grid;
  place-content: center;


  min-height: 75vh;
  padding: 8vw;


  text-align: center;
}


.quote-page blockquote {
  max-width: 1100px;
  margin: 2rem auto;


  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 5.8rem);
  line-height: 1.05;
}


.kicker {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}


.scribble,
.margin-note {
  font-family: var(--hand);
  font-size: 1.8rem;


  transform: rotate(-3deg);
}




/* ---------------------------------
   EDITORIAL SECTIONS
---------------------------------- */


.editorial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 5vw;


  min-height: 100vh;
  padding: 10vw 8vw;
}


.editorial-grid.reversed {
  grid-template-columns: 1fr 1fr;
}


.letter h2,
.advice h2,
.split-copy h2,
.timeline h2,
.tip-spread h2,
.film-story h2,
.after h2,
.finale h2 {
  margin: 0.3em 0;


  font-family: var(--serif);
  font-size: clamp(3rem, 5vw, 6rem);
  font-weight: 400;
  line-height: 0.95;
}


.letter p,
.advice-copy p,
.split-copy p,
.timeline p,
.film-copy p,
.after p {
  line-height: 1.9;
}


.signature {
  font-family: var(--hand);
  font-size: 2.4rem;
}




/* ---------------------------------
   POLAROID PHOTOS
---------------------------------- */


.polaroid-stack {
  position: relative;
  min-height: 650px;
}


.polaroid {
  position: absolute;


  width: min(70%, 420px);
  margin: 0;


  padding: 14px 14px 55px;


  background: #f7f4eb;


  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}


.polaroid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}


.polaroid figcaption {
  margin-top: 12px;


  font-family: var(--hand);
  font-size: 1.4rem;
  text-align: center;
}


.p1,
.p3 {
  top: 5%;
  left: 5%;


  transform: rotate(-7deg);
}


.p2,
.p4 {
  right: 0;
  bottom: 4%;


  transform: rotate(6deg);
}


.tape {
  position: absolute;
  top: 2%;
  left: 25%;


  width: 100px;
  height: 35px;


  background: rgba(170, 145, 87, 0.55);


  transform: rotate(5deg);
}




/* ---------------------------------
   TABLE OF CONTENTS
---------------------------------- */


.contents {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 8vw;


  padding: 10vw 8vw;
}


.contents h2 {
  font-family: var(--serif);
  font-size: clamp(3rem, 5vw, 6rem);
  font-weight: 400;
}


.contents ol {
  margin: 0;
  padding: 0;
  list-style: none;
}


.contents li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}


.contents a {
  display: flex;
  gap: 2rem;


  padding: 1.2rem 0;


  color: inherit;
  text-decoration: none;


  font-family: var(--serif);
  font-size: 1.5rem;
}


.contents a span {
  padding-top: 0.5rem;


  font-family: var(--sans);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
}




/* ---------------------------------
   CHAPTER OPENERS
---------------------------------- */


.chapter-opener {
  position: relative;


  height: 100vh;
  color: white;
}


.chapter-opener::after {
  content: "";


  position: absolute;
  inset: 0;


  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.65),
    transparent 65%
  );
}


.chapter-title {
  position: absolute;
  z-index: 1;


  left: 7vw;
  bottom: 8vh;
}


.chapter-title p {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
}


.chapter-title h2 {
  margin: 0.2em 0;


  font-family: var(--serif);
  font-size: clamp(4rem, 8vw, 9rem);
  font-weight: 400;
  line-height: 0.78;
}


.chapter-title span {
  display: block;
  max-width: 540px;


  line-height: 1.7;
}




/* ---------------------------------
   ADVICE SECTION
---------------------------------- */


.advice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;


  padding: 10vw 8vw;
}


.tip {
  margin-top: 3rem;
  padding-left: 1.5rem;


  border-left: 1px solid;
}


.tip span {
  font-family: var(--hand);
  font-size: 1.8rem;
}




/* ---------------------------------
   CONTACT SHEET
---------------------------------- */


.contact-sheet {
  padding: 3rem 2vw;
  background: #161511;
}


.frames {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}


.frames img {
  width: 100%;
  height: 300px;


  object-fit: cover;
  filter: saturate(0.8);
}


.film-edge {
  padding: 1rem;


  color: #d7c977;


  font-size: 0.58rem;
  letter-spacing: 0.22em;
}


.bottom {
  text-align: right;
}




/* ---------------------------------
   VENUE SPLIT SECTION
---------------------------------- */


.split-feature {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;


  min-height: 100vh;
}


.split-image {
  position: relative;
}


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


.frame-count {
  position: absolute;
  bottom: 2rem;
  left: 2rem;


  padding: 0.6rem;


  background: #111;
  color: #eee;


  font-size: 0.58rem;
  letter-spacing: 0.15em;
}


.split-copy {
  align-self: center;
  padding: 10vw 7vw;
}


.clean-list {
  padding: 0;
  list-style: none;
  line-height: 1.9;
}


.clean-list li {
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}




/* ---------------------------------
   TIMELINE
---------------------------------- */


.timeline {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 8vw;


  padding: 10vw 8vw;
}


.timeline-list article {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1rem;


  padding: 2rem 0;


  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}


.timeline-list time {
  font-family: var(--serif);
  font-size: 2rem;
}


.timeline-list h3 {
  margin: 0;


  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 400;
}




/* ---------------------------------
   LARGE 15-MINUTE TIP
---------------------------------- */


.tip-spread {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  align-items: center;


  padding: 8vw;
}


.giant-number {
  color: var(--taupe);


  font-family: var(--serif);
  font-size: 25vw;
  line-height: 0.7;
}




/* ---------------------------------
   FOUR TIP CARDS
---------------------------------- */


.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;


  padding: 8vw;
}


.cards article {
  padding-top: 1rem;
  border-top: 1px solid;
}


.cards span {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
}


.cards h3 {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
}


.cards p {
  line-height: 1.8;
}




/* ---------------------------------
   FILM CHAPTER
---------------------------------- */


.film-story {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 8vw;


  min-height: 100vh;
  padding: 9vw 8vw;
}


.negative {
  position: relative;


  padding: 38px 22px;


  background: #080808;
}


.negative img {
  display: block;
  width: 100%;


  filter: saturate(0.78) contrast(1.04);
}


.negative::before,
.negative::after {
  content: "▭ ▭ ▭ ▭ ▭ ▭ ▭ ▭ ▭ ▭";


  position: absolute;
  right: 12px;
  left: 12px;


  overflow: hidden;


  color: #eee;


  font-size: 18px;
  letter-spacing: 10px;
  white-space: nowrap;
}


.negative::before {
  top: 5px;
}


.negative::after {
  bottom: 5px;
}


.negative-label {
  margin-top: 14px;


  color: #d9c765;


  font-size: 0.6rem;
  letter-spacing: 0.18em;
}




/* ---------------------------------
   AFTER THE WEDDING
---------------------------------- */


.after {
  padding: 10vw 8vw;
}


.after-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4vw;


  margin-top: 4rem;
}


.after-grid article {
  padding-top: 1rem;
  border-top: 1px solid;
}


.after-grid h3 {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
}




/* ---------------------------------
   FINAL PAGE
---------------------------------- */


.finale {
  position: relative;


  height: 100vh;


  color: white;
  text-align: center;
}


.finale::after {
  content: "";


  position: absolute;
  inset: 0;


  background: rgba(0, 0, 0, 0.4);
}


.finale > div {
  position: absolute;
  z-index: 1;
  inset: 0;


  display: grid;
  place-content: center;


  padding: 8vw;
}


.finale h2 {
  font-size: clamp(4rem, 8vw, 9rem);
}




/* ---------------------------------
   FOOTER
---------------------------------- */


footer {
  display: flex;
  justify-content: space-between;


  padding: 2rem 4vw;


  background: #111;
  color: #eee;


  font-size: 0.6rem;
  letter-spacing: 0.12em;
}


footer a {
  color: inherit;
}




/* ---------------------------------
   SCROLL ANIMATIONS
---------------------------------- */


.chapter-reveal {
  opacity: 0;
  transform: translateY(30px);


  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}


.chapter-reveal.visible {
  opacity: 1;
  transform: none;
}




/* =================================
   CINEMATIC SUPER 8 OPENING
================================= */


.cinema-intro {
  position: fixed;
  inset: 0;
  z-index: 1200;


  display: grid;
  place-items: center;


  overflow: hidden;


  background: #080806;
  color: var(--white);


  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
}


.cinema-intro.is-opening {
  opacity: 0;
  visibility: hidden;
}




/* Moving B-roll video */


.intro-broll {
  position: absolute;
  z-index: 0;
  inset: -3%;


  width: 106%;
  height: 106%;


  object-fit: cover;


  filter:
    saturate(0.78)
    contrast(1.08)
    brightness(0.72);


  animation: projectorJitter 0.18s infinite alternate;
}




/* Dark layer over video */


.cinema-intro::before {
  content: "";


  position: absolute;
  z-index: 1;
  inset: 0;


  pointer-events: none;


  background: linear-gradient(
    rgba(5, 5, 4, 0.12),
    rgba(5, 5, 4, 0.34)
  );
}




/* Film flicker and vignette */


.cinema-intro::after {
  content: "";


  position: absolute;
  inset: 0;


  background:
    radial-gradient(
      circle at center,
      transparent 20%,
      rgba(0, 0, 0, 0.58) 100%
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025),
      transparent 15%,
      rgba(255, 255, 255, 0.018) 38%,
      transparent 70%
    );


  mix-blend-mode: screen;


  animation: flicker 2.8s infinite;
}




/* Thin frame around the film */


.intro-frame {
  position: absolute;
  z-index: 2;
  inset: 18px;


  pointer-events: none;


  border: 1px solid rgba(255, 255, 255, 0.28);
}




/* Center intro wording */


.intro-copy {
  position: relative;
  z-index: 3;


  max-width: 920px;
  padding: 2rem;


  text-align: center;


  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5);
}


.intro-copy h1 {
  margin: 0.28em 0;


  font-family: var(--serif);
  font-size: clamp(4rem, 10vw, 10rem);
  font-weight: 400;
  line-height: 0.76;
  letter-spacing: -0.05em;
}


.intro-copy p:not(.eyebrow) {
  margin: 1.5rem 0 2.5rem;


  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.3vw, 2.2rem);
  font-style: italic;
}




/* Open the Story button */


.open-story {
  display: inline-flex;
  align-items: center;
  gap: 2rem;


  padding: 0.8rem 0.15rem;


  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);


  background: transparent;
  color: inherit;


  font-family: var(--sans);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;


  cursor: pointer;
}


.open-story i {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-style: normal;


  transition: transform 0.3s ease;
}


.open-story:hover i {
  transform: translateX(7px);
}




/* Projector sound button */


.sound-toggle {
  position: absolute;
  z-index: 4;
  top: 2rem;
  right: 2rem;


  display: flex;
  align-items: center;
  gap: 0.55rem;


  padding: 0.65rem 0.9rem;


  border: 0;


  background: rgba(10, 10, 8, 0.28);
  backdrop-filter: blur(8px);


  color: white;


  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;


  cursor: pointer;
}


.sound-toggle[aria-pressed="true"] .sound-icon {
  animation: soundPulse 1s infinite;
}


.intro-credit {
  position: absolute;
  z-index: 3;


  left: 2.2rem;
  bottom: 2rem;


  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}




/* Dust overlays */


.dust {
  position: absolute;
  z-index: 2;
  inset: -30%;


  pointer-events: none;


  opacity: 0.2;


  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.42) 0 1px,
    transparent 1.5px
  );


  background-size: 43px 47px;


  animation: dustMove 9s linear infinite;
}


.dust-two {
  opacity: 0.13;
  background-size: 79px 83px;


  animation-duration: 14s;
  animation-direction: reverse;
}




/* Super 8 animations */


@keyframes flicker {
  0%,
  18%,
  22%,
  62%,
  100% {
    opacity: 0.56;
  }


  20% {
    opacity: 0.34;
  }


  21% {
    opacity: 0.75;
  }


  64% {
    opacity: 0.42;
  }
}


@keyframes projectorJitter {
  from {
    transform: translate3d(-1px, 0, 0) scale(1.015);
  }


  to {
    transform: translate3d(1px, -1px, 0) scale(1.018);
  }
}


@keyframes dustMove {
  from {
    transform: translate3d(0, -4%, 0);
  }


  to {
    transform: translate3d(6%, 10%, 0);
  }
}


@keyframes soundPulse {
  50% {
    opacity: 0.38;
  }
}




/* =================================
   BOOK-OPENING ACCESS SCREEN
================================= */


.gate {
  position: fixed;
  inset: 0;
  z-index: 1100;


  display: grid;
  place-items: center;


  background: #17150f;


  perspective: 2200px;


  opacity: 0;
  visibility: hidden;


  transition:
    opacity 0.55s ease,
    visibility 0.55s ease;
}


.gate.is-ready {
  opacity: 1;
  visibility: visible;
}


.gate.unlocked {
  opacity: 0;
  visibility: hidden;
}


.book-stage {
  width: min(92vw, 1180px);
  height: min(82vh, 760px);


  perspective: 2400px;
}


.book-shell {
  position: relative;


  width: 100%;
  height: 100%;


  transform-style: preserve-3d;
}


.inside-page {
  position: absolute;
  inset: 0;


  overflow: hidden;


  background: var(--paper);


  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.48);
}


.inside-page::after {
  content: "";


  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;


  width: 34px;


  transform: translateX(-50%);


  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.09),
    transparent
  );


  pointer-events: none;
}




/* Hardcover book */


.book-cover {
  position: absolute;
  z-index: 3;


  inset: 0 50% 0 0;


  transform-origin: right center;
  transform-style: preserve-3d;


  background: #111;


  box-shadow: 10px 28px 65px rgba(0, 0, 0, 0.5);


  transition: transform 1.6s cubic-bezier(0.2, 0.72, 0.12, 1);
}


.book-shell.opening .book-cover {
  transform: rotateY(-178deg);
}


.cover-image,
.cover-shade {
  position: absolute;
  inset: 0;
}


.cover-image {
  background: url("images/river.jpg") center / cover;
  filter: saturate(0.7);
}


.cover-shade {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0.08) 60%
  );
}


.cover-copy {
  position: absolute;
  z-index: 2;


  right: 8%;
  bottom: 8%;
  left: 9%;


  color: #fff;
}


.cover-copy p,
.cover-copy span {
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


.cover-copy h2 {
  margin: 0.45em 0;


  font-family: var(--serif);
  font-size: clamp(2.7rem, 5vw, 5.6rem);
  font-weight: 400;
  line-height: 0.78;
}


.cover-spine {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;


  width: 16px;


  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.08),
    rgba(255, 255, 255, 0.13),
    rgba(0, 0, 0, 0.2)
  );
}




/* Password content inside book */


.gate-panel {
  width: 50%;
  height: 100%;


  margin-left: auto;
  padding: 6vw;


  display: flex;
  flex-direction: column;
  justify-content: center;
}


.gate h1 {
  margin: 0.45em 0 0.3em;


  font-family: var(--serif);
  font-size: clamp(3.2rem, 5.8vw, 6.7rem);
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: -0.04em;
}


.gate-copy {
  max-width: 450px;
  line-height: 1.8;
}




/* =================================
   TABLET AND MOBILE
================================= */


@media (max-width: 900px) {
  .site-header nav {
    position: absolute;
    top: 64px;
    right: 0;
    left: 0;


    display: none;
    flex-direction: column;


    padding: 2rem;


    background: var(--paper);
  }


  .site-header nav.open {
    display: flex;
  }


  .menu-toggle {
    display: block;
    margin-left: auto;
  }


  .print-button {
    display: none;
  }


  .editorial-grid,
  .contents,
  .advice,
  .split-feature,
  .timeline,
  .film-story {
    grid-template-columns: 1fr;
  }


  .contents,
  .advice,
  .timeline,
  .film-story {
    padding: 20vw 7vw;
  }


  .split-image {
    min-height: 70vh;
  }


  .frames {
    grid-template-columns: repeat(2, 1fr);
  }


  .frames img {
    height: 220px;
  }


  .cards,
  .after-grid {
    grid-template-columns: 1fr;
  }


  .tip-spread {
    grid-template-columns: 1fr;
  }


  .giant-number {
    font-size: 50vw;
  }


  .polaroid-stack {
    min-height: 560px;
  }


  .hero-copy {
    right: 7vw;
    left: 7vw;
  }


  .hero h1 {
    font-size: clamp(4rem, 15vw, 7rem);
  }


  footer {
    flex-direction: column;
    gap: 1rem;
  }


  .intro-frame {
    inset: 10px;
  }


  .sound-toggle {
    top: 1rem;
    right: 1rem;
  }


  .sound-label {
    display: none;
  }


  .intro-credit {
    left: 1.2rem;
    bottom: 1.2rem;
  }


  .book-stage {
    width: 94vw;
    height: 88vh;
  }


  .book-cover {
    inset: 0;


    transition-duration: 1.25s;
  }


  .inside-page::after {
    display: none;
  }


  .gate-panel {
    width: 100%;
    padding: 12vw 9vw;
  }


  .book-shell.opening .book-cover {
    transform: rotateY(-180deg);
  }


  .cover-copy h2 {
    font-size: clamp(3.5rem, 14vw, 6rem);
  }
}




/* ---------------------------------
   REDUCED MOTION ACCESSIBILITY
---------------------------------- */


@media (prefers-reduced-motion: reduce) {
  .intro-broll,
  .cinema-intro::before,
  .cinema-intro::after,
  .dust,
  .sound-toggle[aria-pressed="true"] .sound-icon {
    animation: none;
  }


  .book-cover {
    transition-duration: 0.2s;
  }
}




/* ---------------------------------
   PRINT / SAVE AS PDF
---------------------------------- */


@media print {
  .cinema-intro,
  .gate,
  .site-header,
  .grain {
    display: none !important;
  }


  .book.is-locked {
    height: auto;
    overflow: visible;
  }


  .chapter-reveal {
    opacity: 1;
    transform: none;
  }


  .hero,
  .chapter-opener,
  .finale {
    height: 100vh;
    break-after: page;
  }


  .quote-page,
  .editorial-grid,
  .contents,
  .advice,
  .split-feature,
  .timeline,
  .tip-spread,
  .film-story,
  .after {
    break-after: page;
  }


  .dark {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }


  footer {
    display: none;
  }
}


/* FIX: prevent black back of book cover from covering password page */


.book-cover {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


.book-shell.opening .book-cover {
  transform: rotateY(-180deg);
  pointer-events: none;
}


.inside-page {
  z-index: 1;
  visibility: visible;
  opacity: 1;
}


.book-shell.opening .inside-page {
  z-index: 5;
}


.gate.is-ready {
  display: grid;
  opacity: 1;
  visibility: visible;
}




.book-shell.cover-opened .book-cover {
  opacity: 0;
  visibility: hidden;
}


/* PASSWORD FORM CLICK FIX */


.book-cover {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


.book-shell.opening .book-cover,
.book-shell.cover-opened .book-cover {
  pointer-events: none !important;
}


.book-shell.cover-opened .book-cover {
  display: none !important;
}


.inside-page {
  position: absolute;
  inset: 0;
  z-index: 10 !important;


  opacity: 1 !important;
  visibility: visible !important;


  pointer-events: auto !important;
}


.gate-panel,
.access-form,
.access-row,
.access-row input,
.access-row button {
  position: relative;
  z-index: 20;


  pointer-events: auto !important;
}


.access-row input,
.access-row button {
  cursor: pointer;
}


.access-row input {
  cursor: text;
}


.access-row button {
  min-width: 130px;
  padding: 1rem;


  background: transparent;
  color: var(--ink);
}

/* ---------------------------------
   THE WEDDING VAULT — PHASE ONE
---------------------------------- */

.vault-dashboard {
  padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 7vw, 8rem);
}

.vault-dashboard-intro {
  max-width: 820px;
  margin: 0 auto clamp(3rem, 6vw, 5.5rem);
  text-align: center;
}

.vault-greeting {
  margin: 1.2rem 0 0;
  font-family: var(--hand);
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  color: var(--olive);
}

.vault-dashboard h2 {
  margin: 0.35rem auto 1.25rem;
  max-width: 760px;
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.vault-dashboard-intro > p:last-child {
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.9;
}

.vault-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1280px;
  margin: 0 auto;
  border-top: 1px solid rgba(28, 27, 24, 0.25);
  border-left: 1px solid rgba(28, 27, 24, 0.25);
}

.vault-card {
  position: relative;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border-right: 1px solid rgba(28, 27, 24, 0.25);
  border-bottom: 1px solid rgba(28, 27, 24, 0.25);
  color: var(--ink);
  text-decoration: none;
  background: rgba(255, 253, 247, 0.25);
  transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.vault-card:hover,
.vault-card:focus-visible {
  z-index: 2;
  transform: translateY(-5px);
  background: var(--white);
  box-shadow: 0 22px 55px rgba(28, 27, 24, 0.12);
  outline: none;
}

.vault-card.featured {
  background: var(--olive);
  color: var(--white);
}

.vault-card.tool-card {
  background: rgba(156, 141, 122, 0.11);
}

.vault-card-number,
.vault-card-status {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.vault-card-status {
  position: absolute;
  top: clamp(1.6rem, 3vw, 2.6rem);
  right: clamp(1.6rem, 3vw, 2.6rem);
  opacity: 0.65;
}

.vault-card h3 {
  margin: auto 0 0.85rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 400;
  line-height: 0.95;
}

.vault-card p {
  margin: 0 0 1.5rem;
  line-height: 1.7;
  opacity: 0.82;
}

.vault-card strong {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vault-coming-note {
  max-width: 900px;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  text-align: center;
}

.vault-coming-note span {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.vault-coming-note p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  line-height: 1.25;
}

@media (max-width: 980px) {
  .vault-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .vault-dashboard {
    padding-inline: 1rem;
  }

  .vault-card-grid {
    grid-template-columns: 1fr;
  }

  .vault-card {
    min-height: 285px;
  }
}

@media print {
  .vault-dashboard {
    break-after: page;
  }

  .vault-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vault-card {
    min-height: 230px;
    break-inside: avoid;
  }
}


/* ======================================================================
   THE WEDDING VAULT — LUXURY EDITORIAL SYSTEM · V2.0
   Additive design layer for the existing Wedding Vault HTML.
   Linen, leather, archival paper, film, Polaroid + Instax details.
   ====================================================================== */

:root {
  --vault-ink: #171714;
  --vault-black: #0e0e0d;
  --vault-coal: #262521;
  --vault-leather: #29251f;
  --vault-olive: #666854;
  --vault-sage: #9da18b;
  --vault-brass: #b39a68;
  --vault-brass-light: #d7c9a7;
  --vault-taupe: #9a8f80;
  --vault-stone: #d8d0c4;
  --vault-linen: #ece7dc;
  --vault-parchment: #f5f0e7;
  --vault-paper: #fbf8f1;
  --vault-white: #fffdf8;
  --vault-line: rgba(23, 23, 20, .16);
  --vault-line-light: rgba(255, 253, 248, .20);
  --vault-shadow-sm: 0 10px 30px rgba(22, 20, 17, .10);
  --vault-shadow-md: 0 24px 65px rgba(22, 20, 17, .16);
  --vault-shadow-lg: 0 36px 110px rgba(10, 9, 8, .28);
  --vault-radius-sm: 8px;
  --vault-radius: 18px;
  --vault-radius-lg: 30px;
  --vault-page: min(1240px, calc(100vw - 48px));
  --vault-ease: cubic-bezier(.2, .7, .2, 1);

  --linen-texture:
    linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    repeating-linear-gradient(102deg, rgba(59,50,39,.025) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(12deg, rgba(255,255,255,.10) 0 1px, transparent 1px 5px);

  --paper-texture:
    radial-gradient(circle at 20% 10%, rgba(111,91,63,.045) 0 1px, transparent 1.6px),
    radial-gradient(circle at 80% 70%, rgba(111,91,63,.035) 0 1px, transparent 1.4px),
    linear-gradient(115deg, rgba(255,255,255,.28), transparent 38%);

  --leather-texture:
    radial-gradient(circle at 25% 35%, rgba(255,255,255,.035) 0 1px, transparent 1.5px),
    radial-gradient(circle at 75% 65%, rgba(0,0,0,.15) 0 1px, transparent 1.7px),
    repeating-linear-gradient(125deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, #332f29 0%, #201e1a 48%, #2b2822 100%);
}

html {
  scroll-padding-top: 86px;
  background: var(--vault-black);
}

body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -10%, rgba(179,154,104,.15), transparent 34rem),
    var(--vault-black);
  color: var(--vault-ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::selection {
  background: var(--vault-brass-light);
  color: var(--vault-ink);
}

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

button,
a,
input {
  -webkit-tap-highlight-color: transparent;
}

button,
a {
  transition:
    color .28s var(--vault-ease),
    background-color .28s var(--vault-ease),
    border-color .28s var(--vault-ease),
    transform .28s var(--vault-ease),
    box-shadow .28s var(--vault-ease),
    opacity .28s var(--vault-ease);
}

:focus-visible {
  outline: 2px solid var(--vault-brass);
  outline-offset: 5px;
}

.grain {
  opacity: .055;
  mix-blend-mode: soft-light;
}

/* ------------------------- INTRO CINEMA ------------------------- */

.cinema-intro {
  background: #050505;
}

.cinema-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.66), transparent 48%, rgba(0,0,0,.18)),
    linear-gradient(0deg, rgba(0,0,0,.72), transparent 42%);
}

.intro-broll {
  filter: saturate(.72) contrast(1.06) brightness(.76) sepia(.10);
}

.intro-copy {
  z-index: 5;
  width: min(780px, 88vw);
}

.intro-copy h1 {
  max-width: 850px;
  margin: .18em 0 .24em;
  font-family: var(--serif);
  font-size: clamp(4.5rem, 10.2vw, 10.5rem);
  font-weight: 400;
  line-height: .72;
  letter-spacing: -.062em;
  text-wrap: balance;
}

.intro-copy > p:not(.eyebrow) {
  max-width: 580px;
  font-size: clamp(.98rem, 1.35vw, 1.18rem);
  color: rgba(255,255,255,.82);
}

.open-story {
  position: relative;
  overflow: hidden;
  min-height: 54px;
  margin-top: 1.75rem;
  padding: 0 1.45rem;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  color: #fff;
  background: rgba(15,15,14,.22);
  backdrop-filter: blur(10px);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.open-story::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--vault-white);
  transform: translateX(-104%);
  transition: transform .38s var(--vault-ease);
}

.open-story:hover {
  color: var(--vault-ink);
  border-color: var(--vault-white);
  transform: translateY(-2px);
}

.open-story:hover::before {
  transform: translateX(0);
}

.open-story i {
  margin-left: 1rem;
  font-style: normal;
}

.sound-toggle {
  z-index: 6;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(10,10,10,.26);
  backdrop-filter: blur(8px);
}

.intro-credit {
  z-index: 6;
  letter-spacing: .24em;
}

/* ------------------------- ACCESS GATE / LEATHER BOOK ------------------------- */

.gate {
  background:
    var(--linen-texture),
    linear-gradient(120deg, #e8e0d2, #f4efe6 52%, #ddd3c4);
  background-size: 8px 8px, 11px 11px, auto, auto, auto;
}

.gate::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 140px rgba(63,51,37,.12);
}

.book-stage {
  perspective: 1800px;
}

.book-shell {
  filter: drop-shadow(0 40px 40px rgba(37,29,21,.25));
}

.book-cover {
  background: var(--leather-texture);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.3),
    inset 0 0 40px rgba(0,0,0,.32),
    0 30px 80px rgba(29,23,18,.28);
}

.book-cover::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(210,190,148,.34);
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.08);
  pointer-events: none;
}

.cover-image {
  filter: grayscale(.14) sepia(.15) saturate(.80) contrast(1.04) brightness(.77);
}

.cover-shade {
  background:
    linear-gradient(0deg, rgba(8,8,7,.78), transparent 64%),
    linear-gradient(90deg, rgba(10,9,8,.42), transparent 55%);
}

.cover-copy h2 {
  font-size: clamp(3rem, 5.4vw, 5.6rem);
  line-height: .77;
  letter-spacing: -.045em;
}

.cover-copy .eyebrow,
.gate-panel .eyebrow {
  color: var(--vault-brass-light);
}

.inside-page,
.gate-panel {
  background:
    var(--paper-texture),
    linear-gradient(135deg, #f7f2e9, #eee7dc);
  background-size: 34px 34px, 42px 42px, auto;
}

.gate-panel {
  position: relative;
}

.gate-panel::after {
  content: "PRIVATE CLIENT EDITION";
  position: absolute;
  right: 2.5rem;
  bottom: 2rem;
  color: rgba(23,23,20,.30);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .28em;
  writing-mode: vertical-rl;
}

.access-row {
  gap: .8rem;
  align-items: center;
  border: 0;
}

.access-row input {
  min-width: 0;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(23,23,20,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  font-family: var(--sans);
  text-transform: lowercase;
}

.access-row button {
  min-height: 52px;
  padding: 0 1.25rem;
  border-radius: 999px;
  background: var(--vault-ink);
  color: var(--vault-white);
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.access-row button:hover {
  background: var(--vault-olive);
  transform: translateY(-2px);
  box-shadow: var(--vault-shadow-sm);
}

/* ------------------------- HEADER ------------------------- */

.site-header {
  min-height: 72px;
  padding: .8rem clamp(1rem, 3vw, 3rem);
  gap: clamp(1rem, 2.2vw, 2rem);
  background: rgba(244,239,230,.86);
  border-bottom: 1px solid rgba(23,23,20,.11);
  box-shadow: 0 8px 30px rgba(28,24,20,.04);
  backdrop-filter: blur(18px) saturate(1.15);
}

.brand {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: 1.36rem;
  font-weight: 500;
  letter-spacing: -.02em;
}

.brand span {
  width: 35px;
  height: 35px;
  margin-right: .72rem;
  border-color: rgba(23,23,20,.54);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.site-header nav {
  gap: clamp(.8rem, 1.4vw, 1.5rem);
}

.site-header nav a,
.print-button,
.menu-toggle {
  position: relative;
  font-size: .61rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.site-header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -.42rem;
  height: 1px;
  background: currentColor;
  transition: right .3s var(--vault-ease);
}

.site-header nav a:hover::after {
  right: 0;
}

.print-button {
  margin-left: auto;
  padding: .72rem 1rem;
  border: 1px solid rgba(23,23,20,.34);
  border-radius: 999px;
  background: transparent;
}

.print-button:hover {
  background: var(--vault-ink);
  color: var(--vault-white);
  border-color: var(--vault-ink);
}

/* ------------------------- HERO ------------------------- */

.hero {
  min-height: calc(100svh - 72px);
  background: var(--vault-ink);
}

.hero img {
  filter: saturate(.74) contrast(1.06) brightness(.79) sepia(.09);
  transform: scale(1.002);
}

.hero-wash {
  background:
    linear-gradient(90deg, rgba(10,11,8,.76) 0%, rgba(10,11,8,.28) 52%, rgba(10,11,8,.08) 100%),
    linear-gradient(0deg, rgba(9,10,8,.74), transparent 58%);
}

.hero-copy {
  left: clamp(1.5rem, 6vw, 6rem);
  bottom: clamp(3.2rem, 8vw, 7rem);
  width: min(720px, calc(100vw - 3rem));
}

.hero-copy h1 {
  margin: .32em 0 .24em;
  font-size: clamp(4.4rem, 8.8vw, 9rem);
  line-height: .72;
  letter-spacing: -.058em;
  text-shadow: 0 6px 35px rgba(0,0,0,.18);
}

.hero-copy > p:not(.eyebrow) {
  max-width: 620px;
  color: rgba(255,255,255,.85);
  font-size: clamp(.98rem, 1.3vw, 1.15rem);
}

.hero .text-link {
  display: inline-flex;
  align-items: center;
  margin-top: 1.55rem;
  padding-bottom: .36rem;
  border-bottom: 1px solid rgba(255,255,255,.64);
  color: #fff;
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hero .text-link:hover {
  transform: translateX(5px);
}

.film-mark {
  color: rgba(255,255,255,.76);
  letter-spacing: .24em;
}

/* ------------------------- SURFACE TEXTURES ------------------------- */

.paper,
.cream {
  position: relative;
  isolation: isolate;
}

.paper {
  background:
    var(--paper-texture),
    var(--vault-paper);
  background-size: 35px 35px, 47px 47px, auto;
}

.cream {
  background:
    var(--linen-texture),
    linear-gradient(135deg, var(--vault-linen), #f3eee5);
  background-size: 9px 9px, 12px 12px, auto, auto, auto;
}

.paper::after,
.cream::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  box-shadow: inset 0 0 110px rgba(76,61,42,.055);
}

.dark {
  position: relative;
  isolation: isolate;
  background: var(--leather-texture);
  color: var(--vault-white);
}

.dark::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: -1;
  border: 1px solid rgba(211,192,150,.16);
  pointer-events: none;
}

/* ------------------------- TYPOGRAPHY ------------------------- */

.eyebrow,
.chapter-number,
.kicker,
.vault-tool-status {
  color: var(--vault-olive);
  font-size: .64rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.light {
  color: rgba(255,255,255,.72) !important;
}

h2,
h3,
blockquote {
  text-wrap: balance;
}

h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.038em;
}

p {
  text-wrap: pretty;
}

/* ------------------------- DASHBOARD ------------------------- */

.vault-dashboard {
  padding: clamp(5rem, 9vw, 9rem) max(24px, calc((100vw - 1240px) / 2));
}

.vault-dashboard-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  column-gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
  margin-bottom: clamp(3rem, 5vw, 5rem);
}

.vault-dashboard-intro .eyebrow,
.vault-dashboard-intro h2,
.vault-dashboard-intro > p {
  grid-column: 1;
}

.vault-dashboard-intro h2 {
  max-width: 800px;
  margin: .38rem 0 1rem;
  font-size: clamp(3.4rem, 6.5vw, 6.9rem);
  line-height: .84;
}

.vault-dashboard-intro h2 em {
  color: var(--vault-olive);
  font-weight: 400;
}

.vault-dashboard-intro > p {
  max-width: 660px;
  margin: 0;
  color: rgba(23,23,20,.68);
  font-size: clamp(.98rem, 1.15vw, 1.08rem);
}

.vault-progress {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 210px;
  padding: 1.7rem;
  border: 1px solid rgba(23,23,20,.12);
  border-radius: var(--vault-radius);
  background:
    linear-gradient(145deg, rgba(255,255,255,.65), rgba(235,228,215,.48));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    var(--vault-shadow-sm);
}

.vault-progress::before {
  content: "YOUR WEDDING · IN MOTION";
  margin-bottom: auto;
  color: rgba(23,23,20,.36);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .20em;
}

.vault-progress-copy {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vault-progress-copy strong {
  font-weight: 500;
}

.vault-progress-track {
  overflow: hidden;
  height: 7px;
  border-radius: 99px;
  background: rgba(23,23,20,.10);
}

.vault-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--vault-olive), var(--vault-brass));
  box-shadow: 0 0 16px rgba(179,154,104,.35);
  transition: width 1s var(--vault-ease);
}

.vault-tool-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.vault-tool-card {
  position: relative;
  overflow: hidden;
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  min-height: 370px;
  padding: clamp(1.4rem, 2.4vw, 2.2rem);
  border: 1px solid rgba(23,23,20,.13);
  border-radius: var(--vault-radius);
  color: var(--vault-ink);
  text-decoration: none;
  background:
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(235,228,215,.65));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 12px 35px rgba(35,29,22,.06);
}

.vault-tool-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 85% 10%, rgba(179,154,104,.20), transparent 32%),
    linear-gradient(145deg, transparent, rgba(255,255,255,.65));
  transition: opacity .35s var(--vault-ease);
}

.vault-tool-card::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -42px;
  width: 130px;
  height: 130px;
  border: 1px solid rgba(23,23,20,.08);
  border-radius: 50%;
}

.vault-tool-card:hover {
  transform: translateY(-7px);
  border-color: rgba(23,23,20,.22);
  box-shadow: var(--vault-shadow-md);
}

.vault-tool-card:hover::before {
  opacity: 1;
}

.vault-tool-card.featured {
  grid-column: span 8;
  color: var(--vault-white);
  background:
    radial-gradient(circle at 80% 20%, rgba(179,154,104,.18), transparent 34%),
    var(--leather-texture);
  box-shadow: var(--vault-shadow-md);
}

.vault-tool-card.featured::after {
  width: 220px;
  height: 220px;
  border-color: rgba(255,255,255,.08);
}

.vault-tool-number {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: auto;
  border: 1px solid rgba(23,23,20,.16);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1.05rem;
}

.featured .vault-tool-number {
  border-color: rgba(255,255,255,.28);
}

.vault-tool-status {
  position: relative;
  z-index: 1;
  margin: 2.5rem 0 .45rem;
}

.featured .vault-tool-status {
  color: var(--vault-brass-light);
}

.vault-tool-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 .8rem;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 3.4vw, 3.5rem);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.035em;
}

.vault-tool-card > p:not(.vault-tool-status) {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 0 0 1.5rem;
  color: rgba(23,23,20,.65);
}

.featured > p:not(.vault-tool-status) {
  color: rgba(255,255,255,.68);
}

.vault-tool-link {
  position: relative;
  z-index: 1;
  margin-top: auto;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.vault-tool-card:hover .vault-tool-link {
  transform: translateX(4px);
}

/* ------------------------- PREVIEW PANELS ------------------------- */

.vault-preview-section {
  min-height: 68vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
  gap: clamp(3rem, 9vw, 9rem);
  align-items: center;
  padding: clamp(5rem, 10vw, 10rem) max(24px, calc((100vw - 1240px) / 2));
}

.vault-preview-copy h2 {
  margin: .3rem 0 1rem;
  font-size: clamp(3.8rem, 7.2vw, 7.6rem);
  line-height: .82;
}

.vault-preview-copy p:not(.eyebrow) {
  max-width: 660px;
  color: rgba(23,23,20,.68);
}

.dark .vault-preview-copy p:not(.eyebrow) {
  color: rgba(255,255,255,.66);
}

.vault-preview-list {
  border-top: 1px solid var(--vault-line);
}

.dark .vault-preview-list {
  border-color: var(--vault-line-light);
}

.vault-preview-list span {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: .8rem 2.5rem .8rem 0;
  border-bottom: 1px solid var(--vault-line);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  line-height: 1.1;
}

.dark .vault-preview-list span {
  border-color: var(--vault-line-light);
}

.vault-preview-list span::after {
  content: "↗";
  position: absolute;
  right: 0;
  color: var(--vault-brass);
  font-family: var(--sans);
  font-size: .92rem;
}

/* ------------------------- QUOTE / EDITORIAL ------------------------- */

.quote-page {
  min-height: 80vh;
  padding: clamp(6rem, 12vw, 12rem) 7vw;
}

.quote-page blockquote {
  max-width: 1050px;
  font-size: clamp(3.4rem, 7vw, 7.5rem);
  line-height: .84;
  letter-spacing: -.048em;
}

.scribble,
.signature {
  color: var(--vault-olive);
  font-family: var(--hand);
}

.editorial-grid {
  gap: clamp(3rem, 8vw, 8rem);
  padding: clamp(5rem, 10vw, 10rem) max(24px, calc((100vw - 1240px) / 2));
}

.letter {
  max-width: 690px;
}

.letter h2 {
  margin: .25rem 0 1.4rem;
  font-size: clamp(3.5rem, 6vw, 6.5rem);
  line-height: .86;
}

.letter > p:not(.chapter-number):not(.signature) {
  color: rgba(23,23,20,.72);
  font-size: clamp(.98rem, 1.13vw, 1.08rem);
}

.signature {
  margin-top: 2.1rem;
  font-size: 2.2rem;
}

/* ------------------------- REAL POLAROID / INSTAX OVERLAYS ------------------------- */

.polaroid-stack {
  min-height: clamp(520px, 62vw, 760px);
  isolation: isolate;
}

.polaroid {
  position: absolute;
  overflow: visible;
  width: min(360px, 73%);
  aspect-ratio: 1448 / 2048;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 24px 26px rgba(32,25,18,.24));
}

.polaroid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--frame-image) center / 100% 100% no-repeat;
}

.polaroid img {
  position: absolute;
  z-index: 1;
  left: var(--photo-left, 14%);
  top: var(--photo-top, 9%);
  width: var(--photo-width, 72%);
  height: var(--photo-height, 67%);
  object-fit: cover;
  filter: saturate(.78) contrast(1.03) sepia(.07);
}

.polaroid figcaption {
  position: absolute;
  z-index: 4;
  left: 13%;
  right: 13%;
  bottom: 8.5%;
  color: rgba(28,26,22,.72);
  font-family: var(--hand);
  font-size: clamp(1.05rem, 1.8vw, 1.42rem);
  line-height: 1;
  text-align: center;
  transform: rotate(-1deg);
}

.polaroid.p1 {
  --frame-image: url("images/frames/1.png");
  --photo-left: 14.5%;
  --photo-top: 8.6%;
  --photo-width: 71.5%;
  --photo-height: 67.2%;
  z-index: 2;
  left: 3%;
  top: 6%;
  transform: rotate(-5deg);
}

.polaroid.p2 {
  --frame-image: url("images/frames/2.png");
  --photo-left: 15.8%;
  --photo-top: 13.2%;
  --photo-width: 68.2%;
  --photo-height: 49.6%;
  z-index: 3;
  right: 2%;
  bottom: 3%;
  transform: rotate(5deg);
}

.polaroid.p3 {
  --frame-image: url("images/frames/4.png");
  --photo-left: 14.7%;
  --photo-top: 15.7%;
  --photo-width: 70.8%;
  --photo-height: 58.8%;
  z-index: 3;
  left: 2%;
  top: 4%;
  transform: rotate(-4deg);
}

.polaroid.p4 {
  --frame-image: url("images/frames/7.png");
  --photo-left: 15.9%;
  --photo-top: 11.6%;
  --photo-width: 68.3%;
  --photo-height: 55.5%;
  z-index: 2;
  right: 1%;
  bottom: 2%;
  transform: rotate(5.5deg);
}

.polaroid:hover {
  z-index: 8;
  transform: rotate(0deg) translateY(-8px) scale(1.025);
  filter: drop-shadow(0 34px 34px rgba(32,25,18,.30));
}

.tape {
  z-index: 9;
  width: 110px;
  height: 31px;
  background:
    linear-gradient(90deg, rgba(220,207,169,.62), rgba(236,224,187,.82)),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(255,255,255,.12) 5px 6px);
  box-shadow: 0 2px 6px rgba(51,40,27,.12);
  opacity: .82;
}

/* Reusable frame classes for future photographs */
.photo-frame {
  position: relative;
  display: inline-block;
  width: min(420px, 100%);
  aspect-ratio: 1448 / 2048;
  filter: drop-shadow(0 26px 28px rgba(32,25,18,.22));
}

.photo-frame > img {
  position: absolute;
  left: 15%;
  top: 10%;
  width: 70%;
  height: 65%;
  object-fit: cover;
}

.photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--frame-image, url("images/frames/1.png")) center / 100% 100% no-repeat;
  pointer-events: none;
}

.frame-01 { --frame-image: url("images/frames/1.png"); }
.frame-02 { --frame-image: url("images/frames/2.png"); }
.frame-03 { --frame-image: url("images/frames/3.png"); }
.frame-04 { --frame-image: url("images/frames/4.png"); }
.frame-05 { --frame-image: url("images/frames/5.png"); }
.frame-06 { --frame-image: url("images/frames/6.png"); }
.frame-07 { --frame-image: url("images/frames/7.png"); }
.frame-08 { --frame-image: url("images/frames/8.png"); }
.frame-09 { --frame-image: url("images/frames/9.png"); }
.frame-10 { --frame-image: url("images/frames/10.png"); }

/* ------------------------- CONTENTS / LEATHER ------------------------- */

.contents {
  padding: clamp(5rem, 10vw, 10rem) max(24px, calc((100vw - 1240px) / 2));
}

.contents h2 {
  font-size: clamp(4rem, 7vw, 7.6rem);
  line-height: .80;
}

.contents ol {
  border-top-color: rgba(255,255,255,.18);
}

.contents li {
  border-bottom-color: rgba(255,255,255,.16);
}

.contents a {
  padding-block: 1rem;
}

.contents a:hover {
  color: var(--vault-brass-light);
  padding-left: .5rem;
}

/* ------------------------- CONTACT SHEET / FILM ------------------------- */

.contact-sheet {
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent),
    #0a0a09;
  border-block: 1px solid rgba(255,255,255,.10);
}

.frames {
  gap: clamp(.7rem, 1.4vw, 1.3rem);
}

.frames img {
  border-radius: 2px;
  filter: saturate(.72) contrast(1.08) sepia(.08);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}

.frames img:hover {
  filter: saturate(.92) contrast(1.05);
  transform: translateY(-4px);
}

.film-edge {
  color: rgba(255,220,137,.72);
  letter-spacing: .24em;
}

/* ------------------------- SPLIT FEATURES / ADVICE ------------------------- */

.split-feature,
.tip-spread,
.film-story,
.finale {
  padding-block: clamp(5rem, 9vw, 9rem);
}

.split-image img,
.tip-spread img,
.film-story img {
  border-radius: 2px;
  box-shadow: var(--vault-shadow-md);
  filter: saturate(.82) contrast(1.04) sepia(.06);
}

.split-copy h2,
.advice-copy h2,
.film-copy h2,
.finale h2 {
  font-size: clamp(3.5rem, 6vw, 6.5rem);
  line-height: .84;
}

.tip,
.advice {
  border-color: rgba(23,23,20,.18);
  background: rgba(255,255,255,.30);
  backdrop-filter: blur(3px);
}

.tip {
  border-radius: var(--vault-radius-sm);
}

.timeline-list li {
  border-bottom-color: rgba(23,23,20,.14);
}

.timeline-list li::before {
  color: var(--vault-brass);
}

/* ------------------------- ANIMATIONS ------------------------- */

.chapter-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .85s var(--vault-ease),
    transform .85s var(--vault-ease);
}

.chapter-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero img {
    animation: vaultHeroDrift 18s ease-in-out infinite alternate;
  }

  @keyframes vaultHeroDrift {
    from { transform: scale(1.002) translate3d(0, 0, 0); }
    to { transform: scale(1.045) translate3d(-.7%, -.4%, 0); }
  }
}

/* ------------------------- RESPONSIVE ------------------------- */

@media (max-width: 1080px) {
  .site-header nav {
    gap: .82rem;
  }

  .site-header nav a {
    font-size: .55rem;
    letter-spacing: .11em;
  }

  .vault-tool-card {
    grid-column: span 6;
  }

  .vault-tool-card.featured {
    grid-column: span 12;
  }
}

@media (max-width: 860px) {
  html {
    scroll-padding-top: 68px;
  }

  .site-header {
    min-height: 66px;
  }

  .print-button {
    display: none;
  }

  .vault-dashboard-intro {
    grid-template-columns: 1fr;
  }

  .vault-progress {
    grid-column: 1;
    grid-row: auto;
    min-height: 170px;
    margin-top: 1.5rem;
  }

  .vault-preview-section {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .polaroid-stack {
    min-height: 620px;
  }
}

@media (max-width: 680px) {
  :root {
    --vault-page: calc(100vw - 30px);
  }

  body {
    font-size: 15px;
  }

  .intro-copy h1,
  .hero-copy h1 {
    letter-spacing: -.045em;
  }

  .gate-panel::after {
    display: none;
  }

  .access-row {
    align-items: stretch;
    flex-direction: column;
  }

  .access-row button {
    width: 100%;
  }

  .site-header {
    padding-inline: 1rem;
  }

  .brand {
    font-size: 1.18rem;
  }

  .brand span {
    width: 31px;
    height: 31px;
  }

  .hero {
    min-height: 86svh;
  }

  .hero-copy {
    bottom: 2.5rem;
  }

  .vault-dashboard,
  .vault-preview-section,
  .editorial-grid,
  .contents {
    padding-inline: 1.2rem;
  }

  .vault-dashboard-intro h2 {
    font-size: clamp(3.1rem, 15vw, 5rem);
  }

  .vault-tool-grid {
    display: flex;
    flex-direction: column;
  }

  .vault-tool-card,
  .vault-tool-card.featured {
    min-height: 330px;
  }

  .vault-preview-copy h2 {
    font-size: clamp(3.3rem, 15vw, 5.4rem);
  }

  .quote-page {
    min-height: 70vh;
    padding-inline: 1.2rem;
  }

  .quote-page blockquote {
    font-size: clamp(3rem, 14vw, 5rem);
  }

  .editorial-grid {
    gap: 2.5rem;
  }

  .polaroid-stack {
    min-height: 540px;
  }

  .polaroid {
    width: 76%;
  }

  .polaroid figcaption {
    font-size: 1.05rem;
  }
}

/* ------------------------- PRINT ------------------------- */

@media print {
  .cinema-intro,
  .gate,
  .site-header,
  .grain,
  .sound-toggle,
  .vault-dashboard,
  .vault-preview-section {
    display: none !important;
  }

  body {
    background: #fff;
    color: #111;
  }

  .book {
    height: auto !important;
    overflow: visible !important;
  }

  .paper,
  .cream,
  .dark {
    background: #fff !important;
    color: #111 !important;
  }

  .chapter-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .polaroid,
  .split-image img,
  .frames img {
    break-inside: avoid;
    filter: none;
  }
}

/* =========================================================
   V2.0 HOTFIX — LOGIN BOOK COVER + PERSONALIZED DASHBOARD
   ========================================================= */

/* Keep the photographic cover visible above the leather base. */
.book-cover {
  isolation: isolate;
  overflow: hidden;
}

.book-cover::before {
  z-index: 4;
}

.cover-image {
  z-index: 1;
  display: block;
  opacity: 1;
  visibility: visible;
  background-color: #25221e;
  background-image: url("images/river.jpg") !important;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.cover-shade {
  z-index: 2;
}

.cover-copy,
.cover-spine {
  z-index: 5;
}

/* Prevent the inside page from covering the closed book. */
.inside-page {
  z-index: 1;
}

.book-cover {
  z-index: 3;
}

/* The personalized names should retain the editorial emphasis. */
#dashboardCoupleNames {
  display: inline;
  font-family: var(--serif);
  font-weight: 400;
}

/* =========================================================
   V2.1 FIX — KEEP A PHOTOGRAPHIC BOOK PAGE VISIBLE AT LOGIN
   The hardcover opens, then the photo remains on the left page
   while the access form stays on the right page.
   ========================================================= */

.inside-page {
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background:
    linear-gradient(90deg, rgba(255,255,255,.10), transparent 46%, rgba(0,0,0,.04) 50%, transparent 54%),
    var(--paper);
}

/* Left-hand photographic page after the cover opens */
.inside-page::before {
  content: "";
  position: absolute;
  inset: 0 50% 0 0;
  z-index: 0;
  display: block;
  background:
    linear-gradient(0deg, rgba(15,14,12,.40), rgba(15,14,12,.04) 58%),
    url("images/river.jpg") center center / cover no-repeat;
  box-shadow:
    inset -28px 0 40px rgba(0,0,0,.16),
    inset 0 0 0 1px rgba(255,255,255,.12);
}

/* Subtle linen mat around the photograph */
.inside-page::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 3;
  width: 36px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.18),
    rgba(0,0,0,.12),
    rgba(255,255,255,.22)
  );
  box-shadow: 0 0 26px rgba(0,0,0,.10);
  pointer-events: none;
}

.gate-panel {
  position: relative;
  z-index: 4;
  grid-column: 2;
  width: 100%;
  height: 100%;
  margin-left: 0;
}

/* Once the animated cover has opened, keep the left photo page visible. */
.book-shell.cover-opened .book-cover {
  display: none !important;
}

@media (max-width: 900px) {
  .inside-page {
    display: block;
  }

  .inside-page::before {
    inset: 0;
    opacity: .16;
    filter: saturate(.7);
  }

  .inside-page::after {
    display: none;
  }

  .gate-panel {
    width: 100%;
    min-height: 100%;
    padding: 12vw 9vw;
    background: rgba(250,247,241,.91);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
}

/* =========================================================
   V2.2 — LUXURY LEATHER-BOUND LOGIN BOOK
   Creates a true album cover around the open photo + login pages.
   ========================================================= */

:root {
  --vault-leather: #2b2119;
  --vault-leather-deep: #17110d;
  --vault-leather-warm: #4a3828;
  --vault-stitch: rgba(215, 190, 146, 0.50);
}

.book-stage {
  width: min(94vw, 1240px);
  height: min(84vh, 790px);
  filter: drop-shadow(0 42px 55px rgba(28, 21, 15, 0.34));
}

/* The leather album itself */
.book-shell {
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.055) 0 1px, transparent 1.8px),
    radial-gradient(circle at 74% 68%, rgba(0,0,0,.12) 0 1px, transparent 2px),
    repeating-linear-gradient(112deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, var(--vault-leather-warm), var(--vault-leather) 42%, var(--vault-leather-deep));
  background-size: 9px 9px, 13px 13px, auto, auto;
  box-shadow:
    0 52px 110px rgba(20, 14, 10, .48),
    0 12px 28px rgba(20, 14, 10, .24),
    inset 0 1px 1px rgba(255,255,255,.16),
    inset 0 -2px 3px rgba(0,0,0,.46),
    inset 0 0 0 2px rgba(12,8,6,.54),
    inset 0 0 0 10px rgba(255,255,255,.025);
}

/* Fine stitched border around the leather cover */
.book-shell::before {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 13px;
  border: 1px dashed var(--vault-stitch);
  border-radius: 11px;
  opacity: .82;
  pointer-events: none;
}

/* Slight raised rim, like a hand-bound album */
.book-shell::after {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 22px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 7px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.26),
    0 1px 0 rgba(255,255,255,.05);
  pointer-events: none;
}

/* Pages sit inside the leather cover rather than touching the outer edge */
.inside-page {
  inset: 30px 34px 34px;
  border-radius: 3px 3px 7px 7px;
  box-shadow:
    0 18px 42px rgba(0,0,0,.30),
    0 3px 7px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(118,101,78,.15);
}

/* Realistic page block visible along the bottom and outside edges */
.inside-page {
  border-bottom: 8px solid #d8d0c2;
  border-right: 6px solid #e4ded3;
}

/* Deepen the central album gutter */
.inside-page::after {
  width: 50px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.22) 0%,
      rgba(91,69,48,.10) 20%,
      rgba(28,20,14,.30) 47%,
      rgba(12,8,6,.36) 50%,
      rgba(28,20,14,.24) 53%,
      rgba(255,255,255,.16) 82%,
      transparent 100%);
  box-shadow: 0 0 34px rgba(25,17,11,.18);
}

/* Left photo page gets a fine album mat instead of full-bleed to the leather */
.inside-page::before {
  inset: 18px calc(50% + 18px) 18px 18px;
  border-radius: 1px;
  box-shadow:
    inset -28px 0 40px rgba(0,0,0,.16),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 0 0 9px #eee8de,
    0 0 0 10px rgba(106,89,67,.20),
    0 9px 20px rgba(38,28,19,.18);
}

.gate-panel {
  padding: clamp(42px, 5.2vw, 82px);
}

/* Closed cover: leather border with an inset photographic panel */
.book-cover {
  inset: 0 50% 0 0;
  border-radius: 18px 0 0 18px;
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    repeating-linear-gradient(108deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, var(--vault-leather-warm), var(--vault-leather) 45%, var(--vault-leather-deep));
  box-shadow:
    18px 30px 70px rgba(0,0,0,.50),
    inset 0 0 0 2px rgba(10,7,5,.48),
    inset 0 0 0 12px rgba(255,255,255,.025);
}

.book-cover::before {
  inset: 14px;
  border: 1px dashed var(--vault-stitch);
  border-radius: 11px 0 0 11px;
  background: none;
  box-shadow: none;
}

.cover-image,
.cover-shade {
  inset: 28px 30px 30px 34px;
  border-radius: 2px;
}

.cover-image {
  box-shadow:
    0 0 0 7px rgba(230,220,204,.92),
    0 0 0 8px rgba(30,22,16,.45),
    0 16px 34px rgba(0,0,0,.36);
}

.cover-shade {
  overflow: hidden;
}

.cover-copy {
  right: 11%;
  bottom: 11%;
  left: 13%;
}

.cover-spine {
  width: 24px;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.42),
      rgba(255,255,255,.08) 40%,
      rgba(0,0,0,.36));
  box-shadow: inset 1px 0 rgba(255,255,255,.08), -8px 0 14px rgba(0,0,0,.18);
}

/* Right page gains a fine printed-paper edge */
.gate-panel::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: -1;
  border: 1px solid rgba(125,105,78,.08);
  pointer-events: none;
}

@media (max-width: 900px) {
  .book-stage {
    width: min(94vw, 680px);
    height: min(84vh, 820px);
  }

  .book-shell {
    border-radius: 14px;
  }

  .book-shell::before {
    inset: 9px;
    border-radius: 9px;
  }

  .book-shell::after {
    inset: 17px;
  }

  .inside-page {
    inset: 22px 24px 27px;
    border-right-width: 4px;
    border-bottom-width: 6px;
  }

  .inside-page::before {
    inset: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .gate-panel {
    min-height: 100%;
    padding: 12vw 9vw;
    border-radius: 2px;
  }

  .book-cover {
    inset: 0;
    border-radius: 14px;
  }

  .cover-image,
  .cover-shade {
    inset: 24px;
  }
}

/* =========================================================
   V2.3 — WEATHERED ARCHIVAL PAPER
   Removes the visible square/grid pattern from the login page
   and replaces it with soft, naturally aged album paper.
   ========================================================= */

.inside-page,
.gate-panel {
  background-color: #f1eadf !important;
  background-image:
    radial-gradient(ellipse at 14% 10%, rgba(126, 92, 52, .055) 0%, transparent 34%),
    radial-gradient(ellipse at 88% 84%, rgba(115, 82, 47, .045) 0%, transparent 36%),
    radial-gradient(circle at 24% 72%, rgba(96, 72, 44, .035) 0 1px, transparent 1.8px),
    radial-gradient(circle at 69% 30%, rgba(96, 72, 44, .028) 0 1px, transparent 1.7px),
    linear-gradient(108deg, rgba(255,255,255,.38), transparent 34%, rgba(115,86,51,.025) 72%, transparent),
    linear-gradient(180deg, #f7f2e9 0%, #f1eadf 54%, #ebe2d5 100%) !important;
  background-size:
    100% 100%,
    100% 100%,
    43px 47px,
    57px 53px,
    100% 100%,
    100% 100% !important;
  background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat !important;
}

/* Gentle age and handling marks around the right-page edges. */
.gate-panel {
  box-shadow:
    inset 18px 0 24px rgba(91, 68, 43, .045),
    inset -14px 0 24px rgba(91, 68, 43, .035),
    inset 0 14px 22px rgba(255,255,255,.24),
    inset 0 -18px 28px rgba(102, 75, 43, .05) !important;
}

/* Uneven archival edge, kept very subtle so text stays crisp. */
.gate-panel::before {
  border: 0 !important;
  background:
    linear-gradient(90deg, rgba(110,81,47,.05), transparent 5%, transparent 95%, rgba(110,81,47,.035)),
    linear-gradient(180deg, rgba(255,255,255,.20), transparent 8%, transparent 91%, rgba(105,77,45,.045));
  box-shadow: inset 0 0 0 1px rgba(125,105,78,.055);
}

/* =========================================================
   THE WEDDING VAULT v2.1 — TUCKED WELCOME LETTER
   ========================================================= */

.welcome-letter-spread {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(1180px, calc(100% - 48px));
  min-height: 720px;
  margin: clamp(80px, 10vw, 150px) auto;
  padding: 18px;
  border-radius: 24px;
  background:
    linear-gradient(110deg, rgba(255,255,255,.08), transparent 35%),
    radial-gradient(circle at 30% 20%, rgba(126,91,57,.22), transparent 30%),
    #32251d;
  box-shadow:
    0 38px 90px rgba(31, 22, 16, .28),
    0 8px 22px rgba(31, 22, 16, .22),
    inset 0 0 0 2px rgba(255,255,255,.06),
    inset 0 0 0 10px rgba(20,13,9,.22);
  isolation: isolate;
}

.welcome-letter-spread::before,
.welcome-letter-spread::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  border: 1px dashed rgba(210, 172, 123, .46);
  border-radius: 18px;
  pointer-events: none;
}

.welcome-letter-spread::after {
  inset: 13px;
  border-style: solid;
  border-color: rgba(16, 10, 7, .44);
}

.album-page {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: clamp(48px, 6vw, 86px);
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.68), transparent 23%),
    radial-gradient(circle at 82% 78%, rgba(138,109,76,.08), transparent 28%),
    repeating-radial-gradient(circle at 20% 20%, rgba(65,47,31,.025) 0 1px, transparent 1px 5px),
    linear-gradient(100deg, #f5efe3, #eee4d4 54%, #f6efe3);
  color: #29251f;
  box-shadow: inset 0 0 42px rgba(100, 77, 51, .14);
}

.album-page-left {
  border-radius: 10px 0 0 10px;
  border-right: 1px solid rgba(88, 67, 44, .16);
}

.album-page-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 0 10px 10px 0;
  border-left: 1px solid rgba(255,255,255,.65);
}

.album-page-left::after,
.album-page-right::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42px;
  pointer-events: none;
}

.album-page-left::after {
  right: 0;
  background: linear-gradient(to left, rgba(45,31,18,.18), rgba(45,31,18,.05) 45%, transparent);
}

.album-page-right::before {
  left: 0;
  background: linear-gradient(to right, rgba(45,31,18,.15), rgba(45,31,18,.045) 45%, transparent);
}

.page-fold {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 78%;
  height: 58%;
  clip-path: polygon(0 18%, 100% 100%, 0 100%);
  background:
    linear-gradient(145deg, rgba(255,255,255,.84), rgba(217,204,183,.7)),
    repeating-radial-gradient(circle at 20% 20%, rgba(69,50,30,.03) 0 1px, transparent 1px 5px);
  border-top: 1px solid rgba(94,70,43,.18);
  filter: drop-shadow(0 -12px 20px rgba(64,44,25,.13));
  pointer-events: none;
}

.letter-pocket {
  position: relative;
  width: min(390px, 84%);
  margin: 8% auto 0;
  padding-top: 64px;
  transform: rotate(-2.2deg);
}

.pocket-shadow {
  position: absolute;
  left: 5%;
  right: 3%;
  bottom: 4%;
  height: 38%;
  border-radius: 50%;
  background: rgba(55, 37, 21, .22);
  filter: blur(22px);
  transform: translateY(22px);
}

.tucked-envelope {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1.48 / 1;
  padding: 22px;
  border: 0;
  border-radius: 3px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.8), transparent 28%),
    repeating-radial-gradient(circle at 15% 20%, rgba(69,50,30,.03) 0 1px, transparent 1px 5px),
    #e7dccb;
  color: #30281f;
  cursor: pointer;
  box-shadow:
    0 24px 38px rgba(66, 45, 25, .22),
    0 5px 10px rgba(66, 45, 25, .12),
    inset 0 0 0 1px rgba(87,64,40,.14);
  transform: translateY(31%);
  transition: transform .65s cubic-bezier(.2,.75,.15,1), box-shadow .4s ease;
}

.tucked-envelope:hover,
.tucked-envelope:focus-visible {
  transform: translateY(18%) rotate(.6deg);
  box-shadow:
    0 34px 48px rgba(66, 45, 25, .26),
    0 9px 18px rgba(66, 45, 25, .15),
    inset 0 0 0 1px rgba(87,64,40,.18);
}

.envelope-flap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.envelope-flap::before,
.envelope-flap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 71%;
  height: 71%;
  border: 1px solid rgba(92,68,42,.15);
  transform: rotate(45deg);
}

.envelope-flap::before {
  top: -47%;
  background: linear-gradient(135deg, rgba(255,255,255,.28), rgba(190,172,146,.08));
}

.envelope-flap::after {
  bottom: -49%;
  background: linear-gradient(315deg, rgba(255,255,255,.16), rgba(190,172,146,.05));
}

.wax-seal {
  position: absolute;
  top: 49%;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.28), transparent 17%),
    radial-gradient(circle at 60% 66%, #6e2f2e, #4c1f20 62%, #321315);
  color: #d9bda0;
  font: 600 12px/1 Georgia, serif;
  letter-spacing: .12em;
  box-shadow:
    0 3px 7px rgba(40,16,15,.35),
    inset 0 0 0 2px rgba(255,255,255,.08),
    inset 0 0 0 6px rgba(40,16,15,.16);
}

.envelope-label {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 6px;
  margin-top: 60px;
  text-align: center;
}

.envelope-label small {
  font: 500 10px/1.2 Arial, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .62;
}

.envelope-label strong {
  font: italic 32px/1.05 Georgia, serif;
  font-weight: 400;
}

.envelope-label em {
  margin-top: 6px;
  font: 500 10px/1 Arial, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .52;
}

.album-margin-note {
  position: absolute;
  right: 9%;
  bottom: 9%;
  z-index: 3;
  width: min(240px, 55%);
  transform: rotate(2deg);
  color: rgba(47,39,31,.72);
}

.album-margin-note span {
  font: italic 29px/1 Georgia, serif;
}

.album-margin-note p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

.album-page-right h2 {
  max-width: 620px;
  margin: 18px 0 28px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(48px, 5.4vw, 84px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.045em;
}

.album-page-right > p:not(.eyebrow) {
  max-width: 590px;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.75;
}

.letter-open-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: #2d2923;
  font: 600 12px/1.2 Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}

.letter-open-link span {
  transition: transform .25s ease;
}

.letter-open-link:hover span {
  transform: translateX(5px);
}

.pressed-mark {
  position: absolute;
  right: 35px;
  bottom: 32px;
  transform: rotate(-90deg) translateX(100%);
  transform-origin: right bottom;
  font: 600 9px/1 Arial, sans-serif;
  letter-spacing: .24em;
  color: rgba(66,53,40,.35);
}

.letter-dialog {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 28px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .45s ease, visibility 0s linear .45s;
}

.letter-dialog.is-open {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.letter-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28,20,15,.74);
  backdrop-filter: blur(8px) saturate(.7);
}

.letter-stage {
  position: relative;
  z-index: 2;
  width: min(760px, 96vw);
  max-height: 92vh;
  perspective: 1400px;
}

.unfolded-letter {
  position: relative;
  overflow-y: auto;
  max-height: 88vh;
  padding: clamp(46px, 7vw, 90px);
  border: 1px solid rgba(82,61,38,.18);
  background:
    radial-gradient(circle at 15% 9%, rgba(255,255,255,.85), transparent 22%),
    radial-gradient(circle at 78% 86%, rgba(126,94,58,.08), transparent 28%),
    repeating-radial-gradient(circle at 20% 20%, rgba(68,48,28,.028) 0 1px, transparent 1px 5px),
    linear-gradient(100deg, #f8f1e5, #efe3cf 50%, #f7efe2);
  color: #302920;
  box-shadow:
    0 42px 100px rgba(17,11,7,.43),
    0 7px 20px rgba(17,11,7,.25),
    inset 0 0 50px rgba(110,82,48,.12);
  transform-origin: center top;
  transform: translateY(32px) scale(.92) rotateX(-8deg);
  opacity: 0;
}

.letter-dialog.is-open .unfolded-letter {
  animation: unfoldLetter .88s cubic-bezier(.19,.75,.22,1) forwards;
}

@keyframes unfoldLetter {
  0% { transform: translateY(50px) scale(.88) rotateX(-12deg); opacity: 0; }
  58% { transform: translateY(-6px) scale(1.015) rotateX(1deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotateX(0); opacity: 1; }
}

.letter-paper-fold {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(99,73,44,.12);
  box-shadow: 0 1px rgba(255,255,255,.5);
  pointer-events: none;
}

.fold-one { top: 33.33%; }
.fold-two { top: 66.66%; }

.letter-date {
  margin: 0 0 32px;
  font: 600 10px/1.3 Arial, sans-serif;
  letter-spacing: .23em;
  text-transform: uppercase;
  color: #8d765c;
}

.unfolded-letter h2 {
  margin: 0 0 32px;
  font: italic clamp(38px, 5vw, 60px)/1 Georgia, serif;
  font-weight: 400;
}

.unfolded-letter p {
  margin: 0 0 20px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.72;
}

.unfolded-letter em {
  font-style: italic;
}

.letter-signoff {
  margin-top: 38px !important;
}

.letter-signoff span,
.letter-signoff strong {
  display: block;
}

.letter-signoff span {
  margin-top: 28px;
  font-style: italic;
}

.letter-signoff strong {
  margin-top: 9px;
  font: italic 40px/1 Georgia, serif;
  font-weight: 400;
}

.letter-close {
  position: absolute;
  top: -38px;
  right: 0;
  z-index: 4;
  border: 0;
  background: transparent;
  color: #fff9ee;
  font: 600 10px/1 Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}

.begin-planning-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 16px 22px;
  border: 1px solid #2e2922;
  border-radius: 999px;
  background: #2e2922;
  color: #fff9ee;
  font: 600 10px/1 Arial, sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.begin-planning-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(44,34,24,.18);
}

body.letter-open {
  overflow: hidden;
}

body.just-unlocked .welcome-letter-spread {
  animation: albumPageArrival 1s cubic-bezier(.2,.75,.15,1) both;
}

@keyframes albumPageArrival {
  0% { opacity: 0; transform: perspective(1600px) rotateY(-8deg) translateY(36px) scale(.97); }
  100% { opacity: 1; transform: perspective(1600px) rotateY(0) translateY(0) scale(1); }
}

@media (max-width: 900px) {
  .welcome-letter-spread {
    grid-template-columns: 1fr;
    width: min(720px, calc(100% - 24px));
    min-height: 0;
    padding: 12px;
  }

  .album-page {
    padding: 48px 28px;
  }

  .album-page-left,
  .album-page-right {
    min-height: 570px;
    border-radius: 8px;
  }

  .album-page-left {
    border-radius: 8px 8px 0 0;
  }

  .album-page-right {
    border-radius: 0 0 8px 8px;
  }

  .album-page-left::after,
  .album-page-right::before {
    display: none;
  }

  .letter-pocket {
    margin-top: 0;
  }

  .album-margin-note {
    right: 8%;
    bottom: 5%;
  }

  .album-page-right h2 {
    font-size: clamp(48px, 12vw, 72px);
  }

  .pressed-mark {
    display: none;
  }
}

@media (max-width: 560px) {
  .welcome-letter-spread {
    margin-block: 58px;
  }

  .album-page-left,
  .album-page-right {
    min-height: 480px;
  }

  .tucked-envelope {
    transform: translateY(23%);
  }

  .tucked-envelope:hover,
  .tucked-envelope:focus-visible {
    transform: translateY(13%);
  }

  .wax-seal {
    width: 48px;
    height: 48px;
  }

  .envelope-label strong {
    font-size: 27px;
  }

  .album-margin-note {
    width: 62%;
  }

  .letter-dialog {
    padding: 16px;
  }

  .letter-stage {
    width: 100%;
  }

  .unfolded-letter {
    padding: 52px 27px 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tucked-envelope,
  .unfolded-letter,
  .welcome-letter-spread {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

@media print {
  .welcome-letter-spread,
  .letter-dialog {
    display: none !important;
  }
}
\n\n/* ---------------------------------\n   COUPLE DATE + PERSONAL LETTER v2.2\n---------------------------------- */\n.envelope-wedding-date {\n  display: block;\n  margin-top: .3rem;\n  font-family: var(--font-serif, Georgia, serif);\n  font-size: clamp(.62rem, .8vw, .76rem);\n  font-style: italic;\n  font-weight: 400;\n  letter-spacing: .02em;\n  opacity: .72;\n}\n\n.couple-date-card {\n  display: inline-flex;\n  flex-direction: column;\n  gap: .3rem;\n  margin: .35rem 0 1.5rem;\n  padding: .85rem 1.15rem;\n  border-top: 1px solid rgba(68, 54, 39, .25);\n  border-bottom: 1px solid rgba(68, 54, 39, .25);\n}\n\n.couple-date-card strong {\n  font-family: var(--font-serif, Georgia, serif);\n  font-size: clamp(1rem, 1.6vw, 1.28rem);\n  font-weight: 500;\n}\n\n.couple-date-card span {\n  font-size: .72rem;\n  letter-spacing: .14em;\n  text-transform: uppercase;\n  opacity: .68;\n}\n\n.letter-signoff small,\n.letter-signoff em {\n  display: block;\n}\n\n.letter-signoff small {\n  margin-top: .15rem;\n  font-family: var(--font-sans, Arial, sans-serif);\n  font-size: .68rem;\n  letter-spacing: .16em;\n  text-transform: uppercase;\n}\n\n.letter-signoff em {\n  max-width: 32rem;\n  margin-top: .7rem;\n  font-size: .82rem;\n  line-height: 1.55;\n  opacity: .72;\n}\n
/* =========================================================
   THE WEDDING VAULT · INTERACTIVE TIMELINE BUILDER v2.3
========================================================= */
.timeline-builder-section {
  --tb-ink: #302a25;
  --tb-brown: #4a3327;
  --tb-leather: #2d2019;
  --tb-brass: #a78958;
  --tb-paper: #f4eddf;
  --tb-paper-deep: #e7dcc9;
  --tb-olive: #676b54;
  position: relative;
  padding: clamp(5rem, 9vw, 9rem) clamp(1rem, 4vw, 4rem);
  overflow: clip;
  color: var(--tb-ink);
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.56), transparent 25%),
    repeating-linear-gradient(88deg, rgba(72,55,39,.025) 0 1px, transparent 1px 7px),
    linear-gradient(135deg, #d9cfbf, #eee7dc 52%, #d5c8b5);
}
.timeline-builder-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .38;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(76,55,40,.08) 0 1px, transparent 2px),
    radial-gradient(ellipse at 80% 70%, rgba(76,55,40,.06) 0 1px, transparent 2px);
  background-size: 27px 31px, 41px 37px;
  mix-blend-mode: multiply;
}
.timeline-builder-shell { position: relative; z-index: 1; max-width: 1680px; margin: 0 auto; }
.timeline-builder-heading {
  max-width: 1180px;
  margin: 0 auto clamp(2.5rem, 5vw, 5rem);
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
}
.timeline-builder-heading > div:first-child { max-width: 800px; }
.timeline-builder-heading h2 { margin: .5rem 0 1.25rem; color: #302923; font-size: clamp(2.7rem, 6vw, 6.2rem); line-height: .91; }
.timeline-builder-heading h2 em { font-weight: 400; color: #695e50; }
.timeline-builder-heading > div > p:last-child { max-width: 720px; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.8; }
.timeline-save-status { display: flex; align-items: center; gap: .65rem; white-space: nowrap; padding: .8rem 1rem; border: 1px solid rgba(68,50,37,.18); background: rgba(247,241,231,.64); box-shadow: 0 10px 30px rgba(63,46,33,.08); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; }
.save-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #718064; box-shadow: 0 0 0 4px rgba(113,128,100,.12); }
.timeline-save-status.is-saving .save-dot { animation: vaultPulse 1s infinite; background: var(--tb-brass); }
@keyframes vaultPulse { 50% { transform: scale(.7); opacity: .55; } }

.timeline-setup-panel {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 1.25fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  background:
    linear-gradient(rgba(251,247,239,.9),rgba(239,229,213,.9)),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(80,58,39,.025) 5px 6px);
  border: 1px solid rgba(79,57,41,.2);
  box-shadow: 0 22px 60px rgba(55,40,29,.16), inset 0 0 70px rgba(126,91,54,.08);
  position: relative;
}
.timeline-setup-panel::after { content:""; position:absolute; inset:12px; border:1px solid rgba(95,66,42,.13); pointer-events:none; }
.setup-copy h3 { font-family: var(--serif, Georgia, serif); font-size: clamp(2rem, 3vw, 3.3rem); line-height: 1; margin: .8rem 0 1rem; font-weight: 400; }
.setup-copy p { line-height: 1.75; color: #685f55; }
.paper-label { margin: 0; font-size: .67rem !important; letter-spacing: .23em; text-transform: uppercase; font-weight: 700; color: #7e684d; }
.day-count-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.day-count-choice { min-height: 170px; position: relative; padding: 1.2rem .8rem; border: 1px solid rgba(72,49,32,.22); background: linear-gradient(145deg,#fbf7ee,#e9ddca); color: var(--tb-ink); cursor: pointer; box-shadow: 0 10px 24px rgba(61,43,30,.1); transition: transform .25s, box-shadow .25s, border-color .25s; }
.day-count-choice:hover { transform: translateY(-5px) rotate(-.5deg); box-shadow: 0 18px 38px rgba(61,43,30,.18); border-color: var(--tb-brass); }
.day-count-choice strong { display:block; font-family: var(--serif,Georgia,serif); font-size: 3.6rem; font-weight:400; line-height:1; }
.day-count-choice span { display:block; margin-top:.7rem; font-size:.73rem; text-transform:uppercase; letter-spacing:.12em; line-height:1.5; }
.day-count-choice small { position:absolute; top:-.65rem; left:50%; transform:translateX(-50%); padding:.35rem .65rem; background:var(--tb-leather); color:#f7eddd; font-size:.56rem; text-transform:uppercase; letter-spacing:.14em; }

.timeline-workspace { display:grid; grid-template-columns: 330px minmax(0,1fr); gap: clamp(1.5rem,3vw,3.5rem); align-items:start; }
.timeline-library { min-width:0; }
.library-sticky { position:sticky; top:92px; max-height:calc(100vh - 115px); display:flex; flex-direction:column; padding:1.3rem; background:linear-gradient(145deg,#33231b,#1f1712); color:#f4eadc; border:1px solid rgba(188,151,98,.36); box-shadow:0 24px 60px rgba(35,25,18,.26), inset 0 0 50px rgba(255,255,255,.025); }
.library-sticky::before { content:""; position:absolute; inset:7px; border:1px dashed rgba(213,185,139,.25); pointer-events:none; }
.library-heading { position:relative; z-index:1; padding:.5rem .45rem 1.1rem; }
.library-heading h3 { font-family:var(--serif,Georgia,serif); font-size:2rem; font-weight:400; margin:.4rem 0; }
.library-heading p:last-child { color:#c7b9a9; font-size:.85rem; line-height:1.55; }
.library-sticky .paper-label { color:#c5a878; }
.template-search { position:relative; z-index:1; display:block; margin:0 .4rem 1rem; }
.template-search span { display:block; margin-bottom:.45rem; font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:#c3b29c; }
.template-search input { width:100%; padding:.8rem .85rem; border:1px solid rgba(211,183,139,.28); background:rgba(255,255,255,.06); color:#fff; outline:none; }
.template-search input::placeholder { color:#958878; }
.template-search input:focus { border-color:#c5a878; }
.template-categories { position:relative; z-index:1; display:flex; gap:.45rem; overflow-x:auto; padding:0 .4rem .8rem; scrollbar-width:none; }
.template-categories::-webkit-scrollbar { display:none; }
.template-category { flex:0 0 auto; padding:.45rem .65rem; border:1px solid rgba(215,188,146,.23); background:transparent; color:#cfc1b0; font-size:.57rem; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
.template-category.active { color:#2d2119; background:#d7c29e; border-color:#d7c29e; }
.timeline-template-list { position:relative; z-index:1; overflow:auto; padding:.3rem .4rem 1rem; display:grid; gap:.55rem; scrollbar-color:#8b7357 transparent; }
.timeline-template-card { width:100%; text-align:left; padding:.78rem .85rem; border:1px solid rgba(215,188,146,.2); background:linear-gradient(110deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); color:#f8efe2; cursor:grab; transition:background .2s,transform .2s,border .2s; }
.timeline-template-card:hover { transform:translateX(4px); border-color:#c8a979; background:rgba(255,255,255,.1); }
.timeline-template-card:active { cursor:grabbing; }
.timeline-template-card strong { display:block; font-family:var(--serif,Georgia,serif); font-size:.97rem; font-weight:400; line-height:1.25; }
.timeline-template-card span { display:flex; justify-content:space-between; margin-top:.38rem; color:#bcae9d; font-size:.58rem; text-transform:uppercase; letter-spacing:.09em; }
.timeline-secondary-button,.timeline-primary-button,.timeline-danger-button,.timeline-add-inline { border:1px solid rgba(77,55,39,.3); padding:.78rem 1rem; cursor:pointer; font-size:.65rem; text-transform:uppercase; letter-spacing:.13em; transition:.2s; }
.timeline-secondary-button { background:rgba(249,244,235,.75); color:#43372e; }
.library-sticky .timeline-secondary-button { position:relative;z-index:1;background:transparent;border-color:rgba(215,188,146,.3);color:#efe1ce; }
.timeline-secondary-button:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(38,28,21,.12); }
.timeline-secondary-button.full { width:calc(100% - .8rem); margin:.2rem .4rem .5rem; }
.timeline-primary-button { background:var(--tb-leather); color:#f7eddf; border-color:var(--tb-leather); }
.timeline-danger-button { color:#8c3c32; border-color:rgba(140,60,50,.28); background:transparent; }

.timeline-book-area { min-width:0; }
.timeline-toolbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.1rem; }
.day-tabs { display:flex; gap:.45rem; min-width:0; overflow-x:auto; padding:.25rem; }
.day-tab { flex:0 0 auto; padding:.72rem 1rem; border:1px solid rgba(70,49,34,.22); background:rgba(248,243,234,.65); color:#66594c; cursor:pointer; font-size:.65rem; text-transform:uppercase; letter-spacing:.11em; }
.day-tab.active { background:var(--tb-leather); color:#f4eadb; border-color:var(--tb-leather); box-shadow:0 7px 18px rgba(46,32,24,.18); }
.timeline-toolbar-actions { display:flex; gap:.55rem; flex:0 0 auto; }
.timeline-book { min-height:720px; display:grid; grid-template-columns:minmax(260px,.72fr) minmax(420px,1.28fr); position:relative; padding:19px; border-radius:4px 11px 11px 4px; background:
  repeating-linear-gradient(90deg,transparent 0 4px,rgba(255,255,255,.015) 4px 5px),
  linear-gradient(120deg,#241914,#4a3023 46%,#271a14);
  border:1px solid #1e1511;
  box-shadow:0 30px 70px rgba(45,31,22,.3), inset 0 0 0 4px rgba(175,134,83,.13), inset 0 0 35px rgba(0,0,0,.3);
}
.timeline-book::before { content:""; position:absolute; inset:9px; border:1px dashed rgba(204,169,117,.26); pointer-events:none; }
.timeline-book::after { content:""; position:absolute; top:19px; bottom:19px; left:calc(36% + 8px); width:25px; transform:translateX(-50%); background:linear-gradient(90deg,rgba(61,40,26,.15),rgba(31,20,13,.34) 49%,rgba(255,255,255,.16) 52%,rgba(64,43,29,.08)); filter:blur(1px); pointer-events:none; z-index:3; }
.timeline-page { position:relative; min-width:0; padding:clamp(2rem,4vw,4.2rem); background:
 radial-gradient(circle at 20% 10%,rgba(255,255,255,.72),transparent 22%),
 radial-gradient(circle at 90% 80%,rgba(110,78,44,.07),transparent 30%),
 repeating-linear-gradient(2deg,rgba(80,60,42,.018) 0 1px,transparent 1px 5px),
 #f2e9da;
 box-shadow:inset 0 0 65px rgba(105,71,38,.12); }
.timeline-page-left { border-radius:2px 0 0 3px; display:flex; flex-direction:column; }
.timeline-page-right { border-radius:0 5px 5px 0; padding:clamp(1.4rem,3vw,2.6rem); }
.timeline-page-header { display:flex; justify-content:space-between; gap:1rem; align-items:start; }
.timeline-page-header h3 { margin:.7rem 0 0; font-family:var(--serif,Georgia,serif); font-size:clamp(2.3rem,4vw,4.4rem); line-height:.9; font-weight:400; }
.page-edit-button { border:0; border-bottom:1px solid currentColor; background:none; color:#776653; padding:.25rem 0; cursor:pointer; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; }
.day-date-line { margin:1.5rem 0 2rem; padding-bottom:1rem; border-bottom:1px solid rgba(70,49,34,.18); font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:#746554; }
.timeline-day-summary { display:grid; gap:.7rem; }
.day-summary-row { display:flex; justify-content:space-between; gap:1rem; padding-bottom:.65rem; border-bottom:1px dotted rgba(77,54,36,.25); font-size:.78rem; }
.day-summary-row span { color:#817363; }
.timeline-page-quote { margin:auto 0 0; padding-top:3rem; border:0; font-family:var(--serif,Georgia,serif); font-size:clamp(1.2rem,1.8vw,1.7rem); line-height:1.4; color:#51463c; }
.timeline-signature { margin:.8rem 0 0; font-family:cursive; font-size:1.25rem; color:#75604c; }
.timeline-dropzone { min-height:600px; height:100%; padding:.35rem; transition:background .2s; }
.timeline-dropzone.is-dragover { background:rgba(168,137,88,.12); outline:1px dashed #a78958; outline-offset:4px; }
.timeline-empty-state { min-height:560px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#8b7d6c; border:1px dashed rgba(83,58,39,.25); }
.timeline-empty-state[hidden] { display:none; }
.empty-flourish { font-size:1.5rem; color:#a78a5f; }
.timeline-empty-state h4 { font-family:var(--serif,Georgia,serif); font-size:2rem; font-weight:400; margin:.65rem 0 .4rem; }
.timeline-empty-state p { max-width:260px; font-size:.85rem; line-height:1.55; }
.timeline-event-list { display:grid; gap:.72rem; }
.timeline-event-card { position:relative; display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:.85rem; align-items:center; padding:.85rem .75rem .85rem 1rem; background:linear-gradient(105deg,#fbf7ef,#e9ddca); border:1px solid rgba(77,54,37,.2); box-shadow:0 5px 12px rgba(65,45,30,.08); cursor:grab; transition:transform .18s,box-shadow .18s; }
.timeline-event-card:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(65,45,30,.12); }
.timeline-event-card.dragging { opacity:.35; transform:scale(.98); }
.event-time { font-family:var(--serif,Georgia,serif); font-size:1.15rem; color:#48392f; }
.event-content { min-width:0; }
.event-content h4 { margin:0; font-family:var(--serif,Georgia,serif); font-size:1.08rem; font-weight:400; line-height:1.2; }
.event-meta { display:flex; flex-wrap:wrap; gap:.35rem .75rem; margin-top:.35rem; color:#786b5d; font-size:.63rem; text-transform:uppercase; letter-spacing:.07em; }
.event-meta span::before { content:"·"; margin-right:.35rem; color:#a48961; }
.event-meta span:first-child::before { display:none; }
.event-actions { display:flex; align-items:center; }
.event-edit { width:34px;height:34px;border:0;background:transparent;color:#706152;cursor:pointer;font-size:1rem; }
.event-drag-handle { position:absolute; left:4px; top:50%; transform:translateY(-50%); color:#b3a48e; writing-mode:vertical-lr; font-size:.7rem; letter-spacing:-.15em; }
.timeline-add-inline { width:100%; margin-top:.75rem; background:transparent; border-style:dashed; color:#746451; }
.timeline-book-note { margin:1rem auto 0; max-width:750px; text-align:center; color:#766b60; font-size:.73rem; line-height:1.55; }

.timeline-editor-dialog { width:min(720px,calc(100% - 2rem)); max-height:calc(100vh - 2rem); padding:0; border:0; background:transparent; overflow:visible; }
.timeline-editor-dialog::backdrop { background:rgba(28,20,16,.72); backdrop-filter:blur(6px); }
.timeline-editor-card { max-height:calc(100vh - 2rem); overflow:auto; padding:clamp(1.5rem,4vw,3rem); background:
 radial-gradient(circle at 20% 0,rgba(255,255,255,.75),transparent 30%),
 repeating-linear-gradient(1deg,rgba(82,60,39,.02) 0 1px,transparent 1px 5px),#f2e9da; border:12px solid #35241b; box-shadow:0 35px 90px rgba(0,0,0,.45),inset 0 0 60px rgba(109,76,43,.1); color:#332b25; }
.editor-card-header { display:flex; align-items:start; justify-content:space-between; gap:1rem; margin-bottom:2rem; }
.editor-card-header h3 { margin:.5rem 0 0; font-family:var(--serif,Georgia,serif); font-size:2.5rem; font-weight:400; }
.dialog-close { border:0;background:transparent;font-size:2rem;color:#64574b;cursor:pointer;line-height:1; }
.timeline-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.timeline-form-grid label { display:block; }
.timeline-form-grid label.wide { grid-column:1/-1; }
.timeline-form-grid label span { display:block; margin-bottom:.45rem; font-size:.62rem; text-transform:uppercase; letter-spacing:.14em; color:#746452; }
.timeline-form-grid input,.timeline-form-grid select,.timeline-form-grid textarea { width:100%; padding:.85rem .9rem; border:1px solid rgba(76,53,36,.26); border-radius:0; background:rgba(255,252,246,.7); color:#342c26; font:inherit; outline:none; }
.timeline-form-grid input:focus,.timeline-form-grid select:focus,.timeline-form-grid textarea:focus { border-color:#96794e; box-shadow:0 0 0 3px rgba(150,121,78,.1); }
.timeline-editor-actions { display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-top:2rem; }
.timeline-editor-actions > div { display:flex; gap:.6rem; margin-left:auto; }

@media (max-width:1100px) {
 .timeline-workspace { grid-template-columns:1fr; }
 .library-sticky { position:relative;top:auto;max-height:none; }
 .timeline-template-list { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:320px; }
 .timeline-book { grid-template-columns:.68fr 1.32fr; }
 .timeline-book::after { left:34%; }
}
@media (max-width:780px) {
 .timeline-builder-heading { display:block; }
 .timeline-save-status { margin-top:1.4rem; width:max-content; }
 .timeline-setup-panel { grid-template-columns:1fr; }
 .day-count-options { grid-template-columns:1fr; }
 .day-count-choice { min-height:105px; display:grid; grid-template-columns:70px 1fr; align-items:center; text-align:left; }
 .day-count-choice strong { font-size:2.7rem; text-align:center; }
 .day-count-choice span { margin:0; }
 .timeline-toolbar { align-items:stretch; flex-direction:column; }
 .timeline-toolbar-actions { display:grid; grid-template-columns:1fr 1fr; }
 .timeline-book { display:block; min-height:0; padding:12px; }
 .timeline-book::after { display:none; }
 .timeline-page-left { min-height:390px; }
 .timeline-page-right { border-top:1px solid rgba(75,52,35,.18); }
 .timeline-dropzone { min-height:420px; }
 .timeline-empty-state { min-height:390px; }
 .timeline-event-card { grid-template-columns:64px minmax(0,1fr) 34px; }
 .timeline-form-grid { grid-template-columns:1fr; }
 .timeline-form-grid label.wide { grid-column:auto; }
 .timeline-editor-actions { align-items:stretch; flex-direction:column-reverse; }
 .timeline-editor-actions > div { margin:0; display:grid; grid-template-columns:1fr 1fr; }
 .timeline-danger-button { width:100%; }
}
@media (max-width:520px) {
 .timeline-builder-section { padding-left:.65rem;padding-right:.65rem; }
 .timeline-template-list { grid-template-columns:1fr; }
 .timeline-toolbar-actions { grid-template-columns:1fr; }
 .timeline-page { padding:1.5rem 1.15rem; }
 .timeline-page-header h3 { font-size:2.6rem; }
 .timeline-event-card { grid-template-columns:58px minmax(0,1fr) 30px; gap:.5rem; padding-right:.4rem; }
 .event-meta { display:block; }
 .event-meta span { display:block;margin-top:.25rem; }
 .event-meta span::before { display:none; }
}

@media print {
 body.timeline-printing > *:not(#book) { display:none !important; }
 body.timeline-printing #book > *:not(#timeline-builder) { display:none !important; }
 body.timeline-printing #timeline-builder { display:block !important; padding:0; background:#fff; }
 body.timeline-printing .timeline-builder-heading,
 body.timeline-printing .timeline-library,
 body.timeline-printing .timeline-toolbar,
 body.timeline-printing .timeline-add-inline,
 body.timeline-printing .timeline-book-note,
 body.timeline-printing .page-edit-button,
 body.timeline-printing .event-actions,
 body.timeline-printing .event-drag-handle { display:none !important; }
 body.timeline-printing .timeline-workspace { display:block; }
 body.timeline-printing .timeline-book-area { display:block; }
 body.timeline-printing .timeline-book { display:block; min-height:0; padding:0; background:none; border:0; box-shadow:none; }
 body.timeline-printing .timeline-book::before,body.timeline-printing .timeline-book::after { display:none; }
 body.timeline-printing .timeline-page { box-shadow:none; min-height:auto; page-break-inside:avoid; border:1px solid #b9ad9d; }
 body.timeline-printing .timeline-page-left { min-height:330px; }
 body.timeline-printing .timeline-event-card { break-inside:avoid; box-shadow:none; }
}


/* =========================================================
   TIMELINE BUILDER v2.3.1 · PLACEMENT + READABILITY FIXES
========================================================= */
.timeline-builder-section [hidden],
.timeline-setup-panel[hidden],
.timeline-workspace[hidden] {
  display: none !important;
}

.timeline-builder-section {
  isolation: isolate;
  color: #302a25 !important;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.66), transparent 28%),
    repeating-linear-gradient(88deg, rgba(72,55,39,.018) 0 1px, transparent 1px 8px),
    linear-gradient(135deg, #d8cebe 0%, #eee7dc 52%, #d4c6b3 100%) !important;
}

.timeline-builder-heading {
  padding: clamp(1.5rem, 3vw, 2.75rem);
  background: rgba(247, 240, 229, .92);
  border: 1px solid rgba(77, 55, 38, .18);
  box-shadow: 0 20px 55px rgba(48, 34, 24, .13);
}

.timeline-builder-heading h2,
.timeline-builder-heading p,
.timeline-builder-heading .chapter-number {
  color: #302923 !important;
  text-shadow: none !important;
}

.timeline-builder-heading h2 em {
  color: #6d5c4c !important;
}

.timeline-builder-heading > div > p:last-child {
  color: #5f554c !important;
}

.timeline-save-status {
  color: #40372f !important;
  background: rgba(250, 246, 238, .96) !important;
}

@media (max-width: 780px) {
  .timeline-builder-heading {
    padding: 1.35rem;
  }
}

/* =========================================================
   TIMELINE BUILDER v2.3.2 · CONTRAST + BUTTON FIXES
========================================================= */
.timeline-editor-card .timeline-primary-button,
.timeline-editor-actions .timeline-primary-button {
  background: #2d2019 !important;
  color: #fff8ed !important;
  border: 1px solid #2d2019 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  box-shadow: 0 8px 20px rgba(45, 32, 25, .22) !important;
  -webkit-text-fill-color: #fff8ed !important;
}

.timeline-editor-card .timeline-primary-button:hover,
.timeline-editor-actions .timeline-primary-button:hover {
  background: #463126 !important;
  border-color: #463126 !important;
  transform: translateY(-2px);
}

.timeline-editor-card .timeline-primary-button:focus-visible,
.timeline-editor-actions .timeline-primary-button:focus-visible {
  outline: 3px solid rgba(167, 137, 88, .35) !important;
  outline-offset: 3px;
}

.timeline-day-tabs .day-tab,
.day-tabs .day-tab {
  background: #f6efe3 !important;
  color: #3f342b !important;
  border: 1px solid rgba(63, 52, 43, .34) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #3f342b !important;
}

.timeline-day-tabs .day-tab.active,
.day-tabs .day-tab.active {
  background: #2d2019 !important;
  color: #fff8ed !important;
  border-color: #2d2019 !important;
  box-shadow: 0 8px 20px rgba(45, 32, 25, .26) !important;
  -webkit-text-fill-color: #fff8ed !important;
}

.timeline-day-tabs .day-tab:hover,
.day-tabs .day-tab:hover {
  border-color: #7c6047 !important;
}

.timeline-editor-actions button,
.timeline-toolbar button,
.day-tabs button {
  font-weight: 600;
}


/* =========================================================
   THE WEDDING VAULT — HEIRLOOM FOUNDATION v2.4
   Leather album, archival paper, tactile keepsakes
   ========================================================= */

:root {
  --heirloom-leather: #2a1b15;
  --heirloom-leather-deep: #160e0b;
  --heirloom-leather-warm: #4b3024;
  --heirloom-brass: #b79a64;
  --heirloom-paper: #f2eadc;
  --heirloom-paper-light: #fbf6ec;
  --heirloom-ink: #29231f;
  --heirloom-faded-ink: #6f6358;
  --heirloom-thread: rgba(218, 189, 136, .42);
}

/* Album body */
.timeline-builder-section {
  position: relative;
  isolation: isolate;
  padding-block: clamp(72px, 9vw, 140px);
  background:
    radial-gradient(circle at 22% 10%, rgba(255,255,255,.06), transparent 24%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #211611, #0f0b09 72%);
}

.timeline-builder-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .44;
  background:
    repeating-linear-gradient(4deg, transparent 0 7px, rgba(255,255,255,.016) 7px 8px),
    repeating-linear-gradient(94deg, transparent 0 11px, rgba(0,0,0,.055) 11px 12px);
  pointer-events: none;
}

.heirloom-album-shell {
  position: relative;
  overflow: visible;
  padding: clamp(26px, 4vw, 58px);
  border: 1px solid rgba(205,172,112,.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.10), transparent 18%),
    repeating-linear-gradient(103deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, var(--heirloom-leather-warm), var(--heirloom-leather) 42%, var(--heirloom-leather-deep));
  box-shadow:
    0 45px 100px rgba(0,0,0,.56),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -18px 35px rgba(0,0,0,.30),
    0 0 0 9px rgba(17,11,8,.42);
}

.heirloom-album-shell::before,
.heirloom-album-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 22px;
}
.heirloom-album-shell::before {
  inset: 14px;
  border: 1px dashed var(--heirloom-thread);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28);
}
.heirloom-album-shell::after {
  inset: 23px;
  border: 1px solid rgba(210,178,119,.10);
}
.album-stitch-line {
  position: absolute;
  inset: 9px;
  border-radius: 24px;
  box-shadow: inset 0 0 24px rgba(0,0,0,.34);
  pointer-events: none;
}
.album-corner-wear {
  position: absolute;
  width: 86px;
  height: 86px;
  opacity: .44;
  filter: blur(.2px);
  background: radial-gradient(circle at center, rgba(205,155,99,.22), transparent 68%);
  pointer-events: none;
}
.corner-top-left { top: -12px; left: -12px; }
.corner-bottom-right { right: -12px; bottom: -12px; }

/* Heirloom book spread */
.timeline-book {
  position: relative;
  border: 10px solid rgba(24,15,11,.92);
  border-radius: 17px;
  overflow: visible;
  background: var(--heirloom-paper);
  box-shadow:
    0 30px 58px rgba(0,0,0,.42),
    0 5px 0 #c9bba8,
    0 10px 0 #a99781,
    inset 0 0 0 1px rgba(255,255,255,.65);
}
.timeline-book::before {
  content: "";
  position: absolute;
  z-index: 6;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 34px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(72,54,40,.19) 32%, rgba(255,255,255,.32) 50%, rgba(72,54,40,.14) 68%, transparent);
  pointer-events: none;
}
.timeline-book::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 8;
  border: 1px solid rgba(113,83,54,.14);
  border-radius: 5px;
  pointer-events: none;
}
.heirloom-page,
.timeline-page {
  position: relative;
  color: var(--heirloom-ink);
  background:
    radial-gradient(circle at 15% 12%, rgba(126,90,51,.08) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 88%, rgba(126,90,51,.06) 0 1px, transparent 2px),
    repeating-linear-gradient(8deg, rgba(94,69,42,.016) 0 1px, transparent 1px 5px),
    linear-gradient(105deg, var(--heirloom-paper-light), var(--heirloom-paper) 68%, #e6dbc9);
  box-shadow: inset 0 0 42px rgba(110,78,43,.09);
}
.timeline-page-left { border-right: 1px solid rgba(88,62,40,.18); }
.timeline-page-right { border-left: 1px solid rgba(255,255,255,.46); }

/* Linen pocket styling for library */
.timeline-library {
  position: relative;
  border: 1px solid rgba(115,85,55,.24);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(83,61,42,.055) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, #dfd2bd, #cbbba2);
  box-shadow: inset 0 0 30px rgba(77,54,35,.12), 0 18px 35px rgba(0,0,0,.18);
}
.timeline-library::after {
  content: "PLANNING POCKET";
  position: absolute;
  right: 18px;
  bottom: 12px;
  color: rgba(74,50,34,.52);
  font-size: 9px;
  letter-spacing: .25em;
}

/* Paper cards that lift like stationery */
.timeline-template-card,
.timeline-item-card {
  position: relative;
  transform: rotate(var(--paper-tilt, 0deg));
  border: 1px solid rgba(96,69,45,.20);
  background:
    linear-gradient(100deg, rgba(255,255,255,.56), transparent 44%),
    #f7f0e4;
  box-shadow: 0 8px 15px rgba(48,31,19,.13), 0 1px 0 rgba(255,255,255,.7) inset;
  transition: transform .22s ease, box-shadow .22s ease;
}
.timeline-template-card:nth-child(3n+1), .timeline-item-card:nth-child(3n+1) { --paper-tilt: -.35deg; }
.timeline-template-card:nth-child(3n+2), .timeline-item-card:nth-child(3n+2) { --paper-tilt: .28deg; }
.timeline-template-card:hover,
.timeline-item-card:hover,
.timeline-item-card.is-dragging {
  transform: translateY(-5px) rotate(0deg) scale(1.012);
  box-shadow: 0 18px 28px rgba(48,31,19,.23), 0 1px 0 rgba(255,255,255,.8) inset;
  z-index: 3;
}

/* Leather bookmark tabs */
.day-tab,
.timeline-secondary-button {
  border: 1px solid rgba(205,173,112,.26);
  background:
    repeating-linear-gradient(92deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #4a3025, #251812);
  color: #f7eddd;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 7px 15px rgba(0,0,0,.18);
}
.day-tab[aria-selected="true"],
.day-tab.active {
  color: #2b211b;
  background: linear-gradient(180deg, #d7c19a, #b79863);
  border-color: #e5d4b5;
  text-shadow: 0 1px rgba(255,255,255,.35);
}
.heirloom-bookmark {
  position: absolute;
  z-index: 10;
  top: -10px;
  left: 24px;
  padding: 10px 14px 22px;
  color: #f4ead9;
  font-size: 9px;
  letter-spacing: .19em;
  background: linear-gradient(90deg, #372119, #6a4433 48%, #2b1a14);
  box-shadow: 0 7px 13px rgba(0,0,0,.22);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.heirloom-bookmark::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 10px solid var(--heirloom-paper);
}

/* Handwritten note */
.handwritten-note {
  color: #654f3e;
  font-family: "Segoe Print", "Bradley Hand", "Snell Roundhand", cursive;
  line-height: 1.5;
}
.timeline-heirloom-note {
  position: absolute;
  z-index: 7;
  right: 5%;
  top: 22px;
  width: min(180px, 38%);
  padding: 18px 18px 15px;
  transform: rotate(2.6deg);
  background: #e9d6a5;
  box-shadow: 0 8px 15px rgba(57,39,24,.17);
  font-size: 13px;
}
.timeline-heirloom-note::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 35%;
  width: 56px;
  height: 17px;
  transform: rotate(-4deg);
  background: rgba(221,205,169,.72);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.timeline-heirloom-note span { display:block; margin-top: 5px; text-align:right; }

/* Paper clip */
.paper-clip-decoration {
  position: absolute;
  z-index: 8;
  top: -9px;
  right: 24px;
  width: 17px;
  height: 48px;
  border: 2px solid rgba(113,95,73,.62);
  border-radius: 12px;
  transform: rotate(8deg);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22);
}
.paper-clip-decoration::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 4px;
  width: 7px;
  height: 30px;
  border: 1px solid rgba(113,95,73,.50);
  border-radius: 8px;
}

/* Pressed botanical */
.pressed-botanical {
  position: absolute;
  z-index: 5;
  width: 95px;
  height: 160px;
  opacity: .34;
  pointer-events: none;
}
.pressed-botanical-left { left: 12px; bottom: 18px; transform: rotate(-18deg); }
.pressed-botanical span {
  position: absolute;
  left: 46px;
  top: 10px;
  width: 2px;
  height: 138px;
  background: #6c7045;
  transform: rotate(4deg);
}
.pressed-botanical i,
.pressed-botanical b {
  position:absolute;
  width: 26px;
  height: 54px;
  border-radius: 100% 0 100% 0;
  background: #777a4b;
  box-shadow: 18px 36px 0 -4px #686d42, -14px 72px 0 -6px #7d8252;
}
.pressed-botanical i { left: 23px; top: 34px; transform: rotate(-28deg); }
.pressed-botanical b { left: 49px; top: 55px; transform: rotate(150deg); }

/* Wax-seal-inspired primary action */
.timeline-primary-button,
.timeline-modal-save {
  position: relative;
  overflow: hidden;
  color: #fff7ea !important;
  border: 1px solid rgba(255,225,184,.24) !important;
  background:
    radial-gradient(circle at 34% 27%, rgba(255,255,255,.18), transparent 18%),
    linear-gradient(145deg, #7b2e28, #4b1715 68%, #2f0e0d) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.05), 0 10px 20px rgba(48,12,10,.28) !important;
}
.timeline-primary-button::after,
.timeline-modal-save::after {
  content: "✦";
  margin-left: 10px;
  opacity: .75;
}

/* Save status as an embossed heirloom tag */
.timeline-save-status {
  border: 1px solid rgba(202,171,115,.28);
  color: #f5ead8;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(76,49,37,.96), rgba(39,24,18,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.17);
}
.timeline-save-status::before {
  content: "✓";
  display:inline-grid;
  place-items:center;
  width: 20px;
  height:20px;
  margin-right:8px;
  border:1px solid rgba(225,197,143,.5);
  border-radius:50%;
  color:#dbc18f;
}
.timeline-save-status .save-dot { display:none; }

/* Modal becomes a stationery card */
.timeline-modal-panel {
  border: 1px solid rgba(100,70,42,.22);
  background:
    repeating-linear-gradient(0deg, transparent 0 29px, rgba(107,84,60,.065) 29px 30px),
    linear-gradient(104deg, #fbf6ec, #eee3d0);
  box-shadow: 0 38px 90px rgba(22,13,9,.52), inset 0 0 34px rgba(113,79,41,.07);
}
.timeline-modal-panel::before {
  content: "";
  position:absolute;
  left: 32px;
  top: 0;
  bottom:0;
  width:1px;
  background:rgba(146,72,61,.14);
}

@media (max-width: 900px) {
  .heirloom-album-shell { padding: 22px 14px; border-radius: 20px; }
  .timeline-book::before { display:none; }
  .timeline-heirloom-note { position:relative; right:auto; top:auto; width:auto; margin: 8px 10px 24px auto; }
  .heirloom-bookmark { writing-mode: horizontal-tb; top: -8px; left: 18px; padding: 8px 16px 10px; }
  .heirloom-bookmark::after { display:none; }
}

@media (prefers-reduced-motion: no-preference) {
  .timeline-book { animation: heirloomSettle .8s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes heirloomSettle {
    from { opacity:0; transform: perspective(1200px) rotateX(2deg) translateY(20px); }
    to { opacity:1; transform: perspective(1200px) rotateX(0) translateY(0); }
  }
}

/* =========================================================
   THE WEDDING VAULT v2.5 — PHOTOREAL HEIRLOOM ASSET LAYER
   ========================================================= */

/* The album now uses the supplied leather texture rather than a flat CSS fill. */
.timeline-builder-shell.heirloom-album-shell {
  background:
    linear-gradient(rgba(30,18,13,.34), rgba(30,18,13,.34)),
    url("images/vault-assets/leather-texture.jpg") center/cover;
  border-color: rgba(77,45,27,.88);
  box-shadow:
    0 36px 75px rgba(18,10,7,.48),
    inset 0 0 0 2px rgba(221,188,128,.16),
    inset 0 0 48px rgba(0,0,0,.42);
}
.timeline-builder-shell.heirloom-album-shell::before {
  content:"";
  position:absolute;
  inset:12px;
  border:1px dashed rgba(218,179,117,.34);
  border-radius:16px;
  pointer-events:none;
}

/* A ghosted real open-book silhouette gives the planner believable page shape. */
.timeline-book-area { position:relative; }
.timeline-book-stage {
  position:absolute;
  z-index:0;
  left:50%;
  top:76px;
  width:min(1010px,96%);
  transform:translateX(-50%) scale(1.035);
  opacity:.20;
  filter:sepia(.28) contrast(.96) drop-shadow(0 26px 30px rgba(21,12,7,.40));
  pointer-events:none;
}
.timeline-book-stage img { display:block; width:100%; height:auto; }
.timeline-toolbar,
.timeline-book { position:relative; z-index:2; }

/* Day tabs: readable at all times, shaped like leather divider tabs. */
.day-tabs {
  align-items:flex-end;
  gap:.55rem;
  padding:.45rem .4rem .1rem;
}
.day-tab,
.timeline-day-tabs .day-tab,
.day-tabs .day-tab {
  position:relative;
  min-height:50px;
  padding:.82rem 1.15rem .74rem;
  border:1px solid rgba(217,184,126,.48) !important;
  border-bottom:3px solid rgba(28,16,11,.76) !important;
  border-radius:7px 7px 2px 2px;
  color:#fff5e5 !important;
  background:
    linear-gradient(rgba(25,14,10,.18),rgba(25,14,10,.18)),
    url("images/vault-assets/leather-texture.jpg") center/cover !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 8px 14px rgba(17,9,6,.28);
  text-shadow:0 1px 2px rgba(0,0,0,.75);
  opacity:1 !important;
  font-weight:700;
}
.day-tab:hover,
.timeline-day-tabs .day-tab:hover,
.day-tabs .day-tab:hover {
  color:#fffdf5 !important;
  transform:translateY(-3px);
  filter:brightness(1.14);
}
.day-tab.active,
.day-tab[aria-selected="true"],
.timeline-day-tabs .day-tab.active,
.day-tabs .day-tab.active {
  color:#302018 !important;
  background:
    linear-gradient(rgba(229,207,164,.82),rgba(196,159,99,.88)),
    url("images/vault-assets/leather-texture.jpg") center/cover !important;
  border-color:#ead6ad !important;
  box-shadow:0 12px 22px rgba(31,19,12,.28), inset 0 1px 0 rgba(255,255,255,.6);
  text-shadow:0 1px rgba(255,255,255,.5);
}

/* Library cards become aged index cards and remain readable without hover. */
.timeline-template-card,
.timeline-item-card {
  color:#382a20 !important;
  border-color:rgba(101,72,45,.34) !important;
  background:
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(108,82,55,.07) 25px 26px),
    linear-gradient(103deg,#fffaf0,#eee1cc) !important;
}
.timeline-template-card strong,
.timeline-item-card strong,
.timeline-template-card .template-title,
.timeline-item-card .timeline-item-title {
  color:#35271e !important;
  text-shadow:none !important;
}
.timeline-template-card span,
.timeline-item-card span,
.timeline-template-card small,
.timeline-item-card small {
  color:#735f4c !important;
  opacity:1 !important;
}
.timeline-template-card:hover,
.timeline-item-card:hover {
  color:#2c2018 !important;
  background:
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(108,82,55,.075) 25px 26px),
    linear-gradient(103deg,#fffdf7,#f0dfc4) !important;
}

/* Satin ribbon sewn into the inner spine instead of floating over the title. */
.heirloom-bookmark {
  top:-20px;
  left:calc(100% - 3px);
  width:46px;
  min-height:164px;
  padding:18px 8px 30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  writing-mode:vertical-rl;
  color:#f8ead6;
  border:1px solid rgba(232,198,141,.34);
  border-top:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.08),transparent 28%,rgba(0,0,0,.20) 74%),
    linear-gradient(180deg,#6d3d2d,#3b2119 72%,#26140f);
  box-shadow:inset 1px 0 rgba(255,255,255,.12), 6px 8px 16px rgba(26,15,10,.25);
  transform:translateX(-50%);
}
.heirloom-bookmark span { font-size:8px; letter-spacing:.28em; }
.heirloom-bookmark strong { font-size:10px; letter-spacing:.20em; font-weight:600; }
.heirloom-bookmark::after {
  bottom:-1px;
  left:0;
  width:100%;
  height:19px;
  border:0;
  background:linear-gradient(135deg,transparent 48%,#26140f 49%) left/50% 100% no-repeat,
             linear-gradient(225deg,transparent 48%,#26140f 49%) right/50% 100% no-repeat;
}

/* Use the real uploaded paper clip. */
img.paper-clip-decoration {
  top:-15px;
  right:28px;
  width:34px;
  height:auto;
  border:0;
  border-radius:0;
  object-fit:contain;
  transform:rotate(8deg);
  filter:drop-shadow(2px 5px 3px rgba(45,31,19,.27));
  opacity:.82;
}
img.paper-clip-decoration::after { content:none; }

/* The uploaded pressed flowers replace the CSS-drawn botanical. */
.pressed-botanical-image {
  position:absolute;
  z-index:4;
  width:155px;
  height:auto;
  opacity:.42;
  mix-blend-mode:multiply;
  filter:sepia(.22) saturate(.72) drop-shadow(1px 4px 3px rgba(55,42,26,.12));
  pointer-events:none;
}
.pressed-botanical-image.pressed-botanical-left {
  left:-20px;
  bottom:-4px;
  transform:rotate(-13deg);
}

/* More natural tucked note: torn paper, taped edge, curled corner. */
.timeline-heirloom-note {
  right:4.5%;
  top:27px;
  width:min(190px,38%);
  min-height:118px;
  padding:24px 22px 19px;
  clip-path:polygon(1% 4%,97% 0,100% 93%,91% 96%,82% 93%,71% 98%,61% 94%,48% 100%,36% 95%,23% 99%,11% 94%,0 97%);
  background:
    linear-gradient(rgba(224,202,146,.88),rgba(224,202,146,.88)),
    url("images/vault-assets/taped-note.png") center/cover;
  box-shadow:0 13px 18px rgba(56,37,22,.22);
  transform:rotate(2.1deg);
}
.timeline-heirloom-note::before {
  top:-9px;
  left:34%;
  width:72px;
  height:21px;
  transform:rotate(-3deg);
  background:rgba(211,174,74,.72);
  box-shadow:0 2px 4px rgba(0,0,0,.12);
}
.timeline-heirloom-note::after {
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:22px;
  height:22px;
  background:linear-gradient(135deg,rgba(121,93,50,.10) 50%,rgba(255,255,255,.32) 51%);
  filter:drop-shadow(-2px -2px 2px rgba(71,48,27,.09));
}
.timeline-heirloom-note .note-copy { display:block; }
.timeline-heirloom-note .note-signature { display:block; margin-top:8px; text-align:right; }

/* More convincing page stack and center gutter. */
.timeline-book {
  border-radius:7px 7px 14px 14px;
  box-shadow:
    0 9px 0 #d9cbb8,
    0 14px 0 #b6a48d,
    0 25px 30px rgba(20,11,7,.35),
    inset 0 0 0 1px rgba(95,68,43,.23);
}
.timeline-book::before {
  width:34px;
  background:
    radial-gradient(ellipse at center,rgba(39,23,15,.30),transparent 64%),
    linear-gradient(90deg,transparent,rgba(58,35,23,.20) 42%,rgba(255,255,255,.22) 51%,rgba(58,35,23,.16) 59%,transparent);
}
.timeline-page-left::after,
.timeline-page-right::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.timeline-page-left::after {
  background:linear-gradient(90deg,rgba(255,255,255,.08),transparent 78%,rgba(58,35,23,.12));
}
.timeline-page-right::after {
  background:linear-gradient(90deg,rgba(58,35,23,.11),transparent 22%,rgba(255,255,255,.06));
}

/* Remove obsolete technical save copy entirely. */
.timeline-book-note { display:none !important; }

/* Small film heirloom flourish across the timeline heading. */
.timeline-builder-heading::after {
  content:"";
  display:block;
  width:min(360px,38vw);
  height:44px;
  margin-top:1.1rem;
  opacity:.14;
  background:url("images/vault-assets/film-strip-horizontal.jpg") center/cover;
  filter:sepia(1) contrast(1.15);
  mix-blend-mode:multiply;
}

@media (max-width:900px) {
  .timeline-book-stage { display:none; }
  .heirloom-bookmark {
    left:50%;
    top:-12px;
    width:auto;
    min-height:0;
    padding:9px 20px 12px;
    writing-mode:horizontal-tb;
    flex-direction:row;
    transform:translateX(-50%);
  }
  .heirloom-bookmark::after { display:block; height:10px; }
  .pressed-botanical-image { width:105px; opacity:.3; }
  .timeline-heirloom-note { width:min(180px,60%); }
}

/* =========================================================
   THE WEDDING VAULT v2.6 — REFINED HEIRLOOM DETAILS
   Sharper leather, readable tabs, unclipped filters, and
   subtle analogue keepsakes throughout the full experience.
   ========================================================= */

/* Use the leather at a natural repeat scale instead of enlarging one small image. */
.timeline-builder-section,
.timeline-builder-shell.heirloom-album-shell {
  background-color:#3a2118;
  background-image:
    linear-gradient(rgba(31,17,12,.28),rgba(31,17,12,.28)),
    url("images/vault-assets/leather-texture.jpg");
  background-repeat:repeat, repeat;
  background-position:center, 0 0;
  background-size:auto, 576px 385px;
}
.timeline-builder-section::before {
  background:
    radial-gradient(circle at 50% 18%,rgba(255,235,201,.10),transparent 35%),
    linear-gradient(90deg,rgba(12,7,5,.20),transparent 14%,transparent 86%,rgba(12,7,5,.20));
}
.timeline-builder-shell.heirloom-album-shell {
  border-color:#26140f;
  box-shadow:
    0 38px 80px rgba(18,9,6,.56),
    inset 0 0 0 2px rgba(218,180,118,.14),
    inset 0 0 56px rgba(0,0,0,.34);
}

/* Day divider tabs remain readable in every state. */
.day-tabs,
.timeline-day-tabs {
  overflow:visible;
  flex-wrap:wrap;
  row-gap:.5rem;
}
.day-tab,
.timeline-day-tabs .day-tab,
.day-tabs .day-tab {
  color:#fff7e8 !important;
  opacity:1 !important;
  background:
    linear-gradient(rgba(23,12,8,.30),rgba(23,12,8,.30)),
    url("images/vault-assets/leather-texture.jpg") 0 0/290px 194px repeat !important;
  border-color:rgba(229,195,139,.66) !important;
  text-shadow:0 1px 2px #160b07,0 0 8px rgba(0,0,0,.35) !important;
  letter-spacing:.14em;
}
.day-tab:not(.active):not([aria-selected="true"]) {
  filter:brightness(.92) saturate(.88);
}
.day-tab.active,
.day-tab[aria-selected="true"],
.timeline-day-tabs .day-tab.active,
.day-tabs .day-tab.active {
  color:#2b1b14 !important;
  text-shadow:0 1px rgba(255,255,255,.55) !important;
  background:linear-gradient(180deg,#ead4a5,#bd8e52) !important;
  border-color:#f0ddb8 !important;
}

/* Keep every planning category visible; no clipped 'All' / 'Getting Ready' labels. */
.timeline-library,
.library-sticky { min-width:0; }
.template-categories {
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center;
  gap:.42rem !important;
  width:100%;
  max-width:100%;
  overflow:visible !important;
  padding:.15rem 0 .55rem;
}
.template-categories button,
.template-category-button {
  flex:0 0 auto;
  min-width:max-content;
  width:auto !important;
  max-width:100%;
  padding:.48rem .68rem !important;
  color:#f7ead5 !important;
  border:1px solid rgba(221,187,129,.48) !important;
  background:rgba(24,13,9,.30) !important;
  white-space:nowrap;
  line-height:1.1;
  font-size:.68rem !important;
  letter-spacing:.12em !important;
  opacity:1 !important;
}
.template-categories button:hover,
.template-categories button.active,
.template-category-button:hover,
.template-category-button.active {
  color:#2b1b14 !important;
  background:#e8d2a7 !important;
  border-color:#f3dfb7 !important;
}
.timeline-template-list {
  margin-top:.1rem;
}

/* Let the planning drawer breathe on large screens. */
@media (min-width:1100px) {
  .timeline-workspace {
    grid-template-columns:minmax(315px,360px) minmax(0,1fr);
    gap:1.4rem;
  }
}

/* Ribbon is sewn into the gutter, not laid over the page title. */
.heirloom-bookmark {
  left:100%;
  top:-12px;
  width:38px;
  min-height:145px;
  transform:translateX(-50%);
  z-index:7;
}

/* Slightly more realistic metal clip and stationery shadows. */
img.paper-clip-decoration {
  width:40px;
  opacity:.92;
  filter:drop-shadow(1px 2px 1px rgba(255,255,255,.35)) drop-shadow(3px 7px 4px rgba(43,29,18,.34));
}
.timeline-heirloom-note {
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.15));
}

/* ---- Analogue keepsakes woven subtly through the full site ---- */
.chapter,
.editorial-section,
.welcome-section,
.priorities-section,
.venue-section,
.engagement-section,
.wedding-day-section,
.film-story,
.after-section,
.vault-dashboard {
  position:relative;
  isolation:isolate;
}

/* Fine film-strip traces on selected chapter edges. */
.chapter:nth-of-type(3)::after,
.chapter:nth-of-type(7)::after,
.film-story::after,
.after-section::after {
  content:"";
  position:absolute;
  z-index:0;
  width:clamp(150px,18vw,300px);
  height:58px;
  right:clamp(12px,4vw,70px);
  bottom:clamp(18px,4vw,58px);
  background:url("images/vault-assets/film-strip-horizontal.jpg") center/cover no-repeat;
  opacity:.075;
  filter:sepia(1) contrast(1.15);
  mix-blend-mode:multiply;
  pointer-events:none;
}

/* A softly tucked Super 8 camera, used once so it feels collected rather than repeated. */
.film-story::before {
  content:"";
  position:absolute;
  z-index:0;
  width:clamp(115px,14vw,210px);
  aspect-ratio:1;
  left:clamp(8px,2.5vw,44px);
  bottom:clamp(8px,2vw,30px);
  background:url("images/vault-assets/super8-camera.png") center/contain no-repeat;
  opacity:.075;
  filter:sepia(.4) grayscale(.2);
  transform:rotate(-5deg);
  pointer-events:none;
}

/* Pressed-flower keepsakes on a few light pages. */
.welcome-section::after,
.engagement-section::after,
.after-section::before {
  content:"";
  position:absolute;
  z-index:0;
  width:clamp(70px,9vw,135px);
  height:clamp(130px,17vw,250px);
  background:url("images/vault-assets/pressed-flower-white.png") center/contain no-repeat;
  opacity:.14;
  filter:sepia(.35) saturate(.65);
  pointer-events:none;
}
.welcome-section::after { right:3%; bottom:4%; transform:rotate(9deg); }
.engagement-section::after { left:2%; top:12%; transform:rotate(-14deg); }
.after-section::before { right:4%; top:10%; transform:rotate(12deg); }

/* A faint unspooled film ribbon at one editorial transition. */
.venue-section::before {
  content:"";
  position:absolute;
  z-index:0;
  width:clamp(190px,27vw,430px);
  height:clamp(100px,15vw,250px);
  left:-2%;
  bottom:1%;
  background:url("images/vault-assets/film-ribbon.png") left bottom/contain no-repeat;
  opacity:.045;
  filter:sepia(1);
  pointer-events:none;
}

/* Keep decorative layers behind real content. */
.chapter > *,
.editorial-section > *,
.welcome-section > *,
.priorities-section > *,
.venue-section > *,
.engagement-section > *,
.wedding-day-section > *,
.film-story > *,
.after-section > *,
.vault-dashboard > * {
  position:relative;
  z-index:1;
}

@media (max-width:760px) {
  .timeline-builder-section,
  .timeline-builder-shell.heirloom-album-shell {
    background-size:auto, 430px 287px;
  }
  .template-categories {
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    padding-bottom:.7rem;
    scrollbar-width:thin;
  }
  .template-categories button,
  .template-category-button { font-size:.64rem !important; }
  .heirloom-bookmark { left:50%; }
  .film-story::before,
  .chapter:nth-of-type(3)::after,
  .chapter:nth-of-type(7)::after,
  .film-story::after,
  .after-section::after,
  .venue-section::before { opacity:.035; }
}

/* =========================================================
   THE WEDDING VAULT v2.7 — HEIRLOOM REALISM PASS
   Realistic leather pocket, stationery, full-vault analogue
   keepsakes, cleaner timeline stage, and corrected bookmark.
   ========================================================= */

/* A quieter, luxury desk surface: no tiled leather wallpaper. */
.timeline-builder-section {
  background:
    radial-gradient(ellipse at 50% 8%, rgba(220,196,160,.12), transparent 38%),
    linear-gradient(135deg, #171411 0%, #24201c 44%, #13110f 100%) !important;
}
.timeline-builder-section::before {
  opacity:.42;
  background:
    linear-gradient(90deg, rgba(0,0,0,.35), transparent 16%, transparent 84%, rgba(0,0,0,.35)),
    repeating-linear-gradient(92deg, rgba(255,255,255,.012) 0 1px, transparent 1px 5px) !important;
}
.timeline-builder-shell.heirloom-album-shell {
  background:
    linear-gradient(rgba(34,19,13,.40),rgba(34,19,13,.40)),
    url("images/vault-assets/leather-texture-hd.jpg") center/cover no-repeat !important;
  border:14px solid #2b1811 !important;
  border-radius:24px;
  box-shadow:0 44px 95px rgba(0,0,0,.62), inset 0 0 0 2px rgba(222,184,124,.18), inset 0 0 65px rgba(0,0,0,.30);
}

/* The post-login spread now reads as a leather album with a real tucked letter. */
.welcome-letter-spread {
  background:
    linear-gradient(rgba(36,19,12,.18),rgba(36,19,12,.18)),
    url("images/vault-assets/leather-texture-hd.jpg") center/cover no-repeat !important;
  padding:16px !important;
  border-radius:24px !important;
  box-shadow:0 36px 90px rgba(0,0,0,.48), inset 0 0 0 2px rgba(232,196,135,.18);
}
.welcome-letter-spread .album-page {
  background:
    radial-gradient(circle at 28% 24%,rgba(255,255,255,.72),transparent 27%),
    linear-gradient(95deg,#f5eee0,#eee4d3 52%,#f8f1e6) !important;
}
.welcome-letter-spread .album-page-left { overflow:hidden; }
.leather-letter-fold {
  position:absolute;
  left:-2%; bottom:-3%;
  width:72%; height:55%;
  z-index:2;
  background:
    linear-gradient(145deg,rgba(255,255,255,.09),transparent 27%),
    url("images/vault-assets/leather-texture-hd.jpg") center/cover no-repeat;
  clip-path:polygon(0 14%, 100% 0, 84% 100%, 0 100%);
  filter:drop-shadow(12px -10px 18px rgba(35,19,12,.30));
  transform:rotate(-1.2deg);
}
.leather-letter-fold::after {
  content:""; position:absolute; inset:14px;
  border:1px dashed rgba(231,193,132,.42);
  clip-path:inherit;
}
.leather-fold-stitch { position:absolute; inset:0; box-shadow:inset 0 8px 12px rgba(255,255,255,.05); }
.letter-pocket { z-index:5 !important; transform:translateY(-4%) rotate(-1deg); }
.tucked-envelope {
  filter:drop-shadow(0 18px 18px rgba(28,18,12,.27));
  transform:translateY(-8px) rotate(-1.2deg);
}
.welcome-fold-flower {
  position:absolute; z-index:6; pointer-events:none;
  object-fit:contain; filter:drop-shadow(4px 10px 8px rgba(40,28,18,.22));
}
.welcome-fold-flower-one { width:150px; left:8%; bottom:8%; transform:rotate(-18deg); opacity:.82; }
.welcome-fold-flower-two { width:80px; left:31%; bottom:25%; transform:rotate(14deg); opacity:.9; }
.album-margin-note { z-index:7 !important; }

/* Correct the ribbon: centered in the gutter and never clipped. */
.timeline-book { overflow:visible !important; }
.timeline-page-left,
.timeline-page-right { overflow:visible; }
.heirloom-bookmark {
  left:calc(100% + 2px) !important;
  top:-18px !important;
  width:54px !important;
  min-height:174px !important;
  padding:18px 10px 24px !important;
  z-index:25 !important;
  transform:translateX(-50%) !important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.08),transparent 26%,rgba(0,0,0,.22)),
    url("images/vault-assets/leather-texture-hd.jpg") center/cover no-repeat !important;
  border:1px solid rgba(232,198,143,.42);
  box-shadow:0 12px 20px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.05);
}
.heirloom-bookmark span,
.heirloom-bookmark strong { color:#fff4df !important; text-shadow:0 1px 2px #1a0d08; }
.heirloom-bookmark::after { bottom:-20px !important; border-left-width:27px !important; border-right-width:27px !important; }

/* Use the real stationery asset rather than a CSS sticky note. */
.timeline-heirloom-note {
  width:220px !important; height:170px !important;
  background:none !important; padding:0 !important;
  transform:rotate(2deg) !important;
  filter:drop-shadow(0 15px 12px rgba(57,40,20,.22));
}
.timeline-heirloom-note::before,
.timeline-heirloom-note::after { display:none !important; }
.timeline-heirloom-note img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.timeline-heirloom-note .note-copy {
  position:absolute; left:43px; right:24px; top:59px;
  font-size:.86rem; line-height:1.45; color:#5b4930;
  transform:rotate(-1deg); text-align:center;
}
.timeline-heirloom-note .note-signature {
  position:absolute; right:38px; bottom:27px; color:#6c5637;
}
img.paper-clip-decoration { content:url("images/vault-assets/paperclip-real.png"); width:46px !important; }

/* Tabs and filters always readable. */
.day-tab,
.timeline-day-tabs .day-tab,
.day-tabs .day-tab {
  color:#f8ead4 !important;
  background:linear-gradient(rgba(28,14,9,.28),rgba(28,14,9,.28)),url("images/vault-assets/leather-texture-hd.jpg") center/cover no-repeat !important;
  opacity:1 !important;
  filter:none !important;
}
.template-categories { padding-top:.28rem !important; min-height:46px; align-content:flex-start; }
.template-categories button,
.template-category-button { color:#f8ead4 !important; background:#2a1812 !important; border-color:rgba(232,196,135,.50) !important; }

/* Analogue objects throughout the entire Vault, not only the builder. */
.vault-keepsake-layer { position:fixed; inset:0; pointer-events:none; z-index:2; overflow:hidden; }
.vault-keepsake-layer img { position:absolute; opacity:0; transition:opacity .5s ease; }
body.vault-unlocked .vault-keepsake-layer img { opacity:.055; }
.keepsake-camera { width:190px; right:-30px; top:32vh; transform:rotate(-8deg); }
.keepsake-film-roll { width:200px; left:-58px; top:68vh; transform:rotate(16deg); }
.keepsake-film-coil { width:170px; right:3vw; bottom:4vh; transform:rotate(-11deg); }

/* Section-specific keepsakes with real assets. */
.vault-dashboard::after {
  content:""; position:absolute; width:170px; height:170px; right:2%; bottom:3%;
  background:url("images/vault-assets/film-roll-real.png") center/contain no-repeat;
  opacity:.075; pointer-events:none; transform:rotate(9deg);
}
.priorities-section::after {
  content:""; position:absolute; width:95px; height:170px; right:3%; top:12%;
  background:url("images/vault-assets/pressed-flower-purple-real.png") center/contain no-repeat;
  opacity:.15; pointer-events:none; transform:rotate(12deg);
}
.venue-section::after {
  content:""; position:absolute; width:260px; height:150px; right:-2%; top:8%;
  background:url("images/vault-assets/film-ribbon-real.png") center/contain no-repeat;
  opacity:.055; pointer-events:none;
}
.engagement-section::before {
  content:""; position:absolute; width:150px; height:150px; right:2%; bottom:3%;
  background:url("images/vault-assets/film-coil-real.png") center/contain no-repeat;
  opacity:.07; pointer-events:none;
}
.wedding-day-section::before {
  content:""; position:absolute; width:140px; height:180px; left:1%; top:9%;
  background:url("images/vault-assets/pressed-flowers-real.png") center/contain no-repeat;
  opacity:.11; pointer-events:none; transform:rotate(-8deg);
}
.film-story::before {
  width:clamp(135px,17vw,245px) !important;
  background-image:url("images/vault-assets/super8-camera-real.png") !important;
  opacity:.12 !important;
  filter:sepia(.15) grayscale(.1) !important;
}
.after-section::after {
  background-image:url("images/vault-assets/film-roll-real.png") !important;
  width:190px !important; height:190px !important; opacity:.07 !important;
}

@media (max-width:760px) {
  .welcome-letter-spread { padding:9px !important; }
  .leather-letter-fold { width:92%; height:47%; }
  .welcome-fold-flower-one { width:105px; left:2%; }
  .welcome-fold-flower-two { width:60px; left:34%; }
  .heirloom-bookmark {
    left:50% !important; top:-10px !important; min-height:auto !important; width:auto !important;
    writing-mode:horizontal-tb !important; padding:9px 22px 13px !important;
  }
  .heirloom-bookmark::after { display:none !important; }
  .timeline-heirloom-note { width:180px !important; height:140px !important; }
  .timeline-heirloom-note .note-copy { left:36px; right:19px; top:48px; font-size:.72rem; }
  .timeline-heirloom-note .note-signature { right:31px; bottom:23px; }
  .vault-keepsake-layer { display:none; }
}

/* ---------------------------------
   V2.8 — REAL LEATHER LETTER POCKET
---------------------------------- */
.welcome-letter-spread .album-page-left {
  overflow: hidden !important;
  isolation: isolate;
}

/* Retire the earlier flat diagonal leather layer. */
.leather-letter-fold,
.leather-fold-stitch,
.pocket-shadow {
  display: none !important;
}

.letter-pocket {
  position: absolute !important;
  left: 5.5% !important;
  bottom: 4.5% !important;
  width: 88% !important;
  height: 67% !important;
  z-index: 8 !important;
  transform: none !important;
  pointer-events: none;
  filter: drop-shadow(0 24px 28px rgba(35, 20, 12, .24));
}

.pocket-back {
  position: absolute;
  inset: 10% 3% 3%;
  z-index: 1;
  border-radius: 12px 12px 20px 20px;
  background:
    linear-gradient(110deg, rgba(255,255,255,.08), transparent 28%, rgba(0,0,0,.08) 78%),
    url("images/vault-assets/leather-texture-hd.jpg") center / cover no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -18px 30px rgba(20,10,6,.22),
    0 15px 24px rgba(43,25,15,.18);
}

.pocket-opening-shadow {
  position: absolute;
  left: 5.5%;
  right: 5.5%;
  top: 31%;
  height: 32px;
  z-index: 5;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(18,9,5,.54), rgba(18,9,5,.18) 52%, transparent 73%);
  filter: blur(5px);
  transform: perspective(420px) rotateX(68deg);
  transform-origin: center;
}

.pocket-front {
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 0;
  height: 57%;
  z-index: 10;
  overflow: hidden;
  border-radius: 8px 8px 22px 22px;
  clip-path: polygon(0 13%, 10% 8%, 24% 11%, 39% 5%, 54% 10%, 69% 4%, 84% 10%, 100% 6%, 100% 100%, 0 100%);
  background:
    linear-gradient(150deg, rgba(255,255,255,.11), transparent 25%, rgba(0,0,0,.08) 72%),
    url("images/vault-assets/leather-texture-hd.jpg") center 52% / cover no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 18px 24px rgba(38,18,10,.18),
    inset 0 -22px 30px rgba(22,10,6,.22),
    0 -4px 10px rgba(31,17,10,.16);
}

.pocket-front::before {
  content: "";
  position: absolute;
  left: 3.5%;
  right: 3.5%;
  top: 12%;
  bottom: 5%;
  border: 1px dashed rgba(228, 186, 124, .48);
  border-radius: 7px 7px 15px 15px;
  clip-path: inherit;
  opacity: .82;
}

.pocket-front::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 5%;
  height: 24px;
  background: linear-gradient(180deg, rgba(18,8,4,.27), transparent);
  opacity: .75;
}

.pocket-front-stitch {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.letter-pocket .tucked-envelope {
  position: absolute !important;
  left: 50% !important;
  top: 3% !important;
  z-index: 7 !important;
  width: min(76%, 430px) !important;
  transform: translateX(-50%) rotate(-1.1deg) !important;
  transform-origin: center bottom;
  pointer-events: auto;
  filter: drop-shadow(0 17px 16px rgba(27,14,8,.30));
  transition: transform .35s ease, filter .35s ease;
}

.letter-pocket .tucked-envelope:hover,
.letter-pocket .tucked-envelope:focus-visible {
  transform: translateX(-50%) translateY(-12px) rotate(-.4deg) !important;
  filter: drop-shadow(0 24px 20px rgba(27,14,8,.34));
}

.letter-pocket .welcome-fold-flower {
  position: absolute !important;
  z-index: 8 !important;
  pointer-events: none;
  object-fit: contain;
  filter: drop-shadow(3px 9px 7px rgba(32,19,11,.23));
}

.letter-pocket .welcome-fold-flower-one {
  width: 145px !important;
  left: 4.5% !important;
  bottom: 34% !important;
  transform: rotate(-14deg) !important;
  opacity: .94 !important;
}

.letter-pocket .welcome-fold-flower-two {
  width: 78px !important;
  right: 8% !important;
  left: auto !important;
  bottom: 40% !important;
  transform: rotate(13deg) !important;
  opacity: .96 !important;
}

/* Keep the signature note outside the pocket so nothing is hidden behind it. */
.welcome-letter-spread .album-margin-note {
  left: auto !important;
  right: 7% !important;
  bottom: 6% !important;
  z-index: 14 !important;
  max-width: 190px;
  text-align: right;
  color: rgba(74,56,42,.76);
}

@media (max-width: 900px) {
  .letter-pocket {
    left: 4% !important;
    width: 92% !important;
    height: 64% !important;
    bottom: 3% !important;
  }
  .letter-pocket .tucked-envelope {
    width: min(79%, 390px) !important;
    top: 5% !important;
  }
  .letter-pocket .welcome-fold-flower-one { width: 112px !important; left: 1% !important; }
  .letter-pocket .welcome-fold-flower-two { width: 62px !important; right: 4% !important; }
  .welcome-letter-spread .album-margin-note { display: none !important; }
}

@media (max-width: 620px) {
  .letter-pocket {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 430px !important;
    margin-top: 1.25rem;
  }
  .pocket-front { height: 55%; }
  .letter-pocket .tucked-envelope { width: 78% !important; }
  .letter-pocket .welcome-fold-flower-one { width: 98px !important; }
  .letter-pocket .welcome-fold-flower-two { width: 55px !important; }
}

/* =========================================================
   THE WEDDING VAULT v3.0 — TIMELINE STABILITY + LUXURY RESET
   Clean, non-pixelated stage and readable controls.
   ========================================================= */

.timeline-builder-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(170,132,92,.13), transparent 38%),
    linear-gradient(145deg, #151310 0%, #201a16 46%, #0f0e0c 100%) !important;
  padding: clamp(3rem, 6vw, 7rem) 0 !important;
}

.timeline-builder-shell.heirloom-album-shell {
  width: min(96vw, 1680px) !important;
  max-width: 1680px !important;
  margin-inline: auto !important;
  padding: clamp(1rem, 1.6vw, 1.75rem) !important;
  background: linear-gradient(145deg, #2a1a14, #160f0c 62%, #302019) !important;
  border: 1px solid rgba(213, 173, 116, .42) !important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.48),
    inset 0 0 0 2px rgba(255,255,255,.025),
    inset 0 0 0 7px rgba(93,57,39,.7) !important;
}

.timeline-builder-shell.heirloom-album-shell::before {
  background:
    linear-gradient(90deg, transparent 0 49.7%, rgba(255,255,255,.025) 50%, transparent 50.3%) !important;
  opacity: .55 !important;
}

.timeline-workspace {
  display: grid !important;
  grid-template-columns: minmax(330px, 390px) minmax(0, 1fr) !important;
  gap: clamp(1.2rem, 2vw, 2rem) !important;
  align-items: start !important;
  width: 100% !important;
}

.timeline-library {
  min-width: 0 !important;
  position: relative !important;
  z-index: 5 !important;
}

.library-sticky {
  position: sticky !important;
  top: 86px !important;
  height: min(760px, calc(100vh - 110px)) !important;
  min-height: 620px !important;
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  gap: .85rem !important;
  padding: 1.35rem !important;
  overflow: hidden !important;
  background: linear-gradient(160deg, #35231b 0%, #241711 100%) !important;
  border: 1px solid rgba(217,178,123,.45) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.03) !important;
}

.template-categories {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .45rem !important;
  max-height: 108px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: .1rem .2rem .35rem 0 !important;
  margin: 0 !important;
}

.template-categories button,
.template-category-button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  padding: .56rem .72rem !important;
  color: #f7ead7 !important;
  background: #2b1a14 !important;
  border: 1px solid rgba(223,184,126,.52) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.template-categories button.active,
.template-category-button.active,
.template-categories button[aria-pressed="true"] {
  color: #21150f !important;
  background: linear-gradient(#f4e3bb, #d1a967) !important;
  border-color: #f7e3b6 !important;
}

.timeline-template-list {
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: .1rem .5rem .75rem 0 !important;
  margin: 0 !important;
  scrollbar-gutter: stable !important;
}

.timeline-template-card,
.template-moment,
.timeline-template-list button {
  margin-bottom: .55rem !important;
  color: #2d211a !important;
  background: linear-gradient(180deg, #fbf3e3 0%, #efe0c5 100%) !important;
  border: 1px solid #cbb58f !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.13) !important;
}

.timeline-book-area {
  min-width: 0 !important;
  overflow: visible !important;
}

.timeline-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 1rem !important;
  align-items: center !important;
  margin-bottom: 1rem !important;
}

.day-tabs,
.timeline-day-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .65rem !important;
  overflow: visible !important;
}

.day-tab,
.day-tabs .day-tab,
.timeline-day-tabs .day-tab {
  min-height: 52px !important;
  padding: .82rem 1.15rem !important;
  color: #f8ead5 !important;
  background: linear-gradient(160deg, #3a261d, #21140f) !important;
  border: 1px solid rgba(227,188,130,.65) !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.24) !important;
}

.day-tab:hover,
.day-tabs .day-tab:hover,
.timeline-day-tabs .day-tab:hover {
  color: #fff7e9 !important;
  transform: translateY(-2px) !important;
}

.day-tab.active,
.day-tab[aria-selected="true"],
.day-tabs .day-tab.active,
.timeline-day-tabs .day-tab.active {
  color: #24170f !important;
  background: linear-gradient(#f5dfaa, #c99a52) !important;
  border-color: #f8e8c3 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.55) !important;
}

.timeline-toolbar-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .55rem !important;
  justify-content: flex-end !important;
}

.timeline-book {
  position: relative !important;
  overflow: visible !important;
  min-height: 680px !important;
  background: #f4ead8 !important;
  box-shadow: 0 24px 54px rgba(0,0,0,.35) !important;
}

.heirloom-bookmark {
  left: calc(50% - 26px) !important;
  top: 14px !important;
  transform: translateX(-50%) !important;
  width: 56px !important;
  min-height: 150px !important;
  z-index: 20 !important;
  overflow: visible !important;
}

.timeline-heirloom-note,
.paper-clip-decoration,
.pressed-botanical-image,
.timeline-book-stage {
  pointer-events: none !important;
}

.timeline-heirloom-note {
  right: 3.5% !important;
  top: 4% !important;
  width: 190px !important;
  height: 150px !important;
  z-index: 8 !important;
}

.timeline-dropzone,
.timeline-event-list,
.timeline-add-inline {
  position: relative !important;
  z-index: 10 !important;
}

@media (max-width: 1180px) {
  .timeline-workspace {
    grid-template-columns: 1fr !important;
  }
  .library-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: auto auto auto minmax(280px, 420px) auto !important;
  }
  .timeline-toolbar {
    grid-template-columns: 1fr !important;
  }
  .timeline-toolbar-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width: 720px) {
  .timeline-builder-shell.heirloom-album-shell {
    width: 100% !important;
    padding: .7rem !important;
    border-width: 1px !important;
  }
  .library-sticky {
    padding: 1rem !important;
  }
  .template-categories,
  .day-tabs,
  .timeline-day-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
    padding-bottom: .45rem !important;
  }
  .day-tab,
  .day-tabs .day-tab,
  .timeline-day-tabs .day-tab {
    min-width: max-content !important;
  }
  .timeline-book {
    overflow: hidden !important;
    min-height: 560px !important;
  }
  .heirloom-bookmark {
    top: 8px !important;
  }
}

/* =========================================================
   v3.0.1 — TIMELINE USABILITY + READABILITY REFINEMENT
   ========================================================= */

/* Give the planning drawer more breathing room and make it feel intentional. */
.timeline-workspace {
  grid-template-columns: minmax(390px, 440px) minmax(0, 1fr) !important;
  gap: clamp(1.35rem, 2.2vw, 2.4rem) !important;
}

.library-sticky {
  height: min(820px, calc(100vh - 92px)) !important;
  min-height: 700px !important;
  padding: 1.65rem 1.55rem 1.35rem !important;
  grid-template-rows: auto auto auto minmax(260px, 1fr) auto !important;
  gap: 1rem !important;
}

.library-sticky h3,
.library-sticky .timeline-library-title {
  margin-bottom: .25rem !important;
}

.timeline-library-search,
.library-sticky input[type="search"] {
  min-height: 54px !important;
  font-size: .98rem !important;
}

/* Show all filters clearly instead of hiding them in a cramped mini scroller. */
.template-categories {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .55rem !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

.template-categories button,
.template-category-button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: .66rem .65rem !important;
  white-space: normal !important;
  line-height: 1.2 !important;
  text-align: center !important;
  font-size: .73rem !important;
  letter-spacing: .12em !important;
}

.timeline-template-list {
  min-height: 260px !important;
  padding-right: .72rem !important;
}

.timeline-template-card,
.template-moment,
.timeline-template-list button {
  min-height: 76px !important;
  padding: .88rem 1rem !important;
}

/* Day tabs: always high contrast, whether selected or not. */
.day-tab,
.day-tabs .day-tab,
.timeline-day-tabs .day-tab {
  color: #fff8eb !important;
  -webkit-text-fill-color: #fff8eb !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  background: linear-gradient(160deg, #4a3024 0%, #24150f 100%) !important;
  border-color: rgba(232,194,139,.78) !important;
  opacity: 1 !important;
}

.day-tab span,
.day-tabs .day-tab span,
.timeline-day-tabs .day-tab span {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  opacity: 1 !important;
}

.day-tab.active,
.day-tab[aria-selected="true"],
.day-tabs .day-tab.active,
.timeline-day-tabs .day-tab.active {
  color: #24160f !important;
  -webkit-text-fill-color: #24160f !important;
  background: linear-gradient(180deg, #f6dfa7 0%, #c7964c 100%) !important;
}

/* Use the real torn stationery graphic and keep the copy inside it. */
.timeline-heirloom-note {
  width: clamp(150px, 15vw, 205px) !important;
  min-height: 130px !important;
  padding: 34px 24px 27px !important;
  background: url("images/vault-assets/taped-note-real.png") center / 100% 100% no-repeat !important;
  box-shadow: 0 14px 24px rgba(55,38,22,.18) !important;
  transform: rotate(2deg) !important;
  overflow: hidden !important;
}

.timeline-heirloom-note::before,
.timeline-heirloom-note::after {
  display: none !important;
}

.timeline-heirloom-note .note-copy {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  color: #594b3d !important;
  font-size: clamp(.74rem, .8vw, .9rem) !important;
  line-height: 1.45 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}

.timeline-heirloom-note .note-signature {
  display: block !important;
  margin-top: .35rem !important;
  color: #594b3d !important;
  font-size: .8rem !important;
  text-align: right !important;
}

/* Keep the bookmark fully inside the gutter and readable. */
.heirloom-bookmark {
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 62px !important;
  min-height: 158px !important;
  padding-top: 18px !important;
  overflow: visible !important;
}

@media (max-width: 1240px) {
  .timeline-workspace {
    grid-template-columns: minmax(330px, 380px) minmax(0, 1fr) !important;
  }
  .template-categories {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 980px) {
  .timeline-workspace {
    grid-template-columns: 1fr !important;
  }
  .library-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .template-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   v3.0.2 — SLIM PLANNING DRAWER + BOOKMARK / NOTE REFINEMENT
   ========================================================= */

/* Restore the taller, slimmer planning drawer. */
.timeline-workspace {
  grid-template-columns: minmax(300px, 335px) minmax(0, 1fr) !important;
  gap: clamp(1.15rem, 1.8vw, 1.9rem) !important;
}

.library-sticky {
  height: min(850px, calc(100vh - 88px)) !important;
  min-height: 720px !important;
  padding: 1.35rem 1.2rem 1.15rem !important;
  grid-template-rows: auto auto auto minmax(330px, 1fr) auto !important;
  gap: .78rem !important;
}

.library-sticky .library-heading h3 {
  font-size: clamp(1.8rem, 2.4vw, 2.55rem) !important;
  line-height: .96 !important;
}

.library-sticky .library-heading p:not(.paper-label) {
  font-size: .88rem !important;
  line-height: 1.55 !important;
}

.library-sticky input[type="search"] {
  min-height: 48px !important;
  font-size: .9rem !important;
}

/* Compact, easy-to-scan filters with a small internal scroll area. */
.template-categories {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .42rem !important;
  max-height: 132px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 .3rem .25rem 0 !important;
  scrollbar-gutter: stable !important;
}

.template-categories button,
.template-category-button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  padding: .48rem .42rem !important;
  font-size: .66rem !important;
  letter-spacing: .1em !important;
  white-space: normal !important;
  line-height: 1.15 !important;
}

.timeline-template-list {
  min-height: 330px !important;
  padding-right: .62rem !important;
}

.timeline-template-card,
.template-moment,
.timeline-template-list button {
  min-height: 66px !important;
  padding: .72rem .82rem !important;
  margin-bottom: .5rem !important;
}

/* Day tabs must remain readable even when inactive. */
.day-tab,
.day-tabs .day-tab,
.timeline-day-tabs .day-tab,
.day-tab span,
.day-tabs .day-tab span,
.timeline-day-tabs .day-tab span {
  color: #fffaf0 !important;
  -webkit-text-fill-color: #fffaf0 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
}

.day-tab.active,
.day-tab[aria-selected="true"],
.day-tabs .day-tab.active,
.timeline-day-tabs .day-tab.active,
.day-tab.active span,
.day-tab[aria-selected="true"] span {
  color: #26180f !important;
  -webkit-text-fill-color: #26180f !important;
  text-shadow: none !important;
}

/* Move the ribbon off the heading and into the inner edge of the left page,
   between Edit Day and the right-page drop area. */
.timeline-page-left .heirloom-bookmark {
  left: auto !important;
  right: -31px !important;
  top: 92px !important;
  transform: none !important;
  width: 58px !important;
  min-height: 154px !important;
  z-index: 30 !important;
}

/* Replace the unreliable sticky graphic with a small vellum keepsake card. */
.timeline-heirloom-note {
  right: 4.4% !important;
  top: 4.5% !important;
  width: clamp(155px, 13vw, 190px) !important;
  height: auto !important;
  min-height: 92px !important;
  padding: 1.15rem 1.05rem 1rem !important;
  overflow: visible !important;
  transform: rotate(1.4deg) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.74), rgba(238,226,202,.88)),
    repeating-linear-gradient(0deg, transparent 0 20px, rgba(111,86,60,.08) 20px 21px) !important;
  border: 1px solid rgba(132,101,68,.24) !important;
  border-radius: 2px !important;
  box-shadow: 0 12px 26px rgba(53,35,22,.18) !important;
}

.timeline-heirloom-note img {
  display: none !important;
}

.timeline-heirloom-note::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  width: 48px !important;
  height: 14px !important;
  top: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(-2deg) !important;
  background: rgba(195,156,76,.55) !important;
  box-shadow: 0 2px 4px rgba(60,40,20,.12) !important;
}

.timeline-heirloom-note::after {
  content: "A NOTE FROM BRITANI" !important;
  display: block !important;
  position: static !important;
  margin-bottom: .55rem !important;
  color: #8b6d4e !important;
  font-family: var(--font-sans, Arial, sans-serif) !important;
  font-size: .56rem !important;
  letter-spacing: .18em !important;
  text-align: center !important;
}

.timeline-heirloom-note .note-copy {
  display: block !important;
  position: static !important;
  width: 100% !important;
  color: #514438 !important;
  font-size: clamp(.72rem, .78vw, .86rem) !important;
  line-height: 1.45 !important;
  text-align: center !important;
  overflow-wrap: normal !important;
}

.timeline-heirloom-note .note-signature {
  display: block !important;
  position: static !important;
  margin-top: .4rem !important;
  color: #6b5846 !important;
  font-size: .72rem !important;
  text-align: right !important;
}

@media (max-width: 1240px) {
  .timeline-workspace {
    grid-template-columns: minmax(285px, 315px) minmax(0, 1fr) !important;
  }
}

@media (max-width: 980px) {
  .timeline-workspace {
    grid-template-columns: 1fr !important;
  }
  .library-sticky {
    height: auto !important;
    min-height: 0 !important;
  }
  .timeline-page-left .heirloom-bookmark {
    right: 14px !important;
    top: 12px !important;
    min-height: 120px !important;
  }
}

/* =========================================================
   v3.0.3 — REMOVE TIMELINE NOTE + SCROLLABLE CATEGORIES
   ========================================================= */

/* Remove the decorative note entirely so the timeline page stays clear. */
.timeline-heirloom-note,
.timeline-page-right .timeline-heirloom-note,
.timeline-book .timeline-heirloom-note {
  display: none !important;
}

/* Give the category area its own obvious, easy-to-use scroll region. */
.template-categories {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .42rem !important;
  max-height: 126px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 .5rem .3rem 0 !important;
  margin-right: -.15rem !important;
  scrollbar-gutter: stable !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.template-categories::-webkit-scrollbar {
  width: 7px !important;
}

.template-categories::-webkit-scrollbar-track {
  background: rgba(255, 247, 232, .08) !important;
  border-radius: 999px !important;
}

.template-categories::-webkit-scrollbar-thumb {
  background: rgba(218, 188, 138, .62) !important;
  border: 1px solid rgba(255, 243, 222, .22) !important;
  border-radius: 999px !important;
}

.template-categories {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(218, 188, 138, .62) rgba(255, 247, 232, .08) !important;
}

/* Keep every category label readable while scrolling. */
.template-categories button,
.template-category-button {
  flex: 0 0 auto !important;
  color: #fff8eb !important;
  -webkit-text-fill-color: #fff8eb !important;
  opacity: 1 !important;
}

.template-categories button.active,
.template-category-button.active {
  color: #2b1b12 !important;
  -webkit-text-fill-color: #2b1b12 !important;
}


/* v3.0.5 — remove pocket caption and add an embossed Dostal Digital monogram */
.welcome-letter-spread .album-margin-note {
  display: none !important;
}

.pocket-front {
  position: relative;
}

.pocket-dd-brand {
  position: absolute;
  left: 50%;
  bottom: 17%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 58px;
  padding: 8px 12px 7px;
  border-radius: 50%;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
  color: rgba(37, 20, 12, .54);
  border: 1px solid rgba(38, 20, 12, .32);
  background: rgba(78, 40, 24, .035);
  box-shadow:
    inset 1px 1px 1px rgba(255, 223, 184, .16),
    inset -2px -2px 3px rgba(25, 12, 7, .42),
    0 1px 0 rgba(255,255,255,.05);
  text-shadow:
    1px 1px 0 rgba(255, 220, 177, .12),
    -1px -1px 1px rgba(22, 10, 6, .5);
  opacity: .78;
  pointer-events: none;
}

.pocket-dd-brand::before,
.pocket-dd-brand::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  border: 1px dashed rgba(37, 18, 10, .18);
}

.pocket-dd-brand::after {
  inset: -5px;
  border-style: solid;
  border-color: rgba(255, 222, 184, .055);
}

@media (max-width: 700px) {
  .pocket-dd-brand {
    min-width: 48px;
    min-height: 48px;
    font-size: 20px;
    bottom: 13%;
  }
}

/* =========================================================
   v3.0.6 — POCKET LAYERING FIX
   Keeps the leather pocket low while allowing the letter and
   dried flowers to visibly peek out above the opening.
========================================================= */
.welcome-letter-spread .letter-pocket {
  height: 66% !important;
  bottom: 3.5% !important;
}

/* v3.0.5 accidentally changed this from absolute to relative,
   causing the front leather panel to expand over the contents. */
.welcome-letter-spread .pocket-front {
  position: absolute !important;
  left: 2% !important;
  right: 2% !important;
  bottom: 0 !important;
  height: 43% !important;
  z-index: 10 !important;
}

.welcome-letter-spread .letter-pocket .tucked-envelope {
  top: -7% !important;
  width: min(72%, 410px) !important;
  z-index: 8 !important;
}

.welcome-letter-spread .letter-pocket .welcome-fold-flower-one {
  left: 2.5% !important;
  bottom: 38% !important;
  width: 150px !important;
  z-index: 9 !important;
}

.welcome-letter-spread .letter-pocket .welcome-fold-flower-two {
  right: 5% !important;
  bottom: 44% !important;
  width: 82px !important;
  z-index: 9 !important;
}

/* Keep the brand subtle and pressed into the lower leather only. */
.welcome-letter-spread .pocket-dd-brand {
  bottom: 12% !important;
  min-width: 50px !important;
  min-height: 50px !important;
  font-size: 21px !important;
  opacity: .56 !important;
}

@media (max-width: 900px) {
  .welcome-letter-spread .pocket-front { height: 44% !important; }
  .welcome-letter-spread .letter-pocket .tucked-envelope {
    top: -3% !important;
    width: min(76%, 380px) !important;
  }
  .welcome-letter-spread .letter-pocket .welcome-fold-flower-one {
    bottom: 40% !important;
    width: 118px !important;
  }
  .welcome-letter-spread .letter-pocket .welcome-fold-flower-two {
    bottom: 45% !important;
    width: 64px !important;
  }
}

@media (max-width: 620px) {
  .welcome-letter-spread .letter-pocket { height: 410px !important; }
  .welcome-letter-spread .pocket-front { height: 42% !important; }
  .welcome-letter-spread .letter-pocket .tucked-envelope {
    top: 1% !important;
    width: 76% !important;
  }
  .welcome-letter-spread .letter-pocket .welcome-fold-flower-one {
    bottom: 39% !important;
    width: 96px !important;
  }
  .welcome-letter-spread .letter-pocket .welcome-fold-flower-two {
    bottom: 44% !important;
    width: 54px !important;
  }
}


/* =========================================================
   v3.0.7 — CUSTOM DOSTAL DIGITAL SEAL
   Uses the uploaded gold DD wax seal on the envelope and as
   a subtle branded emboss on the leather pocket.
========================================================= */
.welcome-letter-spread .wax-seal-image {
  position: absolute !important;
  left: 50% !important;
  top: 52% !important;
  width: 74px !important;
  height: 74px !important;
  object-fit: contain !important;
  transform: translate(-50%, -50%) !important;
  z-index: 8 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: 0 7px 12px rgba(70, 38, 13, .24) !important;
  filter: saturate(.95) contrast(1.04) !important;
  pointer-events: none !important;
}

.welcome-letter-spread .pocket-dd-brand-image {
  position: absolute !important;
  left: 50% !important;
  bottom: 9% !important;
  width: 94px !important;
  height: 94px !important;
  padding: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  opacity: .23 !important;
  filter: grayscale(1) sepia(.7) brightness(.43) contrast(1.55) !important;
  mix-blend-mode: multiply !important;
  box-shadow: none !important;
  text-shadow: none !important;
  pointer-events: none !important;
}

.welcome-letter-spread .pocket-dd-brand-image::before,
.welcome-letter-spread .pocket-dd-brand-image::after {
  display: none !important;
  content: none !important;
}

/* Lower the personalized envelope so it visibly sits inside the pocket. */
.welcome-letter-spread .letter-pocket .tucked-envelope {
  top: 2% !important;
}

@media (max-width: 900px) {
  .welcome-letter-spread .wax-seal-image {
    width: 64px !important;
    height: 64px !important;
  }
  .welcome-letter-spread .pocket-dd-brand-image {
    width: 78px !important;
    height: 78px !important;
  }
  .welcome-letter-spread .letter-pocket .tucked-envelope {
    top: 5% !important;
  }
}

@media (max-width: 620px) {
  .welcome-letter-spread .wax-seal-image {
    width: 54px !important;
    height: 54px !important;
  }
  .welcome-letter-spread .pocket-dd-brand-image {
    width: 66px !important;
    height: 66px !important;
    bottom: 7% !important;
  }
  .welcome-letter-spread .letter-pocket .tucked-envelope {
    top: 8% !important;
  }
}

/* =========================================================
   v3.0.8 — DD SEAL PLACEMENT + POCKET EMBOSS FIX
   Keeps the personalized names readable, removes the white
   square around the uploaded seal, and makes the pocket mark
   look pressed into the leather rather than pasted on top.
========================================================= */
.welcome-letter-spread .wax-seal-image {
  top: 67% !important;
  width: 58px !important;
  height: 58px !important;
  filter: saturate(.92) contrast(1.06) drop-shadow(0 5px 5px rgba(55, 29, 10, .32)) !important;
  box-shadow: none !important;
}

.welcome-letter-spread .pocket-dd-brand-image {
  bottom: 8.5% !important;
  width: 76px !important;
  height: 76px !important;
  opacity: .18 !important;
  filter: grayscale(1) sepia(.85) brightness(.30) contrast(1.9) blur(.15px) !important;
  mix-blend-mode: multiply !important;
}

/* Keep names/date above the seal visually. */
.welcome-letter-spread .envelope-names,
.welcome-letter-spread .envelope-date,
.welcome-letter-spread .envelope-kicker,
.welcome-letter-spread .envelope-open-copy {
  position: relative;
  z-index: 9 !important;
}

@media (max-width: 900px) {
  .welcome-letter-spread .wax-seal-image {
    top: 68% !important;
    width: 52px !important;
    height: 52px !important;
  }
  .welcome-letter-spread .pocket-dd-brand-image {
    width: 68px !important;
    height: 68px !important;
  }
}

@media (max-width: 620px) {
  .welcome-letter-spread .wax-seal-image {
    top: 69% !important;
    width: 46px !important;
    height: 46px !important;
  }
  .welcome-letter-spread .pocket-dd-brand-image {
    width: 58px !important;
    height: 58px !important;
  }
}

/* =========================================================
   v3.0.9 — LETTER TUCK + TEXT POSITION FIX
   Lowers the entire envelope into the leather pocket while
   moving its personalized wording higher, keeping the DD seal
   in the same place.
========================================================= */
.welcome-letter-spread .letter-pocket .tucked-envelope {
  top: 12% !important;
}

.welcome-letter-spread .tucked-envelope .envelope-label {
  margin-top: 24px !important;
  transform: translateY(-6px) !important;
  gap: 4px !important;
}

.welcome-letter-spread .tucked-envelope .envelope-label small {
  margin-bottom: 0 !important;
}

.welcome-letter-spread .tucked-envelope .envelope-label strong {
  line-height: .98 !important;
}

.welcome-letter-spread .tucked-envelope .envelope-wedding-date {
  margin-top: 0 !important;
}

.welcome-letter-spread .tucked-envelope .envelope-label em {
  margin-top: 2px !important;
}

/* The uploaded DD wax seal keeps its current visual placement. */
.welcome-letter-spread .wax-seal-image {
  top: 67% !important;
}

@media (max-width: 900px) {
  .welcome-letter-spread .letter-pocket .tucked-envelope {
    top: 14% !important;
  }

  .welcome-letter-spread .tucked-envelope .envelope-label {
    margin-top: 22px !important;
    transform: translateY(-5px) !important;
  }
}

@media (max-width: 620px) {
  .welcome-letter-spread .letter-pocket .tucked-envelope {
    top: 16% !important;
  }

  .welcome-letter-spread .tucked-envelope .envelope-label {
    margin-top: 18px !important;
    transform: translateY(-3px) !important;
    gap: 3px !important;
  }
}

/* =========================================================
   v3.0.10 — ENVELOPE TUCK + SEAM ALIGNMENT
   Makes the envelope read as physically tucked into the
   leather pocket while keeping every personalized line clear.
========================================================= */

/* Lower the full envelope so the leather pocket covers more of it. */
.welcome-letter-spread .letter-pocket .tucked-envelope {
  top: 23% !important;
  width: min(72%, 410px) !important;
  transform: translateX(-50%) rotate(-1deg) !important;
}

/* Keep the personalized copy in the clean upper portion of the envelope. */
.welcome-letter-spread .tucked-envelope .envelope-label {
  position: absolute !important;
  top: 20% !important;
  left: 7% !important;
  right: 7% !important;
  z-index: 9 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  margin: 0 !important;
  transform: none !important;
  text-align: center !important;
  pointer-events: none !important;
}

.welcome-letter-spread .tucked-envelope .envelope-label small {
  margin: 0 0 2px !important;
  font-size: clamp(8px, .72vw, 10px) !important;
  line-height: 1.1 !important;
  letter-spacing: .24em !important;
}

.welcome-letter-spread .tucked-envelope .envelope-label strong {
  max-width: 100% !important;
  margin: 0 !important;
  font-size: clamp(23px, 2.35vw, 32px) !important;
  line-height: .98 !important;
  white-space: normal !important;
  text-wrap: balance !important;
}

.welcome-letter-spread .tucked-envelope .envelope-wedding-date {
  margin: 3px 0 0 !important;
  font-size: clamp(9px, .82vw, 12px) !important;
  line-height: 1.15 !important;
  opacity: .78 !important;
}

.welcome-letter-spread .tucked-envelope .envelope-label em {
  margin: 5px 0 0 !important;
  font-size: clamp(7px, .66vw, 9px) !important;
  line-height: 1.15 !important;
  letter-spacing: .17em !important;
  opacity: .62 !important;
}

/* Place the DD seal exactly where the lower flap seams converge. */
.welcome-letter-spread .wax-seal-image {
  top: 66% !important;
  left: 50% !important;
  width: 56px !important;
  height: 56px !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10 !important;
}

/* The pocket must cover the lower portion of the letter, creating depth. */
.welcome-letter-spread .pocket-front {
  height: 45% !important;
  z-index: 12 !important;
}

/* Flowers stay visibly tucked beside—not over—the personalized wording. */
.welcome-letter-spread .letter-pocket .welcome-fold-flower-one {
  left: 1.5% !important;
  bottom: 39% !important;
  z-index: 11 !important;
}

.welcome-letter-spread .letter-pocket .welcome-fold-flower-two {
  right: 3.5% !important;
  bottom: 43% !important;
  z-index: 11 !important;
}

@media (max-width: 900px) {
  .welcome-letter-spread .letter-pocket .tucked-envelope {
    top: 24% !important;
    width: min(75%, 380px) !important;
  }

  .welcome-letter-spread .tucked-envelope .envelope-label {
    top: 18% !important;
    left: 6% !important;
    right: 6% !important;
  }

  .welcome-letter-spread .wax-seal-image {
    top: 66% !important;
    width: 50px !important;
    height: 50px !important;
  }

  .welcome-letter-spread .pocket-front {
    height: 46% !important;
  }
}

@media (max-width: 620px) {
  .welcome-letter-spread .letter-pocket .tucked-envelope {
    top: 25% !important;
    width: 78% !important;
  }

  .welcome-letter-spread .tucked-envelope .envelope-label {
    top: 16% !important;
    left: 5% !important;
    right: 5% !important;
    gap: 2px !important;
  }

  .welcome-letter-spread .tucked-envelope .envelope-label strong {
    font-size: clamp(19px, 6.4vw, 25px) !important;
  }

  .welcome-letter-spread .tucked-envelope .envelope-label em {
    margin-top: 3px !important;
    letter-spacing: .12em !important;
  }

  .welcome-letter-spread .wax-seal-image {
    top: 66% !important;
    width: 44px !important;
    height: 44px !important;
  }

  .welcome-letter-spread .pocket-front {
    height: 47% !important;
  }
}

/* =========================================================
   FAMILY PORTRAIT BUILDER — V3.1
========================================================= */
.family-builder-section{background:#15110f;padding:clamp(70px,9vw,140px) 4vw;position:relative;overflow:hidden}
.family-builder-section:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 10%,rgba(255,241,210,.08),transparent 38%),linear-gradient(135deg,rgba(255,255,255,.018),transparent 40%);pointer-events:none}
.family-builder-shell{max-width:1500px;margin:auto;position:relative;z-index:1}
.family-builder-heading{display:flex;justify-content:space-between;gap:40px;align-items:end;color:#f4ede2;margin-bottom:34px}
.family-builder-heading h2{font-family:"Cormorant Garamond",serif;font-size:clamp(44px,5vw,76px);line-height:.92;font-weight:400;margin:12px 0 22px}
.family-builder-heading h2 em{font-weight:400}
.family-builder-heading>div:first-child{max-width:850px}
.family-builder-heading p:not(.chapter-number){max-width:740px;color:rgba(244,237,226,.72);font-size:16px;line-height:1.75}
.family-save-status{flex:0 0 auto;background:#efe4d2;color:#3f3028;padding:13px 18px;box-shadow:0 12px 30px rgba(0,0,0,.22);font-size:11px;letter-spacing:.13em;text-transform:uppercase;display:flex;gap:10px;align-items:center}
.family-book{display:grid;grid-template-columns:minmax(340px,.78fr) minmax(620px,1.45fr);border:14px solid #3a241a;border-radius:20px;background:#3a241a;box-shadow:0 35px 80px rgba(0,0,0,.48);overflow:hidden;position:relative}
.family-book:after{content:"";position:absolute;top:0;bottom:0;left:35.3%;width:34px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(255,255,255,.5) 48%,rgba(0,0,0,.18));filter:blur(3px);pointer-events:none;z-index:4}
.family-page{min-height:850px;background:#f2eadc;color:#302821;padding:clamp(34px,4vw,64px);position:relative;background-image:radial-gradient(rgba(89,62,42,.07) .65px,transparent .7px),linear-gradient(95deg,rgba(114,78,47,.025),transparent 28%,rgba(255,255,255,.12) 72%,rgba(93,66,44,.03));background-size:7px 7px,100% 100%}
.family-page-left{box-shadow:inset -20px 0 35px rgba(67,44,29,.08)}
.family-page-right{box-shadow:inset 20px 0 35px rgba(67,44,29,.07)}
.family-page-heading h3{font-family:"Cormorant Garamond",serif;font-size:50px;font-weight:400;line-height:1;margin:8px 0 12px}
.family-page-heading>p:not(.paper-label){line-height:1.65;color:#746658;font-size:14px;max-width:520px}
.family-person-form{display:grid;gap:12px;margin:28px 0 24px;padding:20px;border:1px solid rgba(74,48,32,.19);background:rgba(255,250,240,.48);box-shadow:0 14px 25px rgba(65,42,28,.07)}
.family-person-form label,.family-editor-card label{display:grid;gap:7px}
.family-person-form label span,.family-editor-card label>span,.family-member-picker legend{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#7a695b}
.family-person-form input,.family-person-form select,.family-editor-card input,.family-editor-card textarea{border:1px solid rgba(71,49,34,.28);background:rgba(255,253,248,.78);padding:13px 14px;color:#342a23;font:inherit;width:100%}
.family-primary-button,.family-secondary-button{border:1px solid #4b3023;padding:13px 18px;text-transform:uppercase;letter-spacing:.13em;font-size:10px;cursor:pointer;transition:.25s ease}
.family-primary-button{background:#3b241a;color:#fff8ed}
.family-primary-button:hover{background:#5a3828;transform:translateY(-1px)}
.family-secondary-button{background:transparent;color:#49372d}
.family-secondary-button:hover{background:#49372d;color:#fff8ed}
.family-secondary-button.danger{border-color:#8c4e43;color:#7c3f36}
.family-people-list{display:grid;gap:10px;max-height:430px;overflow:auto;padding-right:8px}
.family-person-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;background:#f8f0e2;border:1px solid rgba(73,48,32,.18);padding:13px 14px;box-shadow:0 6px 13px rgba(74,46,29,.06)}
.family-person-card strong{font-family:"Cormorant Garamond",serif;font-size:22px;font-weight:500}
.family-person-meta{display:block;color:#7d6c5e;font-size:11px;margin-top:2px}
.family-person-remove{border:0;background:transparent;font-size:22px;color:#8a6c59;cursor:pointer;padding:5px}
.family-empty-copy{color:#8a796b;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:20px;padding:24px 0}
.family-list-heading{display:flex;justify-content:space-between;gap:24px;align-items:start}
.family-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.family-preset-drawer{margin:26px 0 24px;padding:18px 20px;background:#e5d3b6;border:1px solid rgba(73,48,32,.15);box-shadow:inset 0 0 25px rgba(255,255,255,.35),0 8px 18px rgba(67,43,27,.08)}
.family-preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:10px 2px 5px;overflow:visible}
.family-preset-button{width:100%;min-height:58px;border:1px solid #70513c;background:#f8ecda;color:#453329;padding:10px 12px;display:grid;grid-template-columns:24px 1fr auto;gap:9px;align-items:center;text-align:left;font-size:10px;line-height:1.35;letter-spacing:.065em;text-transform:uppercase;cursor:pointer;white-space:normal;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.family-preset-button:hover{background:#4b3023;color:#fff;transform:translateY(-1px);box-shadow:0 6px 14px rgba(58,37,24,.14)}
.family-preset-check{width:22px;height:22px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:13px;line-height:1}
.family-preset-button small{font-size:8px;letter-spacing:.12em;opacity:.78}
.family-preset-button.is-added{background:#ded9d1;border-color:#aaa197;color:#6f6962;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.family-preset-button.is-added .family-preset-check{background:#817a72;color:#fff;border-color:#817a72}
.family-preset-button.is-added:hover{background:#cbc5bd;color:#514b45}
@media(max-width:900px){.family-preset-grid{grid-template-columns:1fr}}

.family-grouping-list{display:grid;gap:12px;max-height:475px;overflow:auto;padding:3px 9px 3px 2px}
.family-grouping-card{display:grid;grid-template-columns:54px 1fr auto;gap:16px;align-items:center;background:#faf2e5;border:1px solid rgba(75,49,32,.18);padding:15px 16px;box-shadow:0 8px 17px rgba(64,42,28,.07);position:relative}
.family-grouping-number{font-family:"Cormorant Garamond",serif;font-size:30px;color:#ad8c63;text-align:center;border-right:1px solid rgba(74,49,33,.14);padding-right:12px}
.family-grouping-card h4{font-family:"Cormorant Garamond",serif;font-size:24px;font-weight:500;margin:0 0 4px}
.family-grouping-names{font-size:12px;color:#725f51;line-height:1.5}
.family-grouping-notes{font-size:11px;color:#947765;font-style:italic;margin-top:5px}
.family-card-controls{display:flex;gap:5px;align-items:center}
.family-card-controls button{width:31px;height:31px;border:1px solid rgba(71,46,30,.25);background:transparent;color:#49372d;cursor:pointer}
.family-card-controls button:hover{background:#49372d;color:#fff}
.family-grouping-empty{text-align:center;padding:60px 20px;color:#867466}
.family-grouping-empty span{font-size:25px;color:#b28a55}
.family-grouping-empty h4{font-family:"Cormorant Garamond",serif;font-size:30px;font-weight:400;margin:12px 0 8px}
.family-grouping-empty p{max-width:470px;margin:auto;line-height:1.6;font-size:13px}
.family-tip-card{margin-top:24px;border-top:1px solid rgba(71,48,32,.22);padding:18px 4px 0;color:#695749;max-width:650px}
.family-tip-card strong{font-family:"Nanum Pen Script",cursive;font-size:24px;font-weight:400;color:#563d2e}
.family-tip-card p{font-size:12px;line-height:1.6;margin-top:3px}
.family-editor-dialog{border:0;padding:0;background:transparent;max-width:min(760px,94vw);width:100%}
.family-editor-dialog::backdrop{background:rgba(18,13,10,.78);backdrop-filter:blur(5px)}
.family-editor-card{background:#f4ecdf;border:14px solid #3a241a;padding:32px;box-shadow:0 35px 80px rgba(0,0,0,.5);display:grid;gap:22px;color:#352b24}
.family-member-picker{border:1px solid rgba(71,49,34,.22);padding:18px;margin:0}
.family-member-picker legend{padding:0 8px}
#familyMemberPicker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:260px;overflow:auto}
.family-member-choice{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:10px!important;border:1px solid rgba(72,49,33,.15);background:#fbf4e8;padding:10px 11px;cursor:pointer}
.family-member-choice input{width:auto!important}
.family-member-choice span{font-size:13px!important;text-transform:none!important;letter-spacing:0!important;color:#44342a!important}
#familyMemberPickerEmpty{font-size:13px;color:#8a7768;font-style:italic}
.family-editor-actions{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center}
@media(max-width:1050px){.family-book{grid-template-columns:1fr}.family-book:after{display:none}.family-page{min-height:auto}.family-list-heading{display:block}.family-actions{justify-content:flex-start;margin-top:15px}}
@media(max-width:650px){.family-builder-heading{display:block}.family-save-status{margin-top:20px;width:max-content}.family-page{padding:28px 20px}.family-page-heading h3{font-size:42px}.family-grouping-card{grid-template-columns:38px 1fr}.family-card-controls{grid-column:2;justify-content:flex-end}.family-list-heading .family-actions{display:grid}.family-actions button{width:100%}#familyMemberPicker{grid-template-columns:1fr}.family-editor-card{border-width:8px;padding:22px 16px}.family-editor-actions{grid-template-columns:1fr 1fr}.family-editor-actions span{display:none}}
@media print{body.family-printing>*:not(#site){display:none!important}body.family-printing #site>*:not(#family-portraits){display:none!important}body.family-printing #family-portraits{display:block!important;background:#fff;padding:0}body.family-printing .family-builder-heading,body.family-printing .family-page-left,body.family-printing .family-preset-drawer,body.family-printing .family-actions,body.family-printing .family-tip-card{display:none!important}body.family-printing .family-book{display:block;border:0;box-shadow:none}body.family-printing .family-page-right{box-shadow:none;min-height:auto;padding:25px;background:#fff}body.family-printing .family-grouping-list{max-height:none;overflow:visible}body.family-printing .family-card-controls{display:none}}

/* =========================================================
   VENDOR ATLAS — V3.2
   Vintage travel-wall map + fold-out paper vendor cards
========================================================= */
.vendor-atlas-section{
  position:relative;
  overflow:hidden;
  padding:clamp(76px,9vw,145px) 4vw;
  background:
    radial-gradient(circle at 20% 15%,rgba(255,246,224,.09),transparent 28%),
    radial-gradient(circle at 84% 78%,rgba(184,143,91,.08),transparent 27%),
    linear-gradient(135deg,#171310,#211915 55%,#17120f);
  color:#f4ede2;
}
.vendor-atlas-section:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 1px,transparent 1px 6px);
  mix-blend-mode:soft-light;
}
.vendor-atlas-shell{max-width:1540px;margin:auto;position:relative;z-index:2}
.vendor-atlas-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;margin-bottom:34px}
.vendor-atlas-heading>div:first-child{max-width:930px}
.vendor-atlas-heading h2{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:clamp(48px,6vw,88px);line-height:.9;margin:12px 0 22px}
.vendor-atlas-heading h2 em{font-weight:400;color:#d8b884}
.vendor-atlas-heading p:not(.chapter-number){max-width:820px;color:rgba(244,237,226,.75);font-size:15px;line-height:1.78}
.atlas-heading-stamp{width:154px;height:154px;border:1px solid rgba(216,184,132,.62);border-radius:50%;display:grid;place-content:center;text-align:center;transform:rotate(4deg);color:#d8b884;box-shadow:inset 0 0 0 5px rgba(216,184,132,.055)}
.atlas-heading-stamp span,.atlas-heading-stamp small{font-size:8px;letter-spacing:.2em}
.atlas-heading-stamp strong{font-family:"Cormorant Garamond",serif;font-size:21px;font-weight:500;margin:4px 0}
.atlas-toolbar{display:grid;grid-template-columns:minmax(280px,620px) auto;gap:20px;align-items:end;margin:0 0 18px}
.atlas-search{display:grid;gap:7px}.atlas-search span,.atlas-category-wrap>p{font-size:9px;text-transform:uppercase;letter-spacing:.19em;color:#c6ab83}
.atlas-search input{width:100%;padding:15px 17px;border:1px solid rgba(231,211,179,.32);background:rgba(247,238,223,.09);color:#fff8ee;font:inherit;outline:none}
.atlas-search input::placeholder{color:rgba(255,248,238,.48)}
.atlas-search input:focus{border-color:#d2ad75;box-shadow:0 0 0 2px rgba(210,173,117,.12)}
.atlas-toolbar-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}.atlas-tool-button{border:1px solid rgba(230,208,173,.36);background:rgba(246,235,217,.08);color:#f8efe3;padding:13px 17px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.2s ease}.atlas-tool-button:hover,.atlas-tool-button[aria-pressed="true"]{background:#d5b482;color:#2d211a;border-color:#d5b482}
.atlas-category-wrap{margin:12px 0 24px}.atlas-category-filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}.atlas-category-button{border:1px solid rgba(229,208,177,.28);background:transparent;color:#efe3d3;padding:9px 12px;font-size:9px;text-transform:uppercase;letter-spacing:.11em;cursor:pointer}.atlas-category-button:hover,.atlas-category-button.is-active{background:#efe3d1;color:#3d2b21;border-color:#efe3d1}
.atlas-wall{position:relative;padding:clamp(20px,2.2vw,34px);border:1px solid rgba(221,197,158,.22);background:linear-gradient(120deg,#b7a58b,#9f8c72 45%,#ad9b81);box-shadow:0 35px 80px rgba(0,0,0,.38)}
.atlas-wall:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.25;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(72,52,37,.1) 0 1px,transparent 1px 7px);mix-blend-mode:soft-light}
.atlas-pinboard{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0;background:#d9c9ad;border:10px solid #4a3123;box-shadow:inset 0 0 0 2px rgba(242,219,179,.35),0 18px 40px rgba(34,22,15,.28)}
.atlas-map-frame{min-height:720px;position:relative;overflow:hidden;background:#d7c7aa}.vendor-atlas-map{height:720px;width:100%;background:#d4c3a7}.vendor-atlas-map .leaflet-tile-pane{filter:sepia(.72) saturate(.62) contrast(.92) brightness(.97)}.vendor-atlas-map .leaflet-control-zoom a{background:#f3e7d3;color:#513927;border-color:#b9a383}.vendor-atlas-map .leaflet-control-attribution{background:rgba(244,233,215,.78);color:#6a5849;font-size:8px}.vendor-atlas-map .leaflet-control-attribution a{color:#66452e}
.atlas-map-label{position:absolute;left:22px;top:22px;z-index:500;background:rgba(246,237,222,.9);color:#493429;border:1px solid rgba(93,65,44,.24);padding:13px 16px;box-shadow:0 9px 22px rgba(57,38,26,.15);transform:rotate(-1deg);pointer-events:none}.atlas-map-label span,.atlas-map-label small{display:block;font-size:7px;letter-spacing:.16em;text-transform:uppercase}.atlas-map-label strong{display:block;font-family:"Cormorant Garamond",serif;font-size:26px;font-weight:500;margin:3px 0}
.atlas-index{background:linear-gradient(97deg,#efe4d0,#f7efe1 70%,#e9dcc7);color:#403229;padding:26px 22px 22px;border-left:1px solid rgba(85,59,40,.22);display:flex;flex-direction:column;min-height:720px;position:relative;box-shadow:inset 15px 0 22px rgba(72,47,31,.06)}
.atlas-index-heading{padding-bottom:15px;border-bottom:1px solid rgba(73,51,36,.2)}.atlas-index-heading strong{display:block;font-family:"Cormorant Garamond",serif;font-size:24px;font-weight:500;margin-top:5px}.atlas-vendor-list{display:grid;gap:9px;overflow:auto;max-height:525px;padding:15px 5px 15px 0}.atlas-vendor-list::-webkit-scrollbar{width:7px}.atlas-vendor-list::-webkit-scrollbar-thumb{background:#aa8a66;border-radius:20px}.atlas-vendor-item{border:1px solid rgba(86,59,40,.18);background:#fbf3e5;color:#49392f;padding:12px;text-align:left;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:6px 10px;box-shadow:0 5px 12px rgba(66,43,27,.055)}.atlas-vendor-item:hover{transform:translateY(-1px);box-shadow:0 9px 18px rgba(66,43,27,.1)}.atlas-vendor-item strong{font-family:"Cormorant Garamond",serif;font-size:20px;font-weight:600}.atlas-vendor-item span{font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:#846d5c}.atlas-vendor-item .atlas-list-heart{grid-row:1/3;grid-column:2;font-size:16px;color:#9f7950}.atlas-index-empty{padding:38px 8px;color:#806e60;text-align:center;font-family:"Cormorant Garamond",serif;font-size:20px;font-style:italic}.atlas-index-note{margin-top:auto;border-top:1px solid rgba(72,50,35,.18);padding:18px 4px 0 27px;position:relative}.atlas-index-note img{position:absolute;width:26px;left:-4px;top:10px;transform:rotate(-15deg);filter:drop-shadow(0 3px 3px rgba(0,0,0,.15))}.atlas-index-note p{font-size:11px;line-height:1.55;color:#776253}.atlas-index-note strong{font-family:"Nanum Pen Script",cursive;font-size:19px;font-weight:400;color:#49372d}
.atlas-pin-icon{width:28px;height:38px;position:relative}.atlas-pin-icon:before{content:"";position:absolute;width:20px;height:20px;border-radius:50% 50% 50% 0;background:#7f2f29;border:2px solid #f0d7aa;transform:rotate(-45deg);left:3px;top:1px;box-shadow:0 5px 8px rgba(53,34,23,.28)}.atlas-pin-icon:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:#d6b274;left:10px;top:8px;z-index:2}.atlas-pin-icon.is-favorite:before{background:#b58a43}.atlas-pin-shadow{width:18px;height:7px;border-radius:50%;background:rgba(55,38,27,.24);filter:blur(2px);position:absolute;bottom:0;left:5px}.leaflet-marker-icon:hover .atlas-pin-icon{transform:translateY(-3px)}
.atlas-empty-overlay{position:absolute;z-index:450;inset:0;display:grid;place-content:center;text-align:center;background:rgba(231,216,190,.48);backdrop-filter:blur(1px);color:#493729;padding:35px}.atlas-empty-overlay[hidden]{display:none}.atlas-empty-overlay strong{font-family:"Cormorant Garamond",serif;font-size:34px;font-weight:500}.atlas-empty-overlay p{margin:7px auto 16px;font-size:13px}.atlas-empty-overlay button{justify-self:center;border:1px solid #604433;background:#4b3023;color:#fff8eb;padding:11px 15px;text-transform:uppercase;letter-spacing:.11em;font-size:9px;cursor:pointer}.atlas-preview-pin{width:28px;height:28px;background:#8b3f31;border:3px solid #efd7ae;border-radius:50% 50% 50% 0;transform:rotate(-45deg);justify-self:center;margin-bottom:20px;box-shadow:0 8px 14px rgba(67,43,28,.2)}.atlas-footnote{font-size:10px;line-height:1.6;color:rgba(242,231,215,.54);margin-top:14px;max-width:920px}
.vendor-card-dialog{border:0;background:transparent;padding:24px;max-width:min(1040px,96vw);width:100%}.vendor-card-dialog::backdrop{background:rgba(22,15,11,.76);backdrop-filter:blur(6px)}.vendor-paper-card{position:relative;display:grid;grid-template-columns:minmax(280px,.82fr) minmax(360px,1.18fr);gap:36px;background:#f1e7d5;color:#382b23;border:12px solid #3f291f;padding:clamp(30px,4vw,54px);box-shadow:0 45px 100px rgba(0,0,0,.58);overflow:hidden;background-image:radial-gradient(rgba(95,67,43,.055) .65px,transparent .75px),linear-gradient(100deg,rgba(113,80,52,.035),transparent 28%,rgba(255,255,255,.25) 70%,rgba(88,61,42,.025));background-size:8px 8px,100% 100%}.vendor-paper-card:after{content:"";position:absolute;inset:15px;border:1px solid rgba(105,73,48,.16);pointer-events:none}.vendor-card-close{position:absolute;right:18px;top:14px;z-index:10;width:36px;height:36px;border:1px solid rgba(75,49,34,.24);background:#f8efe0;color:#4b3527;font-size:24px;cursor:pointer}.vendor-card-paperclip{position:absolute;top:-5px;left:31%;width:48px;z-index:5;transform:rotate(8deg);filter:drop-shadow(0 5px 5px rgba(0,0,0,.2))}.vendor-card-flower{position:absolute;right:-20px;bottom:-20px;width:170px;opacity:.5;transform:rotate(-13deg);pointer-events:none}.vendor-card-photo-wrap{align-self:start;padding:16px 12px 22px}.vendor-card-polaroid{background:#f9f4e9;padding:12px 12px 38px;box-shadow:0 18px 32px rgba(73,48,31,.18);transform:rotate(-2deg);position:relative}.vendor-card-polaroid img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:saturate(.88) contrast(.97)}.vendor-card-polaroid span{position:absolute;left:17px;bottom:13px;font-family:"Nanum Pen Script",cursive;font-size:20px;color:#5c493a}.vendor-card-copy{position:relative;z-index:2;padding:8px 0}.vendor-card-category{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#9b7650}.vendor-card-copy h3{font-family:"Cormorant Garamond",serif;font-size:clamp(42px,5vw,68px);font-weight:400;line-height:.93;margin:8px 0 8px}.vendor-card-location{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#806c5d}.vendor-favorite-button{margin:17px 0 20px;border:1px solid #6b4b35;background:transparent;color:#543b2c;padding:10px 14px;font-size:9px;text-transform:uppercase;letter-spacing:.12em;cursor:pointer}.vendor-favorite-button[aria-pressed="true"]{background:#4d3122;color:#fff2df}.vendor-card-note{margin:16px 0 22px;padding:16px 18px;background:#e6d2ad;border-left:3px solid #9d744c;transform:rotate(.25deg);box-shadow:0 8px 15px rgba(76,48,28,.08)}.vendor-card-note span{font-family:"Nanum Pen Script",cursive;font-size:22px;color:#5a3e2d}.vendor-card-note p{margin:4px 0 0;line-height:1.6;font-size:13px}.vendor-card-details{display:grid;grid-template-columns:max-content 1fr;gap:8px 16px;padding:18px 0;border-top:1px solid rgba(71,49,34,.18);border-bottom:1px solid rgba(71,49,34,.18)}.vendor-card-details dt{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#93765f}.vendor-card-details dd{margin:0;font-size:12px;color:#4c3a2f;word-break:break-word}.vendor-card-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}.vendor-card-links a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;border:1px solid #593d2d;padding:10px 13px;color:#4f382a;text-decoration:none;font-size:9px;text-transform:uppercase;letter-spacing:.1em}.vendor-card-links a.primary{background:#493025;color:#fff4e6}.vendor-card-links a:hover{transform:translateY(-1px);box-shadow:0 7px 12px rgba(64,42,29,.1)}
.atlas-decor{position:absolute;pointer-events:none;opacity:.16;filter:sepia(.25) drop-shadow(0 12px 18px rgba(0,0,0,.18))}.atlas-decor-film{width:330px;right:-72px;top:45px;transform:rotate(12deg)}.atlas-decor-camera{width:180px;left:-45px;bottom:90px;transform:rotate(-12deg);opacity:.1}.atlas-decor-flower{width:120px;right:11%;bottom:28px;opacity:.18;transform:rotate(17deg)}
@media(max-width:1100px){.atlas-pinboard{grid-template-columns:1fr}.atlas-index{min-height:auto;border-left:0;border-top:1px solid rgba(85,59,40,.22)}.atlas-vendor-list{max-height:300px;grid-template-columns:repeat(2,minmax(0,1fr))}.atlas-index-note{margin-top:16px}.vendor-atlas-heading{grid-template-columns:1fr}.atlas-heading-stamp{display:none}.atlas-toolbar{grid-template-columns:1fr}.atlas-toolbar-actions{justify-content:flex-start}.atlas-map-frame,.vendor-atlas-map{height:620px;min-height:620px}}
@media(max-width:720px){.vendor-atlas-section{padding-left:18px;padding-right:18px}.atlas-wall{padding:10px}.atlas-pinboard{border-width:7px}.atlas-map-frame,.vendor-atlas-map{height:500px;min-height:500px}.atlas-map-label{left:12px;top:12px}.atlas-vendor-list{grid-template-columns:1fr}.vendor-paper-card{grid-template-columns:1fr;border-width:8px;padding:30px 20px}.vendor-card-photo-wrap{max-width:430px;margin:auto}.vendor-card-paperclip{left:16%;width:40px}.atlas-category-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px}.atlas-category-button{flex:0 0 auto}}

/* =========================================================
   VENDOR ATLAS — V3.2.1 REAL VENDOR WORK CARDS
========================================================= */
.vendor-card-links{
  display:block;
}
.vendor-primary-links{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:20px;
}
.vendor-primary-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  border:1px solid #593d2d;
  padding:10px 13px;
  color:#4f382a;
  text-decoration:none;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.1em;
  background:rgba(255,250,242,.32);
}
.vendor-primary-links a.primary{
  background:#493025;
  color:#fff4e6;
}
.vendor-primary-links a:hover{
  transform:translateY(-1px);
  box-shadow:0 7px 12px rgba(64,42,29,.1);
}
.vendor-dostal-work{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(71,49,34,.18);
}
.vendor-dostal-work-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.vendor-dostal-work-heading span{
  font-family:"Cormorant Garamond",serif;
  font-size:20px;
  line-height:1;
  color:#463126;
}
.vendor-dostal-work-heading small{
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#94745d;
  white-space:nowrap;
}
.vendor-work-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:10px 0;
  border-top:1px dashed rgba(82,56,39,.18);
}
.vendor-work-row:first-of-type{border-top:0}
.vendor-work-row strong{
  display:block;
  font-family:"Cormorant Garamond",serif;
  font-size:17px;
  font-weight:600;
  color:#493328;
}
.vendor-work-row span{
  display:block;
  margin-top:2px;
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9a765e;
}
.vendor-work-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.vendor-work-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:7px 9px;
  border:1px solid rgba(83,56,40,.32);
  background:rgba(255,248,236,.55);
  color:#51392b;
  text-decoration:none;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.vendor-work-actions a:hover{
  background:#4b3024;
  color:#fff6e8;
}
@media(max-width:720px){
  .vendor-dostal-work-heading{align-items:flex-start;flex-direction:column;gap:5px}
  .vendor-work-row{grid-template-columns:1fr}
  .vendor-work-actions{justify-content:flex-start}
}
\n\n/* =========================================================\n   VENDOR ATLAS — V3.2.2 MICHIGAN TAPESTRY MAP + REAL PINS\n========================================================= */\n.atlas-wall{\n  background:\n    radial-gradient(circle at 22% 18%,rgba(255,244,213,.25),transparent 26%),\n    radial-gradient(circle at 80% 72%,rgba(83,54,31,.16),transparent 34%),\n    linear-gradient(115deg,#aa9678,#c2ae8c 48%,#a58f71);\n}\n.atlas-pinboard{\n  border:12px solid #4b3021;\n  border-radius:3px;\n  overflow:hidden;\n  box-shadow:inset 0 0 0 2px rgba(244,219,175,.32),0 25px 55px rgba(24,15,10,.35);\n}\n.atlas-map-frame{\n  isolation:isolate;\n  background:#cbb992;\n}\n.vendor-atlas-map{\n  background:\n    radial-gradient(ellipse at 26% 21%,rgba(255,249,227,.78),transparent 33%),\n    radial-gradient(ellipse at 78% 76%,rgba(111,78,46,.12),transparent 29%),\n    repeating-linear-gradient(0deg,rgba(102,76,49,.055) 0 1px,transparent 1px 5px),\n    repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 6px),\n    linear-gradient(135deg,#d7c69f,#c4ad82 52%,#d6c49e);\n  position:relative;\n}\n.vendor-atlas-map:before{\n  content:"";\n  position:absolute;inset:0;z-index:0;pointer-events:none;\n  opacity:.34;\n  background-image:\n    linear-gradient(0deg,transparent 49.5%,rgba(91,62,37,.10) 50%,transparent 50.5%),\n    linear-gradient(90deg,transparent 49.5%,rgba(91,62,37,.09) 50%,transparent 50.5%);\n  background-size:84px 84px;\n  mix-blend-mode:multiply;\n}\n.vendor-atlas-map:after{\n  content:"";\n  position:absolute;inset:14px;z-index:0;pointer-events:none;\n  border:1px solid rgba(93,63,39,.22);\n  box-shadow:inset 0 0 70px rgba(83,55,31,.11);\n}\n.vendor-atlas-map .leaflet-pane{z-index:2}.vendor-atlas-map .leaflet-map-pane{z-index:2}\n.vendor-atlas-map .leaflet-control-zoom{border:0!important;box-shadow:0 8px 20px rgba(72,49,31,.18)}\n.vendor-atlas-map .leaflet-control-zoom a{background:#eadbbd;color:#5c402b;border-color:rgba(99,69,45,.22)}\n.atlas-michigan-shape{filter:drop-shadow(0 8px 7px rgba(68,45,28,.18))}\n.atlas-michigan-shadow{filter:blur(1px)}\n.atlas-map-place-label{background:transparent!important;border:0!important;pointer-events:none!important}\n.atlas-map-place-label span{\n  display:block;text-align:center;color:rgba(91,65,44,.58);\n  font-family:"Cormorant Garamond",serif;font-size:13px;font-style:italic;\n  letter-spacing:.15em;text-transform:uppercase;text-shadow:0 1px rgba(255,248,225,.5);\n  transform:rotate(-4deg);\n}\n.atlas-map-place-label.is-water span{color:rgba(80,93,91,.55);letter-spacing:.22em;transform:rotate(-8deg)}\n.atlas-map-label{\n  background:rgba(243,231,204,.92);\n  border:1px solid rgba(98,68,43,.28);\n  box-shadow:0 10px 20px rgba(69,45,28,.18);\n}\n.atlas-map-label:after{\n  content:"";position:absolute;width:30px;height:9px;background:rgba(177,139,72,.42);\n  left:50%;top:-5px;transform:translateX(-50%) rotate(1deg);opacity:.72;\n}\n.atlas-real-pin{width:52px;height:66px;position:relative;transition:transform .2s ease,filter .2s ease;transform-origin:50% 85%}\n.atlas-real-pin img{\n  position:absolute;width:48px;height:auto;left:2px;top:0;display:block;\n  filter:drop-shadow(0 5px 4px rgba(56,36,22,.35)) saturate(.96);\n}\n.atlas-real-pin-shadow{position:absolute;left:14px;bottom:2px;width:25px;height:7px;border-radius:50%;background:rgba(61,40,25,.23);filter:blur(3px)}\n.atlas-real-pin.is-favorite:before{\n  content:"♥";position:absolute;right:-3px;top:-3px;z-index:5;width:20px;height:20px;border-radius:50%;\n  display:grid;place-items:center;background:#6c2f28;color:#f6ddaa;font-size:11px;box-shadow:0 3px 8px rgba(0,0,0,.22);\n}\n.leaflet-marker-icon:hover .atlas-real-pin{transform:translateY(-7px) rotate(-2deg);filter:brightness(1.05)}\n.leaflet-marker-icon:focus .atlas-real-pin{transform:translateY(-5px)}\n.atlas-boundary-fallback:before{\n  content:"Michigan map boundary is temporarily unavailable — vendor pins are still active.";\n  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:350;\n  background:rgba(242,229,200,.9);color:#674b34;padding:8px 12px;border:1px solid rgba(98,68,43,.2);\n  font-size:8px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;\n}\n\n/* Fold-up vendor card animation */\n.vendor-card-dialog[open]{display:grid;place-items:center}\n.vendor-card-dialog .vendor-paper-card{\n  transform-origin:50% 100%;\n  transform:translateY(38px) perspective(1100px) rotateX(-12deg) scale(.92);\n  opacity:0;\n  clip-path:polygon(0 7%,49% 0,100% 7%,100% 100%,0 100%);\n  transition:transform .48s cubic-bezier(.2,.8,.2,1),opacity .28s ease,clip-path .48s ease;\n}\n.vendor-card-dialog.is-unfolded .vendor-paper-card{\n  transform:translateY(0) perspective(1100px) rotateX(0) scale(1);\n  opacity:1;\n  clip-path:polygon(0 0,50% 0,100% 0,100% 100%,0 100%);\n}\n.vendor-card-dialog .vendor-paper-card:before{\n  content:"";position:absolute;left:0;right:0;top:0;height:58px;z-index:1;pointer-events:none;\n  background:linear-gradient(180deg,rgba(96,67,43,.12),rgba(255,255,255,.06),transparent);\n  transform-origin:top;transition:opacity .4s ease;\n}\n.vendor-card-dialog.is-unfolded .vendor-paper-card:before{opacity:.34}\n.vendor-card-dialog.is-closing .vendor-paper-card{transform:translateY(25px) scale(.96);opacity:0}\n\n@media(max-width:720px){\n  .atlas-real-pin{transform:scale(.88);transform-origin:50% 100%}\n  .atlas-map-place-label span{font-size:10px}\n  .atlas-boundary-fallback:before{white-space:normal;width:calc(100% - 28px);text-align:center}\n}\n

/* =========================================================
   VENDOR ATLAS — V3.2.3 GOOGLE MAPS / VINTAGE FIELD MAP
========================================================= */
.vendor-atlas-map{
  position:relative;
  width:100%;
  height:720px;
  min-height:720px;
  background:#d8c9aa;
  overflow:hidden;
}
.vendor-atlas-map.is-google-ready{
  background:#d8c9aa;
}
.vendor-atlas-map.is-google-ready:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  box-shadow:inset 0 0 75px rgba(74,48,28,.20);
  background:
    repeating-linear-gradient(0deg,rgba(79,57,38,.022) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 6px);
  mix-blend-mode:multiply;
}
.vendor-atlas-map .gm-style{font-family:"DM Sans",sans-serif}
.vendor-atlas-map .gm-style-mtc,.vendor-atlas-map .gm-svpc{display:none!important}

.atlas-google-pin{
  position:absolute;
  transform:translate(-50%,-88%);
  width:74px;
  min-height:80px;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  z-index:20;
  filter:drop-shadow(0 7px 5px rgba(50,31,18,.34));
  transition:transform .18s ease,filter .18s ease;
}
.atlas-google-pin img{
  display:block;
  width:52px;
  height:auto;
  margin:0 auto;
  pointer-events:none;
}
.atlas-google-pin.is-angled img{width:57px;transform:rotate(-2deg)}
.atlas-google-pin span{
  display:block;
  position:absolute;
  left:50%;
  top:58px;
  transform:translateX(-50%);
  min-width:max-content;
  max-width:180px;
  padding:6px 9px;
  background:rgba(247,239,223,.94);
  border:1px solid rgba(87,58,37,.22);
  box-shadow:0 4px 11px rgba(52,33,20,.16);
  color:#4b3729;
  font-size:9px;
  font-weight:600;
  letter-spacing:.05em;
  line-height:1.15;
  white-space:nowrap;
  opacity:0;
  transition:opacity .18s ease,transform .18s ease;
}
.atlas-google-pin:hover,.atlas-google-pin:focus-visible{transform:translate(-50%,-96%) scale(1.06);filter:drop-shadow(0 10px 7px rgba(50,31,18,.38))}
.atlas-google-pin:hover span,.atlas-google-pin:focus-visible span{opacity:1;transform:translateX(-50%) translateY(3px)}
.atlas-google-pin.is-favorite:after{
  content:"♥";
  position:absolute;
  top:-2px;
  right:3px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#6b3129;
  color:#f2d69d;
  font-size:12px;
  box-shadow:0 3px 8px rgba(0,0,0,.24);
}
.atlas-map-setup{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:50px;
  color:#503c2e;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,250,235,.72),transparent 36%),
    repeating-linear-gradient(0deg,rgba(77,56,38,.04) 0 1px,transparent 1px 5px),
    linear-gradient(135deg,#d8c7a6,#c8b491);
}
.atlas-map-setup span{font-size:8px;letter-spacing:.22em;font-weight:700;margin-bottom:12px}
.atlas-map-setup strong{font-family:"Cormorant Garamond",serif;font-size:clamp(26px,3vw,42px);font-weight:500;max-width:640px}
.atlas-map-setup p{max-width:650px;font-size:13px;line-height:1.7;margin-top:14px}
.atlas-map-setup code{background:rgba(255,255,255,.48);padding:2px 5px;border-radius:3px}

@media(max-width:1100px){.vendor-atlas-map{height:620px;min-height:620px}}
@media(max-width:720px){
  .vendor-atlas-map{height:500px;min-height:500px}
  .atlas-google-pin{transform:translate(-50%,-88%) scale(.88)}
  .atlas-google-pin:hover,.atlas-google-pin:focus-visible{transform:translate(-50%,-94%) scale(.94)}
  .atlas-google-pin span{display:none}
  .atlas-map-setup{padding:28px 18px}
}


/* =========================================================
   VENDOR ATLAS — V3.2.4 OPENFREEMAP + MAPLIBRE
   No API key. Warm heirloom map with real gold push pins.
========================================================= */
.vendor-atlas-map{
  position:relative;
  background:#d8c9ad;
}
.vendor-atlas-map .maplibregl-canvas{
  filter:sepia(.34) saturate(.72) contrast(.94) brightness(1.03);
}
.vendor-atlas-map:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 18%,rgba(255,248,226,.16),transparent 30%),
    radial-gradient(circle at 84% 78%,rgba(84,56,35,.10),transparent 34%),
    repeating-linear-gradient(0deg,rgba(89,63,42,.025) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px);
  mix-blend-mode:multiply;
}
.vendor-atlas-map:after{
  content:"";
  position:absolute;
  inset:14px;
  z-index:3;
  pointer-events:none;
  border:1px solid rgba(92,64,42,.22);
  box-shadow:inset 0 0 64px rgba(73,49,31,.10);
}
.vendor-atlas-map .maplibregl-map,
.vendor-atlas-map .maplibregl-canvas-container{height:100%;}
.vendor-atlas-map .maplibregl-control-container{position:relative;z-index:8;}
.vendor-atlas-map .maplibregl-ctrl-group{
  background:rgba(245,235,216,.92);
  border:1px solid rgba(98,68,44,.22);
  box-shadow:0 8px 22px rgba(63,42,27,.16);
}
.vendor-atlas-map .maplibregl-ctrl button{filter:sepia(.45);}
.vendor-atlas-map .maplibregl-ctrl-attrib{
  background:rgba(245,236,219,.78)!important;
  color:#665647;
  font-size:9px;
}
.vendor-atlas-map .maplibregl-ctrl-attrib a{color:#60432f;}

.atlas-maplibre-pin{
  position:relative;
  width:58px;
  height:76px;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  overflow:visible;
  transform-origin:50% 100%;
  transition:transform .2s ease,filter .2s ease;
  filter:drop-shadow(0 7px 5px rgba(52,33,20,.36));
}
.atlas-maplibre-pin img{
  position:absolute;
  width:52px;
  height:auto;
  left:3px;
  bottom:0;
  display:block;
}
.atlas-maplibre-pin.is-angled img{width:52px;left:3px;bottom:0;transform:rotate(-2deg);}
.atlas-maplibre-pin.is-favorite img{width:50px;left:4px;bottom:0;transform:rotate(-7deg);}
.atlas-maplibre-pin span{
  position:absolute;
  left:50%;
  bottom:73px;
  transform:translateX(-50%) translateY(4px);
  min-width:max-content;
  max-width:220px;
  padding:7px 10px 6px;
  border:1px solid rgba(91,63,42,.24);
  background:rgba(247,238,220,.96);
  color:#4d382a;
  font:600 9px/1.2 "DM Sans",sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 7px 18px rgba(55,35,21,.18);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
  white-space:nowrap;
}
.atlas-maplibre-pin:hover,
.atlas-maplibre-pin:focus-visible{
  transform:translateY(-7px) rotate(-1deg) scale(1.06);
  outline:none;
  filter:drop-shadow(0 11px 7px rgba(52,33,20,.40));
}
.atlas-maplibre-pin:hover span,
.atlas-maplibre-pin:focus-visible span{opacity:1;transform:translateX(-50%) translateY(0);}
.atlas-maplibre-pin.is-favorite:after{display:none;}
.atlas-map-label{z-index:7;}
.atlas-empty-overlay{z-index:7;}

/* retire old provider-specific marker/setup styles */
.atlas-google-pin{display:none!important;}
.vendor-atlas-map.atlas-google-needs-key:before{display:none;}

@media(max-width:720px){
  .atlas-maplibre-pin{width:48px;height:64px;}
  .atlas-maplibre-pin img{width:44px;left:2px;}
  .atlas-maplibre-pin.is-angled img{width:44px;left:2px;}
  .atlas-maplibre-pin.is-favorite img{width:43px;left:3px;}
  .atlas-maplibre-pin span{display:none;}
}


/* =========================================================
   VENDOR ATLAS — V3.2.5 FAVORITE PIN REFINEMENT
========================================================= */
.atlas-maplibre-pin.is-angled img{
  width:52px!important;
  left:3px!important;
  bottom:0!important;
}
.atlas-maplibre-pin.is-favorite img{
  width:50px!important;
  left:4px!important;
  bottom:0!important;
  transform:rotate(-7deg);
}
.atlas-maplibre-pin.is-favorite:after{display:none!important;}
@media(max-width:720px){
  .atlas-maplibre-pin.is-angled img{width:44px!important;left:2px!important;}
  .atlas-maplibre-pin.is-favorite img{width:43px!important;left:3px!important;}
}


/* =========================================================
   VENDOR ATLAS — V3.2.6 UNIFIED GOLD + RED FAVORITE PINS
   All recommended vendors use the same straight gold push pin.
   Favoriting swaps that marker to the red push pin.
========================================================= */
.atlas-maplibre-pin{
  width:48px!important;
  height:64px!important;
}
.atlas-maplibre-pin img,
.atlas-maplibre-pin.is-angled img{
  width:44px!important;
  height:auto!important;
  left:2px!important;
  bottom:0!important;
  transform:none!important;
}
.atlas-maplibre-pin.is-favorite img{
  width:44px!important;
  height:auto!important;
  left:2px!important;
  bottom:0!important;
  transform:none!important;
}
.atlas-maplibre-pin.is-favorite:after{display:none!important;}
@media(max-width:720px){
  .atlas-maplibre-pin{width:44px!important;height:59px!important;}
  .atlas-maplibre-pin img,
  .atlas-maplibre-pin.is-angled img,
  .atlas-maplibre-pin.is-favorite img{width:40px!important;left:2px!important;}
}


/* =========================================================
   VENDOR ATLAS — V3.2.7 GOLD PINS + VINTAGE HEART FAVORITES
   Every location remains a gold pin. Favorited vendors receive
   a tiny red heirloom-style heart marker beside the pin.
========================================================= */
.atlas-maplibre-pin,
.atlas-maplibre-pin.is-favorite{
  width:48px!important;
  height:64px!important;
}
.atlas-maplibre-pin img,
.atlas-maplibre-pin.is-angled img,
.atlas-maplibre-pin.is-favorite img{
  width:44px!important;
  height:auto!important;
  left:2px!important;
  bottom:0!important;
  transform:none!important;
}

/* tiny vintage heart — no solid badge/background */
.atlas-maplibre-pin.is-favorite:after{
  content:"♥"!important;
  display:block!important;
  position:absolute!important;
  z-index:8!important;
  right:-5px!important;
  top:3px!important;
  width:auto!important;
  height:auto!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#8f2f2d!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:20px!important;
  line-height:1!important;
  font-weight:700!important;
  text-shadow:
    -1px -1px 0 #f5ead4,
     1px -1px 0 #f5ead4,
    -1px  1px 0 #f5ead4,
     1px  1px 0 #f5ead4,
     0 3px 4px rgba(56,36,22,.28)!important;
  transform:rotate(-10deg)!important;
  pointer-events:none!important;
}

/* a faint stamped halo gives the heart an old-book keepsake feel */
.atlas-maplibre-pin.is-favorite:before{
  content:"";
  position:absolute;
  z-index:7;
  right:-8px;
  top:0;
  width:27px;
  height:25px;
  opacity:.48;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 8%, #8f2f2d 0 1px, transparent 1.6px),
    radial-gradient(circle at 79% 22%, #8f2f2d 0 1px, transparent 1.6px),
    radial-gradient(circle at 92% 50%, #8f2f2d 0 1px, transparent 1.6px),
    radial-gradient(circle at 76% 78%, #8f2f2d 0 1px, transparent 1.6px),
    radial-gradient(circle at 50% 94%, #8f2f2d 0 1px, transparent 1.6px),
    radial-gradient(circle at 22% 78%, #8f2f2d 0 1px, transparent 1.6px),
    radial-gradient(circle at 8% 50%, #8f2f2d 0 1px, transparent 1.6px),
    radial-gradient(circle at 21% 22%, #8f2f2d 0 1px, transparent 1.6px);
  filter:drop-shadow(0 2px 2px rgba(54,33,21,.16));
  transform:rotate(-10deg);
}

@media(max-width:720px){
  .atlas-maplibre-pin,
  .atlas-maplibre-pin.is-favorite{width:44px!important;height:59px!important;}
  .atlas-maplibre-pin img,
  .atlas-maplibre-pin.is-angled img,
  .atlas-maplibre-pin.is-favorite img{width:40px!important;left:2px!important;}
  .atlas-maplibre-pin.is-favorite:after{font-size:17px!important;right:-4px!important;top:2px!important;}
  .atlas-maplibre-pin.is-favorite:before{width:23px;height:22px;right:-6px;top:0;}
}
\n\n/* =========================================================\n   v3.2.8 — FAVORITE MARKER REPLACEMENT\n   A favorited vendor uses ONE marker at the vendor coordinates.\n   Gold pin is replaced by a vintage red heart — no second marker.\n   ========================================================= */\n.atlas-maplibre-pin.is-favorite::before,\n.atlas-maplibre-pin.is-favorite::after{display:none!important;content:none!important;}\n.atlas-maplibre-pin.is-favorite img{display:none!important;}\n.atlas-maplibre-pin .atlas-favorite-heart{\n  position:absolute;\n  left:50%;\n  bottom:0;\n  width:34px;\n  height:34px;\n  display:grid;\n  place-items:center;\n  transform:translateX(-50%);\n  color:#9a3029;\n  font-family:Georgia,"Times New Roman",serif;\n  font-size:31px;\n  line-height:1;\n  text-shadow:\n    0 1px 0 rgba(255,248,232,.75),\n    0 2px 4px rgba(55,25,18,.28);\n  filter:drop-shadow(0 4px 4px rgba(55,25,18,.22));\n}\n/* tiny lace/doily echo around the favorite heart */\n.atlas-maplibre-pin .atlas-favorite-heart::after{\n  content:"";\n  position:absolute;\n  inset:-4px;\n  border:1px dotted rgba(137,45,39,.65);\n  border-radius:50%;\n  opacity:.72;\n  pointer-events:none;\n}\n.atlas-maplibre-pin .atlas-pin-label{\n  position:absolute;\n  left:50%;\n  bottom:100%;\n  transform:translateX(-50%) translateY(-2px);\n}\n.atlas-maplibre-pin.is-favorite:hover .atlas-favorite-heart,\n.atlas-maplibre-pin.is-favorite:focus-visible .atlas-favorite-heart{\n  transform:translateX(-50%) translateY(-2px) scale(1.06);\n}\n@media (max-width:700px){\n  .atlas-maplibre-pin .atlas-favorite-heart{width:30px;height:30px;font-size:27px;}\n}\n
/* =========================================================
   v3.2.9 — MAP MARKER COORDINATE LOCK
   MapLibre must own the transform of the outer marker element.
   Visual motion is isolated to an inner button, preventing pins
   from drifting/lagging while the map zooms or pans.
   ========================================================= */
.atlas-maplibre-marker-anchor{
  width:48px;
  height:64px;
  position:relative;
  overflow:visible;
  pointer-events:auto;
  /* NEVER animate/override transform here — MapLibre sets it. */
  transition:none!important;
}

/* Remove transform transitions from the element MapLibre used to own.
   It is now safely nested inside atlas-maplibre-marker-anchor. */
.atlas-maplibre-marker-anchor .atlas-maplibre-pin{
  position:absolute!important;
  inset:0!important;
  width:48px!important;
  height:64px!important;
  margin:0!important;
  transform:none;
  transition:filter .18s ease!important;
}

/* Animate only the artwork, never the geographic anchor. */
.atlas-maplibre-marker-anchor .atlas-maplibre-pin > img,
.atlas-maplibre-marker-anchor .atlas-maplibre-pin > .atlas-favorite-heart{
  transform-origin:50% 100%;
  transition:transform .18s ease, filter .18s ease;
}
.atlas-maplibre-marker-anchor .atlas-maplibre-pin:hover,
.atlas-maplibre-marker-anchor .atlas-maplibre-pin:focus-visible{
  transform:none!important;
}
.atlas-maplibre-marker-anchor .atlas-maplibre-pin:hover > img,
.atlas-maplibre-marker-anchor .atlas-maplibre-pin:focus-visible > img{
  transform:translateY(-4px) scale(1.045)!important;
}
.atlas-maplibre-marker-anchor .atlas-maplibre-pin.is-favorite:hover > .atlas-favorite-heart,
.atlas-maplibre-marker-anchor .atlas-maplibre-pin.is-favorite:focus-visible > .atlas-favorite-heart{
  transform:translateX(-50%) translateY(-3px) scale(1.05)!important;
}

/* Pin tip and favorite-heart anchor both resolve to the SAME bottom-center
   coordinate supplied to Marker({anchor:'bottom'}). */
.atlas-maplibre-marker-anchor .atlas-maplibre-pin > img{
  left:50%!important;
  bottom:0!important;
  width:44px!important;
  height:auto!important;
  transform:translateX(-50%)!important;
}
.atlas-maplibre-marker-anchor .atlas-maplibre-pin:hover > img,
.atlas-maplibre-marker-anchor .atlas-maplibre-pin:focus-visible > img{
  transform:translateX(-50%) translateY(-4px) scale(1.045)!important;
}
.atlas-maplibre-marker-anchor .atlas-favorite-heart{
  left:50%!important;
  bottom:0!important;
  transform:translateX(-50%)!important;
}

@media(max-width:720px){
  .atlas-maplibre-marker-anchor{
    width:44px;
    height:59px;
  }
  .atlas-maplibre-marker-anchor .atlas-maplibre-pin{
    width:44px!important;
    height:59px!important;
  }
  .atlas-maplibre-marker-anchor .atlas-maplibre-pin > img{
    width:40px!important;
  }
}

/* =========================================================
   v3.3.0 — TRUE PIN-TIP GEO ANCHOR
   The original PNG contained transparent canvas beneath the needle.
   That made MapLibre anchor the invisible image edge instead of the
   physical pin tip, which looks increasingly wrong at different zooms.
   This version uses a tightly-cropped pin and never moves its tip.
   ========================================================= */
.atlas-maplibre-marker-anchor{
  width:25px!important;
  height:60px!important;
  position:relative!important;
  overflow:visible!important;
  transform-origin:50% 100%!important;
  transition:none!important;
}
.atlas-maplibre-marker-anchor .atlas-maplibre-pin{
  position:absolute!important;
  inset:0!important;
  width:25px!important;
  height:60px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  overflow:visible!important;
  transform:none!important;
  transition:none!important;
}
.atlas-maplibre-marker-anchor .atlas-maplibre-pin > img{
  position:absolute!important;
  left:50%!important;
  bottom:0!important;
  width:25px!important;
  height:60px!important;
  object-fit:fill!important;
  transform:translateX(-50%)!important;
  transform-origin:50% 100%!important;
  transition:filter .16s ease!important;
  filter:drop-shadow(0 4px 3px rgba(49,31,19,.32))!important;
  pointer-events:none!important;
}
/* Never lift/translate the artwork: the needle tip is the geographic point. */
.atlas-maplibre-marker-anchor .atlas-maplibre-pin:hover > img,
.atlas-maplibre-marker-anchor .atlas-maplibre-pin:focus-visible > img{
  transform:translateX(-50%)!important;
  filter:drop-shadow(0 5px 4px rgba(49,31,19,.38)) brightness(1.035)!important;
}
/* Favorite heart uses its bottom point as the same geographic anchor. */
.atlas-maplibre-marker-anchor .atlas-favorite-heart{
  left:50%!important;
  bottom:0!important;
  width:30px!important;
  height:30px!important;
  line-height:30px!important;
  transform:translateX(-50%)!important;
  transform-origin:50% 100%!important;
}
.atlas-maplibre-marker-anchor .atlas-maplibre-pin.is-favorite:hover > .atlas-favorite-heart,
.atlas-maplibre-marker-anchor .atlas-maplibre-pin.is-favorite:focus-visible > .atlas-favorite-heart{
  transform:translateX(-50%) scale(1.04)!important;
}
/* Marker labels may move visually, but never the pin/heart anchor itself. */
.atlas-maplibre-marker-anchor .atlas-pin-label{
  bottom:calc(100% + 4px)!important;
}
@media(max-width:720px){
  .atlas-maplibre-marker-anchor{width:22px!important;height:53px!important;}
  .atlas-maplibre-marker-anchor .atlas-maplibre-pin{width:22px!important;height:53px!important;}
  .atlas-maplibre-marker-anchor .atlas-maplibre-pin > img{width:22px!important;height:53px!important;}
  .atlas-maplibre-marker-anchor .atlas-favorite-heart{width:27px!important;height:27px!important;line-height:27px!important;}
}

/* =========================================================
   v3.3.1 — UNIFIED STRAIGHT GOLD ATLAS PINS
   All map locations use the same straight gold push pin.
   Favorites remain visible in the index/vendor card instead of changing pins.
   ========================================================= */
.atlas-maplibre-marker-anchor .atlas-maplibre-pin > img{
  display:block!important;
}
.atlas-maplibre-marker-anchor .atlas-maplibre-pin > .atlas-favorite-heart{
  display:none!important;
}
.atlas-maplibre-pin.is-angled img,
.atlas-maplibre-pin.is-favorite img{
  width:25px!important;
  height:60px!important;
  left:50%!important;
  bottom:0!important;
  object-fit:fill!important;
  transform:translateX(-50%)!important;
}
@media(max-width:720px){
  .atlas-maplibre-pin.is-angled img,
  .atlas-maplibre-pin.is-favorite img{
    width:22px!important;
    height:53px!important;
  }
}

/* =========================================================
   v3.3.2 — HALF-SIZE GOLD ATLAS PINS
   Keeps the needle tip locked to the vendor coordinates.
   ========================================================= */
.atlas-maplibre-marker-anchor{
  width:13px!important;
  height:30px!important;
}
.atlas-maplibre-marker-anchor .atlas-maplibre-pin{
  width:13px!important;
  height:30px!important;
}
.atlas-maplibre-marker-anchor .atlas-maplibre-pin > img,
.atlas-maplibre-pin.is-angled img,
.atlas-maplibre-pin.is-favorite img{
  width:13px!important;
  height:30px!important;
  left:50%!important;
  bottom:0!important;
  transform:translateX(-50%)!important;
  transform-origin:50% 100%!important;
}
@media(max-width:720px){
  .atlas-maplibre-marker-anchor{
    width:11px!important;
    height:27px!important;
  }
  .atlas-maplibre-marker-anchor .atlas-maplibre-pin{
    width:11px!important;
    height:27px!important;
  }
  .atlas-maplibre-marker-anchor .atlas-maplibre-pin > img,
  .atlas-maplibre-pin.is-angled img,
  .atlas-maplibre-pin.is-favorite img{
    width:11px!important;
    height:27px!important;
  }
}

/* =========================================================
   V3.4 · VENDOR ATLAS — SPREADSHEET IMPORT DETAILS
========================================================= */
.vendor-upcoming-note{
  margin-top:14px;
  padding:14px 16px 13px;
  border:1px solid rgba(83,67,48,.2);
  background:linear-gradient(180deg,rgba(248,241,225,.92),rgba(229,216,190,.88));
  box-shadow:0 8px 20px rgba(42,31,20,.08);
  transform:rotate(-.25deg);
}
.vendor-upcoming-note span{
  display:block;
  margin-bottom:4px;
  font-size:9px;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#866e4d;
}
.vendor-upcoming-note strong{
  display:block;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:17px;
  line-height:1.15;
  color:#2e2822;
}
.vendor-upcoming-note small{
  display:block;
  margin-top:5px;
  font-size:10px;
  line-height:1.35;
  color:#746a5e;
}


/* =========================================================
   V3.4.1 — VENDOR ATLAS POLAROID LOCATION PHOTOS
   Spreadsheet image links become tactile prints under the
   Dostal Digital gallery/film history on each venue card.
   ========================================================= */
.vendor-location-photos{
  width:100%;
  margin-top:24px;
  padding-top:20px;
  border-top:1px dashed rgba(76,50,34,.28);
}
.vendor-location-photos-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.vendor-location-photos-heading span{
  font-family:"Cormorant Garamond",serif;
  font-size:26px;
  line-height:1;
  color:#4a3427;
}
.vendor-location-photos-heading small{
  max-width:310px;
  text-align:right;
  font-size:8px;
  line-height:1.5;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8a705d;
}
.vendor-location-photo-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:25px 18px;
  align-items:start;
  padding:8px 8px 12px;
}
.vendor-location-photo-card{
  --photo-tilt:-1.8deg;
  position:relative;
  display:block;
  min-width:0;
  padding:10px 10px 31px;
  background:
    radial-gradient(rgba(90,65,43,.04) .65px,transparent .75px),
    linear-gradient(104deg,#fffdf7,#f6efe4 62%,#efe5d6);
  background-size:7px 7px,100% 100%;
  color:#4e392c;
  text-decoration:none;
  box-shadow:0 12px 24px rgba(69,44,29,.17),0 2px 3px rgba(70,45,29,.12);
  transform:rotate(var(--photo-tilt));
  transform-origin:50% 12%;
  transition:transform .2s ease,box-shadow .2s ease;
  z-index:1;
}
.vendor-location-photo-card:nth-child(even){--photo-tilt:1.5deg;}
.vendor-location-photo-card:nth-child(3n){--photo-tilt:-.7deg;}
.vendor-location-photo-card:hover,
.vendor-location-photo-card:focus-visible{
  transform:rotate(0deg) translateY(-5px) scale(1.015);
  box-shadow:0 19px 34px rgba(69,44,29,.22),0 3px 4px rgba(70,45,29,.13);
  z-index:4;
  outline:none;
}
.vendor-photo-image-wrap{
  position:relative;
  display:block;
  overflow:hidden;
  width:100%;
  aspect-ratio:4/3;
  background:#ded1bf;
  box-shadow:inset 0 0 0 1px rgba(75,51,35,.11);
}
.vendor-photo-image-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.9) contrast(.97) sepia(.035);
  transition:transform .25s ease,filter .25s ease;
}
.vendor-location-photo-card:hover .vendor-photo-image-wrap img{transform:scale(1.025);filter:saturate(.96) contrast(.98);}
.vendor-photo-fallback{
  position:absolute;
  inset:0;
  display:none;
  place-items:center;
  padding:20px;
  text-align:center;
  background:
    linear-gradient(rgba(232,216,194,.86),rgba(232,216,194,.86)),
    url("images/forest.jpg") center/cover;
  color:#684b36;
  font-size:9px;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.vendor-location-photo-card.image-failed .vendor-photo-fallback{display:grid;}
.vendor-photo-caption{
  position:absolute;
  left:13px;right:13px;bottom:8px;
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-family:"Nanum Pen Script",cursive;
  font-size:17px;
  line-height:1;
  color:#5b4638;
}
.vendor-photo-fastener{position:absolute;z-index:5;pointer-events:none;}
.vendor-location-photo-card.is-taped .vendor-photo-fastener{
  width:62px;height:17px;left:50%;top:-10px;
  transform:translateX(-50%) rotate(-2deg);
  background:linear-gradient(90deg,rgba(189,157,105,.58),rgba(224,199,147,.7),rgba(181,146,91,.52));
  opacity:.78;
  box-shadow:0 2px 3px rgba(74,47,28,.08);
  clip-path:polygon(3% 10%,96% 0,100% 88%,6% 100%,0 66%);
}
.vendor-location-photo-card.is-paperclipped .vendor-photo-fastener{
  width:34px;height:60px;right:9px;top:-23px;
  background:url("images/vault-assets/paperclip-real.png") center/contain no-repeat;
  transform:rotate(10deg);
  filter:drop-shadow(0 4px 3px rgba(55,36,23,.25));
}
.vendor-location-photo-card.is-pinned .vendor-photo-fastener{
  width:16px;height:36px;left:50%;top:-25px;
  transform:translateX(-50%) rotate(-6deg);
  background:url("images/vault-assets/gold-pushpin-straight-anchor.png") center bottom/contain no-repeat;
  filter:drop-shadow(0 3px 2px rgba(55,36,23,.3));
}
@media(max-width:720px){
  .vendor-location-photos-heading{align-items:flex-start;flex-direction:column;gap:7px;}
  .vendor-location-photos-heading small{text-align:left;max-width:none;}
  .vendor-location-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;padding-left:1px;padding-right:1px;}
  .vendor-photo-caption{font-size:15px;}
}
@media(max-width:430px){
  .vendor-location-photo-grid{grid-template-columns:1fr;}
  .vendor-location-photo-card{max-width:300px;margin-inline:auto;width:100%;}
}


/* v3.4.4 — Vendor Atlas: one clickable location frame per couple */
.vendor-location-photo-caption small,
.vendor-photo-caption small{
  display:block;
  margin-top:.2rem;
  font-size:.62rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  opacity:.58;
}
.vendor-location-photo-card.no-gallery{
  cursor:default;
}
.vendor-location-photo-card.no-gallery:hover{
  transform:var(--photo-rotate, rotate(0deg));
}


/* v3.4.7 — exact-address map pins
   Pins with spreadsheet street addresses are intentionally hidden until the
   exact address has resolved; no guessed fallback pins are displayed. */

/* v3.4.9: map pins are strict-address only; city-only/unknown locations are not guessed. */

/* v3.5.0 — Vendor Atlas pins use U.S. Census exact-address geocoding; no guessed coordinate fallbacks. */

/* v3.5.1 — Atlas pin positions come directly from the spreadsheet coordinate columns. */


/* =========================================================
   v3.5.2 — MAP PIN VISUAL ACCURACY FIX
   The spreadsheet coordinates were correct, but the push-pin artwork was
   still 60px tall. At a statewide Michigan zoom, the pin HEAD could appear
   many miles away from the needle tip / true map coordinate.

   Keep the needle tip at the exact coordinate and make the artwork small
   enough that the visible pin itself reads as being on that location.
   ========================================================= */

.atlas-maplibre-marker-anchor{
  width:12px!important;
  height:28px!important;
}

.atlas-maplibre-marker-anchor .atlas-maplibre-pin{
  width:12px!important;
  height:28px!important;
  min-width:12px!important;
  min-height:28px!important;
}

.atlas-maplibre-marker-anchor .atlas-maplibre-pin > img{
  width:12px!important;
  height:28px!important;
  left:50%!important;
  bottom:0!important;
  object-fit:fill!important;
  transform:translateX(-50%)!important;
  transform-origin:50% 100%!important;
  filter:drop-shadow(0 2px 1.5px rgba(49,31,19,.34))!important;
}

/* Exact geographic point: a tiny brass dot sits directly where the needle
   tip touches the saved latitude/longitude. */
.atlas-maplibre-marker-anchor::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-1px;
  width:3px;
  height:3px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#b88735;
  border:.5px solid rgba(72,44,19,.7);
  box-shadow:0 0 0 1px rgba(255,239,190,.55);
  pointer-events:none;
  z-index:20;
}

.atlas-maplibre-marker-anchor .atlas-maplibre-pin:hover > img,
.atlas-maplibre-marker-anchor .atlas-maplibre-pin:focus-visible > img{
  transform:translateX(-50%)!important;
}

/* Don't show map labels unless the user hovers/focuses a pin. This keeps the
   statewide map precise and uncluttered when many locations are close. */
.atlas-maplibre-marker-anchor .atlas-pin-label{
  opacity:0!important;
  pointer-events:none!important;
  bottom:calc(100% + 3px)!important;
  transition:opacity .14s ease!important;
}
.atlas-maplibre-marker-anchor:hover .atlas-pin-label,
.atlas-maplibre-marker-anchor:focus-within .atlas-pin-label{
  opacity:1!important;
}

@media(max-width:720px){
  .atlas-maplibre-marker-anchor{
    width:10px!important;
    height:24px!important;
  }
  .atlas-maplibre-marker-anchor .atlas-maplibre-pin{
    width:10px!important;
    height:24px!important;
    min-width:10px!important;
    min-height:24px!important;
  }
  .atlas-maplibre-marker-anchor .atlas-maplibre-pin > img{
    width:10px!important;
    height:24px!important;
  }
}


/* v3.5.3 — Vendor pins are now native MapLibre GeoJSON/symbol layers.
   Old DOM-marker styling is disabled so CSS cannot affect geographic placement. */
.atlas-maplibre-marker-anchor{display:none!important;}

/* v3.5.4 — larger gold Atlas pins + expanded invisible tap/click targets. */

/* v3.5.5 — Atlas pins enlarged substantially for clear full-state visibility. */


/* =========================================================
   THE WEDDING VAULT v3.6.0
   Automatic three-day weekend + sharing + clean printing
   ========================================================= */

.timeline-example-note{
  max-width:760px;
  margin:0 auto 42px;
  padding:22px 24px;
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.72);
}
.timeline-example-note-kicker{
  display:block;
  margin-bottom:7px;
  color:#d8c197;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.2em;
}
.timeline-example-note strong{
  display:block;
  margin-bottom:7px;
  color:#fff8ed;
  font-family:var(--serif,Georgia,serif);
  font-size:1.55rem;
  font-weight:400;
}
.timeline-example-note p{margin:0;line-height:1.7}
.timeline-list-expanded article{align-items:flex-start}
.timeline-hint{
  display:block;
  width:max-content;
  max-width:100%;
  margin-top:10px;
  padding:5px 8px;
  border:1px solid rgba(216,193,151,.22);
  color:#d8c197;
  font-size:.58rem;
  font-weight:600;
  line-height:1.45;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.timeline-weekend-ready-note{
  display:flex;
  align-items:center;
  gap:22px;
  margin:0 0 24px;
  padding:15px 18px;
  border:1px solid rgba(219,193,143,.25);
  background:rgba(39,24,18,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.timeline-weekend-ready-note>span{
  flex:0 0 auto;
  color:#dec28e;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.16em;
}
.timeline-weekend-ready-note p{
  margin:0;
  color:rgba(249,239,224,.72);
  font-size:.78rem;
  line-height:1.55;
}

.timeline-toolbar-actions{
  flex-wrap:wrap;
  justify-content:flex-end;
}
.timeline-toolbar-actions .subtle-add-day{opacity:.78}
#shareWeddingTimeline,
#shareFamilyList{
  border-color:rgba(206,169,100,.65)!important;
  background:linear-gradient(180deg,rgba(196,157,88,.22),rgba(85,53,35,.42))!important;
}

@media(max-width:800px){
  .timeline-weekend-ready-note{display:block}
  .timeline-weekend-ready-note>span{display:block;margin-bottom:8px}
  .timeline-example-note{margin-bottom:28px;padding:18px 10px}
  .timeline-hint{width:auto}
}


/* =========================================================
   v3.6.1 — Personalized Family Formal Builder
   ========================================================= */

.family-person-card.is-couple-partner{
  position:relative;
  border-color:rgba(194,153,86,.72);
  background:
    linear-gradient(180deg,rgba(246,228,190,.16),rgba(255,255,255,.02)),
    rgba(255,248,235,.04);
  box-shadow:
    inset 0 0 0 1px rgba(255,238,201,.08),
    0 8px 22px rgba(27,17,12,.14);
}

.family-person-card.is-couple-partner strong{
  color:#f4dfb9;
}

.family-couple-lock{
  display:block;
  margin-top:5px;
  color:rgba(236,219,190,.58);
  font-size:.54rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.family-couple-badge{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:1px solid rgba(202,165,99,.42);
  border-radius:50%;
  color:#d7b16c;
  font-size:.72rem;
}

.studio-desk-entry{display:block;margin:16px auto 0;border:0;background:none;color:#6d5645;text-decoration:underline;text-underline-offset:4px;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}.studio-desk-overlay{position:fixed;inset:0;z-index:30000;display:none;overflow:auto;padding:20px;background:rgba(28,18,13,.94)}.studio-desk-overlay.is-open{display:block}body.studio-desk-open{overflow:hidden}.studio-desk-shell{max-width:1180px;min-height:calc(100vh - 40px);margin:auto;background:#eee1ca;color:#3d2c22;box-shadow:0 20px 80px #0008}.studio-desk-header{display:flex;justify-content:space-between;padding:30px 34px;background:#493126;color:#f6ecdc}.studio-desk-header p{font-size:.6rem;letter-spacing:.17em;color:#d9bc89}.studio-desk-header h2{font:400 3rem Georgia,serif;margin:5px 0}.studio-desk-header button{width:42px;height:42px;border:1px solid #ffffff55;border-radius:50%;background:none;color:white;font-size:1.4rem}.studio-desk-login{display:grid;place-items:center;min-height:560px}.studio-desk-login-card{width:min(440px,90%);padding:36px;background:#fffaf0;box-shadow:0 15px 40px #5c3b261c}.studio-desk-seal{display:grid;place-items:center;width:55px;height:55px;margin:auto;border:1px solid #9b7443;border-radius:50%;font-family:Georgia}.studio-desk-login-card h3{text-align:center;font:400 1.9rem Georgia}.studio-desk-login-card label{display:block;margin:16px 0;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}.studio-desk-login-card input{display:block;width:100%;padding:12px;margin-top:6px;border:1px solid #c8b89f;background:white}.studio-desk-login-card button{width:100%;padding:13px;background:#4b3327;color:#fff;border:0}.studio-desk-dashboard{padding:28px}.studio-toolbar{display:flex;gap:12px;align-items:center}.studio-toolbar span{margin-left:auto;color:#7c6a5d}.studio-toolbar button,.studio-filters select{padding:8px 10px;border:1px solid #c3b195;background:#fff9ef}.studio-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}.studio-stats article{padding:18px;background:#fff9ef;border:1px solid #d4c5ae}.studio-stats strong{display:block;font:400 2rem Georgia}.studio-stats span{font-size:.65rem;text-transform:uppercase}.studio-filters{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:16px}.studio-filters input{padding:11px;border:1px solid #c3b195}.studio-couples{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.studio-card{padding:20px;background:#fffaf0;border:1px solid #d5c4aa}.studio-card header{display:flex;justify-content:space-between;gap:12px}.studio-card h3{margin:3px 0;font:400 1.5rem Georgia}.studio-card header small{color:#9a7445;text-transform:uppercase}.studio-card header span,.studio-card header b{font-size:.68rem;color:#7d6b5e}.studio-card-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:18px 0}.studio-card-metrics span{text-align:center;font-size:.58rem;text-transform:uppercase}.studio-card-metrics strong{display:block;font:400 1.35rem Georgia}.studio-card footer{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding-top:12px;border-top:1px dashed #cdbba1;font-size:.7rem}.studio-card footer span{display:flex;justify-content:space-between;gap:8px}.studio-card footer strong{text-align:right}@media(max-width:800px){.studio-desk-overlay{padding:0}.studio-desk-shell{min-height:100vh}.studio-stats{grid-template-columns:1fr 1fr}.studio-couples{grid-template-columns:1fr}.studio-filters{grid-template-columns:1fr}.studio-card-metrics{grid-template-columns:1fr 1fr}}


/* =========================================================
   v3.7.1 · FAMILY PORTRAITS — COUPLE CARD CONTRAST FIX
   Makes the auto-added Bride/Groom cards readable on parchment.
   ========================================================= */

.family-person-card.is-couple-partner{
  border:1px solid rgba(128,88,45,.48) !important;
  background:
    linear-gradient(135deg, rgba(216,183,127,.12), rgba(255,253,247,.96) 48%),
    #fffaf0 !important;
  box-shadow:
    inset 4px 0 0 #5a3828,
    inset 0 0 0 1px rgba(255,255,255,.7),
    0 8px 20px rgba(58,38,25,.10) !important;
}

.family-person-card.is-couple-partner strong{
  color:#4a2f22 !important;
  font-weight:600 !important;
  text-shadow:none !important;
}

.family-person-card.is-couple-partner .family-person-meta{
  color:#6f5949 !important;
  font-weight:500;
}

.family-person-card.is-couple-partner .family-couple-lock{
  color:#9b713d !important;
  opacity:1 !important;
  font-weight:700;
}

.family-person-card.is-couple-partner .family-couple-badge{
  border-color:#a77a3e !important;
  background:#fff8ea !important;
  color:#5a3828 !important;
  box-shadow:inset 0 0 0 3px rgba(183,139,73,.08);
}

/* A tiny extra lift on mobile where the original pale-on-pale issue was strongest. */
@media(max-width:700px){
  .family-person-card.is-couple-partner{
    padding:16px 14px !important;
  }

  .family-person-card.is-couple-partner strong{
    font-size:24px !important;
  }

  .family-person-card.is-couple-partner .family-person-meta{
    font-size:12px !important;
  }

  .family-person-card.is-couple-partner .family-couple-lock{
    font-size:.58rem !important;
    letter-spacing:.075em !important;
  }
}


/* =========================================================
   v3.8.0 · THE STUDIO DESK — COUPLE WORKSPACE
   ========================================================= */
.studio-card{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.studio-card:hover,.studio-card:focus-visible{transform:translateY(-2px);border-color:#a88659;box-shadow:0 14px 30px rgba(61,39,24,.13);outline:none}
.studio-couple-detail{margin-top:18px}
.studio-detail-topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:18px 20px;margin-bottom:16px;border:1px solid #cdbb9f;background:#fff9ee}
.studio-detail-topbar>button,.studio-detail-actions button{padding:9px 12px;border:1px solid #bca783;background:#f8eedc;color:#493328;cursor:pointer}
.studio-detail-topbar h3{margin:2px 0;font:400 1.75rem Georgia,serif}.studio-detail-topbar small{color:#967043;text-transform:uppercase;letter-spacing:.08em}.studio-detail-topbar span{font-size:.68rem;color:#7a685b}
.studio-detail-actions{display:flex;gap:8px}
.studio-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.studio-detail-paper{min-width:0;padding:22px;background:linear-gradient(135deg,#fffaf0,#f7ecd9);border:1px solid #d2c0a5;box-shadow:0 10px 22px rgba(64,42,27,.08)}
.studio-detail-paper>header{display:flex;gap:12px;align-items:center;padding-bottom:13px;margin-bottom:14px;border-bottom:1px solid #d8c8b0}.studio-detail-paper>header>span{display:grid;place-items:center;width:34px;height:34px;border:1px solid #a98656;border-radius:50%;font:400 .75rem Georgia;color:#745332}.studio-detail-paper header small{color:#9b7443;font-size:.58rem;letter-spacing:.12em}.studio-detail-paper h4{margin:2px 0 0;font:400 1.35rem Georgia,serif}
.studio-detail-empty{color:#847164;font-style:italic;font-size:.78rem}
.studio-timeline-day{margin-bottom:17px}.studio-timeline-day h5{margin:0 0 8px;color:#6a4934;font:400 1rem Georgia}.studio-timeline-row{display:grid;grid-template-columns:72px 1fr;gap:10px;padding:8px 0;border-bottom:1px dotted #d5c3aa}.studio-timeline-row time{font-weight:700;color:#8d673d;font-size:.72rem}.studio-timeline-row strong{font-size:.76rem}.studio-timeline-row p{margin:3px 0;color:#7d6b5e;font-size:.68rem}
.studio-family-list{margin:0;padding-left:22px}.studio-family-list li{padding:8px 0;border-bottom:1px dotted #d5c3aa}.studio-family-list strong{display:block;font:400 .9rem Georgia}.studio-family-list span{display:block;margin-top:3px;color:#79675a;font-size:.67rem}
.studio-vendor-tags{display:flex;flex-wrap:wrap;gap:7px}.studio-vendor-tags span{padding:7px 9px;border:1px solid #c8b18e;background:#fff8eb;color:#654934;font-size:.67rem}
.studio-activity-list>div{display:flex;gap:9px;padding:8px 0;border-bottom:1px dotted #d5c3aa}.studio-activity-dot{flex:0 0 auto;width:7px;height:7px;margin-top:5px;border-radius:50%;background:#7b8b63}.studio-activity-list p{margin:0}.studio-activity-list strong,.studio-activity-list small{display:block}.studio-activity-list strong{font-size:.72rem}.studio-activity-list small{margin-top:2px;color:#897568;font-size:.62rem}

@media(max-width:800px){
  .studio-detail-topbar{grid-template-columns:1fr}.studio-detail-actions{flex-wrap:wrap}.studio-detail-grid{grid-template-columns:1fr}
}
@media print{
  body *{visibility:hidden!important}
  #studioCoupleDetail,#studioCoupleDetail *{visibility:visible!important}
  #studioCoupleDetail{position:absolute;inset:0;width:100%;margin:0;background:white}
  .studio-detail-topbar>button,.studio-detail-actions{display:none!important}
  .studio-detail-grid{display:block}
  .studio-detail-paper{break-inside:avoid;margin:0 0 16px;box-shadow:none}
}

/* v3.9.0 Client Manager */
.studio-manager-actions{display:flex;gap:8px;margin:18px 0 10px}.studio-manager-actions button{padding:10px 14px;border:1px solid #a98e67;background:#52382a;color:#fff7e9;cursor:pointer}.studio-manager-actions button+button{background:#fff8eb;color:#52382a}
.studio-editor-overlay{position:fixed;inset:0;z-index:40000;display:grid;place-items:center;padding:20px;background:rgba(25,16,12,.82)}.studio-editor-overlay[hidden]{display:none}.studio-editor{width:min(720px,100%);max-height:92vh;overflow:auto;background:#f8edda;border:1px solid #c7ac7d;box-shadow:0 25px 80px #0008}.studio-editor>header{display:flex;justify-content:space-between;align-items:flex-start;padding:24px 28px;background:#4b3227;color:#fff5e4}.studio-editor>header small{color:#d8b984;letter-spacing:.12em}.studio-editor h3{margin:4px 0;font:400 2rem Georgia}.studio-editor>header button{border:0;background:none;color:white;font-size:1.5rem}.studio-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:26px}.studio-editor-grid label{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.studio-editor-grid .wide{grid-column:1/-1}.studio-editor-grid input,.studio-editor-grid select{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid #c6b294;background:#fffaf1;font:inherit;text-transform:none;letter-spacing:normal}.studio-active-label{display:flex;gap:9px;align-items:center}.studio-active-label input{width:auto;margin:0}.studio-editor-message{min-height:20px;margin:0 26px;color:#80533c}.studio-editor>footer{display:flex;justify-content:flex-end;gap:8px;padding:18px 26px;border-top:1px solid #d3c0a3}.studio-editor>footer button{padding:10px 15px;border:1px solid #b9a17d;background:#fff9ef}.studio-editor>footer .primary{background:#51372a;color:white}
.studio-attention{display:grid;grid-template-columns:180px 1fr;gap:20px;margin:20px 0;padding:20px;border:1px solid #cdbb9e;background:#fff8eb}.studio-attention small{color:#997244;letter-spacing:.12em}.studio-attention h3{margin:4px 0;font:400 1.45rem Georgia}.studio-attention-item{display:flex;justify-content:space-between;gap:15px;padding:7px 0;border-bottom:1px dotted #d2bea0;font-size:.7rem}.studio-attention-item span{color:#7d6a5c;text-align:right}.studio-attention-item.urgent strong:before{content:"!";display:inline-grid;place-items:center;width:17px;height:17px;margin-right:7px;border-radius:50%;background:#80513e;color:white;font-size:.6rem}.studio-attention-clear{color:#687758;font-style:italic;font-size:.75rem}
@media(max-width:700px){.studio-editor-grid{grid-template-columns:1fr}.studio-editor-grid .wide{grid-column:auto}.studio-attention{grid-template-columns:1fr}.studio-attention-item{display:block}.studio-attention-item span{display:block;margin-top:3px;text-align:left}}

/* v4.0 Wedding Planning Hub */
.vendor-planning{padding:90px 6vw;background:#efe2cb;color:#3f2d23}.vendor-planning-intro{max-width:760px;margin:0 auto 34px}.vendor-planning-intro h2{font:400 clamp(2.4rem,5vw,4.8rem) Georgia,serif;margin:8px 0}.vendor-planning-shell{max-width:1180px;margin:auto}.vendor-planning-progress{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:end;margin-bottom:22px}.vendor-planning-progress span{font-size:.62rem;letter-spacing:.14em}.vendor-planning-progress strong{display:block;font:400 1.35rem Georgia}.vendor-planning-bar{height:8px;background:#d8c6aa;overflow:hidden}.vendor-planning-bar span{display:block;height:100%;width:0;background:#6d5138;transition:width .25s}.vendor-planning-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.vendor-plan-card{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:16px;border:1px solid #cfb995;background:#fff9ef}.vendor-plan-status{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#eee2cf}.vendor-plan-card small{text-transform:uppercase;font-size:.56rem;letter-spacing:.09em;color:#8a725f}.vendor-plan-card h3{margin:2px 0;font:400 1.1rem Georgia}.vendor-plan-card p{margin:3px 0 0;font-size:.7rem;color:#6f5b4d}.vendor-plan-card button{border:0;background:none;text-decoration:underline;text-underline-offset:3px;color:#60442f}.vendor-plan-card.status-booked{border-color:#9aaa7e;background:#f7f8ef}.vendor-plan-card.status-booked .vendor-plan-status{background:#6e7e58;color:#fff}.vendor-plan-card.status-researching{border-color:#c8a970}.vendor-plan-card.status-not-needed{opacity:.62}
.vendor-planning-dialog{width:min(720px,94vw);border:1px solid #bca47e;padding:0;background:#f7ecd9}.vendor-planning-dialog::backdrop{background:#21150fbb}.vendor-planning-dialog header{display:flex;justify-content:space-between;padding:22px 24px;background:#493126;color:#fff}.vendor-planning-dialog h3{margin:3px 0;font:400 1.7rem Georgia}.vendor-planning-dialog header small{color:#d6b982}.vendor-planning-dialog header button{background:none;border:0;color:#fff;font-size:1.5rem}.vendor-planning-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:24px}.vendor-planning-fields .wide{grid-column:1/-1}.vendor-planning-fields label{font-size:.65rem;text-transform:uppercase;letter-spacing:.07em}.vendor-planning-fields input,.vendor-planning-fields select,.vendor-planning-fields textarea{display:block;width:100%;margin-top:6px;padding:10px;border:1px solid #c8b393;background:#fffaf2;font:inherit;text-transform:none}.vendor-planning-recommend{margin:0 24px 22px;padding:16px;border:1px dashed #a98b61;background:#fff7e9}.vendor-planning-recommend span{font-size:.58rem;letter-spacing:.12em;color:#8a6538}.vendor-planning-recommend p{font-size:.75rem}.vendor-planning-recommend button{border:0;background:none;padding:0;color:#654530;text-decoration:underline;text-underline-offset:3px}.vendor-planning-dialog footer{display:flex;justify-content:flex-end;gap:8px;padding:18px 24px;border-top:1px solid #d5c3a5}.vendor-planning-dialog footer button{padding:10px 14px;border:1px solid #bda785;background:#fff8ed}.vendor-planning-dialog footer .primary{background:#4d3427;color:#fff}
.studio-detail-wide{grid-column:1/-1}.wedding-week-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}.wedding-week-summary div{padding:12px;background:#fff7e8;border:1px solid #d2c0a5}.wedding-week-summary strong{display:block;font:400 1.6rem Georgia}.wedding-week-summary span{font-size:.6rem;text-transform:uppercase}.wedding-week-vendors{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.wedding-week-vendors article{padding:10px;border:1px solid #d3c0a3;background:#fffaf1}.wedding-week-vendors strong,.wedding-week-vendors span{display:block}.wedding-week-vendors span{font-size:.58rem;text-transform:uppercase;color:#8b715c}.wedding-week-vendors p{margin:3px 0;font-size:.66rem}.studio-detail-wide textarea{width:100%;padding:12px;border:1px solid #c9b69a;background:#fffaf1}.studio-admin-notes-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:8px}.studio-admin-notes-actions button{padding:9px 12px;border:1px solid #aa9068;background:#52382b;color:#fff}
@media(max-width:850px){.vendor-planning-grid{grid-template-columns:1fr 1fr}.vendor-planning-progress{grid-template-columns:1fr}.wedding-week-vendors{grid-template-columns:1fr 1fr}}@media(max-width:600px){.vendor-planning-grid,.vendor-planning-fields,.wedding-week-vendors{grid-template-columns:1fr}.vendor-planning-fields .wide{grid-column:auto}}


/* =========================================================
   v4.0.1 · VENDOR PLANNING + ATLAS RELIABILITY FIX
   ========================================================= */

body.vendor-planning-open{overflow:hidden}

.vendor-planning-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:50000!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  max-height:none!important;
  margin:0!important;
  padding:22px!important;
  border:0!important;
  overflow:auto!important;
  background:rgba(31,20,14,.82)!important;
  place-items:center;
}

.vendor-planning-overlay[hidden]{
  display:none!important;
}

.vendor-planning-overlay.is-open{
  display:grid!important;
}

.vendor-planning-overlay > form{
  width:min(720px,94vw);
  max-height:calc(100vh - 44px);
  overflow:auto;
  margin:auto;
  border:1px solid #bca47e;
  background:#f7ecd9;
  box-shadow:0 28px 80px rgba(0,0,0,.42);
}

.vendor-plan-card,
.vendor-plan-card button{
  pointer-events:auto!important;
  cursor:pointer!important;
}

.vendor-plan-card{
  position:relative;
  z-index:1;
}

/* Exact-coordinate MapLibre DOM pin markers */
.atlas-maplibre-marker-anchor{
  width:0!important;
  height:0!important;
  overflow:visible!important;
  pointer-events:auto!important;
}

.atlas-maplibre-marker-anchor .atlas-maplibre-pin{
  position:absolute!important;
  left:50%!important;
  bottom:0!important;
  width:58px!important;
  height:78px!important;
  transform:translateX(-50%)!important;
  border:0!important;
  padding:0!important;
  background:transparent!important;
  overflow:visible!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  z-index:20!important;
}

.atlas-maplibre-marker-anchor .atlas-maplibre-pin > img{
  display:block!important;
  position:absolute!important;
  left:50%!important;
  bottom:0!important;
  width:54px!important;
  height:auto!important;
  transform:translateX(-50%)!important;
  opacity:1!important;
  visibility:visible!important;
  filter:drop-shadow(0 5px 4px rgba(55,35,20,.34))!important;
}

.atlas-maplibre-marker-anchor .atlas-pin-label{
  left:50%!important;
  bottom:70px!important;
  transform:translateX(-50%)!important;
}

@media(max-width:700px){
  .atlas-maplibre-marker-anchor .atlas-maplibre-pin{
    width:52px!important;
    height:70px!important;
  }
  .atlas-maplibre-marker-anchor .atlas-maplibre-pin > img{
    width:48px!important;
  }
}


/* =========================================================
   v4.0.2 · VENDOR ATLAS GOLD PIN RESTORE
   Root cause fix: v3.5.3 left DOM markers set to display:none!important.
   We now intentionally use DOM markers again, so restore them here.
   ========================================================= */

.atlas-maplibre-marker-anchor{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:0!important;
  height:0!important;
  overflow:visible!important;
  pointer-events:auto!important;
  z-index:50!important;
}

.atlas-maplibre-marker-anchor .atlas-maplibre-pin{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}

.atlas-maplibre-marker-anchor .atlas-maplibre-pin > img{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

/* Keep the gold pins comfortably visible at the statewide Michigan view. */
.atlas-maplibre-marker-anchor .atlas-maplibre-pin{
  width:58px!important;
  height:78px!important;
}

.atlas-maplibre-marker-anchor .atlas-maplibre-pin > img{
  width:54px!important;
  max-width:none!important;
}

@media(max-width:700px){
  .atlas-maplibre-marker-anchor{
    display:block!important;
  }
  .atlas-maplibre-marker-anchor .atlas-maplibre-pin{
    width:52px!important;
    height:70px!important;
  }
  .atlas-maplibre-marker-anchor .atlas-maplibre-pin > img{
    width:48px!important;
  }
}


/* =========================================================
   v4.0.3 · VENDOR ATLAS PIN SIZE REFINEMENT
   Keep pins visible/clickable, but reduce visual size substantially.
   ========================================================= */

.atlas-maplibre-marker-anchor .atlas-maplibre-pin{
  width:38px!important;
  height:52px!important;
}

.atlas-maplibre-marker-anchor .atlas-maplibre-pin > img{
  width:34px!important;
  max-width:none!important;
}

.atlas-maplibre-marker-anchor .atlas-pin-label{
  bottom:48px!important;
}

@media(max-width:700px){
  .atlas-maplibre-marker-anchor .atlas-maplibre-pin{
    width:34px!important;
    height:46px!important;
  }

  .atlas-maplibre-marker-anchor .atlas-maplibre-pin > img{
    width:30px!important;
  }

  .atlas-maplibre-marker-anchor .atlas-pin-label{
    bottom:43px!important;
  }
}


/* =========================================================
   v4.0.4 · VENDOR ATLAS PIN SIZE — HALF OF v4.0.3
   Visual pin is half-size while preserving an easy click target.
   ========================================================= */

.atlas-maplibre-marker-anchor .atlas-maplibre-pin{
  width:32px!important;
  height:38px!important;
}

.atlas-maplibre-marker-anchor .atlas-maplibre-pin > img{
  width:17px!important;
  max-width:none!important;
}

.atlas-maplibre-marker-anchor .atlas-pin-label{
  bottom:27px!important;
}

@media(max-width:700px){
  .atlas-maplibre-marker-anchor .atlas-maplibre-pin{
    width:30px!important;
    height:34px!important;
  }

  .atlas-maplibre-marker-anchor .atlas-maplibre-pin > img{
    width:15px!important;
  }

  .atlas-maplibre-marker-anchor .atlas-pin-label{
    bottom:24px!important;
  }
}


/* v4.0.5 · Custom Vendor Categories */
.vendor-custom-actions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:18px;
  padding:16px 18px;
  border:1px dashed #b89d74;
  background:rgba(255,249,239,.62);
}
.vendor-custom-actions button{
  flex:0 0 auto;
  padding:10px 14px;
  border:1px solid #a8895e;
  background:#52382b;
  color:#fff8eb;
  cursor:pointer;
}
.vendor-custom-actions p{
  margin:0;
  color:#786557;
  font-size:.7rem;
  line-height:1.5;
}
@media(max-width:650px){
  .vendor-custom-actions{display:block}
  .vendor-custom-actions p{margin-top:10px}
}


/* =========================================================
   v4.0.6 · STUDIO DESK — SCROLLABLE RECENT VAULT HISTORY
   Keeps long couple detail pages compact and easy to scan.
   ========================================================= */

#studioDetailActivity{
  max-height:360px;
  overflow-y:auto;
  padding-right:8px;
  scrollbar-width:thin;
  scrollbar-color:#9c7c54 #eee2cf;
}

#studioDetailActivity::-webkit-scrollbar{
  width:8px;
}

#studioDetailActivity::-webkit-scrollbar-track{
  background:#eee2cf;
  border-radius:999px;
}

#studioDetailActivity::-webkit-scrollbar-thumb{
  background:#9c7c54;
  border-radius:999px;
  border:2px solid #eee2cf;
}

#studioDetailActivity::-webkit-scrollbar-thumb:hover{
  background:#765a3c;
}

@media(max-width:700px){
  #studioDetailActivity{
    max-height:300px;
  }
}


/* =========================================================
   v4.1.0 · ROADMAP / PRIORITIES / PRO TIMELINE UPDATE
   ========================================================= */

/* Expanded desktop navigation */
.site-header nav{
  gap:clamp(.5rem,.85vw,1rem)!important;
}
.site-header nav a{
  font-size:.55rem!important;
  letter-spacing:.11em!important;
  white-space:nowrap;
}
@media(max-width:1120px){
  .site-header nav{
    position:absolute;
    top:72px;
    right:0;
    left:0;
    display:none;
    flex-direction:column;
    gap:0;
    padding:1.2rem 2rem 1.6rem;
    background:rgba(247,243,234,.98);
    box-shadow:0 18px 35px rgba(28,24,20,.12);
  }
  .site-header nav.open{display:flex}
  .site-header nav a{padding:.72rem 0;font-size:.62rem!important}
  .menu-toggle{display:block!important;margin-left:auto}
  .print-button{display:none}
}

/* Dashboard now has nine planning cards */
.vault-tool-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
@media(max-width:950px){
  .vault-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:620px){
  .vault-tool-grid{grid-template-columns:1fr!important}
}

/* Clear step-by-step roadmap */
.vault-roadmap-steps{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:10px;
}
.vault-roadmap-steps a{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:14px;
  align-items:start;
  padding:18px;
  border:1px solid rgba(89,67,46,.17);
  background:rgba(255,251,243,.76);
  color:inherit;
  text-decoration:none;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.vault-roadmap-steps a:hover{
  transform:translateY(-2px);
  border-color:rgba(126,91,52,.48);
  box-shadow:0 10px 22px rgba(61,42,27,.07);
}
.vault-roadmap-steps>a>span{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid #9f7a4b;
  border-radius:50%;
  color:#71502e;
  font:400 .82rem Georgia,serif;
}
.vault-roadmap-steps strong{
  display:block;
  margin-bottom:5px;
  font:400 1.05rem Georgia,serif;
}
.vault-roadmap-steps p{
  margin:0;
  color:#705f52;
  font-size:.72rem;
  line-height:1.55;
}
@media(max-width:720px){
  .vault-roadmap-steps{grid-template-columns:1fr}
}

/* Priorities: force a light, high-contrast paper spread */
#advice-priorities,
.advice.paper{
  background:
    linear-gradient(rgba(255,252,245,.94),rgba(249,241,226,.96)),
    var(--paper-texture)!important;
  color:#31271f!important;
  box-shadow:inset 0 0 90px rgba(85,61,39,.045);
}
.advice.paper .chapter-number{
  color:#6e714b!important;
}
.advice.paper h2{
  color:#2f251d!important;
}
.advice.paper .advice-copy p{
  color:#4f4339!important;
}
.advice.paper .tip{
  background:#fffaf0!important;
  border-left:3px solid #9b7848!important;
  color:#3c3026!important;
  padding:18px 20px!important;
}
.advice.paper .tip span{
  color:#765731!important;
}

/* Timeline: multidisciplinary notes */
.timeline-pro-example article{
  position:relative;
  padding-block:24px!important;
}
.timeline-pro-example article h3{
  margin-bottom:7px;
}
.timeline-pro-example article>div>p{
  max-width:780px;
}
.timeline-pro-notes{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:11px;
}
.timeline-pro-notes span{
  display:inline-block;
  max-width:760px;
  padding:7px 9px;
  border:1px solid rgba(216,193,151,.20);
  background:rgba(255,255,255,.045);
  color:rgba(250,242,226,.78);
  font-size:.62rem;
  line-height:1.5;
  letter-spacing:.025em;
}
.timeline-pro-notes b{
  color:#dec08b;
  letter-spacing:.10em;
  font-size:.56rem;
}
.timeline-protected-hour{
  background:linear-gradient(90deg,rgba(184,145,77,.13),transparent 78%);
  box-shadow:inset 3px 0 0 rgba(218,187,130,.58);
}
.timeline-protected-hour time{
  color:#e0c38e!important;
}
.timeline-example-note{
  max-width:860px!important;
}
@media(max-width:700px){
  .timeline-pro-notes{display:block}
  .timeline-pro-notes span{display:block;margin-top:6px}
}


/* =========================================================
   v4.1.1 · CHAPTER REVEAL VISIBILITY FIX
   JS uses .visible. A legacy later rule expected .is-visible and
   was resetting newly revealed sections back to opacity:0.
   ========================================================= */

.chapter-reveal.visible,
.chapter-reveal.is-visible{
  opacity:1!important;
  transform:none!important;
  visibility:visible!important;
}

/* Once the Vault is unlocked, never allow a revealed chapter to collapse
   into an invisible blank area because of an older animation rule. */
.book:not(.is-locked) .chapter-reveal.visible{
  opacity:1!important;
  transform:none!important;
}


/* =========================================================
   v4.1.2 · ROADMAP DUPLICATE + TIMELINE BLANK SPACE FIX
   ========================================================= */

/* The numbered Roadmap section is the single roadmap destination.
   The duplicate dashboard "Your Roadmap" card has been removed. */
.vault-tool-grid{
  align-items:stretch;
}

/* The original Timeline CSS was built for a short two-column sample:
   intro on the left, events on the right. The new 10-hour expert timeline
   is much longer, which left a huge empty column while scrolling.
   Make this chapter full-width and compact instead. */
#timeline.timeline{
  display:block!important;
  padding:
    clamp(5rem,8vw,8rem)
    max(24px,calc((100vw - 1180px)/2))!important;
}

#timeline .timeline-intro{
  max-width:860px;
  margin:0 0 28px;
}

#timeline .timeline-intro h2{
  max-width:850px;
}

#timeline .timeline-intro>p{
  max-width:760px;
}

#timeline .timeline-example-note{
  max-width:900px!important;
  margin:0 0 28px!important;
}

#timeline .timeline-list{
  width:100%;
  max-width:1040px;
  margin:0;
}

#timeline .timeline-list article{
  grid-template-columns:100px minmax(0,1fr)!important;
  gap:22px!important;
  padding:22px 0!important;
}

#timeline .timeline-list time{
  font-size:clamp(1.25rem,2.1vw,1.8rem)!important;
  line-height:1;
}

#timeline .timeline-list h3{
  font-size:clamp(1.2rem,2vw,1.65rem)!important;
}

#timeline .timeline-list article>div>p{
  max-width:820px;
  margin-top:7px;
  line-height:1.65;
}

#timeline .timeline-pro-notes{
  max-width:860px;
}

@media(max-width:700px){
  #timeline.timeline{
    padding:4.5rem 20px!important;
  }

  #timeline .timeline-list article{
    grid-template-columns:1fr!important;
    gap:7px!important;
    padding:19px 0!important;
  }

  #timeline .timeline-list time{
    font-size:1rem!important;
    color:#dfc28e!important;
  }
}


/* =========================================================
   v4.2.0 · ROADMAP DESIGN RESTORE
   ========================================================= */
.vault-roadmap-chapter{
  padding:0!important;
  background:#eadcc4;
}
.vault-roadmap-brown{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:clamp(30px,7vw,90px);
  align-items:end;
  padding:clamp(60px,8vw,110px) max(24px,calc((100vw - 1180px)/2));
  color:#f6ecda;
  background:
    linear-gradient(rgba(67,43,32,.94),rgba(52,34,27,.96)),
    url("images/vault-assets/leather-texture.jpg") center/520px repeat;
  border-top:1px solid rgba(214,181,121,.24);
  border-bottom:4px double rgba(191,151,84,.36);
}
.vault-roadmap-brown .eyebrow{
  margin:0 0 12px;
  color:#d7b77f;
  letter-spacing:.17em;
  font-size:.62rem;
}
.vault-roadmap-brown h2{
  margin:0;
  font:400 clamp(2.5rem,5.2vw,5.4rem)/.98 Georgia,serif;
}
.vault-roadmap-brown>p{
  margin:0;
  max-width:520px;
  color:rgba(246,236,218,.76);
  line-height:1.75;
}
.vault-roadmap-card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  max-width:1180px;
  margin:0 auto;
  padding:clamp(30px,5vw,62px) 24px clamp(70px,8vw,110px);
}
.vault-roadmap-card{
  position:relative;
  min-height:255px;
  padding:27px 28px 24px;
  border:1px solid rgba(93,65,43,.20);
  background:
    linear-gradient(135deg,rgba(255,252,244,.97),rgba(243,230,207,.94));
  box-shadow:0 12px 28px rgba(65,43,27,.07);
  color:#382a21;
  text-decoration:none;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.vault-roadmap-card:after{
  content:"";
  position:absolute;
  right:-35px;
  bottom:-45px;
  width:150px;
  height:150px;
  border:1px solid rgba(155,119,72,.11);
  border-radius:50%;
}
.vault-roadmap-card:hover{
  transform:translateY(-4px);
  border-color:#aa8557;
  box-shadow:0 18px 36px rgba(65,43,27,.12);
}
.vault-roadmap-card>span{
  display:grid;
  place-items:center;
  width:42px;height:42px;
  margin-bottom:22px;
  border:1px solid #9f7949;
  border-radius:50%;
  color:#6e4d2d;
  font:400 .82rem Georgia,serif;
}
.vault-roadmap-card small{
  display:block;
  color:#937044;
  font-size:.58rem;
  letter-spacing:.13em;
}
.vault-roadmap-card h3{
  margin:6px 0 9px;
  font:400 clamp(1.45rem,2.4vw,2.05rem) Georgia,serif;
}
.vault-roadmap-card p{
  max-width:510px;
  margin:0 0 22px;
  color:#6e5d50;
  font-size:.76rem;
  line-height:1.65;
}
.vault-roadmap-card b{
  color:#5b402c;
  font-size:.68rem;
  letter-spacing:.04em;
}
@media(max-width:760px){
  .vault-roadmap-brown{grid-template-columns:1fr;align-items:start}
  .vault-roadmap-card-grid{grid-template-columns:1fr}
  .vault-roadmap-card{min-height:0}
}

/* =========================================================
   v4.2.0 · STUDIO DESK VENDOR ATLAS MANAGER
   ========================================================= */
.atlas-manager-overlay{
  position:fixed;
  inset:0;
  z-index:60000;
  overflow:auto;
  padding:20px;
  background:rgba(25,16,12,.90);
}
.atlas-manager-overlay[hidden]{display:none!important}
.atlas-manager-shell{
  width:min(1180px,100%);
  min-height:calc(100vh - 40px);
  margin:0 auto;
  background:#eee1ca;
  color:#392a21;
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}
.atlas-manager-header{
  display:flex;
  justify-content:space-between;
  gap:25px;
  padding:30px 34px;
  color:#f6ecdc;
  background:
    linear-gradient(rgba(61,39,29,.94),rgba(48,31,24,.96)),
    url("images/vault-assets/leather-texture.jpg") center/430px repeat;
}
.atlas-manager-header small{color:#d7b67e;letter-spacing:.14em;font-size:.6rem}
.atlas-manager-header h2{margin:5px 0;font:400 2.7rem Georgia,serif}
.atlas-manager-header p{margin:4px 0 0;color:rgba(246,236,220,.67)}
.atlas-manager-header button,
.atlas-manager-editor header button{
  width:40px;height:40px;border:1px solid #ffffff55;border-radius:50%;
  background:none;color:white;font-size:1.4rem;cursor:pointer;
}
.atlas-manager-toolbar{
  display:grid;
  grid-template-columns:auto auto 1fr 190px;
  gap:9px;
  padding:20px 24px 12px;
}
.atlas-manager-toolbar button,
.atlas-manager-toolbar input,
.atlas-manager-toolbar select{
  padding:10px 12px;
  border:1px solid #c3ae8e;
  background:#fff9ef;
  color:#463229;
}
.atlas-manager-toolbar .primary{background:#52382a;color:white}
.atlas-manager-status{min-height:18px;margin:0;padding:0 24px 12px;color:#7b6759;font-size:.7rem}
.atlas-manager-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:10px 24px 30px;
}
.atlas-manager-row{
  display:grid;
  grid-template-columns:36px 1fr auto auto;
  align-items:center;
  gap:12px;
  padding:15px;
  border:1px solid #d0bea2;
  background:#fff9ef;
}
.atlas-manager-row.is-archived{opacity:.58}
.atlas-manager-row-pin{color:#a77e42;font-size:1.25rem}
.atlas-manager-row small{color:#927044;font-size:.56rem;text-transform:uppercase;letter-spacing:.09em}
.atlas-manager-row h3{margin:2px 0;font:400 1.12rem Georgia}
.atlas-manager-row p{margin:2px 0;color:#7b695b;font-size:.66rem}
.atlas-manager-row-coords{text-align:right;font-size:.59rem;color:#7a685c}
.atlas-manager-row-coords span,.atlas-manager-row-coords b{display:block}
.atlas-manager-row-coords b{margin-top:4px;color:#667351}
.atlas-manager-row button{padding:7px 9px;border:1px solid #b79d76;background:#f8edda;color:#50392b}
.atlas-manager-empty{grid-column:1/-1;padding:45px;text-align:center;color:#796758}

.atlas-manager-editor{
  margin:0 24px 35px;
  border:1px solid #c4aa80;
  background:#f8ecd7;
  box-shadow:0 17px 40px rgba(58,37,22,.12);
}
.atlas-manager-editor[hidden]{display:none!important}
.atlas-manager-editor>header{
  display:flex;
  justify-content:space-between;
  padding:22px 25px;
  background:#50372a;
  color:#fff5e5;
}
.atlas-manager-editor>header small{color:#d9bb85;letter-spacing:.12em;font-size:.58rem}
.atlas-manager-editor h3{margin:3px 0;font:400 1.75rem Georgia}
.atlas-editor-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  padding:24px;
}
.atlas-editor-grid label{
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.atlas-editor-grid label.wide{grid-column:1/-1}
.atlas-editor-grid label small{font-weight:400;color:#897467;text-transform:none;letter-spacing:normal}
.atlas-editor-grid input,
.atlas-editor-grid textarea{
  display:block;
  width:100%;
  margin-top:6px;
  padding:10px 11px;
  border:1px solid #c7b291;
  background:#fffaf1;
  font:inherit;
  text-transform:none;
  letter-spacing:normal;
}
.atlas-editor-check{
  display:flex!important;
  gap:8px;
  align-items:center;
}
.atlas-editor-check input{width:auto!important;margin:0!important}
.atlas-editor-message{min-height:18px;margin:0 24px 12px;color:#81513d}
.atlas-manager-editor>footer{
  display:flex;justify-content:flex-end;gap:8px;
  padding:17px 24px;border-top:1px solid #d3bea0;
}
.atlas-manager-editor>footer button{padding:10px 14px;border:1px solid #b79d76;background:#fff9ef}
.atlas-manager-editor>footer .primary{background:#50372a;color:#fff}
@media(max-width:850px){
  .atlas-manager-toolbar{grid-template-columns:1fr 1fr}
  .atlas-manager-list{grid-template-columns:1fr}
}
@media(max-width:650px){
  .atlas-manager-overlay{padding:0}
  .atlas-manager-shell{min-height:100vh}
  .atlas-manager-toolbar{grid-template-columns:1fr}
  .atlas-editor-grid{grid-template-columns:1fr}
  .atlas-editor-grid label.wide{grid-column:auto}
  .atlas-manager-row{grid-template-columns:30px 1fr auto}
  .atlas-manager-row-coords{display:none}
}


/* =========================================================
   v4.2.1 · CLEANER ENTRY FLOW + LINEN ROADMAP
   ========================================================= */

/* The private planning dashboard is now intentionally simple:
   couple name/date/progress only, then straight into the Roadmap. */
#vault-dashboard{
  padding-bottom:clamp(38px,5vw,62px)!important;
}

#vault-dashboard .vault-dashboard-intro{
  max-width:900px;
  margin-inline:auto;
}

#vault-dashboard + #roadmap{
  margin-top:0!important;
}

/* Deep brown woven linen / soft flannel texture.
   Built entirely in CSS so there is no extra image asset to maintain. */
.vault-roadmap-brown{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(rgba(61,42,33,.88),rgba(52,35,29,.90)),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.032) 0px,
      rgba(255,255,255,.032) 1px,
      rgba(0,0,0,.028) 1px,
      rgba(0,0,0,.028) 3px,
      transparent 3px,
      transparent 6px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.026) 0px,
      rgba(255,255,255,.026) 1px,
      rgba(0,0,0,.025) 1px,
      rgba(0,0,0,.025) 3px,
      transparent 3px,
      transparent 7px
    ),
    linear-gradient(135deg,#6d4b3c 0%,#4c332b 48%,#5b3e33 100%)!important;
}

/* faint diagonal fibers make it read more like cloth than digital stripes */
.vault-roadmap-brown::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0px,
      transparent 8px,
      rgba(232,214,185,.035) 8px,
      rgba(232,214,185,.035) 9px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      transparent 11px,
      rgba(18,11,8,.035) 11px,
      rgba(18,11,8,.035) 12px
    );
  mix-blend-mode:soft-light;
}

.vault-roadmap-brown > *{
  position:relative;
  z-index:1;
}

/* Cards sit on warm cloth/paper rather than plain cream. */
.vault-roadmap-card-grid{
  background:
    repeating-linear-gradient(
      0deg,
      rgba(107,78,52,.025) 0px,
      rgba(107,78,52,.025) 1px,
      transparent 1px,
      transparent 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(107,78,52,.018) 0px,
      rgba(107,78,52,.018) 1px,
      transparent 1px,
      transparent 5px
    ),
    #eadcc4;
}

.vault-roadmap-card{
  background:
    linear-gradient(rgba(255,252,244,.94),rgba(244,232,211,.95)),
    repeating-linear-gradient(
      0deg,
      rgba(93,67,44,.035) 0px,
      rgba(93,67,44,.035) 1px,
      transparent 1px,
      transparent 4px
    )!important;
}


/* v4.2.2 · overall planning meter */
#vaultProgressBar{transition:width .45s ease!important}


/* =========================================================
   v4.3.0 · INVITE-ONLY / SOFT-LAUNCH LANGUAGE
   ========================================================= */

.vault-soft-launch-note{
  position:relative;
  margin:28px 0;
  padding:22px 24px 20px;
  border:1px solid rgba(139,102,61,.28);
  background:
    linear-gradient(rgba(255,250,240,.88),rgba(246,235,216,.92)),
    repeating-linear-gradient(
      0deg,
      rgba(92,65,42,.024) 0px,
      rgba(92,65,42,.024) 1px,
      transparent 1px,
      transparent 4px
    );
  box-shadow:0 10px 25px rgba(62,42,28,.06);
}

.vault-soft-launch-note::before{
  content:"";
  position:absolute;
  top:-7px;
  left:50%;
  width:100px;
  height:18px;
  transform:translateX(-50%) rotate(-1deg);
  background:rgba(202,181,145,.60);
  box-shadow:0 2px 5px rgba(61,43,29,.07);
}

.vault-soft-launch-note>span{
  display:block;
  margin-bottom:9px;
  color:#8a6335;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.16em;
}

.vault-soft-launch-note p{
  margin:8px 0!important;
  color:#51443a!important;
}

.vault-access-privacy{
  max-width:510px;
  margin:15px auto 2px;
  padding:15px 17px;
  border:1px solid rgba(134,99,62,.25);
  background:rgba(255,249,239,.70);
  text-align:left;
}

.vault-access-privacy>span{
  display:block;
  margin-bottom:6px;
  color:#7a5632;
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.15em;
  text-align:center;
}

.vault-access-privacy p{
  margin:5px 0;
  color:#69584c;
  font-size:.66rem;
  line-height:1.55;
}



/* =========================================================
   v4.3.1 · THE CHRONICLE — JOURNAL PAGE TIMELINE
   ========================================================= */

#timeline.timeline{
  position:relative;
  overflow:hidden;
  color:#3b2d24!important;
  background:
    linear-gradient(rgba(246,237,218,.96),rgba(237,225,203,.97)),
    repeating-linear-gradient(
      0deg,
      rgba(94,67,43,.024) 0px,
      rgba(94,67,43,.024) 1px,
      transparent 1px,
      transparent 5px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(94,67,43,.017) 0px,
      rgba(94,67,43,.017) 1px,
      transparent 1px,
      transparent 6px
    )!important;
  border-top:1px solid rgba(113,78,47,.18);
  border-bottom:1px solid rgba(113,78,47,.18);
}

#timeline.timeline::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:linear-gradient(transparent,rgba(95,68,45,.12) 8%,rgba(95,68,45,.12) 92%,transparent);
  box-shadow:18px 0 30px rgba(80,54,36,.035),-18px 0 30px rgba(80,54,36,.035);
  pointer-events:none;
}

#timeline .timeline-intro,
#timeline .timeline-example-note,
#timeline .timeline-list,
#timeline .timeline-handwritten-note{
  position:relative;
  z-index:2;
}

#timeline .timeline-intro .chapter-number{
  color:#8b673f!important;
}

#timeline .timeline-intro h2{
  color:#3a2b22!important;
}

#timeline .timeline-intro>p{
  color:#665447!important;
}

/* Main sample note looks like a loose sheet taped into the journal */
.timeline-paper-note{
  position:relative;
  padding:28px 30px 25px!important;
  border:1px solid rgba(132,96,59,.20)!important;
  background:
    linear-gradient(rgba(255,252,245,.96),rgba(249,241,226,.97)),
    repeating-linear-gradient(
      0deg,
      rgba(104,77,52,.028) 0px,
      rgba(104,77,52,.028) 1px,
      transparent 1px,
      transparent 4px
    )!important;
  box-shadow:
    0 15px 30px rgba(64,42,26,.09),
    0 2px 0 rgba(255,255,255,.8) inset!important;
  transform:rotate(-.35deg);
}

.timeline-paper-note::before,
.timeline-paper-note::after{
  content:"";
  position:absolute;
  top:-10px;
  width:92px;
  height:24px;
  background:rgba(202,181,145,.66);
  box-shadow:0 2px 4px rgba(64,43,27,.06);
}
.timeline-paper-note::before{left:12%;transform:rotate(-2deg)}
.timeline-paper-note::after{right:12%;transform:rotate(2deg)}

.timeline-example-note-kicker{
  color:#8e6739!important;
}

/* Handwritten margin note */
.timeline-handwritten-note{
  width:min(360px,88%);
  margin:14px 0 34px auto;
  padding:18px 20px 17px;
  border-left:2px solid #a77d48;
  background:rgba(255,250,239,.66);
  transform:rotate(.8deg);
  box-shadow:0 8px 18px rgba(61,42,28,.05);
}
.timeline-handwritten-note span{
  display:block;
  margin-bottom:5px;
  color:#8b6033;
  font:italic 1.05rem Georgia,serif;
}
.timeline-handwritten-note p{
  margin:0;
  color:#5d4b3e;
  font:italic .78rem/1.65 Georgia,serif;
}

/* Each event becomes a journal entry rather than a dark UI row */
#timeline .timeline-list article{
  position:relative;
  margin:0 0 13px;
  padding:24px 26px!important;
  border:1px solid rgba(126,91,58,.16);
  background:
    linear-gradient(rgba(255,252,245,.91),rgba(247,237,220,.91)),
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 27px,
      rgba(117,88,59,.055) 27px,
      rgba(117,88,59,.055) 28px
    );
  box-shadow:0 9px 22px rgba(70,45,27,.055);
}

#timeline .timeline-list article:nth-child(odd){
  transform:rotate(-.08deg);
}
#timeline .timeline-list article:nth-child(even){
  transform:rotate(.08deg);
}

#timeline .timeline-list time{
  color:#8b6438!important;
  font-family:Georgia,serif!important;
}

#timeline .timeline-list h3{
  color:#3b2c23!important;
}

#timeline .timeline-list article>div>p{
  color:#625044!important;
}

#timeline .timeline-pro-notes{
  gap:8px!important;
}

#timeline .timeline-pro-notes span{
  position:relative;
  color:#5e4a3d!important;
  border:1px solid rgba(151,112,68,.18)!important;
  background:#f5e7cb!important;
  box-shadow:0 3px 8px rgba(61,42,28,.05);
}

#timeline .timeline-pro-notes span:nth-child(2n){
  background:#ebe6d5!important;
}

#timeline .timeline-pro-notes b{
  color:#7a552f!important;
}

/* Protected portrait hour reads like a pinned special note */
#timeline .timeline-protected-hour{
  background:
    linear-gradient(rgba(244,232,207,.96),rgba(237,222,194,.96)),
    repeating-linear-gradient(
      0deg,
      rgba(89,61,40,.025) 0px,
      rgba(89,61,40,.025) 1px,
      transparent 1px,
      transparent 4px
    )!important;
  border:1px solid rgba(150,109,60,.34)!important;
  box-shadow:
    inset 5px 0 0 #9b7445,
    0 10px 24px rgba(61,42,28,.08)!important;
}

.timeline-paperclip{
  position:absolute;
  top:-8px;
  right:38px;
  width:17px;
  height:48px;
  border:2px solid #a8895f;
  border-radius:9px;
  transform:rotate(8deg);
  opacity:.9;
}
.timeline-paperclip::after{
  content:"";
  position:absolute;
  inset:4px 3px 5px 3px;
  border:1px solid #a8895f;
  border-radius:7px;
}

/* Sunset moment taped onto page */
.timeline-sunset-card{
  border-color:rgba(169,123,63,.32)!important;
}
.timeline-tape-strip{
  position:absolute;
  top:-9px;
  left:50%;
  width:110px;
  height:23px;
  transform:translateX(-50%) rotate(-1deg);
  background:rgba(201,176,132,.62);
  box-shadow:0 2px 4px rgba(61,42,28,.05);
}

/* Decorative scrapbook bits */
.timeline-journal-decor{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}

.timeline-polaroid{
  position:absolute;
  width:160px;
  padding:10px 10px 30px;
  background:#fffaf0;
  border:1px solid rgba(117,83,52,.15);
  box-shadow:0 12px 26px rgba(50,34,24,.13);
}
.timeline-polaroid-one{
  top:215px;
  right:3vw;
  transform:rotate(5deg);
}
.timeline-polaroid-two{
  top:760px;
  left:2.5vw;
  transform:rotate(-6deg);
}
.timeline-polaroid-photo{
  height:112px;
  background:
    linear-gradient(rgba(65,45,33,.18),rgba(65,45,33,.12)),
    url("images/river.jpg") center/cover no-repeat;
  filter:saturate(.68) sepia(.18);
}
.timeline-polaroid-photo.alt{
  background:
    linear-gradient(rgba(65,45,33,.12),rgba(65,45,33,.10)),
    url("images/vault-assets/atlas-photo-board.jpg") center/cover no-repeat;
}
.timeline-polaroid figcaption{
  margin-top:8px;
  color:#6d5848;
  text-align:center;
  font:italic .66rem Georgia,serif;
}

.timeline-fabric-swatch{
  position:absolute;
  width:115px;
  height:92px;
  border:1px solid rgba(82,57,39,.16);
  box-shadow:0 8px 16px rgba(54,36,23,.08);
  opacity:.82;
}
.timeline-fabric-swatch.swatch-one{
  top:515px;
  right:1.5vw;
  transform:rotate(-7deg);
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 2px,transparent 2px 6px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 2px,transparent 2px 7px),
    #5b4638;
}
.timeline-fabric-swatch.swatch-two{
  top:1180px;
  right:3vw;
  transform:rotate(4deg);
  background:
    repeating-linear-gradient(0deg,rgba(63,47,36,.05) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(63,47,36,.04) 0 1px,transparent 1px 5px),
    #c8b79a;
}

.timeline-brass-pin{
  position:absolute;
  width:11px;
  height:11px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f6df9b 0 18%,#bd8b3d 42%,#755127 100%);
  box-shadow:0 2px 3px rgba(38,25,16,.25);
}
.timeline-brass-pin::after{
  content:"";
  position:absolute;
  top:8px;
  left:5px;
  width:1px;
  height:25px;
  background:#7a694f;
  transform:rotate(10deg);
}
.timeline-brass-pin.pin-one{top:505px;right:7vw}
.timeline-brass-pin.pin-two{top:1170px;right:8vw}

@media(max-width:1100px){
  .timeline-journal-decor{
    display:none;
  }
}

@media(max-width:700px){
  #timeline.timeline::before{display:none}

  .timeline-paper-note{
    padding:24px 20px 20px!important;
    transform:none;
  }

  #timeline .timeline-list article{
    padding:20px 18px!important;
    transform:none!important;
  }

  .timeline-paperclip{
    right:20px;
  }

  .timeline-handwritten-note{
    width:100%;
    margin:10px 0 26px;
  }
}


/* =========================================================
   v4.3.2 · THE CHRONICLE — REFINEMENT PASS
   ========================================================= */

/* Fix washed-out copy inside the taped 10-hour sample note. */
.timeline-paper-note,
.timeline-paper-note p,
.timeline-paper-note strong{
  color:#4a3a30!important;
}

.timeline-paper-note p{
  opacity:1!important;
  text-shadow:none!important;
}

.timeline-paper-note .timeline-example-note-kicker{
  color:#8a6032!important;
}

.timeline-paper-note strong{
  display:block;
  margin:8px 0 7px;
  font:400 1.05rem/1.45 Georgia,serif;
}

/* Bring scrapbook accents slightly inward so they feel intentionally placed. */
.timeline-polaroid-one{
  right:5vw!important;
}

.timeline-polaroid-two{
  left:4.5vw!important;
}

.timeline-fabric-swatch.swatch-one{
  right:4vw!important;
}

.timeline-fabric-swatch.swatch-two{
  right:5vw!important;
}

.timeline-brass-pin.pin-one{
  right:9vw!important;
}

.timeline-brass-pin.pin-two{
  right:10vw!important;
}

/* Make fabric samples feel more tactile / imperfect. */
.timeline-fabric-swatch{
  clip-path:polygon(
    2% 4%, 96% 0%, 100% 11%, 97% 92%,
    90% 100%, 7% 96%, 0% 89%, 3% 10%
  );
}

.timeline-fabric-swatch::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px dashed rgba(255,255,255,.11);
  pointer-events:none;
}

.timeline-fabric-swatch::after{
  content:"";
  position:absolute;
  inset:-4px;
  background:
    repeating-linear-gradient(90deg,transparent 0 8px,rgba(255,255,255,.045) 8px 9px);
  opacity:.45;
  pointer-events:none;
}

/* More dimensional brass pin head. */
.timeline-brass-pin{
  width:13px!important;
  height:13px!important;
  box-shadow:
    0 2px 3px rgba(38,25,16,.28),
    inset 0 1px 1px rgba(255,255,255,.45)!important;
}

/* If decorative photo assets fail, preserve the scrapbook card gracefully. */
.timeline-polaroid-photo{
  position:relative;
  overflow:hidden;
  background-color:#d8cfbf!important;
}

.timeline-polaroid-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,rgba(255,255,255,.08),rgba(61,42,28,.08));
  pointer-events:none;
}

/* Keep timeline entries elegant rather than over-decorated. */
#timeline .timeline-list article{
  box-shadow:
    0 8px 18px rgba(70,45,27,.045),
    inset 0 1px 0 rgba(255,255,255,.7)!important;
}

#timeline .timeline-pro-notes span{
  border-radius:1px;
}

/* Subtle handwritten annotations in the margins. */
.timeline-margin-annotations{
  position:relative;
  z-index:2;
  height:28px;
  margin:-8px 0 16px;
  pointer-events:none;
}

.timeline-margin-annotations .annotation-arrow{
  position:absolute;
  left:8%;
  top:1px;
  color:#9d7448;
  font:italic 1.35rem Georgia,serif;
  transform:rotate(7deg);
  opacity:.7;
}

.timeline-margin-annotations .annotation-circle{
  position:absolute;
  right:18%;
  top:-3px;
  width:56px;
  height:22px;
  border:1px solid rgba(145,101,57,.46);
  border-radius:50%;
  transform:rotate(-7deg);
  opacity:.6;
}

.timeline-margin-annotations .annotation-script{
  position:absolute;
  right:8%;
  top:0;
  color:#875f38;
  font:italic .72rem Georgia,serif;
  transform:rotate(-2deg);
  opacity:.8;
}

/* Give the page spread a slightly richer center gutter. */
#timeline.timeline::before{
  width:2px!important;
  background:
    linear-gradient(
      transparent,
      rgba(91,65,43,.10) 7%,
      rgba(91,65,43,.16) 50%,
      rgba(91,65,43,.10) 93%,
      transparent
    )!important;
  box-shadow:
    12px 0 28px rgba(72,47,31,.035),
    -12px 0 28px rgba(72,47,31,.035)!important;
}

/* Cleaner scrapbook behavior on medium screens. */
@media(max-width:1250px){
  .timeline-polaroid,
  .timeline-fabric-swatch,
  .timeline-brass-pin{
    opacity:.72;
  }

  .timeline-polaroid-one{right:2vw!important}
  .timeline-polaroid-two{left:2vw!important}
}

@media(max-width:1100px){
  .timeline-journal-decor{
    display:none!important;
  }

  .timeline-margin-annotations{
    display:none;
  }
}


/* =========================================================
   v4.3.3 · THE CHRONICLE — ANTIQUE JUNK JOURNAL REDESIGN
   Inspired by layered kraft journals, lace pockets, tags, twine,
   vintage tickets, binder rings, pressed leaves, and tucked photos.
   ========================================================= */

#timeline.timeline{
  --chronicle-kraft:#9c795c;
  --chronicle-kraft-dark:#6f523f;
  --chronicle-paper:#e8dcc5;
  --chronicle-cream:#f4ead8;
  --chronicle-ink:#3f3027;
  --chronicle-faded:#725e4e;
  --chronicle-brass:#9f7848;
  padding-top:clamp(80px,9vw,130px)!important;
  background:
    radial-gradient(circle at 14% 12%,rgba(255,255,255,.07),transparent 22%),
    radial-gradient(circle at 86% 18%,rgba(0,0,0,.05),transparent 25%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(54,35,24,.025) 0 1px,transparent 1px 5px),
    #8e6e54!important;
  color:var(--chronicle-ink)!important;
}

/* Two-page kraft journal illusion */
#timeline.timeline::after{
  content:"";
  position:absolute;
  inset:26px 3vw 30px;
  z-index:0;
  pointer-events:none;
  border:1px solid rgba(62,39,25,.26);
  border-radius:2px;
  background:
    linear-gradient(90deg,
      #b69271 0%,
      #a98667 48.9%,
      #82634e 49.7%,
      #6e503f 50%,
      #8a6a52 50.3%,
      #a78668 51.1%,
      #b99574 100%);
  box-shadow:
    0 20px 60px rgba(33,21,14,.20),
    inset 16px 0 30px rgba(255,255,255,.035),
    inset -16px 0 30px rgba(54,35,24,.07);
}

#timeline.timeline::before{
  z-index:1!important;
  top:28px!important;
  bottom:32px!important;
  background:rgba(66,44,30,.34)!important;
  box-shadow:
    10px 0 18px rgba(43,27,18,.10),
    -10px 0 18px rgba(43,27,18,.10)!important;
}

/* Main text sits like papers pasted over kraft */
#timeline .timeline-intro{
  max-width:860px!important;
  margin-left:clamp(18px,5vw,72px)!important;
  padding:28px 32px 30px!important;
  background:
    linear-gradient(rgba(243,232,211,.96),rgba(227,211,183,.96)),
    repeating-linear-gradient(0deg,rgba(69,48,34,.025) 0 1px,transparent 1px 4px)!important;
  border:1px solid rgba(74,49,33,.19);
  box-shadow:0 10px 25px rgba(44,28,18,.12);
  transform:rotate(-.45deg);
}

#timeline .timeline-intro h2{
  color:#3b2c23!important;
}

#timeline .timeline-intro>p{
  color:#5f4b3e!important;
}

#timeline .timeline-intro .chapter-number{
  color:#7c5b39!important;
}

/* Replace clean taped note with old stationery card */
.timeline-paper-note{
  width:min(800px,82%);
  margin:35px auto 28px!important;
  padding:30px 34px 28px!important;
  background:
    linear-gradient(rgba(237,224,196,.97),rgba(225,207,174,.97)),
    repeating-linear-gradient(0deg,transparent 0 25px,rgba(99,74,49,.075) 25px 26px)!important;
  border:1px solid rgba(79,54,35,.25)!important;
  box-shadow:0 13px 24px rgba(42,27,18,.13)!important;
  transform:rotate(.4deg)!important;
}

.timeline-paper-note::before{
  width:120px!important;
  height:28px!important;
  left:8%!important;
  top:-12px!important;
  background:rgba(191,160,111,.52)!important;
  transform:rotate(-3deg)!important;
}

.timeline-paper-note::after{
  width:88px!important;
  height:22px!important;
  right:7%!important;
  top:-8px!important;
  background:rgba(191,160,111,.42)!important;
  transform:rotate(4deg)!important;
}

/* Scrapbook title note becomes more like a real loose handwritten card */
.timeline-handwritten-note{
  width:min(380px,86%)!important;
  margin:20px 8% 40px auto!important;
  padding:18px 22px 20px!important;
  border:1px solid rgba(77,53,35,.20)!important;
  border-left:4px solid #765136!important;
  background:
    linear-gradient(rgba(226,211,184,.96),rgba(213,194,161,.96)),
    repeating-linear-gradient(0deg,transparent 0 21px,rgba(93,65,41,.075) 21px 22px)!important;
  box-shadow:0 9px 18px rgba(43,28,18,.12)!important;
  transform:rotate(1.5deg)!important;
}

.timeline-handwritten-note span{
  color:#674529!important;
  font-size:1rem!important;
}

/* Timeline entries now look like layered old note cards / recipe cards */
#timeline .timeline-list{
  width:min(1020px,88%)!important;
  margin:0 auto!important;
  padding:0 0 40px;
}

#timeline .timeline-list article{
  overflow:visible!important;
  margin:0 0 22px!important;
  padding:26px 30px!important;
  background:
    linear-gradient(rgba(244,235,216,.97),rgba(232,217,190,.97)),
    repeating-linear-gradient(0deg,transparent 0 28px,rgba(103,76,50,.07) 28px 29px)!important;
  border:1px solid rgba(79,54,35,.22)!important;
  box-shadow:
    0 11px 18px rgba(43,28,18,.12),
    7px 6px 0 rgba(77,54,38,.06)!important;
}

#timeline .timeline-list article:nth-child(4n+1){
  transform:rotate(-.28deg)!important;
}
#timeline .timeline-list article:nth-child(4n+2){
  transform:rotate(.22deg)!important;
}
#timeline .timeline-list article:nth-child(4n+3){
  transform:rotate(-.12deg)!important;
}
#timeline .timeline-list article:nth-child(4n){
  transform:rotate(.16deg)!important;
}

#timeline .timeline-list article::before{
  content:"";
  position:absolute;
  top:9px;
  left:-9px;
  width:42px;
  height:18px;
  background:rgba(182,151,105,.42);
  transform:rotate(-5deg);
  box-shadow:0 2px 4px rgba(47,31,20,.05);
}

#timeline .timeline-list time{
  color:#725033!important;
}

#timeline .timeline-list h3{
  font-family:Georgia,serif!important;
  color:#3b2d24!important;
}

#timeline .timeline-list article>div>p{
  color:#5f4d40!important;
}

/* Expert notes become ticket strips / clipped notes */
#timeline .timeline-pro-notes{
  margin-top:14px!important;
}

#timeline .timeline-pro-notes span{
  position:relative;
  padding:8px 11px 8px 13px!important;
  border:0!important;
  border-left:3px solid #8a633f!important;
  background:#d9c5a3!important;
  color:#554236!important;
  box-shadow:0 4px 9px rgba(47,31,21,.09)!important;
}

#timeline .timeline-pro-notes span:nth-child(even){
  background:#c9c3ad!important;
}

#timeline .timeline-pro-notes b{
  color:#67482f!important;
}

/* Special scrapbook labels */
.chronicle-mini-label{
  position:absolute;
  top:-12px;
  right:34px;
  z-index:3;
  padding:5px 10px;
  border:1px solid rgba(75,49,30,.21);
  background:#7b5b42;
  color:#f0e1c8;
  font-size:.52rem;
  font-weight:700;
  letter-spacing:.13em;
  box-shadow:0 4px 8px rgba(42,27,17,.12);
  transform:rotate(1.5deg);
}

.entry-ceremony .chronicle-mini-label{
  background:#6d5040;
}
.entry-party .chronicle-mini-label{
  background:#8b6848;
}
.entry-close .chronicle-mini-label{
  background:#564238;
}

/* Junk journal layered objects */
.chronicle-junk-spread{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

/* Left-page pocket with lace trim */
.chronicle-pocket{
  position:absolute;
  top:420px;
  left:4vw;
  width:220px;
  height:300px;
  background:
    linear-gradient(rgba(143,107,78,.94),rgba(116,84,61,.96)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 4px);
  border:1px solid rgba(61,38,24,.28);
  box-shadow:0 12px 24px rgba(38,24,15,.18);
  transform:rotate(-2.4deg);
}

.chronicle-pocket::before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px dashed rgba(70,45,28,.38);
}

.chronicle-pocket-lace{
  position:absolute;
  left:-4px;
  right:-4px;
  top:-13px;
  height:28px;
  background:
    radial-gradient(circle at 8px 14px,transparent 0 5px,#e0d0b2 5px 7px,transparent 7px) 0 0/18px 28px repeat-x;
  opacity:.92;
}

.chronicle-pocket-stamp{
  position:absolute;
  left:18px;
  bottom:24px;
  padding:7px 9px;
  border:1px solid rgba(42,29,20,.46);
  color:#3f2c22;
  font:700 .56rem/1.1 Georgia,serif;
  letter-spacing:.12em;
  transform:rotate(-2deg);
  opacity:.75;
}

.chronicle-ticket{
  position:absolute;
  top:62px;
  right:-36px;
  width:150px;
  padding:8px 11px;
  background:#c4a77c;
  border:1px dashed #735138;
  color:#59402f;
  font-size:.52rem;
  letter-spacing:.11em;
  transform:rotate(7deg);
}

.chronicle-photo-card{
  position:absolute;
  width:112px;
  height:140px;
  padding:8px 8px 24px;
  background:#e8dbc2;
  border:1px solid rgba(62,40,26,.19);
  box-shadow:0 7px 13px rgba(42,27,18,.16);
}
.chronicle-photo-card::before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:
    linear-gradient(rgba(59,43,32,.18),rgba(59,43,32,.10)),
    url("images/river.jpg") center/cover no-repeat;
  filter:sepia(.28) saturate(.62) contrast(.94);
}
.chronicle-photo-card.photo-a{
  top:-54px;
  left:18px;
  transform:rotate(-5deg);
}
.chronicle-photo-card.photo-b{
  top:-26px;
  right:7px;
  transform:rotate(6deg);
}

/* Hanging tag */
.chronicle-tag{
  position:absolute;
  top:520px;
  right:6vw;
  width:190px;
  min-height:120px;
  padding:22px 20px 18px;
  background:#c3a37a;
  border:1px solid rgba(70,47,31,.28);
  box-shadow:0 8px 18px rgba(40,25,16,.15);
  transform:rotate(2deg);
}

.chronicle-tag::before{
  content:"";
  position:absolute;
  top:13px;
  right:15px;
  width:15px;
  height:15px;
  border:4px solid #8d704d;
  border-radius:50%;
  background:#ab8b65;
}

.chronicle-tag span{
  display:block;
  margin-bottom:15px;
  color:#5b412d;
  font:700 .8rem Georgia,serif;
  letter-spacing:.12em;
}

.chronicle-tag i{
  display:block;
  height:1px;
  margin:11px 0;
  background:rgba(80,54,36,.36);
}

.chronicle-tag b{
  position:absolute;
  top:20px;
  right:-65px;
  width:78px;
  height:2px;
  background:#775f45;
  transform:rotate(-18deg);
}

/* Twine bundle */
.chronicle-twine{
  position:absolute;
  top:310px;
  right:16vw;
  width:190px;
  height:110px;
  opacity:.75;
}
.chronicle-twine span{
  position:absolute;
  inset:45px 0 auto;
  height:2px;
  background:#715943;
  transform:rotate(7deg);
}
.chronicle-twine span:nth-child(2){
  transform:rotate(-10deg);
  top:54px;
}

/* Binder rings along center edge */
.chronicle-ring{
  position:absolute;
  left:calc(50% - 10px);
  width:20px;
  height:54px;
  border:3px solid #5b4638;
  border-radius:50%;
  opacity:.55;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);
}
.chronicle-ring.ring-one{top:250px}
.chronicle-ring.ring-two{top:760px}
.chronicle-ring.ring-three{top:1280px}

/* Pressed leaves */
.chronicle-pressed-leaf{
  position:absolute;
  width:70px;
  height:110px;
  opacity:.24;
  filter:sepia(.8);
}
.chronicle-pressed-leaf::before{
  content:"";
  position:absolute;
  inset:0 20px;
  border-radius:70% 10% 70% 10%;
  background:#6b5438;
  transform:rotate(35deg);
}
.chronicle-pressed-leaf::after{
  content:"";
  position:absolute;
  left:34px;
  top:15px;
  width:1px;
  height:92px;
  background:#5d4934;
}
.chronicle-pressed-leaf.leaf-one{
  top:950px;
  left:6vw;
  transform:rotate(-14deg);
}
.chronicle-pressed-leaf.leaf-two{
  top:1550px;
  right:7vw;
  transform:rotate(18deg);
}

/* Keep old decorative items from competing with the new junk-journal pieces */
.timeline-journal-decor .timeline-fabric-swatch{
  opacity:.42!important;
}
.timeline-journal-decor .timeline-polaroid{
  opacity:.55!important;
}

/* Protected portrait hour feels like a pocketed feature card */
#timeline .timeline-protected-hour{
  background:#d9c19b!important;
  border:1px solid rgba(82,56,36,.26)!important;
  box-shadow:
    inset 5px 0 0 #805b3a,
    0 10px 20px rgba(43,28,18,.13)!important;
}

/* Sunset card = taped kraft card */
#timeline .timeline-sunset-card{
  background:#d8c4a3!important;
}

/* Small-screen cleanup */
@media(max-width:1180px){
  .chronicle-junk-spread{
    display:none;
  }
}

@media(max-width:760px){
  #timeline.timeline{
    padding:58px 18px!important;
  }

  #timeline.timeline::after{
    inset:12px 6px 16px;
  }

  #timeline .timeline-intro,
  .timeline-paper-note,
  #timeline .timeline-list{
    width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    transform:none!important;
  }

  #timeline .timeline-list article{
    transform:none!important;
  }

  .chronicle-mini-label{
    right:15px;
  }
}


/* =========================================================
   v4.3.4 · THE CHRONICLE — FULL WEDDING VAULT VISUAL MATCH
   Dark leather cover + weathered pages + scrapbook ephemera.
   ========================================================= */

#timeline.timeline{
  position:relative;
  isolation:isolate;
  margin:0!important;
  padding:
    clamp(100px,10vw,150px)
    max(34px,calc((100vw - 1260px)/2))
    clamp(100px,10vw,150px)!important;

  /* dark leather surrounds the weathered journal spread */
  background:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.025),transparent 18%),
    radial-gradient(circle at 82% 78%,rgba(0,0,0,.16),transparent 24%),
    repeating-linear-gradient(
      12deg,
      rgba(255,255,255,.012) 0 1px,
      transparent 1px 5px
    ),
    linear-gradient(135deg,#241711 0%,#3a241a 32%,#2a1a14 68%,#1d120e 100%)!important;

  border-top:12px solid #1b100c!important;
  border-bottom:12px solid #1b100c!important;
  box-shadow:
    inset 0 0 0 1px rgba(179,132,72,.18),
    inset 0 0 70px rgba(0,0,0,.38),
    0 20px 60px rgba(0,0,0,.20)!important;
}

/* leather stitching around the chapter */
#timeline.timeline > *{
  position:relative;
  z-index:3;
}

#timeline.timeline .timeline-journal-decor,
#timeline.timeline .chronicle-junk-spread{
  z-index:2!important;
}

#timeline.timeline::selection{
  background:#a77a48;
  color:#fff;
}

/* weathered book spread sits inside leather */
#timeline.timeline::after{
  content:"";
  position:absolute;
  inset:
    clamp(36px,4vw,54px)
    clamp(26px,3vw,48px)
    clamp(36px,4vw,54px)!important;
  z-index:0!important;

  border:1px solid rgba(81,52,34,.30)!important;
  border-radius:3px!important;

  background:
    radial-gradient(circle at 10% 18%,rgba(117,82,50,.06),transparent 19%),
    radial-gradient(circle at 91% 67%,rgba(89,62,39,.07),transparent 22%),
    repeating-linear-gradient(
      0deg,
      rgba(78,54,34,.018) 0 1px,
      transparent 1px 4px
    ),
    linear-gradient(
      90deg,
      #d2bb95 0%,
      #e0ceb0 46.5%,
      #b99d7d 49.2%,
      #876951 49.8%,
      #6d5140 50%,
      #8e6d54 50.2%,
      #bea182 50.8%,
      #dfcdb0 53.5%,
      #d3bc98 100%
    )!important;

  box-shadow:
    0 18px 45px rgba(0,0,0,.35),
    inset 24px 0 32px rgba(255,255,255,.06),
    inset -24px 0 32px rgba(67,43,28,.10)!important;
}

/* leather stitching border around the paper book */
#timeline.timeline::before{
  content:""!important;
  position:absolute!important;
  inset:
    clamp(22px,2.5vw,34px)
    clamp(16px,2vw,28px)
    clamp(22px,2.5vw,34px)!important;
  z-index:1!important;
  width:auto!important;
  background:none!important;
  border:1px dashed rgba(181,132,72,.44)!important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.45),
    0 0 0 7px rgba(58,36,26,.58)!important;
  pointer-events:none;
}

/* central book gutter */
#timeline .timeline-intro::after{
  content:"";
  position:fixed;
  left:-9999px;
}

/* Paper intro feels like a mounted journal title page */
#timeline .timeline-intro{
  margin-left:auto!important;
  margin-right:auto!important;
  width:min(900px,88%)!important;
  padding:34px 38px 35px!important;
  background:
    linear-gradient(rgba(238,224,198,.95),rgba(223,204,171,.96)),
    repeating-linear-gradient(
      0deg,
      rgba(70,48,31,.026) 0 1px,
      transparent 1px 4px
    )!important;
  border:1px solid rgba(68,43,27,.22)!important;
  box-shadow:
    0 15px 30px rgba(31,19,12,.20),
    inset 0 0 24px rgba(128,88,52,.04)!important;
  transform:rotate(-.35deg);
}

/* dark ink, antique gold chapter label */
#timeline .timeline-intro .chapter-number{
  color:#805b35!important;
  text-shadow:none!important;
}
#timeline .timeline-intro h2{
  color:#32241c!important;
}
#timeline .timeline-intro>p{
  color:#5b493d!important;
}

/* old paper note with darker tape */
.timeline-paper-note{
  background:
    linear-gradient(rgba(231,215,184,.97),rgba(213,192,154,.98)),
    repeating-linear-gradient(
      0deg,
      transparent 0 24px,
      rgba(92,65,41,.07) 24px 25px
    )!important;
  border:1px solid rgba(71,47,30,.26)!important;
  box-shadow:0 14px 25px rgba(28,17,10,.22)!important;
}

.timeline-paper-note::before,
.timeline-paper-note::after,
.timeline-tape-strip{
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.06) 0 1px,
      transparent 1px 4px
    ),
    rgba(166,136,93,.67)!important;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(71,47,30,.10);
}

/* Weather the timeline cards more, but preserve readability */
#timeline .timeline-list article{
  background:
    linear-gradient(rgba(239,226,202,.97),rgba(220,200,165,.97)),
    radial-gradient(circle at 12% 8%,rgba(110,75,43,.045),transparent 13%),
    radial-gradient(circle at 90% 86%,rgba(95,67,41,.05),transparent 17%),
    repeating-linear-gradient(
      0deg,
      transparent 0 27px,
      rgba(97,69,44,.075) 27px 28px
    )!important;
  border-color:rgba(60,38,24,.26)!important;
  box-shadow:
    0 12px 19px rgba(27,17,10,.19),
    6px 5px 0 rgba(61,39,25,.10)!important;
}

/* Some cards look like darker kraft inserts */
#timeline .timeline-list article:nth-child(5n){
  background:
    linear-gradient(rgba(203,176,139,.96),rgba(183,150,111,.96)),
    repeating-linear-gradient(
      0deg,
      transparent 0 27px,
      rgba(72,48,31,.07) 27px 28px
    )!important;
}

/* Pins feel like the same brass used throughout the Vault */
.timeline-brass-pin{
  background:
    radial-gradient(circle at 32% 28%,#f3d184 0 14%,#b98238 40%,#745025 75%,#422d1a 100%)!important;
  box-shadow:
    0 2px 4px rgba(25,15,9,.35),
    inset 0 1px 1px rgba(255,255,255,.35)!important;
}

/* Polaroids: ivory, worn edges, not bright white */
.timeline-polaroid,
.chronicle-photo-card{
  background:#e6d6bb!important;
  border:1px solid rgba(66,43,28,.26)!important;
  box-shadow:
    0 10px 19px rgba(27,17,10,.25),
    inset 0 0 0 1px rgba(255,255,255,.22)!important;
}

.timeline-polaroid::before,
.chronicle-photo-card::after{
  content:"";
  position:absolute;
  inset:3px;
  pointer-events:none;
  border:1px solid rgba(111,77,46,.08);
}

/* Fabric scraps move toward dark brown / taupe / linen */
.timeline-fabric-swatch.swatch-one{
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.035) 0 1px,
      transparent 1px 5px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.025) 0 1px,
      transparent 1px 6px
    ),
    #3f3028!important;
}
.timeline-fabric-swatch.swatch-two{
  background:
    repeating-linear-gradient(
      0deg,
      rgba(70,48,32,.04) 0 1px,
      transparent 1px 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(70,48,32,.035) 0 1px,
      transparent 1px 5px
    ),
    #b7a486!important;
}

/* Pocket becomes dark leather/kraft with aged lace */
.chronicle-pocket{
  background:
    linear-gradient(rgba(108,76,56,.97),rgba(73,49,38,.98)),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.022) 0 1px,
      transparent 1px 4px
    )!important;
  border:1px solid rgba(32,19,12,.45)!important;
  box-shadow:
    0 15px 27px rgba(22,13,8,.32),
    inset 0 0 18px rgba(0,0,0,.16)!important;
}

.chronicle-pocket-lace{
  filter:sepia(.55) brightness(.82);
}

/* Old note tag = weathered card stock */
.chronicle-tag{
  background:
    linear-gradient(rgba(189,154,111,.97),rgba(161,125,86,.97))!important;
  border:1px solid rgba(62,40,26,.38)!important;
  color:#503827!important;
  box-shadow:0 10px 20px rgba(27,17,10,.25)!important;
}

/* Role/tip strips now resemble pasted kraft labels */
#timeline .timeline-pro-notes span{
  background:#c9ad82!important;
  border-left-color:#704a30!important;
  color:#4a382d!important;
}
#timeline .timeline-pro-notes span:nth-child(even){
  background:#bfb49c!important;
}

/* Margin handwriting in ink rather than polished UI gold */
.timeline-handwritten-note{
  background:
    linear-gradient(rgba(218,198,164,.96),rgba(200,176,137,.97)),
    repeating-linear-gradient(
      0deg,
      transparent 0 21px,
      rgba(77,54,34,.075) 21px 22px
    )!important;
  border-color:rgba(62,40,26,.25)!important;
}
.timeline-handwritten-note span,
.timeline-margin-annotations .annotation-script,
.timeline-margin-annotations .annotation-arrow{
  color:#68462d!important;
}

/* Feature moments lean into leather/kraft accents */
#timeline .timeline-protected-hour{
  background:
    linear-gradient(rgba(191,157,112,.98),rgba(164,126,87,.98))!important;
  border:1px solid rgba(56,35,22,.40)!important;
  box-shadow:
    inset 6px 0 0 #4a2f21,
    0 12px 23px rgba(27,17,10,.23)!important;
}

#timeline .timeline-sunset-card{
  background:
    linear-gradient(rgba(203,177,137,.98),rgba(180,147,105,.98))!important;
}

/* slightly torn-looking card corners */
#timeline .timeline-list article,
.timeline-paper-note,
.timeline-handwritten-note,
.chronicle-tag,
.chronicle-pocket{
  clip-path:polygon(
    .6% .4%, 98.8% 0%, 100% 1.4%, 99.4% 98.9%,
    97.6% 100%, 1.1% 99.5%, 0% 97.6%, .4% 2%
  );
}

/* preserve readable, luxurious mobile behavior */
@media(max-width:1180px){
  #timeline.timeline{
    padding:
      72px
      max(22px,4vw)
      82px!important;
  }
}

@media(max-width:760px){
  #timeline.timeline{
    border-top-width:7px!important;
    border-bottom-width:7px!important;
    padding:46px 14px 54px!important;
  }

  #timeline.timeline::after{
    inset:14px 8px 18px!important;
  }

  #timeline.timeline::before{
    inset:8px 4px 12px!important;
  }

  #timeline .timeline-intro,
  .timeline-paper-note,
  #timeline .timeline-list{
    width:94%!important;
  }
}


/* =========================================================
   v4.3.5 · THE CHRONICLE — TRUE TWO-PAGE JOURNAL SPREAD
   ========================================================= */

#timeline .chronicle-page-spread{
  position:relative;
  z-index:4;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:0!important;
  width:min(1180px,92%)!important;
  max-width:1180px!important;
  margin:34px auto 10px!important;
  padding:0!important;
  align-items:stretch;
  filter:drop-shadow(0 20px 30px rgba(24,14,8,.22));
}

#timeline .chronicle-page{
  position:relative;
  min-width:0;
  padding:42px 34px 54px;
  overflow:hidden;
  border-top:1px solid rgba(70,45,29,.22);
  border-bottom:1px solid rgba(70,45,29,.26);
  color:#3e2f25;
  background:
    radial-gradient(circle at 16% 12%,rgba(111,77,46,.055),transparent 18%),
    radial-gradient(circle at 84% 72%,rgba(97,68,43,.05),transparent 22%),
    repeating-linear-gradient(0deg,transparent 0 29px,rgba(102,74,49,.045) 29px 30px),
    linear-gradient(rgba(232,217,190,.985),rgba(215,194,159,.985));
}

#timeline .chronicle-page-left{
  border-left:1px solid rgba(64,41,26,.28);
  box-shadow:inset -20px 0 30px rgba(72,48,31,.10),inset 8px 0 18px rgba(255,255,255,.10);
}
#timeline .chronicle-page-right{
  border-right:1px solid rgba(64,41,26,.28);
  box-shadow:inset 20px 0 30px rgba(72,48,31,.10),inset -8px 0 18px rgba(255,255,255,.08);
}

#timeline .chronicle-page-left::after,
#timeline .chronicle-page-right::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:22px;
  pointer-events:none;
  z-index:1;
}
#timeline .chronicle-page-left::after{
  right:-1px;
  background:linear-gradient(90deg,transparent,rgba(56,36,24,.10),rgba(43,27,18,.22));
}
#timeline .chronicle-page-right::before{
  left:-1px;
  background:linear-gradient(90deg,rgba(43,27,18,.22),rgba(56,36,24,.10),transparent);
}

#timeline .chronicle-page-left{
  clip-path:polygon(.4% .2%,99.4% 0,100% 1%,99.7% 99.2%,98.8% 100%,.6% 99.6%,0 98.7%,.3% 1%);
}
#timeline .chronicle-page-right{
  clip-path:polygon(.5% 0,99.3% .3%,100% 1.2%,99.6% 99%,98.8% 100%,.5% 99.5%,0 98.8%,.25% 1%);
}

#timeline .chronicle-page-heading{
  position:relative;
  z-index:3;
  margin:0 0 24px;
  padding:0 0 15px;
  border-bottom:1px solid rgba(92,64,41,.22);
}
#timeline .chronicle-page-heading span{
  display:block;
  margin-bottom:5px;
  color:#89643e;
  font-size:.53rem;
  font-weight:700;
  letter-spacing:.18em;
}
#timeline .chronicle-page-heading strong{
  display:block;
  color:#4a3527;
  font:400 clamp(1.35rem,2.2vw,1.8rem) Georgia,serif;
}
#timeline .chronicle-page-heading em{
  display:block;
  margin-top:5px;
  color:#725f50;
  font:italic .65rem/1.5 Georgia,serif;
}

#timeline .chronicle-page > article{
  position:relative!important;
  z-index:3!important;
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr)!important;
  gap:13px!important;
  margin:0!important;
  padding:15px 2px 17px!important;
  border:0!important;
  border-bottom:1px dotted rgba(98,68,44,.24)!important;
  background:transparent!important;
  box-shadow:none!important;
  clip-path:none!important;
  transform:none!important;
  overflow:visible!important;
}
#timeline .chronicle-page > article::before{display:none!important}
#timeline .chronicle-page > article:last-of-type{border-bottom:0!important}

#timeline .chronicle-page time{
  padding-top:1px;
  color:#795638!important;
  font:400 1.02rem/1.1 Georgia,serif!important;
}
#timeline .chronicle-page h3{
  margin:0 0 5px!important;
  color:#392a21!important;
  font:400 clamp(.95rem,1.4vw,1.16rem)/1.28 Georgia,serif!important;
}
#timeline .chronicle-page article>div>p{
  margin:0!important;
  color:#614f42!important;
  font-size:.69rem!important;
  line-height:1.55!important;
}

#timeline .chronicle-page .timeline-pro-notes{
  display:block!important;
  margin:9px 0 0!important;
}
#timeline .chronicle-page .timeline-pro-notes span{
  display:block!important;
  width:max-content;
  max-width:100%;
  margin:5px 0 0!important;
  padding:5px 8px 5px 10px!important;
  border:0!important;
  border-left:2px solid #795338!important;
  background:rgba(190,158,111,.62)!important;
  color:#514034!important;
  box-shadow:1px 3px 6px rgba(49,31,19,.08)!important;
  font-size:.55rem!important;
  line-height:1.45!important;
  transform:rotate(-.1deg);
}
#timeline .chronicle-page .timeline-pro-notes span:nth-child(even){
  background:rgba(188,181,158,.66)!important;
  transform:rotate(.12deg);
}
#timeline .chronicle-page .timeline-pro-notes b{
  color:#69472f!important;
  font-size:.50rem!important;
}

#timeline .chronicle-page .timeline-protected-hour{
  margin:7px -8px!important;
  padding:17px 10px 18px!important;
  background:rgba(173,131,86,.18)!important;
  border-top:1px solid rgba(113,73,43,.22)!important;
  border-bottom:1px solid rgba(113,73,43,.22)!important;
  box-shadow:inset 3px 0 0 #7e5839!important;
}
#timeline .chronicle-page .timeline-sunset-card{
  margin:7px -8px!important;
  padding:17px 10px 18px!important;
  background:rgba(185,148,101,.16)!important;
}

#timeline .chronicle-page .chronicle-mini-label{
  top:2px!important;
  right:2px!important;
  padding:3px 7px!important;
  font-size:.43rem!important;
  box-shadow:none!important;
}
#timeline .chronicle-page .timeline-paperclip{
  top:8px!important;
  right:13px!important;
  transform:rotate(7deg) scale(.75)!important;
}
#timeline .chronicle-page .timeline-tape-strip{
  top:4px!important;
  width:76px!important;
  height:17px!important;
  opacity:.65;
}

#timeline .chronicle-page-footer-note{
  position:relative;
  z-index:3;
  width:78%;
  margin:30px 0 0 auto;
  padding:14px 16px 13px;
  border-left:2px solid #755034;
  background:rgba(205,180,140,.40);
  transform:rotate(-1deg);
}
#timeline .chronicle-page-footer-note.right-note{
  margin-left:0;
  margin-right:auto;
  transform:rotate(.8deg);
}
#timeline .chronicle-page-footer-note span{
  display:block;
  color:#775033;
  font:italic .72rem Georgia,serif;
}
#timeline .chronicle-page-footer-note p{
  margin:4px 0 0;
  color:#604d40;
  font:italic .63rem/1.55 Georgia,serif;
}

#timeline .timeline-intro{width:min(950px,80%)!important;margin-bottom:30px!important}
#timeline .timeline-paper-note{width:min(790px,70%)!important;margin-bottom:34px!important}
#timeline .timeline-handwritten-note{width:min(350px,32%)!important;margin-right:8%!important}

#timeline .chronicle-pocket{
  left:1.5vw!important;
  top:690px!important;
  transform:rotate(-3deg) scale(.85)!important;
}
#timeline .chronicle-tag{
  right:1.5vw!important;
  top:930px!important;
  transform:rotate(3deg) scale(.86)!important;
}
#timeline .chronicle-pressed-leaf.leaf-one{left:2vw!important;top:1500px!important}
#timeline .chronicle-pressed-leaf.leaf-two{right:2vw!important;top:1950px!important}
#timeline .chronicle-ring{display:none!important}

@media(max-width:1000px){
  #timeline .chronicle-page-spread{
    grid-template-columns:1fr!important;
    width:min(760px,92%)!important;
    gap:18px!important;
  }
  #timeline .chronicle-page-left,
  #timeline .chronicle-page-right{
    box-shadow:0 14px 25px rgba(30,18,11,.17)!important;
  }
  #timeline .chronicle-page-left::after,
  #timeline .chronicle-page-right::before{display:none}
  #timeline .timeline-handwritten-note{width:min(390px,80%)!important}
}

@media(max-width:620px){
  #timeline .chronicle-page{padding:30px 20px 36px!important}
  #timeline .chronicle-page > article{
    grid-template-columns:58px minmax(0,1fr)!important;
    gap:10px!important;
  }
  #timeline .chronicle-page time{font-size:.88rem!important}
  #timeline .chronicle-page article>div>p{font-size:.65rem!important}
  #timeline .chronicle-page .timeline-pro-notes span{width:100%}
}


/* =========================================================
   v4.3.6 · CHRONICLE TABLETOP INTRO + LUXURY EDITORIAL COPY
   Loose notes live on a flannel/leather tabletop ABOVE the open book.
   Timeline entries remain written directly on the two journal pages.
   ========================================================= */

/* Create a separate tabletop zone before the journal spread. */
#timeline .timeline-tabletop-intro{
  position:relative;
  z-index:5;
  width:min(1180px,92%);
  min-height:650px;
  margin:0 auto 48px;
  padding:58px 56px 70px;
  overflow:hidden;
  border:1px solid rgba(186,139,77,.18);
  box-shadow:
    0 22px 42px rgba(0,0,0,.28),
    inset 0 0 55px rgba(0,0,0,.28);
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.018) 0 2px,
      transparent 2px 9px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.014) 0 2px,
      transparent 2px 10px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,.035) 0 1px,
      transparent 1px 7px
    ),
    #35241d;
}

#timeline .timeline-tabletop-intro::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.62;
  background:
    linear-gradient(90deg,transparent 0 14%,rgba(129,92,63,.12) 14% 14.6%,transparent 14.6% 49%,rgba(0,0,0,.08) 49% 50%,transparent 50%),
    radial-gradient(circle at 15% 18%,rgba(255,255,255,.025),transparent 22%),
    radial-gradient(circle at 86% 80%,rgba(0,0,0,.18),transparent 26%);
}

#timeline .chronicle-flannel-surface{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background:
    repeating-linear-gradient(0deg,transparent 0 7px,rgba(218,192,155,.025) 7px 8px),
    repeating-linear-gradient(90deg,transparent 0 8px,rgba(218,192,155,.022) 8px 9px);
  mix-blend-mode:screen;
}

#timeline .chronicle-loose-note{
  position:relative;
  z-index:2;
  border:1px solid rgba(52,35,24,.28)!important;
  color:#382a21!important;
  background:
    radial-gradient(circle at 86% 8%,rgba(119,82,46,.055),transparent 14%),
    repeating-linear-gradient(0deg,rgba(82,57,36,.018) 0 1px,transparent 1px 4px),
    linear-gradient(#eadabd,#d9c09a)!important;
  box-shadow:
    0 17px 30px rgba(8,5,3,.27),
    inset 0 0 22px rgba(117,77,42,.045)!important;
}

#timeline .chronicle-title-note{
  width:70%!important;
  margin:0 0 34px!important;
  padding:34px 38px 36px!important;
  transform:rotate(-.6deg)!important;
}

#timeline .chronicle-title-note::before{
  content:"";
  position:absolute;
  left:80px;
  top:-12px;
  width:112px;
  height:27px;
  transform:rotate(-3deg);
  background:rgba(174,143,101,.72);
  box-shadow:0 2px 5px rgba(0,0,0,.10);
}

#timeline .chronicle-title-note h2{
  max-width:680px;
  margin:10px 0 19px!important;
  color:#30221a!important;
  font:400 clamp(2.8rem,5vw,5.4rem)/.98 Georgia,serif!important;
}

#timeline .chronicle-title-note>p{
  max-width:760px!important;
  margin:12px 0 0!important;
  color:#5a493d!important;
  line-height:1.72!important;
}

#timeline .chronicle-title-note .chapter-number{
  color:#81592f!important;
}

#timeline .chronicle-sample-note{
  width:62%!important;
  margin:0 0 0 5%!important;
  padding:27px 32px 29px!important;
  transform:rotate(.45deg)!important;
}

#timeline .chronicle-sample-note::before{
  left:auto!important;
  right:84px!important;
  top:-10px!important;
  width:102px!important;
  background:rgba(153,126,89,.72)!important;
}

#timeline .chronicle-sample-note::after{
  display:none!important;
}

#timeline .chronicle-sample-note strong{
  margin:9px 0 8px!important;
  color:#3a291f!important;
  font:400 1.15rem/1.45 Georgia,serif!important;
}

#timeline .chronicle-sample-note p{
  color:#59483c!important;
  font-size:.75rem!important;
  line-height:1.65!important;
}

#timeline .chronicle-margin-note{
  position:absolute!important;
  right:7%!important;
  bottom:74px!important;
  width:31%!important;
  margin:0!important;
  padding:19px 21px!important;
  transform:rotate(-1.3deg)!important;
  border-left:4px solid #765035!important;
}

#timeline .chronicle-margin-note span{
  color:#70492c!important;
  font:italic 1rem Georgia,serif!important;
}

#timeline .chronicle-margin-note p{
  color:#554338!important;
  font:italic .72rem/1.6 Georgia,serif!important;
}

/* Polaroids, fabric, brass and torn note lie on the flannel surface. */
#timeline .chronicle-tabletop-ephemera{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

#timeline .chronicle-tabletop-polaroid{
  position:absolute;
  width:155px;
  margin:0;
  padding:9px 9px 28px;
  background:#dfcfb4;
  border:1px solid rgba(34,22,14,.38);
  box-shadow:0 13px 22px rgba(0,0,0,.33);
}

#timeline .chronicle-tabletop-polaroid>div{
  height:108px;
  background:
    linear-gradient(rgba(48,34,25,.15),rgba(48,34,25,.10)),
    url("images/river.jpg") center/cover no-repeat;
  filter:sepia(.20) saturate(.68) contrast(.92);
}

#timeline .chronicle-tabletop-polaroid.polaroid-b>div{
  background:
    linear-gradient(rgba(48,34,25,.15),rgba(48,34,25,.10)),
    url("images/vault-assets/atlas-photo-board.jpg") center/cover no-repeat;
}

#timeline .chronicle-tabletop-polaroid figcaption{
  padding-top:7px;
  color:#5f4939;
  text-align:center;
  font:italic .62rem/1.3 Georgia,serif;
}

#timeline .chronicle-tabletop-polaroid.polaroid-a{
  top:54px;
  right:6%;
  transform:rotate(6deg);
}

#timeline .chronicle-tabletop-polaroid.polaroid-b{
  right:29%;
  bottom:36px;
  transform:rotate(-5deg);
}

#timeline .chronicle-fabric-sample{
  position:absolute;
  right:2.5%;
  top:300px;
  width:170px;
  height:122px;
  padding:91px 10px 0;
  color:rgba(235,216,188,.68);
  font-size:.46rem;
  letter-spacing:.12em;
  text-align:center;
  transform:rotate(-5deg);
  clip-path:polygon(2% 4%,98% 0,100% 91%,94% 100%,7% 97%,0 88%);
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 7px),
    #5a4639;
  box-shadow:0 12px 20px rgba(0,0,0,.25);
}

#timeline .chronicle-brass-tack{
  position:absolute;
  z-index:3;
  width:13px;
  height:13px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#f1d27f 0 16%,#ae7934 43%,#69451f 76%,#352213 100%);
  box-shadow:0 3px 4px rgba(0,0,0,.38);
}

#timeline .chronicle-brass-tack.tack-a{right:11%;top:290px}
#timeline .chronicle-brass-tack.tack-b{right:35%;bottom:175px}

#timeline .chronicle-torn-tip{
  position:absolute;
  left:54%;
  top:245px;
  width:240px;
  padding:17px 18px;
  color:#4e3c30;
  transform:rotate(2.2deg);
  clip-path:polygon(1% 4%,97% 0,100% 10%,98% 95%,91% 100%,3% 97%,0 89%);
  background:#c9aa7d;
  box-shadow:0 10px 17px rgba(0,0,0,.25);
}

#timeline .chronicle-torn-tip span{
  color:#68492e;
  font-size:.48rem;
  font-weight:700;
  letter-spacing:.14em;
}

#timeline .chronicle-torn-tip p{
  margin:5px 0 0;
  color:#4d3a2e;
  font:italic .70rem/1.5 Georgia,serif;
}

/* The open book is now reserved for the actual timeline only. */
#timeline .chronicle-page-spread{
  margin-top:0!important;
}

/* Hide the old floating scrapbook decorations that were sitting on top of the book.
   The new tabletop ephemera carries that visual language above the journal. */
#timeline > .chronicle-junk-spread,
#timeline > .timeline-journal-decor{
  display:none!important;
}

/* Additional expert notes written/tucked into the two page spread. */
#timeline .chronicle-keeper-note{
  position:relative;
  margin:10px 0 2px;
  padding:8px 10px 8px 12px;
  border-left:3px solid #6f4a31;
  color:#514034;
  background:rgba(184,149,102,.30);
  box-shadow:1px 3px 6px rgba(49,31,19,.05);
}

#timeline .chronicle-keeper-note b{
  display:block;
  margin-bottom:3px;
  color:#704c30;
  font-size:.48rem;
  letter-spacing:.11em;
}

#timeline .chronicle-keeper-note span{
  display:block;
  color:#58463a;
  font-size:.57rem;
  line-height:1.5;
}

/* Responsive: tabletop notes stack naturally, book still becomes stacked pages. */
@media(max-width:1050px){
  #timeline .timeline-tabletop-intro{
    min-height:0;
    padding:40px 32px 48px;
  }

  #timeline .chronicle-title-note,
  #timeline .chronicle-sample-note{
    width:100%!important;
    margin:0 0 24px!important;
    transform:none!important;
  }

  #timeline .chronicle-margin-note{
    position:relative!important;
    right:auto!important;
    bottom:auto!important;
    width:min(430px,90%)!important;
    margin:0 0 0 auto!important;
    transform:rotate(-.5deg)!important;
  }

  #timeline .chronicle-tabletop-ephemera{
    display:none;
  }
}

@media(max-width:650px){
  #timeline .timeline-tabletop-intro{
    width:94%;
    padding:28px 17px 32px;
  }

  #timeline .chronicle-title-note{
    padding:25px 21px 27px!important;
  }

  #timeline .chronicle-title-note h2{
    font-size:2.8rem!important;
  }

  #timeline .chronicle-sample-note{
    padding:22px 20px 23px!important;
  }

  #timeline .chronicle-margin-note{
    width:100%!important;
  }
}


/* =========================================================
   v4.3.7 · CHRONICLE — HEIRLOOM DESK COMPOSITION
   The flannel is now the chapter surface, not a rectangle/card.
   Loose notes surround an open journal; the journal is the hero.
   ========================================================= */

#timeline{
  position:relative!important;
  overflow:hidden!important;
  padding:88px 0 120px!important;
  background:
    radial-gradient(ellipse at 50% 10%,rgba(111,77,55,.18),transparent 38%),
    radial-gradient(ellipse at 10% 55%,rgba(0,0,0,.24),transparent 34%),
    radial-gradient(ellipse at 92% 74%,rgba(0,0,0,.28),transparent 38%),
    repeating-linear-gradient(0deg,rgba(230,207,175,.018) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(90deg,rgba(230,207,175,.014) 0 1px,transparent 1px 9px),
    repeating-linear-gradient(45deg,rgba(0,0,0,.025) 0 1px,transparent 1px 7px),
    #35241d!important;
}

/* stitched leather/flannel chapter edge */
#timeline::before{
  content:"";
  position:absolute;
  inset:20px;
  pointer-events:none;
  border:1px dashed rgba(192,139,76,.28);
  box-shadow:
    inset 0 0 0 8px rgba(30,18,13,.15),
    inset 0 0 80px rgba(0,0,0,.30);
  z-index:0;
}

#timeline::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.42;
  background:
    linear-gradient(90deg,rgba(0,0,0,.25),transparent 7%,transparent 93%,rgba(0,0,0,.27)),
    linear-gradient(rgba(0,0,0,.16),transparent 7%,transparent 94%,rgba(0,0,0,.23));
}

/* Remove the old boxed tabletop completely. */
#timeline .timeline-tabletop-intro{
  position:relative!important;
  z-index:5!important;
  width:min(1240px,92%)!important;
  min-height:560px!important;
  margin:0 auto 28px!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
}

#timeline .timeline-tabletop-intro::before,
#timeline .chronicle-flannel-surface{
  display:none!important;
}

/* Title becomes a smaller loose editorial sheet instead of the hero panel. */
#timeline .chronicle-title-note{
  width:min(650px,57%)!important;
  margin:36px 0 0 5%!important;
  padding:32px 38px 35px!important;
  transform:rotate(-1.35deg)!important;
  clip-path:polygon(.4% 1%,98.7% 0,100% 2%,99.3% 98.5%,97.5% 100%,1% 99.2%,0 96%,.5% 2%);
  box-shadow:0 18px 32px rgba(0,0,0,.34)!important;
}

#timeline .chronicle-title-note h2{
  font-size:clamp(2.65rem,4.3vw,4.55rem)!important;
  line-height:.99!important;
}

#timeline .chronicle-title-note>p{
  font-size:.73rem!important;
  line-height:1.65!important;
}

#timeline .chronicle-title-note::before{
  left:72px!important;
  top:-13px!important;
  width:104px!important;
  height:26px!important;
  transform:rotate(-2deg)!important;
  opacity:.82;
}

/* Framework note is a smaller torn sheet lying below-left of the book. */
#timeline .chronicle-sample-note{
  position:absolute!important;
  left:1%!important;
  bottom:5px!important;
  width:min(520px,45%)!important;
  margin:0!important;
  padding:24px 28px 25px!important;
  transform:rotate(.8deg)!important;
  clip-path:polygon(0 2%,96% 0,100% 3%,99% 96%,94% 100%,2% 98%,0 92%);
  box-shadow:0 16px 26px rgba(0,0,0,.31)!important;
}

#timeline .chronicle-sample-note p{
  font-size:.66rem!important;
  line-height:1.55!important;
}

/* Margin note becomes a genuinely small handwritten card. */
#timeline .chronicle-margin-note{
  right:5%!important;
  bottom:70px!important;
  width:285px!important;
  padding:17px 19px!important;
  transform:rotate(2.1deg)!important;
  box-shadow:0 12px 22px rgba(0,0,0,.28)!important;
}

/* Scatter the ephemera around the open book instead of arranging a panel. */
#timeline .chronicle-tabletop-polaroid.polaroid-a{
  top:5px!important;
  right:7%!important;
  width:140px!important;
  transform:rotate(7deg)!important;
}
#timeline .chronicle-tabletop-polaroid.polaroid-b{
  right:28%!important;
  bottom:-10px!important;
  width:126px!important;
  transform:rotate(-7deg)!important;
}

#timeline .chronicle-fabric-sample{
  right:1%!important;
  top:235px!important;
  width:150px!important;
  height:105px!important;
  padding-top:78px!important;
  transform:rotate(-6deg)!important;
}

#timeline .chronicle-brass-tack.tack-a{
  right:7.2%!important;
  top:225px!important;
}
#timeline .chronicle-brass-tack.tack-b{
  right:33%!important;
  bottom:102px!important;
}

#timeline .chronicle-torn-tip{
  left:auto!important;
  right:20%!important;
  top:205px!important;
  width:205px!important;
  padding:15px 16px!important;
  transform:rotate(3.3deg)!important;
}

/* Add subtle "desk objects" around the scene without blocking content. */
#timeline .timeline-tabletop-intro .chronicle-tabletop-ephemera::before{
  content:"";
  position:absolute;
  left:-1%;
  top:250px;
  width:190px;
  height:95px;
  opacity:.34;
  transform:rotate(-8deg);
  background:
    repeating-linear-gradient(90deg,rgba(230,216,192,.11) 0 1px,transparent 1px 6px),
    #6a5547;
  clip-path:polygon(2% 5%,99% 0,96% 95%,4% 100%,0 88%);
  box-shadow:0 12px 20px rgba(0,0,0,.25);
}

/* The journal is now THE HERO and appears to sit on top of the flannel desk. */
#timeline .chronicle-page-spread{
  position:relative!important;
  z-index:8!important;
  width:min(1280px,94%)!important;
  max-width:1280px!important;
  margin:-6px auto 0!important;
  filter:drop-shadow(0 28px 34px rgba(0,0,0,.42))!important;
}

/* A leather backing peeks around the actual open journal. */
#timeline .chronicle-page-spread::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:-22px -25px -26px;
  border-radius:8px 8px 13px 13px;
  background:
    radial-gradient(circle at 15% 20%,rgba(255,255,255,.025),transparent 22%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 5px),
    #2a1a14;
  border:1px solid rgba(190,133,68,.23);
  box-shadow:
    inset 0 0 0 7px rgba(20,11,8,.22),
    inset 0 0 35px rgba(0,0,0,.36);
}

/* Page edges have a slightly more tactile, irregular feel. */
#timeline .chronicle-page{
  border-color:rgba(71,45,28,.34)!important;
  background:
    radial-gradient(circle at 11% 8%,rgba(104,72,43,.07),transparent 18%),
    radial-gradient(circle at 88% 68%,rgba(98,65,39,.055),transparent 22%),
    repeating-linear-gradient(0deg,transparent 0 29px,rgba(102,74,49,.04) 29px 30px),
    linear-gradient(96deg,#e6d5b5,#dcc49c 48%,#e3cfab)!important;
}

#timeline .chronicle-page-left{
  box-shadow:
    inset -28px 0 34px rgba(64,39,24,.13),
    inset 8px 0 17px rgba(255,255,255,.11)!important;
}
#timeline .chronicle-page-right{
  box-shadow:
    inset 28px 0 34px rgba(64,39,24,.13),
    inset -8px 0 17px rgba(255,255,255,.09)!important;
}

/* Make the gutter look deeper and more physical. */
#timeline .chronicle-page-left::after{
  width:30px!important;
  background:linear-gradient(90deg,transparent,rgba(60,37,23,.10),rgba(37,21,14,.28))!important;
}
#timeline .chronicle-page-right::before{
  width:30px!important;
  background:linear-gradient(90deg,rgba(37,21,14,.28),rgba(60,37,23,.10),transparent)!important;
}

/* little antique tape tabs at the top of the journal */
#timeline .chronicle-page-heading::before{
  content:"";
  position:absolute;
  top:-50px;
  left:32%;
  width:82px;
  height:20px;
  background:rgba(172,139,95,.58);
  transform:rotate(-1deg);
  box-shadow:0 2px 4px rgba(0,0,0,.08);
}

/* Keep the page typography refined and airy. */
#timeline .chronicle-page-heading{
  padding-bottom:17px!important;
  margin-bottom:17px!important;
}
#timeline .chronicle-page > article{
  padding-top:16px!important;
  padding-bottom:18px!important;
}
#timeline .chronicle-page h3{
  letter-spacing:-.012em;
}

/* Mobile/tablet: preserve the hierarchy without forcing desktop collage geometry. */
@media(max-width:1050px){
  #timeline{
    padding-top:55px!important;
  }
  #timeline .timeline-tabletop-intro{
    min-height:0!important;
    width:min(760px,92%)!important;
  }
  #timeline .chronicle-title-note,
  #timeline .chronicle-sample-note,
  #timeline .chronicle-margin-note{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    top:auto!important;
    width:100%!important;
    margin:0 0 22px!important;
    transform:none!important;
  }
  #timeline .chronicle-tabletop-ephemera{
    display:none!important;
  }
  #timeline .chronicle-page-spread{
    margin-top:20px!important;
  }
}

@media(max-width:650px){
  #timeline::before{inset:9px}
  #timeline .chronicle-title-note h2{
    font-size:2.55rem!important;
  }
}


/* =========================================================
   v4.3.8 · CHRONICLE COMPOSITION CLEANUP
   No overlapping editorial notes. Desk first, breathing room,
   then the open heirloom journal as the hero.
   ========================================================= */

#timeline .timeline-tabletop-intro{
  width:min(1240px,92%)!important;
  min-height:820px!important;
  margin:0 auto 72px!important;
  padding:0!important;
  overflow:visible!important;
}

/* Upper-left title sheet: narrower, higher, fully readable. */
#timeline .chronicle-title-note{
  position:absolute!important;
  left:4%!important;
  top:34px!important;
  width:min(610px,52%)!important;
  margin:0!important;
  padding:31px 36px 34px!important;
  transform:rotate(-1deg)!important;
  z-index:4!important;
}

#timeline .chronicle-title-note h2{
  font-size:clamp(2.45rem,4vw,4.15rem)!important;
  line-height:1!important;
}

#timeline .chronicle-title-note>p{
  font-size:.69rem!important;
  line-height:1.62!important;
}

/* Framework card gets its OWN area below the title card. */
#timeline .chronicle-sample-note{
  position:absolute!important;
  left:8%!important;
  top:545px!important;
  bottom:auto!important;
  width:min(545px,47%)!important;
  margin:0!important;
  padding:23px 27px 25px!important;
  transform:rotate(.55deg)!important;
  z-index:5!important;
}

#timeline .chronicle-sample-note strong{
  font-size:1.05rem!important;
}

#timeline .chronicle-sample-note p{
  font-size:.64rem!important;
  line-height:1.52!important;
}

/* Right-hand keepsakes get distinct zones rather than competing. */
#timeline .chronicle-tabletop-polaroid.polaroid-a{
  top:36px!important;
  right:7%!important;
  width:138px!important;
  transform:rotate(6.5deg)!important;
}

#timeline .chronicle-torn-tip{
  left:auto!important;
  right:22%!important;
  top:275px!important;
  width:215px!important;
  transform:rotate(2.4deg)!important;
}

#timeline .chronicle-fabric-sample{
  right:3%!important;
  top:330px!important;
  width:140px!important;
  height:98px!important;
  padding-top:72px!important;
  transform:rotate(-5deg)!important;
}

#timeline .chronicle-brass-tack.tack-a{
  right:8%!important;
  top:316px!important;
}

/* Britani note sits low-right, away from the framework card. */
#timeline .chronicle-margin-note{
  position:absolute!important;
  right:6%!important;
  top:545px!important;
  bottom:auto!important;
  width:315px!important;
  margin:0!important;
  padding:17px 20px!important;
  transform:rotate(1.4deg)!important;
  z-index:5!important;
}

#timeline .chronicle-margin-note span{
  font-size:.94rem!important;
}

#timeline .chronicle-margin-note p{
  font-size:.68rem!important;
}

/* Second small Polaroid/keepsake is tucked low between notes, not underneath them. */
#timeline .chronicle-tabletop-polaroid.polaroid-b{
  right:31%!important;
  bottom:12px!important;
  width:112px!important;
  transform:rotate(-5deg)!important;
  z-index:2!important;
}

#timeline .chronicle-brass-tack.tack-b{
  right:34.5%!important;
  bottom:130px!important;
}

/* Make the background fabric scrap subtler. */
#timeline .timeline-tabletop-intro .chronicle-tabletop-ephemera::before{
  left:-2%!important;
  top:390px!important;
  width:165px!important;
  height:84px!important;
  opacity:.20!important;
}

/* The book begins AFTER the loose-note workspace. */
#timeline .chronicle-page-spread{
  margin:0 auto!important;
  clear:both!important;
}

/* Extra physical separation before the book: a faint horizontal work-surface shadow. */
#timeline .chronicle-page-spread::after{
  content:"";
  position:absolute;
  z-index:-3;
  left:4%;
  right:4%;
  top:-42px;
  height:35px;
  border-radius:50%;
  background:rgba(0,0,0,.17);
  filter:blur(18px);
}

/* tiny paperclip near the framework note */
#timeline .chronicle-sample-note .timeline-example-note-kicker::after{
  content:"";
  position:absolute;
  right:22px;
  top:-10px;
  width:12px;
  height:34px;
  border:2px solid rgba(91,66,47,.55);
  border-radius:8px;
  transform:rotate(8deg);
  opacity:.65;
}

/* Responsive layouts should never use the desktop absolute collage positions. */
@media(max-width:1050px){
  #timeline .timeline-tabletop-intro{
    min-height:0!important;
    margin-bottom:42px!important;
  }

  #timeline .chronicle-title-note,
  #timeline .chronicle-sample-note,
  #timeline .chronicle-margin-note{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    margin:0 0 24px!important;
    transform:none!important;
  }

  #timeline .chronicle-title-note{
    padding:30px 31px 32px!important;
  }
}


/* =========================================================
   v4.3.9 · THE LOOKBOOK + UNIQUE WEDDING ARCHIVE
   User-supplied Dostal Digital photographs, intentionally
   distributed so the Vault no longer depends on four repeated images.
   ========================================================= */

.vault-roadmap-lookbook-card span{font-size:.72rem!important;letter-spacing:.13em!important;}

.vault-lookbook{
  position:relative;
  isolation:isolate;
  padding:clamp(70px,8vw,118px) 0;
  overflow:hidden;
  color:#efe3cc;
  background:
    radial-gradient(circle at 12% 9%,rgba(194,145,83,.09),transparent 24%),
    radial-gradient(circle at 88% 78%,rgba(0,0,0,.30),transparent 28%),
    repeating-linear-gradient(10deg,rgba(255,255,255,.012) 0 1px,transparent 1px 6px),
    linear-gradient(135deg,#1e120e,#342018 46%,#21140f);
  border-top:1px solid rgba(190,139,78,.22);
  border-bottom:1px solid rgba(190,139,78,.20);
}
.vault-lookbook::before{
  content:"";position:absolute;inset:22px;z-index:0;pointer-events:none;
  border:1px dashed rgba(195,145,80,.24);
  box-shadow:inset 0 0 0 7px rgba(0,0,0,.12),inset 0 0 70px rgba(0,0,0,.25);
}
.lookbook-cover,.lookbook-style-row,.lookbook-closing-note{position:relative;z-index:2;}
.lookbook-cover{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.65fr);gap:clamp(34px,6vw,92px);
  align-items:center;width:min(1220px,88%);margin:0 auto clamp(70px,8vw,105px);
}
.lookbook-index-card{
  position:relative;padding:clamp(34px,4vw,58px);
  color:#3c2a20;
  background:
    radial-gradient(circle at 90% 12%,rgba(121,84,49,.06),transparent 17%),
    repeating-linear-gradient(0deg,rgba(74,51,32,.02) 0 1px,transparent 1px 4px),
    linear-gradient(#ead9b9,#d9be94);
  box-shadow:0 24px 46px rgba(0,0,0,.34);transform:rotate(-.55deg);
  clip-path:polygon(.4% .5%,99% 0,100% 2%,99.4% 98.6%,97.8% 100%,1% 99.3%,0 97%,.3% 2%);
}
.lookbook-index-card::before{content:"";position:absolute;top:-13px;left:14%;width:112px;height:27px;background:rgba(164,132,89,.70);transform:rotate(-2deg);}
.lookbook-index-card .chapter-number{color:#815b34!important;}
.lookbook-index-card h2{margin:12px 0 20px;color:#34231a;font:400 clamp(2.7rem,5vw,5.2rem)/.98 var(--serif);}
.lookbook-index-card h2 em{font-weight:400;}
.lookbook-index-card>p{max-width:760px;color:#5b493c;font-size:.84rem;line-height:1.75;}
.lookbook-note{margin:27px 0 0 auto;width:min(440px,88%);padding:16px 18px;border-left:3px solid #7a5233;background:rgba(191,158,112,.35);transform:rotate(.5deg);}
.lookbook-note span,.lookbook-closing-note span{display:block;margin-bottom:6px;color:#795233;font-size:.53rem;font-weight:700;letter-spacing:.14em;}
.lookbook-note p{margin:0;color:#584437;font:italic .74rem/1.6 Georgia,serif;}
.lookbook-cover-photo{position:relative;padding:12px 12px 42px;background:#dfcfb4;box-shadow:0 22px 38px rgba(0,0,0,.38);transform:rotate(2.2deg);}
.lookbook-cover-photo::before{content:"";position:absolute;top:-16px;right:23%;width:90px;height:29px;background:rgba(172,137,91,.70);transform:rotate(3deg);z-index:3;}
.lookbook-cover-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.92) contrast(.98);}
.lookbook-cover-photo span{display:block;padding-top:12px;color:#5c4739;text-align:center;font:italic .66rem Georgia,serif;}

.lookbook-style-row{
  display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:34px;
  width:min(1320px,92%);margin:0 auto 58px;padding:28px 0 30px;
  border-top:1px solid rgba(215,177,124,.16);
}
.lookbook-style-copy{padding:11px 0 0 10px;}
.lookbook-style-copy>p:first-child{margin:0 0 9px;color:#c8a16e;font-size:.50rem;font-weight:700;letter-spacing:.14em;}
.lookbook-style-copy h3{margin:0;color:#f0e2ca;font:400 clamp(1.75rem,3vw,2.75rem)/1.03 var(--serif);}
.lookbook-style-copy>p:last-child{margin:15px 0 0;color:#c9b9a3;font-size:.70rem;line-height:1.65;}
.lookbook-rule{width:55px;height:1px;margin-top:17px;background:#aa7947;}
.lookbook-scroll{
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(180px,20vw,270px);gap:14px;
  overflow-x:auto;overscroll-behavior-inline:contain;padding:4px 18px 18px 2px;scroll-snap-type:x proximity;
  scrollbar-color:#9d7147 rgba(255,255,255,.04);scrollbar-width:thin;
}
.lookbook-frame{position:relative;margin:0;padding:8px 8px 28px;background:#dfceb1;box-shadow:0 13px 22px rgba(0,0,0,.25);scroll-snap-align:start;}
.lookbook-frame:nth-child(3n+1){transform:rotate(-.55deg)}
.lookbook-frame:nth-child(3n+2){transform:rotate(.45deg)}
.lookbook-frame:nth-child(3n){transform:rotate(-.2deg)}
.lookbook-frame img{display:block;width:100%;height:clamp(235px,29vw,350px);object-fit:cover;background:#cab99e;}
.lookbook-frame span{position:absolute;left:13px;bottom:9px;color:#705842;font-size:.48rem;letter-spacing:.13em;}
.lookbook-film .lookbook-frame:nth-child(even) img{filter:saturate(.82) contrast(.97);}
.lookbook-moody .lookbook-frame img{filter:saturate(.91) contrast(1.01);}
.lookbook-closing-note{width:min(820px,82%);margin:76px auto 0;padding:26px 30px;color:#4c382b;background:#d6bd96;box-shadow:0 16px 27px rgba(0,0,0,.28);transform:rotate(-.35deg);}
.lookbook-closing-note p{margin:0;color:#554237;font:italic .83rem/1.7 Georgia,serif;}

/* Requested film-running photograph is the intro image throughout the opening book experience. */
.gate-photo{background-image:url("images/lookbook/vault-photo-30.webp")!important;background-position:center 62%!important;}
.cover-image{background-image:url("images/lookbook/vault-photo-30.webp")!important;background-position:center 62%!important;filter:saturate(.82) contrast(.98)!important;}
.inside-page::before{background-image:linear-gradient(0deg,rgba(15,14,12,.38),rgba(15,14,12,.03) 58%),url("images/lookbook/vault-photo-30.webp")!important;background-position:center 62%!important;}

/* Unique Chronicle photographs: no recycled river/forest placeholder here. */
#timeline .chronicle-tabletop-polaroid.polaroid-a>div{background-image:linear-gradient(rgba(48,34,25,.13),rgba(48,34,25,.08)),url("images/lookbook/vault-photo-37.webp")!important;background-size:cover!important;background-position:center!important;}
#timeline .chronicle-tabletop-polaroid.polaroid-b>div{background-image:linear-gradient(rgba(48,34,25,.13),rgba(48,34,25,.08)),url("images/lookbook/vault-photo-39.webp")!important;background-size:cover!important;background-position:center!important;}
#timeline .chronicle-photo-card.photo-a::before{background-image:linear-gradient(rgba(59,43,32,.13),rgba(59,43,32,.08)),url("images/lookbook/vault-photo-03.webp")!important;background-size:cover!important;background-position:center!important;}
#timeline .chronicle-photo-card.photo-b::before{background-image:linear-gradient(rgba(59,43,32,.13),rgba(59,43,32,.08)),url("images/lookbook/vault-photo-36.webp")!important;background-size:cover!important;background-position:center!important;}
.timeline-polaroid-photo{background-image:linear-gradient(135deg,rgba(113,82,55,.22),rgba(221,199,160,.38)),repeating-linear-gradient(0deg,rgba(77,53,34,.05) 0 1px,transparent 1px 5px)!important;}
.timeline-polaroid-photo.alt{background-image:linear-gradient(135deg,rgba(67,48,39,.26),rgba(180,154,117,.35)),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 6px)!important;}

@media(max-width:900px){
  .lookbook-cover{grid-template-columns:1fr;width:min(720px,90%);}
  .lookbook-cover-photo{width:min(360px,70%);margin:-12px 4% 0 auto;}
  .lookbook-style-row{grid-template-columns:1fr;gap:18px;width:90%;}
  .lookbook-style-copy{max-width:620px;}
  .lookbook-scroll{grid-auto-columns:min(66vw,245px);}
}
@media(max-width:600px){
  .vault-lookbook{padding:56px 0 72px;}
  .vault-lookbook::before{inset:9px;}
  .lookbook-index-card{padding:29px 23px 31px;}
  .lookbook-index-card h2{font-size:2.65rem;}
  .lookbook-cover-photo{width:78%;}
  .lookbook-style-row{margin-bottom:42px;}
  .lookbook-scroll{grid-auto-columns:72vw;}
  .lookbook-frame img{height:330px;}
  .lookbook-closing-note{width:86%;padding:22px 21px;}
}


/* =========================================================
   v4.3.10 · LOOKBOOK ACCURACY + FULL-FRAME PHOTO FIT
   Reviewed image-by-image. Frames now honor each photograph's
   native orientation instead of forcing a one-size crop.
   ========================================================= */
.lookbook-scroll{
  display:flex!important;
  align-items:flex-start!important;
  gap:16px!important;
  overflow-x:auto!important;
  padding:5px 20px 22px 3px!important;
  scroll-snap-type:x proximity!important;
}
.lookbook-frame{
  flex:0 0 auto!important;
  width:auto!important;
  max-width:min(72vw,520px)!important;
  padding:9px 9px 29px!important;
  overflow:visible!important;
}
.lookbook-frame img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-height:430px!important;
  max-width:min(68vw,500px)!important;
  object-fit:contain!important;
  object-position:center!important;
  image-rendering:auto!important;
}
/* Never enlarge a short/small source merely to fill a decorative frame. */
.lookbook-frame img[width][height]{min-width:0!important;}
.lookbook-cover-photo img{height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;}

@media(max-width:900px){
  .lookbook-frame img{max-height:390px!important;max-width:72vw!important;}
}
@media(max-width:600px){
  .lookbook-scroll{gap:12px!important;}
  .lookbook-frame{max-width:82vw!important;padding:7px 7px 26px!important;}
  .lookbook-frame img{max-height:360px!important;max-width:78vw!important;width:auto!important;height:auto!important;}
}


/* =========================================================
   v4.3.12 · LOGIN GATE FIX
   Removes "For Your Eyes Only" and ensures the login form
   stays fully visible/clickable on short screens.
   ========================================================= */

.gate-copy,
.login-card,
.access-card,
.login-panel,
.gate-panel {
  max-height: none !important;
}

.gate-inner,
.login-inner,
.access-inner {
  min-height: 100svh !important;
  height: auto !important;
  overflow-y: auto !important;
  padding-top: max(28px, env(safe-area-inset-top)) !important;
  padding-bottom: max(34px, env(safe-area-inset-bottom)) !important;
}

@media (max-height: 760px) {
  .gate-inner,
  .login-inner,
  .access-inner {
    align-items: flex-start !important;
  }

  .gate-copy,
  .login-card,
  .access-card {
    margin-top: 18px !important;
    margin-bottom: 28px !important;
    transform: none !important;
  }
}

/* =========================================================
   v4.3.13 · CURATED LOOKBOOK
   ========================================================= */
.lookbook-frame img{image-rendering:auto!important;object-fit:contain!important;}


/* =========================================================
   v4.3.14 · VISIBLE ADMIN LOGIN
   ========================================================= */
.admin-login-entry-wrap{
  width:min(590px,100%);
  margin:22px auto 4px;
}
.admin-login-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 13px;
  color:#927a64;
  font-size:.54rem;
  letter-spacing:.22em;
}
.admin-login-divider i{
  height:1px;
  flex:1;
  background:rgba(88,65,49,.18);
}
.admin-login-divider b{
  font-weight:600;
}
.studio-desk-entry{
  display:grid!important;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:13px;
  width:100%;
  margin:0!important;
  padding:13px 16px!important;
  border:1px solid rgba(74,52,39,.28)!important;
  border-radius:8px;
  background:rgba(67,47,36,.065)!important;
  color:#493529!important;
  text-decoration:none!important;
  text-align:left;
  cursor:pointer;
  box-shadow:0 5px 16px rgba(58,39,28,.05);
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.studio-desk-entry:hover{
  transform:translateY(-1px);
  background:rgba(67,47,36,.1)!important;
  border-color:rgba(74,52,39,.42)!important;
}
.studio-desk-entry > span{
  padding:6px 9px;
  border:1px solid rgba(74,52,39,.25);
  border-radius:999px;
  font-size:.5rem;
  letter-spacing:.16em;
  white-space:nowrap;
}
.studio-desk-entry > strong{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1rem;
  font-weight:400;
  letter-spacing:.01em;
}
.studio-desk-entry > em{
  font-style:normal;
  font-size:.56rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  white-space:nowrap;
}
@media(max-width:640px){
  .studio-desk-entry{
    grid-template-columns:1fr;
    gap:5px;
  }
  .studio-desk-entry > span{
    width:max-content;
  }
}


/* =========================================================
   v4.3.15 · POLAROID OPENING + CAPTION CALIBRATION
   The photo rectangles now match the actual transparent
   openings in each PNG frame instead of spilling behind them.
   ========================================================= */

/* Keep the image ONLY inside each frame's true photo opening. */
.polaroid.p1 img{
  left:20.7%!important;
  top:18.0%!important;
  width:58.4%!important;
  height:57.5%!important;
  object-fit:cover!important;
  object-position:center center!important;
}
.polaroid.p2 img{
  left:15.95%!important;
  top:16.7%!important;
  width:67.75%!important;
  height:48.9%!important;
  object-fit:cover!important;
  object-position:center center!important;
}
.polaroid.p3 img{
  left:14.85%!important;
  top:16.2%!important;
  width:70.25%!important;
  height:57.9%!important;
  object-fit:cover!important;
  object-position:center center!important;
}
.polaroid.p4 img{
  left:15.95%!important;
  top:13.2%!important;
  width:67.75%!important;
  height:60.6%!important;
  object-fit:cover!important;
  object-position:center center!important;
}

/* Put every handwritten note ON the paper border itself. */
.polaroid.p1 figcaption{
  left:18%!important;
  right:18%!important;
  bottom:18.6%!important;
  line-height:1.03!important;
}
.polaroid.p2 figcaption{
  left:16%!important;
  right:16%!important;
  bottom:26.2%!important;
  line-height:1.03!important;
}
.polaroid.p3 figcaption{
  left:14%!important;
  right:14%!important;
  bottom:17.1%!important;
  line-height:1.02!important;
  font-size:clamp(.92rem,1.45vw,1.22rem)!important;
}
.polaroid.p4 figcaption{
  left:14%!important;
  right:14%!important;
  bottom:16.0%!important;
  line-height:1.02!important;
  font-size:clamp(.92rem,1.45vw,1.22rem)!important;
}

/* Prevent any image edge from ever visibly leaking outside the Polaroid canvas. */
.polaroid{
  overflow:hidden!important;
}


/* =========================================================
   v4.3.16 · ALWAYS-VISIBLE DOSTAL DIGITAL ADMIN LOGIN
   ========================================================= */

.gate-panel{
  position:relative!important;
}

.studio-desk-top-entry{
  position:absolute!important;
  top:28px!important;
  right:30px!important;
  z-index:30!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:9px 13px!important;
  margin:0!important;
  border:1px solid rgba(74,52,39,.28)!important;
  border-radius:999px!important;
  background:rgba(255,252,246,.88)!important;
  color:#493529!important;
  box-shadow:0 5px 16px rgba(58,39,28,.08)!important;
  cursor:pointer!important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.studio-desk-top-entry span{
  font-size:.48rem!important;
  letter-spacing:.15em!important;
  text-transform:uppercase!important;
  opacity:.75!important;
}

.studio-desk-top-entry strong{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:.62rem!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  font-weight:700!important;
}

.studio-desk-top-entry:hover{
  background:#fffaf2!important;
  border-color:rgba(74,52,39,.48)!important;
  transform:translateY(-1px);
}

@media(max-width:760px){
  .studio-desk-top-entry{
    top:16px!important;
    right:16px!important;
    padding:8px 10px!important;
  }
  .studio-desk-top-entry span{
    display:none!important;
  }
}


/* =========================================================
   v4.3.17 · TIMELINE BOOK SPINE / PAGE ALIGNMENT
   The planner now follows the physical open-book seam:
   wedding-day details = left page
   timeline moments = right page
   ========================================================= */

@media (min-width: 981px) {

  /* True two-page book spread */
  .timeline-book {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  /* The visible center gutter must match the actual book spine */
  .timeline-book::before {
    left: 50% !important;
    width: 38px !important;
    transform: translateX(-50%) !important;
    z-index: 24 !important;
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(74,52,37,.08) 14%,
        rgba(58,39,27,.22) 37%,
        rgba(33,22,15,.30) 48%,
        rgba(255,255,255,.34) 51%,
        rgba(81,57,39,.17) 65%,
        rgba(74,52,37,.06) 84%,
        transparent 100%
      ) !important;
    filter: blur(.25px) !important;
    pointer-events: none !important;
  }

  /* Keep the page-border overlay from creating a fake offset seam */
  .timeline-book::after {
    left: 8px !important;
  }

  /* Give both pages equal physical dimensions */
  .timeline-page-left,
  .timeline-page-right {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Left page — keep all Wedding Day details comfortably away from spine */
  .timeline-page-left {
    padding:
      clamp(3.4rem, 4.1vw, 4.9rem)
      clamp(4.2rem, 5.2vw, 6rem)
      clamp(3rem, 4vw, 4.5rem)
      clamp(4rem, 5vw, 5.8rem) !important;
  }

  .timeline-page-left .timeline-page-header,
  .timeline-page-left .day-date-line,
  .timeline-page-left .timeline-day-summary,
  .timeline-page-left .timeline-page-quote,
  .timeline-page-left .timeline-signature {
    position: relative !important;
    z-index: 12 !important;
    max-width: 390px !important;
  }

  .timeline-page-left .timeline-page-header {
    padding-right: .25rem !important;
  }

  .timeline-page-left .timeline-page-header h3 {
    max-width: 310px !important;
  }

  /* Put Edit Day beside the info rather than in the gutter */
  .timeline-page-left .page-edit-button {
    flex: 0 0 auto !important;
    margin-left: .9rem !important;
  }

  /* Roadmap bookmark lives on the physical spine */
  .timeline-page-left .heirloom-bookmark {
    position: absolute !important;
    left: 100% !important;
    right: auto !important;
    top: 118px !important;
    transform: translateX(-50%) !important;
    width: 58px !important;
    min-height: 154px !important;
    z-index: 32 !important;
  }

  /* Right page — timeline starts just beyond the gutter */
  .timeline-page-right {
    padding:
      clamp(3rem, 3.7vw, 4.3rem)
      clamp(3.2rem, 4.4vw, 5rem)
      clamp(2.6rem, 3.5vw, 4rem)
      clamp(3.4rem, 4.6vw, 5.2rem) !important;
  }

  .timeline-dropzone {
    min-height: 600px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .timeline-empty-state {
    min-height: 560px !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .timeline-event-list {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .timeline-event-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .timeline-add-inline {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Slightly tighter spread for smaller laptops while preserving a centered seam. */
@media (min-width: 981px) and (max-width: 1240px) {
  .timeline-page-left {
    padding-left: 2.7rem !important;
    padding-right: 3.6rem !important;
  }

  .timeline-page-right {
    padding-left: 3.6rem !important;
    padding-right: 2.7rem !important;
  }

  .timeline-page-left .heirloom-bookmark {
    top: 104px !important;
  }
}


/* =========================================================
   v4.4.0 · WEDDING DAY FOLIO
   ========================================================= */
.vault-folio-section{padding:clamp(72px,9vw,130px) 0;background:linear-gradient(rgba(42,29,22,.97),rgba(31,20,16,.98)),repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 7px);color:#eadcc5}
.vault-folio-desk{width:min(1260px,92%);margin:auto;position:relative;padding:clamp(34px,5vw,64px);border:1px solid rgba(191,143,79,.2);box-shadow:inset 0 0 60px rgba(0,0,0,.28),0 24px 48px rgba(0,0,0,.18)}
.vault-folio-header{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;margin-bottom:32px}.vault-folio-header h2{margin:8px 0 15px;color:#f0e3cc;font:400 clamp(2.8rem,5.2vw,5.4rem)/.98 var(--serif)}.vault-folio-header>div>p:last-child{max-width:820px;color:#c8b7a0;line-height:1.75}.vault-folio-save{display:flex;align-items:center;gap:8px;color:#cdbb9f;font-size:.58rem;letter-spacing:.08em}.vault-folio-save span{width:7px;height:7px;border-radius:50%;background:#b08b56;box-shadow:0 0 0 4px rgba(176,139,86,.12)}
.folio-tabs{display:flex;gap:7px;overflow:auto;padding:0 0 15px}.folio-tabs button{white-space:nowrap;border:1px solid rgba(219,190,148,.2);background:rgba(255,255,255,.035);color:#cdbba1;padding:10px 14px;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.folio-tabs button.is-active{background:#c6a575;color:#2d2119;border-color:#c6a575}
.folio-book{position:relative;min-height:600px;padding:clamp(28px,5vw,62px);color:#49372b;background:radial-gradient(circle at 14% 15%,rgba(116,79,45,.06),transparent 20%),repeating-linear-gradient(0deg,transparent 0 31px,rgba(98,70,45,.045) 31px 32px),linear-gradient(90deg,#ddc7a4,#ead9b9 49%,#c9ad86 50%,#e4d0ae 52%,#d9c09a);box-shadow:0 20px 38px rgba(0,0,0,.3),inset 0 0 28px rgba(73,45,26,.08)}
.folio-book::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:34px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(65,40,24,.12),rgba(39,23,15,.2),rgba(255,255,255,.18),rgba(65,40,24,.09),transparent);pointer-events:none}.folio-page{position:relative;z-index:2;display:grid;grid-template-columns:minmax(220px,.6fr) minmax(0,1.4fr);gap:clamp(30px,5vw,70px)}.folio-page-copy>span{color:#91683f;font:400 2.4rem Georgia,serif}.folio-page-copy h3{margin:7px 0 14px;font:400 clamp(2rem,3.2vw,3.5rem)/1 var(--serif)}.folio-page-copy p{color:#6a5748;font-size:.75rem;line-height:1.7}.folio-fields{display:grid;gap:15px}.folio-fields.two-col{grid-template-columns:1fr 1fr}.folio-fields label,.folio-custom-pack{display:grid;gap:6px}.folio-fields label>span,.folio-custom-pack>span,.folio-contact-cards label{color:#6f543d;font-size:.57rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.folio-fields input,.folio-fields textarea,.folio-contact-cards input,.folio-custom-pack textarea{width:100%;box-sizing:border-box;border:0;border-bottom:1px solid rgba(87,61,40,.25);background:rgba(255,255,255,.2);color:#3c2c22;padding:10px 11px;font:inherit;resize:vertical}.folio-fields .wide{grid-column:1/-1}.folio-margin-note{grid-column:2;margin:12px 0 0 auto;width:min(430px,90%);padding:14px 18px;border-left:3px solid #8c6240;background:rgba(181,144,94,.2);transform:rotate(-.5deg)}.folio-margin-note b{font-size:.5rem;letter-spacing:.13em}.folio-margin-note p{margin:5px 0 0;font:italic .7rem/1.6 Georgia,serif}.folio-check{display:flex!important;align-items:flex-start;gap:11px!important;padding:12px;background:rgba(183,147,99,.17);text-transform:none!important}.folio-check input{width:auto!important;margin-top:3px}.folio-check span{display:grid;gap:3px!important;text-transform:none!important;letter-spacing:0!important}.folio-check small{font-weight:400;color:#756252}.folio-contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;grid-column:2}.folio-contact-cards fieldset{border:1px solid rgba(92,64,42,.2);padding:16px;background:rgba(255,255,255,.13)}.folio-contact-cards legend{font:400 1.25rem Georgia,serif;padding:0 6px}.folio-contact-cards label{display:grid;gap:4px;margin-top:10px}.folio-pack-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;grid-column:2}.folio-pack-grid label{display:flex;gap:10px;align-items:center;padding:11px 13px;background:rgba(255,255,255,.15);border-bottom:1px solid rgba(83,58,38,.12);font:italic .75rem Georgia,serif}.folio-custom-pack{grid-column:2;margin-top:15px}.studio-brief-actions{margin-top:15px}.studio-brief-actions button{border:0;background:#3b2a21;color:#f3e6d0;padding:11px 15px;cursor:pointer}.studio-folio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.studio-folio-grid section{padding:11px 13px;background:rgba(114,83,57,.06);border:1px solid rgba(83,58,40,.12)}.studio-folio-grid h5{margin:0 0 6px;font:400 1rem Georgia,serif}.studio-folio-grid p{margin:3px 0;font-size:.68rem;line-height:1.5}
@media(max-width:900px){.vault-folio-header,.folio-page{grid-template-columns:1fr}.folio-book::after{display:none}.folio-fields.two-col,.folio-contact-cards,.folio-pack-grid{grid-template-columns:1fr}.folio-margin-note,.folio-contact-cards,.folio-pack-grid,.folio-custom-pack{grid-column:1}.folio-fields .wide{grid-column:1}}


/* =========================================================
   v4.5.0 · VAULT ARCHITECTURE REBUILD
   Presentation-only reorganization. Existing data IDs and
   interactive tools remain intact.
   ========================================================= */
.legacy-anchor{display:block;position:relative;top:-90px;visibility:hidden}
.vault-architecture-divider{
  position:relative;
  overflow:hidden;
  padding:clamp(68px,8vw,118px) clamp(28px,8vw,120px);
  text-align:center;
  color:#eee5d7;
  background:
    radial-gradient(circle at 20% 15%,rgba(255,255,255,.035) 0 1px,transparent 2px),
    repeating-linear-gradient(105deg,rgba(255,255,255,.018) 0 1px,transparent 1px 5px),
    linear-gradient(145deg,#34271f,#1f1713 58%,#17100d);
  box-shadow:inset 0 1px rgba(255,255,255,.06),inset 0 -1px rgba(0,0,0,.45);
}
.vault-architecture-divider::before{
  content:"";
  position:absolute;
  inset:14px;
  border:1px dashed rgba(202,174,127,.28);
  pointer-events:none;
}
.vault-architecture-divider .eyebrow{
  position:relative;
  z-index:1;
  margin:0 0 12px;
  color:#bda77f;
  letter-spacing:.28em;
}
.vault-architecture-divider h2{
  position:relative;
  z-index:1;
  max-width:850px;
  margin:0 auto;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(2.6rem,5.5vw,5.5rem);
  font-weight:400;
  line-height:.94;
}
.vault-architecture-subtitle{
  position:relative;
  z-index:1;
  max-width:680px;
  margin:20px auto 0;
  color:rgba(238,229,215,.72);
  font-family:Georgia,serif;
  font-size:clamp(.95rem,1.35vw,1.15rem);
  font-style:italic;
  line-height:1.7;
}
.venue-deeper-guide{
  margin-top:clamp(34px,5vw,70px);
  padding:clamp(28px,4vw,48px);
  background:rgba(246,239,225,.72);
  border:1px solid rgba(83,62,45,.16);
  box-shadow:0 18px 44px rgba(46,32,22,.08);
}
.venue-deeper-guide h3{
  margin:.25rem 0 1rem;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(2rem,3.2vw,3.2rem);
  font-weight:400;
}
.venue-guide-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:28px 0;
}
.venue-guide-grid article{
  padding:18px 18px 17px;
  border-top:1px solid rgba(84,62,44,.24);
  background:rgba(255,252,245,.46);
}
.venue-guide-grid strong{
  display:block;
  margin-bottom:7px;
  font-size:.68rem;
  letter-spacing:.18em;
}
.venue-guide-grid span{
  display:block;
  font-family:Georgia,serif;
  font-size:.92rem;
  line-height:1.6;
}
.venue-margin-note{
  max-width:720px;
  margin:28px 0 0 auto;
  padding:18px 20px;
  border-left:2px solid rgba(120,91,57,.42);
  font-family:Georgia,serif;
  font-style:italic;
  line-height:1.65;
}
@media(max-width:760px){
  .venue-guide-grid{grid-template-columns:1fr}
}


/* =========================================================
   v4.5.1 · FLOW CLEANUP
   The Roadmap is the only table of contents. Real content
   sections now introduce each chapter directly.
   ========================================================= */
.vault-chapter-start{
  position:relative;
}
.vault-chapter-start::before{
  content:"";
  display:block;
  width:min(112px,22vw);
  height:1px;
  margin:0 auto 22px;
  background:currentColor;
  opacity:.18;
}
#begin-here.vault-chapter-start::before,
#venue.vault-chapter-start::before,
#engagement.vault-chapter-start::before,
#after.vault-chapter-start::before{
  margin-left:0;
}
#roadmap + .quote-page{
  margin-top:0;
}
#roadmap + .quote-page .kicker{
  letter-spacing:.2em;
}

/* v4.5.2 · Vendor save reliability */
#vendorPlanningSave{position:relative;z-index:3;pointer-events:auto}
#vendorPlanningSave:disabled{cursor:wait;opacity:.68}

/* =========================================================
   v4.5.3 · FOLIO SEAM + CHAPTER SPACING FIX
   - The Folio now uses the physical book seam as its true 50/50 divider.
   - Left-page copy and right-page fields stay clear of the gutter.
   - Editorial/venue chapters keep magazine-style breathing room without
     creating nearly empty full-screen pages between sections.
   ========================================================= */

/* ---------- WEDDING DAY FOLIO: TRUE BOOK SPREAD ---------- */
.vault-folio-section .folio-book{
  --folio-gutter: clamp(54px, 5.2vw, 82px);
  --folio-page-pad-x: clamp(26px, 3.1vw, 46px);
  --folio-page-pad-y: clamp(30px, 3.8vw, 54px);
  position:relative;
  padding:var(--folio-page-pad-y) var(--folio-page-pad-x)!important;
  overflow:hidden;
}

/* The visible spine is anchored to the exact mathematical center. */
.vault-folio-section .folio-book::after{
  left:50%!important;
  width:var(--folio-gutter)!important;
  transform:translateX(-50%)!important;
  z-index:3;
}

/* Every Folio tab is now a literal left page + right page. */
.vault-folio-section .folio-page{
  position:relative;
  z-index:4;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  column-gap:var(--folio-gutter)!important;
  row-gap:18px!important;
  align-items:start!important;
  min-width:0;
}

/* Left-page content can never drift through the center seam. */
.vault-folio-section .folio-page-copy{
  grid-column:1!important;
  width:100%;
  max-width:430px;
  justify-self:end;
  box-sizing:border-box;
  padding-right:clamp(6px,1vw,15px);
}

/* All editable Folio content begins on the right-hand page. */
.vault-folio-section .folio-fields,
.vault-folio-section .folio-contact-cards,
.vault-folio-section .folio-pack-grid,
.vault-folio-section .folio-custom-pack,
.vault-folio-section .folio-margin-note,
.vault-folio-section .folio-page > .folio-check{
  grid-column:2!important;
  min-width:0;
  width:100%;
  box-sizing:border-box;
  margin-left:0;
  margin-right:0;
}

.vault-folio-section .folio-fields.two-col{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:15px 16px;
}

.vault-folio-section .folio-contact-cards{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.vault-folio-section .folio-pack-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}

.vault-folio-section .folio-margin-note{
  justify-self:stretch;
  max-width:none;
}

/* Subtle page-edge shading reinforces the two-page structure. */
.vault-folio-section .folio-book::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(90,58,34,.045) 0%,
      transparent 7%,
      transparent calc(50% - 44px),
      rgba(77,47,28,.075) calc(50% - 16px),
      transparent calc(50% - 4px),
      transparent calc(50% + 4px),
      rgba(255,255,255,.08) calc(50% + 18px),
      transparent calc(50% + 44px),
      transparent 93%,
      rgba(90,58,34,.045) 100%);
}

/* ---------- CHAPTER FLOW: REMOVE ACCIDENTAL GIANT GAPS ---------- */
/* The old 100vh rule was beautiful on isolated pages, but after the
   architecture rebuild it made shorter chapters look like blank pages. */
#begin-here.editorial-grid,
#engagement.editorial-grid{
  min-height:0!important;
  padding-top:clamp(72px,7vw,108px)!important;
  padding-bottom:clamp(72px,7vw,108px)!important;
  align-items:center!important;
}

/* Keep the Polaroid composition substantial without forcing an entire viewport. */
#begin-here .polaroid-stack,
#engagement .polaroid-stack{
  min-height:clamp(500px,52vw,690px)!important;
}

/* Venue remains a dramatic split spread, just not an unnecessarily tall one. */
#venue.split-feature{
  min-height:clamp(660px,76vh,860px)!important;
  align-items:stretch;
}
#venue .split-copy{
  align-self:center;
  padding-top:clamp(70px,7vw,110px)!important;
  padding-bottom:clamp(70px,7vw,110px)!important;
}

/* Chapter separators should read as a breath, not another page. */
.vault-chapter-start::before{
  margin-bottom:18px!important;
}

/* Avoid inherited viewport-height behavior on content-first paper chapters. */
#after.after,
#priorities.chapter-opener + .advice,
#your-people.vendor-planning{
  min-height:0!important;
}

/* ---------- RESPONSIVE FOLIO ---------- */
@media (max-width:1100px){
  .vault-folio-section .folio-book{
    --folio-gutter:clamp(44px,5vw,64px);
  }
  .vault-folio-section .folio-contact-cards{
    grid-template-columns:1fr;
  }
}

@media (max-width:900px){
  .vault-folio-section .folio-book{
    --folio-gutter:0px;
    padding:clamp(24px,5vw,42px)!important;
  }
  .vault-folio-section .folio-book::after,
  .vault-folio-section .folio-book::before{
    display:none!important;
  }
  .vault-folio-section .folio-page{
    grid-template-columns:1fr!important;
    row-gap:24px!important;
  }
  .vault-folio-section .folio-page-copy,
  .vault-folio-section .folio-fields,
  .vault-folio-section .folio-contact-cards,
  .vault-folio-section .folio-pack-grid,
  .vault-folio-section .folio-custom-pack,
  .vault-folio-section .folio-margin-note,
  .vault-folio-section .folio-page > .folio-check{
    grid-column:1!important;
    max-width:none!important;
    justify-self:stretch!important;
    padding-right:0;
  }
  .vault-folio-section .folio-fields.two-col,
  .vault-folio-section .folio-pack-grid{
    grid-template-columns:1fr!important;
  }
  #venue.split-feature{
    min-height:0!important;
  }
}

@media (max-width:760px){
  #begin-here.editorial-grid,
  #engagement.editorial-grid{
    padding-top:64px!important;
    padding-bottom:64px!important;
  }
  #begin-here .polaroid-stack,
  #engagement .polaroid-stack{
    min-height:500px!important;
  }
}


/* =========================================================
   v4.5.5 · CHAPTER POLISH
   Begin Here tape + Section 02 depth + Setting/Engagement flow
   ========================================================= */

/* BEGIN HERE — tape now physically belongs to each Polaroid */
#begin-here .polaroid-stack > .tape,
#begin-here .tape-one{
  display:none!important;
}

#begin-here .polaroid .photo-tape{
  position:absolute;
  z-index:7;
  top:-2.5%;
  left:50%;
  width:clamp(82px,9vw,112px);
  height:clamp(25px,2.6vw,33px);
  transform:translateX(-50%) rotate(4deg);
  background:
    linear-gradient(90deg,rgba(220,207,169,.58),rgba(238,226,190,.88)),
    repeating-linear-gradient(90deg,transparent 0 5px,rgba(255,255,255,.14) 5px 6px);
  box-shadow:0 2px 7px rgba(51,40,27,.12);
  opacity:.9;
  pointer-events:none;
}

#begin-here .polaroid.p2 .photo-tape{
  top:-1.5%;
  left:52%;
  transform:translateX(-50%) rotate(-5deg);
}

/* Keep Begin Here composed as one intentional spread, not a tall blank page. */
#begin-here.editorial-grid{
  min-height:auto!important;
  padding-top:clamp(68px,6vw,92px)!important;
  padding-bottom:clamp(68px,6vw,92px)!important;
  gap:clamp(36px,6vw,88px)!important;
}
#begin-here .polaroid-stack{
  min-height:clamp(470px,48vw,625px)!important;
}

/* BRITANI JOURNAL LETTER */
.britani-journal-note{
  padding:clamp(72px,8vw,120px) max(24px,calc((100vw - 1240px)/2));
}
.britani-journal-paper{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  padding:clamp(38px,5vw,76px);
  border:1px solid rgba(83,67,48,.18);
  background:
    linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)),
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(92,76,56,.055) 31px 32px);
  box-shadow:0 22px 60px rgba(58,43,27,.08);
}
.britani-journal-paper::before{
  content:"";
  position:absolute;
  top:-16px;
  left:12%;
  width:118px;
  height:34px;
  transform:rotate(-3deg);
  background:rgba(220,207,169,.62);
  box-shadow:0 2px 6px rgba(51,40,27,.1);
}
.britani-journal-paper h2{
  max-width:900px;
  margin:.28em 0 .65em;
  font-family:var(--serif);
  font-size:clamp(3.2rem,6vw,6rem);
  font-weight:400;
  line-height:.92;
}
.britani-journal-columns{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(34px,6vw,78px);
}
.britani-journal-columns p{
  color:rgba(23,23,20,.74);
  line-height:1.9;
}
.britani-journal-columns .journal-script{
  margin:.1rem 0 1.2rem;
  color:var(--vault-olive);
  font-family:var(--hand);
  font-size:clamp(2rem,3vw,2.8rem);
  line-height:1;
}
.journal-keeper-list{
  display:grid;
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}
.journal-keeper-list li{
  padding:0 0 14px;
  border-bottom:1px solid rgba(83,67,48,.15);
}
.journal-keeper-list strong,
.journal-keeper-list span{
  display:block;
}
.journal-keeper-list strong{
  margin-bottom:4px;
  font-family:var(--serif);
  font-size:1.35rem;
  font-weight:500;
}
.journal-keeper-list span{
  color:rgba(23,23,20,.67);
  line-height:1.65;
}
.britani-journal-signoff{
  max-width:780px;
  margin:clamp(30px,4vw,52px) 0 0 auto;
  padding-top:24px;
  border-top:1px solid rgba(83,67,48,.18);
}
.britani-journal-signoff p{
  line-height:1.8;
}
.britani-journal-signoff span{
  display:block;
  margin-top:14px;
  color:var(--vault-olive);
  font-family:var(--hand);
  font-size:2.25rem;
}
.britani-journal-signoff small{
  display:block;
  margin-top:2px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.58;
}

/* SECTION 02 — give The Heart of It enough substance to earn a chapter */
#advice-priorities{
  padding-top:clamp(70px,7vw,105px)!important;
  padding-bottom:clamp(70px,7vw,105px)!important;
}
#advice-priorities .heart-copy{
  max-width:760px;
}
.heart-principles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:28px 0;
}
.heart-principles article{
  padding:22px;
  border:1px solid rgba(84,68,49,.17);
  background:rgba(255,255,255,.22);
}
.heart-principles article > span{
  display:block;
  margin-bottom:12px;
  font-size:.68rem;
  letter-spacing:.2em;
  opacity:.55;
}
.heart-principles h3,
.heart-questions h3{
  margin:0 0 8px;
  font-family:var(--serif);
  font-size:1.65rem;
  font-weight:500;
}
.heart-principles p{
  margin:0;
  font-size:.93rem!important;
  line-height:1.65!important;
}
.heart-questions{
  margin:28px 0;
  padding:24px 26px;
  border-left:2px solid rgba(128,102,59,.48);
  background:rgba(217,203,170,.12);
}
.heart-questions ul{
  margin:14px 0 0;
  padding-left:1.2rem;
}
.heart-questions li{
  margin:.6rem 0;
  line-height:1.55;
}

/* SECTION 03 — photo and copy now read as one spread with no dead vertical gulf */
#venue.split-feature{
  min-height:auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  align-items:stretch!important;
}
#venue .split-image{
  min-height:clamp(650px,72vw,900px)!important;
  height:auto!important;
}
#venue .split-image img{
  width:100%;
  height:100%;
  min-height:inherit;
  object-fit:cover;
}
#venue .split-copy{
  align-self:center!important;
  padding:clamp(58px,6vw,88px)!important;
}
#venue .venue-deeper-guide{
  margin-top:30px!important;
}

/* SECTION 05 — keep the Polaroids and words visually connected */
#engagement.editorial-grid{
  min-height:auto!important;
  padding-top:clamp(70px,6vw,96px)!important;
  padding-bottom:clamp(70px,6vw,96px)!important;
  gap:clamp(34px,6vw,82px)!important;
}
#engagement .polaroid-stack{
  min-height:clamp(475px,48vw,620px)!important;
  align-self:center;
}
#engagement .letter{
  align-self:center;
}

/* Responsive chapter cleanup */
@media (max-width:900px){
  .britani-journal-columns,
  .heart-principles{
    grid-template-columns:1fr;
  }
  #venue.split-feature{
    grid-template-columns:1fr!important;
  }
  #venue .split-image{
    min-height:clamp(440px,92vw,650px)!important;
  }
  #venue .split-copy{
    padding:48px 28px 64px!important;
  }
  #begin-here .polaroid-stack,
  #engagement .polaroid-stack{
    min-height:500px!important;
  }
}

@media (max-width:620px){
  .britani-journal-note{
    padding:54px 18px;
  }
  .britani-journal-paper{
    padding:34px 24px;
  }
  #begin-here.editorial-grid,
  #engagement.editorial-grid{
    padding-top:54px!important;
    padding-bottom:54px!important;
  }
}


/* =========================================================
   v4.5.6 · BEGIN HERE VISUAL CALIBRATION
   The PNG Polaroid assets contain transparent space above
   the visible paper. Tape is now aligned to the PAPER edge,
   not the outer transparent image canvas.
   ========================================================= */

#begin-here .polaroid{
  overflow:hidden!important;
}

/* Position tape where the visible Polaroid paper actually begins. */
#begin-here .polaroid.p1 .photo-tape{
  top:11.2%!important;
  left:51%!important;
  width:clamp(76px,7.8vw,102px)!important;
  height:clamp(22px,2.15vw,29px)!important;
  transform:translateX(-50%) rotate(3deg)!important;
}

#begin-here .polaroid.p2 .photo-tape{
  top:11.1%!important;
  left:52%!important;
  width:clamp(76px,7.8vw,102px)!important;
  height:clamp(22px,2.15vw,29px)!important;
  transform:translateX(-50%) rotate(-4deg)!important;
}

/* Keep handwritten captions completely on the physical bottom border. */
#begin-here .polaroid.p1 figcaption{
  left:17%!important;
  right:17%!important;
  bottom:18.3%!important;
  font-size:clamp(.88rem,1.28vw,1.16rem)!important;
  white-space:nowrap;
}

#begin-here .polaroid.p2 figcaption{
  left:11%!important;
  right:8%!important;
  bottom:25.8%!important;
  font-size:clamp(.82rem,1.18vw,1.08rem)!important;
  white-space:nowrap;
  text-align:center!important;
}

/* Pull the actual chapter upward; the tiny rule remains a breath,
   but not a half-page of empty paper. */
#begin-here.editorial-grid{
  padding-top:clamp(42px,4.2vw,62px)!important;
  padding-bottom:clamp(58px,5vw,78px)!important;
}

#begin-here.vault-chapter-start::before{
  margin-bottom:6px!important;
}

/* Slightly enlarge / tuck the composition toward the copy so it
   feels pasted into the same journal spread. */
#begin-here .polaroid-stack{
  min-height:clamp(450px,44vw,585px)!important;
  transform:translateX(-2%);
}

@media (max-width:760px){
  #begin-here.editorial-grid{
    padding-top:42px!important;
    padding-bottom:54px!important;
  }
  #begin-here .polaroid-stack{
    min-height:470px!important;
    transform:none;
  }
  #begin-here .polaroid.p1 figcaption,
  #begin-here .polaroid.p2 figcaption{
    white-space:normal;
  }
}


/* =========================================================
   v4.5.7 · CHAPTER LAYOUT REFLOW
   Fixes the real source of the giant blank gaps:
   .vault-chapter-start::before was becoming an EXTRA GRID ITEM.
   On two-column chapters that pushed the actual copy into a
   second grid row, creating what looked like half a blank page.
   ========================================================= */

/* Never let the decorative chapter rule participate in grid layout. */
#begin-here.vault-chapter-start::before,
#venue.vault-chapter-start::before,
#engagement.vault-chapter-start::before{
  display:none!important;
}

/* ---------- 01 · BEGIN HERE ---------- */
#begin-here.editorial-grid{
  display:grid!important;
  grid-template-columns:minmax(0,.94fr) minmax(420px,1.06fr)!important;
  grid-template-areas:"begin-copy begin-photos"!important;
  align-items:center!important;
  min-height:0!important;
  padding:clamp(64px,6.5vw,100px) max(34px,7vw)!important;
  gap:clamp(48px,7vw,110px)!important;
}

#begin-here .letter{
  grid-area:begin-copy!important;
  align-self:center!important;
  max-width:680px;
}

#begin-here .polaroid-stack{
  grid-area:begin-photos!important;
  align-self:center!important;
  justify-self:stretch!important;
  min-height:clamp(450px,43vw,590px)!important;
  margin:0!important;
  transform:none!important;
}

/* ---------- 03 · THE SETTING ---------- */
/* One actual row: photograph and copy are now siblings, not separated
   by the decorative pseudo-element pretending to be a third child. */
#venue.split-feature{
  display:grid!important;
  grid-template-columns:minmax(0,1.06fr) minmax(390px,.94fr)!important;
  grid-template-areas:"venue-photo venue-copy"!important;
  min-height:0!important;
  align-items:stretch!important;
}

#venue .split-image{
  grid-area:venue-photo!important;
  min-height:clamp(620px,61vw,820px)!important;
  height:100%!important;
  margin:0!important;
}

#venue .split-image img{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  object-fit:cover!important;
}

#venue .split-copy{
  grid-area:venue-copy!important;
  align-self:center!important;
  padding:clamp(64px,7vw,108px) clamp(48px,6vw,94px)!important;
  margin:0!important;
}

/* ---------- 05 · ENGAGEMENT ---------- */
/* Deliberately make this copy-left / Polaroids-right. This keeps the
   chapter readable in one glance and removes the huge empty first row. */
#engagement.editorial-grid{
  display:grid!important;
  grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr)!important;
  grid-template-areas:"eng-copy eng-photos"!important;
  align-items:center!important;
  min-height:0!important;
  padding:clamp(64px,6.5vw,100px) max(34px,7vw)!important;
  gap:clamp(48px,7vw,110px)!important;
}

#engagement .letter{
  grid-area:eng-copy!important;
  align-self:center!important;
  max-width:650px;
  margin:0!important;
}

#engagement .polaroid-stack{
  grid-area:eng-photos!important;
  align-self:center!important;
  justify-self:stretch!important;
  min-height:clamp(450px,43vw,590px)!important;
  margin:0!important;
}

/* Keep chapter content from inheriting stray row/column placement. */
#begin-here > .letter,
#begin-here > .polaroid-stack,
#venue > .split-image,
#venue > .split-copy,
#engagement > .letter,
#engagement > .polaroid-stack{
  grid-row:1!important;
}

/* ---------- WIDE DESKTOP TUNING ---------- */
@media (min-width:1500px){
  #begin-here.editorial-grid,
  #engagement.editorial-grid{
    padding-top:82px!important;
    padding-bottom:82px!important;
  }
  #begin-here .polaroid-stack,
  #engagement .polaroid-stack{
    min-height:560px!important;
  }
  #venue .split-image{
    min-height:760px!important;
  }
}

/* ---------- TABLET / MOBILE ---------- */
@media (max-width:980px){
  #begin-here.editorial-grid,
  #engagement.editorial-grid{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "begin-copy"
      "begin-photos"!important;
    padding:58px 28px!important;
    gap:34px!important;
  }

  #engagement.editorial-grid{
    grid-template-areas:
      "eng-copy"
      "eng-photos"!important;
  }

  #begin-here .letter,
  #begin-here .polaroid-stack,
  #engagement .letter,
  #engagement .polaroid-stack{
    grid-row:auto!important;
    max-width:none;
  }

  #begin-here .polaroid-stack,
  #engagement .polaroid-stack{
    min-height:500px!important;
  }

  #venue.split-feature{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "venue-photo"
      "venue-copy"!important;
  }

  #venue .split-image,
  #venue .split-copy{
    grid-row:auto!important;
  }

  #venue .split-image{
    min-height:clamp(430px,82vw,620px)!important;
  }

  #venue .split-copy{
    padding:52px 28px 64px!important;
  }
}

@media (max-width:620px){
  #begin-here.editorial-grid,
  #engagement.editorial-grid{
    padding:48px 20px 56px!important;
    gap:24px!important;
  }

  #begin-here .polaroid-stack,
  #engagement .polaroid-stack{
    min-height:430px!important;
  }
}