/* Seventy: a giant 70 made of his photos, then the family album.
   Cream paper, deep ink blue, a red accent and pastel washi tape. */

:root {
  --ink: #1b2a4a;
  --ink-soft: #2d3f66;
  --cover: #16213b;
  --red: #a8322b;
  --red-deep: #8a251f;
  --paper: #f3ead8;
  --page: #f8f1e2;
  --card: #fcf8ef;
  --cream: #f6efdf;
  --muted: #5a5446;
  --line: #d6c8aa;
  --kraft: #c9a878;
  --corner: rgba(32, 29, 26, 0.92);
  --tape-mint: #bfe0cf;
  --tape-pink: #f2c4c0;
  --tape-butter: #f1df9e;
  --tape-sky: #c3d8ec;
  --tape-lilac: #d8cbe8;
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Lora", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .2 0 0 0 .085 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -5 0 0 0 3.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --linen:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 1px, rgba(0, 0, 0, 0) 1px 4px);

  /* Engine UI (recorder, calendar sheet, upload list) in the album's palette. */
  --b70-bg: #f3ead8;
  --b70-surface: #fcf8ef;
  --b70-text: #1b2a4a;
  --b70-muted: #5a5446;
  --b70-accent: #a8322b;
  --b70-accent-text: #fffaf0;
  --b70-line: #b9a77f;
  --b70-error: #a3261f;
  --b70-ok: #2f6b46;
  --b70-radius: 10px;
  --b70-font-body: "Lora", Georgia, "Times New Roman", serif;
  --b70-font-display: "Fraunces", Georgia, "Times New Roman", serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--cover);
  scroll-padding-top: calc(var(--b70-preview-bar, 0px) + 12px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  /* a long email address in the thanks ("We've sent a confirmation to …") must wrap, not run off a 360px phone */
  overflow-wrap: break-word;
  background-color: var(--paper);
  background-image: var(--noise), radial-gradient(140% 60% at 50% 0%, #f8f1e1 0%, rgba(243, 234, 216, 0) 70%);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
p { margin: 0 0 12px; text-wrap: pretty; }
a { color: inherit; }
strong { font-weight: 600; }
.nowrap { white-space: nowrap; }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  border-radius: 6px;
}
.skip:focus { top: calc(12px + var(--b70-preview-bar, 0px)); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: 8px;
  font: 600 1.125rem/1.2 var(--body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}
.btn svg {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: progress; }

.btn-red {
  background: var(--red);
  color: #fffaf0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 6px 14px -6px rgba(138, 37, 31, 0.6);
}
.btn-red:hover { background: var(--red-deep); }

.btn-ink {
  background: var(--ink);
  color: #fffaf0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.22), 0 6px 14px -8px rgba(27, 42, 74, 0.7);
}
.btn-ink:hover { background: var(--ink-soft); }

.btn-line {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-line:hover { background: rgba(27, 42, 74, 0.06); }

.btn-small {
  min-height: 48px;
  padding: 8px 14px;
  font-size: 1.0625rem;
  background: #fffdf8;
  color: var(--ink);
  border-color: rgba(27, 42, 74, 0.7);
}
.btn-small:hover { border-color: var(--ink); }

.btn-block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}
.btn-row .btn { flex: 1 1 140px; }
.card .btn-row .btn { flex-basis: 210px; }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--red);
  font-weight: 600;
  text-underline-offset: 4px;
}

.kicker {
  margin: 0 0 6px;
  color: var(--red);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kicker-hand {
  margin: 0 0 2px;
  text-align: center;
  font-family: var(--hand);
  font-size: 1.85rem;
  line-height: 1.1;
  color: var(--red);
}

/* ---------- The book: a cloth cover that lifts off its endpaper as you scroll ---------- */

.book { position: relative; }

.endpaper {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 20px 26px;
  background-color: #efe4cc;
  background-image:
    var(--noise),
    radial-gradient(circle at 50% 50%, rgba(168, 50, 43, 0.08) 0 2px, rgba(0, 0, 0, 0) 2.5px) 0 0 / 22px 22px,
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 40%);
}
.endpaper p {
  margin: 0;
  font-family: var(--hand);
  font-size: 1.9rem;
  line-height: 1.15;
  text-align: center;
  color: var(--ink);
  transform: rotate(-1.5deg);
}

.cover {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--b70-preview-bar, 0px));
  min-height: calc(100svh - var(--b70-preview-bar, 0px));
  padding:
    calc(14px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
    calc(18px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  overflow: hidden;
  color: var(--cream);
  background-color: var(--cover);
  background-image:
    radial-gradient(120% 75% at 50% 32%, rgba(58, 80, 132, 0.55), rgba(15, 23, 43, 0) 72%),
    var(--linen);
  /* the page block under the cover */
  box-shadow: 0 2px 0 #efe6d2, 0 4px 0 #e2d6bc, 0 6px 0 #d6c8aa, 0 16px 22px rgba(20, 16, 8, 0.35);
  transform-origin: 50% 0;
}
@media (prefers-reduced-motion: no-preference) {
  html.is-hinged .cover {
    transform: perspective(1500px) rotateX(calc(var(--hinge, 0) * -13deg));
    will-change: transform;
  }
}
/* blind-stamped frame, like a cloth album cover */
.cover::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  pointer-events: none;
}
/* cloth weave and vignette over the photos */
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, rgba(0, 0, 0, 0) 1px 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, rgba(0, 0, 0, 0) 1px 4px),
    radial-gradient(130% 90% at 50% 40%, rgba(15, 23, 43, 0) 50%, rgba(8, 12, 24, 0.55) 100%);
  pointer-events: none;
}

.cover-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: var(--ox, 50%) var(--oy, 40%);
}
.cover.is-ready .cover-canvas { cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  .cover-canvas.is-breath { animation: breath 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
}
@keyframes breath {
  from { transform: scale(1.025); }
  to { transform: none; }
}

.cover-figure {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  min-height: 200px;
  margin: 6px 0 4px;
}

/* the line under the 70: what it is before the tap, a hint once it can be touched */
.cover-caption {
  position: relative;
  z-index: 3;
  display: grid;
  margin: 0 auto 12px;
  max-width: 21em;
  text-align: center;
  font-family: var(--hand);
  font-size: 1.6rem;
  line-height: 1.08;
  color: #f6e7c4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 12px rgba(8, 12, 24, 0.9);
  text-wrap: balance;
  pointer-events: none;
}
.cap-post { display: none; }
html.is-open .cap-pre { display: none; }
html.is-open .cap-post { display: block; opacity: 0; visibility: hidden; transition: opacity 0.8s ease, visibility 0s linear 0.8s; }
html.is-open .cover.is-hinting .cap-post { opacity: 1; visibility: visible; transition: opacity 0.8s ease, visibility 0s linear 0s; }
.hint-mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hint-touch { display: none; }
  .hint-mouse { display: inline; }
}


.label-wrap {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.greeting {
  position: relative;
  z-index: 2;
  display: table;
  margin: 0 auto -8px;
  padding: 6px 20px 8px;
  max-width: 92%;
  background: #fffdf6;
  color: var(--ink);
  font-family: var(--hand);
  font-size: 1.75rem;
  line-height: 1.08;
  text-align: center;
  text-wrap: balance;
  transform: rotate(-2.2deg);
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.45);
}
.greeting::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 84px;
  height: 22px;
  margin-left: -42px;
  background: var(--tape-pink);
  opacity: 0.9;
  transform: rotate(3deg);
  clip-path: polygon(0 0, 100% 0, 96% 25%, 100% 50%, 96% 75%, 100% 100%, 0 100%, 4% 75%, 0 50%, 4% 25%);
}
.greeting [data-ben70="greeting"] { display: inline-block; }
.greeting [data-ben70="greeting"]::after { content: ","; }
.greeting.is-writing [data-ben70="greeting"] { animation: write 1.4s steps(28, end) both; }
@keyframes write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.faces {
  position: relative;
  perspective: 1600px;
}

/* Only the face that shows takes up room, so the 70 gets all the space before the tap. */
.face {
  position: relative;
  padding: 24px 20px 18px;
  border-radius: 3px;
  background-color: var(--card);
  background-image: var(--noise);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 24px 46px -14px rgba(0, 0, 0, 0.75);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* a double red rule, like a printed album label */
.face::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(168, 50, 43, 0.6);
  box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px rgba(168, 50, 43, 0.35);
  pointer-events: none;
}

.face-front {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 1s cubic-bezier(0.65, 0.05, 0.2, 1) 0.15s, opacity 0.4s ease, visibility 0s linear 0s;
}
.face-back {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  visibility: hidden;
  transform: rotateY(180deg);
  transition: transform 1s cubic-bezier(0.65, 0.05, 0.2, 1) 0.15s, opacity 0.4s ease, visibility 0s linear 1.15s;
}
html.is-open .face-front {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  visibility: hidden;
  transform: rotateY(-180deg);
  transition: transform 1s cubic-bezier(0.65, 0.05, 0.2, 1) 0.15s, opacity 0.4s ease, visibility 0s linear 1.15s;
}
html.is-open .face-back {
  position: relative;
  visibility: visible;
  transform: rotateY(0deg);
  transition: transform 1s cubic-bezier(0.65, 0.05, 0.2, 1) 0.15s, opacity 0.4s ease, visibility 0s linear 0s;
}
html.no-js .face-front { display: none; }
html.no-js .face-back { position: relative; visibility: visible; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .face,
  html.is-open .face { transform: none !important; }
  .face-back { opacity: 0; }
  html.is-open .face-front { opacity: 0; }
  html.is-open .face-back { opacity: 1; }
}

.front-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.3rem, 11vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.01em;
}
.front-when {
  margin: 10px 0 18px;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.35;
}
@media (max-width: 519px) {
  .front-when .dot { display: none; }
  .front-when .nowrap { display: block; }
}

.btn-open {
  width: 100%;
  min-height: 64px;
  font-size: 1.3rem;
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-open) .btn-open { animation: nudge 2.8s ease-in-out 2.2s infinite; }
}
@keyframes nudge {
  0%, 82%, 100% { transform: none; }
  88% { transform: translateY(-3px); }
  94% { transform: translateY(1px); }
}

.front-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-style: italic;
  font-size: 1.0625rem;
}

.hero-title {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.1rem, 9vw, 2.7rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.hero-title:focus,
.hero-title:focus-visible { outline: none; }

.hero-when,
.hero-where {
  margin: 0 0 4px;
  font-size: 1.1875rem;
  line-height: 1.4;
}
.hero-when { font-weight: 600; }
.when-time { display: block; white-space: nowrap; }

.hero-actions {
  display: grid;
  gap: 4px;
  margin: 14px 0 0;
}
.hero-actions > .btn { width: 100%; }
.hero-directions { margin: 0; }
.hero-directions { margin: 0; }
.hero-directions .btn { padding-left: 10px; padding-right: 10px; }
.hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin: 8px 0 0;
}
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 10px;
  color: var(--ink);
  font-weight: 600;
  font-size: 1.0625rem;
  text-underline-offset: 4px;
}
.hero-link::after { content: "↓"; color: var(--red); }
.hero-credit {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px dashed rgba(168, 50, 43, 0.3);
}

.credit {
  margin: 14px 0 0;
  color: var(--muted);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.4;
}

/* ---------- Music: always in words ("Music on" / "Music off") ---------- */

.music-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px 0 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 600 1.0625rem/1 var(--body);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.music-pill:hover { background: rgba(27, 42, 74, 0.06); }
.music-state::before { content: "\a0 off"; font-weight: 400; }
[aria-pressed="true"] .music-state::before { content: "\a0 on"; font-weight: 600; }
.music-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  width: 20px;
  height: 18px;
}
.music-eq i {
  display: block;
  width: 3px;
  border-radius: 1px;
  background: currentColor;
  height: 35%;
}
.music-eq i:nth-child(2) { height: 70%; }
.music-eq i:nth-child(3) { height: 50%; }
.music-eq i:nth-child(4) { height: 85%; }
[aria-pressed="false"] > .music-eq { opacity: 0.45; }
@media (prefers-reduced-motion: no-preference) {
  html.is-playing .music-eq i { animation: eq 0.9s ease-in-out infinite alternate; }
  html.is-playing .music-eq i:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.3s; }
  html.is-playing .music-eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -0.6s; }
  html.is-playing .music-eq i:nth-child(4) { animation-duration: 0.8s; animation-delay: -0.2s; }
}
@keyframes eq {
  from { height: 20%; }
  to { height: 100%; }
}

/* the floating one: top right, where it only ever crosses headings and margins */
.music-float {
  position: fixed;
  top: calc(10px + var(--b70-preview-bar, 0px) + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  z-index: 60;
  min-height: 48px;
  padding: 0 16px 0 13px;
  border-color: rgba(246, 239, 223, 0.75);
  background: rgba(22, 33, 59, 0.94);
  color: var(--cream);
  box-shadow: 0 8px 22px rgba(10, 16, 32, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}
.music-float:hover { background: rgba(22, 33, 59, 1); }
html.is-open.past-cover .music-float {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0s;
}
html.is-open.past-cover.float-away .music-float,
html.is-open.past-cover.float-clash .music-float {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
html.lb-open .music-float { visibility: hidden; opacity: 0; }

/* ---------- Calendar page and contents ---------- */

.desk {
  display: grid;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 52px 16px 20px;
}

.daypad {
  position: relative;
  width: min(300px, 88%);
  margin: 0 auto;
  transform: rotate(-1.6deg);
  filter: drop-shadow(0 16px 18px rgba(70, 48, 12, 0.22));
}
.daypad-binding {
  position: relative;
  z-index: 4;
  height: 30px;
  border-radius: 6px 6px 2px 2px;
  background: var(--cover);
  background-image: linear-gradient(rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.2)), var(--linen);
}
.daypad-binding i {
  position: absolute;
  top: -12px;
  width: 14px;
  height: 28px;
  border: 3px solid #b8b0a0;
  border-radius: 8px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}
.daypad-binding i:first-child { left: 24%; }
.daypad-binding i:last-child { right: 24%; }

.daypad-stack {
  position: relative;
  box-shadow: 0 3px 0 -1px #efe6d2, 0 6px 0 -2px #e6dbc3, 0 9px 0 -3px #ddd0b4;
}

.daypad-page {
  position: relative;
  background-color: #fffaf1;
  background-image: var(--noise);
  text-align: center;
  padding: 0 0 16px;
}
.daypad-page::before {
  content: "";
  display: block;
  height: 7px;
  background: radial-gradient(circle at 4px 3px, rgba(60, 40, 10, 0.28) 1.3px, rgba(0, 0, 0, 0) 1.8px) 0 0 / 8px 7px repeat-x;
}

.daypad-head {
  margin: 0;
  padding: 9px 10px 8px;
  background: var(--red);
  color: #fffaf0;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.countdown { margin: 0; }
.daypad-days {
  margin: 10px 0 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 7.4rem;
  line-height: 0.95;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.daypad-label {
  margin: 2px 0 4px;
  font-style: italic;
  font-size: 1.45rem;
}
.daypad-eve { display: none; margin: 14px 10px 8px; }
.daypad-eve-word {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  color: var(--red);
}
.daypad-eve-line {
  display: block;
  margin-top: 8px;
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.25;
}
.daypad.is-eve .daypad-days,
.daypad.is-eve .daypad-label { display: none; }
.daypad.is-eve .daypad-eve { display: block; }
.daypad-time {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
}
.daypad-foot {
  margin: 0 18px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-weight: 600;
  font-size: 1.0625rem;
}
.daypad-big {
  margin: 0;
  padding: 26px 14px 14px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1.02;
}

/* the page that tears off when the day changes */
.daypad-tear {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  transform-origin: 6% 0;
  pointer-events: none;
  animation: tear 1.25s cubic-bezier(0.45, 0, 0.7, 0.3) forwards;
  box-shadow: 0 10px 20px rgba(60, 40, 10, 0.25);
}
@keyframes tear {
  0% { transform: none; opacity: 1; }
  20% { transform: rotate(-2.5deg) translateY(1px); }
  45% { transform: rotate(-11deg) translate(-4px, 16px); }
  85% { opacity: 1; }
  100% { transform: rotate(-40deg) translate(-80px, 170%); opacity: 0; }
}

.contents {
  position: relative;
  align-self: center;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  padding: 26px 20px 14px;
  background-color: #fffdf7;
  background-image:
    linear-gradient(rgba(168, 50, 43, 0.45), rgba(168, 50, 43, 0.45)),
    var(--noise);
  background-size: 100% 1.5px, auto;
  background-position: 0 78px, 0 0;
  background-repeat: no-repeat, repeat;
  transform: rotate(0.7deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 16px 26px -16px rgba(70, 48, 12, 0.5);
}
.contents::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 110px;
  height: 26px;
  margin-left: -55px;
  background: var(--tape-mint);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0 5px, rgba(255, 255, 255, 0) 5px 10px);
  opacity: 0.92;
  transform: rotate(-2deg);
  clip-path: polygon(0 0, 100% 0, 96% 25%, 100% 50%, 96% 75%, 100% 100%, 0 100%, 4% 75%, 0 50%, 4% 25%);
}
.contents-title {
  margin: 0 0 18px;
  font-family: var(--hand);
  font-weight: 600;
  font-size: 2.3rem;
  line-height: 1.1;
  color: var(--red);
}
.contents ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.contents li { border-bottom: 1px solid rgba(70, 100, 170, 0.28); }
.contents li:last-child { border-bottom: 0; }
.contents a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 58px;
  padding: 14px 2px 10px;
  text-decoration: none;
  color: var(--ink);
  font-size: 1.125rem;
  line-height: 1.35;
}
.contents a:hover .c-text { text-decoration: underline; text-underline-offset: 4px; }
.c-text { flex: 0 1 auto; }
.c-dots {
  flex: 1 1 18px;
  min-width: 18px;
  border-bottom: 2px dotted rgba(27, 42, 74, 0.35);
  transform: translateY(-5px);
}
.c-page {
  flex: none;
  font-family: var(--hand);
  font-size: 1.55rem;
  line-height: 1;
  color: var(--red);
}

@media (min-width: 760px) {
  .desk {
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: start;
    gap: 56px;
    padding-top: 84px;
  }
  .daypad { width: 300px; }
}

/* ---------- The album ---------- */

.album { padding: 56px 0 20px; }

.album-head {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.section-title,
.page-title,
.front-title,
.signoff,
.lede,
.thanks-title { text-wrap: balance; }

.section-title {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.3rem, 10vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lede { font-size: 1.1875rem; }

.album-skip { margin: 0; }
.album-skip a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--red);
  font-size: 1.0625rem;
  font-weight: 600;
  text-underline-offset: 4px;
}

.album-loading { text-align: center; color: var(--muted); font-style: italic; }

.album-pages {
  display: grid;
  gap: 34px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 26px 10px 0;
}

.page {
  position: relative;
  padding: 30px 16px 38px;
  border-radius: 2px;
  background-color: var(--page);
  background-image: var(--noise);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 3px rgba(80, 60, 20, 0.12), 0 22px 34px -22px rgba(80, 60, 20, 0.45);
}
/* the spine side of the page */
.page::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 26px;
  background: linear-gradient(90deg, rgba(60, 40, 10, 0.12), rgba(60, 40, 10, 0));
  pointer-events: none;
}
.page-no {
  position: absolute;
  top: 10px;
  right: 16px;
  margin: 0;
  font-family: var(--hand);
  font-size: 1.45rem;
  color: var(--muted);
}

.page-head {
  position: relative;
  margin: 0 0 28px;
  text-align: center;
}
.page-years {
  display: block;
  font-family: var(--hand);
  font-size: 1.85rem;
  line-height: 1;
  color: var(--red);
}
.page-title {
  margin: 4px 0 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.75rem, 7.4vw, 2.4rem);
  line-height: 1.08;
}

.rows {
  position: relative;
  display: grid;
  gap: 40px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 620px;
}
.row {
  position: relative;
  margin: 0;
  min-width: 0;
}

.print {
  position: relative;
  display: block;
  width: 100%;
  padding: 7px;
  margin: 0;
  border: 0;
  border-radius: 1px;
  background: #fffdf8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 20px -10px rgba(60, 40, 10, 0.45);
  transform: rotate(var(--r, 0deg));
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.print:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 18px 28px -12px rgba(60, 40, 10, 0.5); }
.print img {
  display: block;
  width: 100%;
  height: auto;
  background: #e8dcc4;
}
.print.old img { filter: sepia(0.1) contrast(0.97); }

/* photo corners */
.deco-corners::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(135deg, var(--corner) 50%, rgba(0, 0, 0, 0) 50%) top left / 24px 24px no-repeat,
    linear-gradient(225deg, var(--corner) 50%, rgba(0, 0, 0, 0) 50%) top right / 24px 24px no-repeat,
    linear-gradient(45deg, var(--corner) 50%, rgba(0, 0, 0, 0) 50%) bottom left / 24px 24px no-repeat,
    linear-gradient(315deg, var(--corner) 50%, rgba(0, 0, 0, 0) 50%) bottom right / 24px 24px no-repeat;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
}

/* washi tape */
.deco-tape::after {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  z-index: 2;
  width: 46%;
  max-width: 120px;
  height: 26px;
  background-color: var(--tape, var(--tape-butter));
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.28) 0 5px, rgba(255, 255, 255, 0) 5px 10px);
  opacity: 0.9;
  transform: translateX(-50%) rotate(var(--tr, -3deg));
  clip-path: polygon(0 0, 100% 0, 96% 25%, 100% 50%, 96% 75%, 100% 100%, 0 100%, 4% 75%, 0 50%, 4% 25%);
  pointer-events: none;
}

.cap {
  margin: 12px 2px 0;
  font-size: 1.125rem;
  line-height: 1.4;
}
.cap-year {
  display: block;
  font-family: var(--hand);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--red);
  margin-bottom: 3px;
}

/* B: one big print */
.row-B .print { width: 92%; margin: 0 auto; }
.row-B.portrait .print { width: 68%; }
.row-B.square .print { width: 80%; }
.row-B .cap { width: 92%; margin: 14px auto 0; }
.row-B.portrait .cap { width: 80%; }

/* S: a print with its note written beside it */
.row-S {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
.row-S .cap { margin: 0; }
.row-S.right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.row-S.right .print { grid-column: 2; grid-row: 1; }
.row-S.right .cap { grid-column: 1; grid-row: 1; text-align: right; }
.row-S.portrait { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.row-S.portrait.right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }

/* O: two prints overlapping, their notes on a little numbered ticket */
.row-O {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.row-O > .print:first-of-type { grid-column: 1 / span 8; grid-row: 1; z-index: 1; }
.row-O > .print:last-of-type {
  grid-column: 5 / -1;
  grid-row: 2;
  margin-top: -22%;
  z-index: 2;
  transform: rotate(calc(var(--r, 0deg) + 3.5deg));
}
.row-O.portrait > .print:first-of-type { grid-column: 1 / span 7; }
.row-O.portrait > .print:last-of-type { grid-column: 6 / -1; margin-top: -40%; }
.num {
  position: absolute;
  left: -8px;
  bottom: -10px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fffdf8;
  color: var(--red);
  font: 600 1.6rem/38px var(--hand);
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.stub {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 22px;
  padding: 12px 16px 6px;
  background: #fffdf6;
  border-left: 2px dashed rgba(168, 50, 43, 0.45);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 14px -10px rgba(70, 48, 12, 0.5);
  /* ticket notches */
  -webkit-mask: radial-gradient(9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  color: var(--ink);
}
.stub .cap {
  position: relative;
  margin: 0 0 8px;
  padding-left: 40px;
}
.stub .cap + .cap { padding-top: 8px; border-top: 1px dashed var(--line); }
.cap-num {
  position: absolute;
  left: 4px;
  top: 2px;
  font: 600 1.9rem/1 var(--hand);
  color: var(--red);
}
.stub .cap + .cap .cap-num { top: 10px; }
.stub .cap-year { display: inline; margin-right: 8px; font-size: 1.6rem; }

/* X: his 60th, ten years ago, gets a spread of its own */
.row-X { padding: 22px 0 6px; }
.row-X .print { width: 100%; transform: rotate(-2deg); padding: 10px; }
.row-X .cap { margin-top: 18px; text-align: center; font-size: 1.1875rem; }
.cap-note {
  display: block;
  margin-top: 6px;
  font-family: var(--hand);
  font-size: 1.8rem;
  line-height: 1.1;
  color: var(--red);
}
.tag-60 {
  position: absolute;
  top: 0;
  right: -2px;
  z-index: 3;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--red);
  color: #fffaf0;
  font: 600 2.7rem/88px var(--hand);
  text-align: center;
  transform: rotate(12deg);
  box-shadow: 0 0 0 4px rgba(255, 253, 248, 0.9), 0 10px 18px -6px rgba(0, 0, 0, 0.45);
}

/* ----- the papers, decade by decade ----- */

/* the old black-page albums: white ink and white corners */
.page.paper-black {
  background-color: #1d1a17;
  background-image: var(--noise-light);
  color: #efe4cc;
  --corner: rgba(240, 233, 216, 0.95);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3), 0 22px 34px -20px rgba(20, 14, 6, 0.7);
}
.paper-black::before { background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
.paper-black .page-title { color: #f6efdf; }
.paper-black .page-years,
.paper-black .cap-year,
.paper-black .cap-num { color: #f4b9a2; }
.paper-black .page-no { color: rgba(239, 228, 204, 0.7); }
.paper-black .print { background: #f3eee2; box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.85); }
.paper-black .row > .cap .cap-text {
  font-family: var(--hand);
  font-size: 1.6rem;
  line-height: 1.12;
  color: #efe4cc;
}
.paper-black .stub { background: #2a2622; color: #efe4cc; }
.paper-black .stub .cap + .cap { border-top-color: rgba(239, 228, 204, 0.25); }

/* the 1990s magnetic album: faint ridges under a glossy film */
.page.paper-magnetic {
  background-color: #f4ecd8;
  background-image:
    repeating-linear-gradient(180deg, rgba(140, 110, 50, 0.08) 0 1px, rgba(0, 0, 0, 0) 1px 6px),
    var(--noise);
}
.paper-magnetic::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0.26) 34%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.14) 80%, rgba(255, 255, 255, 0) 90%);
  box-shadow: inset 0 0 0 1px rgba(120, 100, 60, 0.12);
  pointer-events: none;
}
.paper-magnetic .print { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 3px 6px -3px rgba(0, 0, 0, 0.25); }

/* kraft scrapbook paper */
.page.paper-kraft {
  background-color: #cdb08a;
  background-image: var(--noise), radial-gradient(120% 80% at 30% 20%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 70%);
}
.paper-kraft .page-no { color: #3d3426; }
.paper-kraft .page-years,
.paper-kraft .cap-year { color: #7e2019; }

.page-end {
  display: grid;
  place-items: center;
  min-height: 220px;
}
.album-end {
  margin: 0;
  padding: 0 20px;
  text-align: center;
  font-family: var(--hand);
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  line-height: 1.15;
  color: var(--muted);
  text-wrap: balance;
}

@media (min-width: 700px) {
  .album-pages { padding: 34px 24px 0; gap: 44px; }
  .page { padding: 40px 40px 48px; }
  .print { padding: 9px; }
  .rows { gap: 48px; }
}

/* settle onto the page as they scroll in */
@media (prefers-reduced-motion: no-preference) {
  html.js .row {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.9s var(--ease);
  }
  html.js .row.is-in { opacity: 1; transform: none; }
}

/* ---------- The back pocket: the letterpress invitation card ---------- */

.pocket {
  --pocket-h: 128px;
  --peek: 190px;
  padding: 56px 12px 60px;
}

.pocket-note {
  margin: 0 0 14px;
  text-align: center;
  font-family: var(--hand);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--red);
}
.pocket-note::after { content: " ↓"; }

.pocket-stage {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  padding: 26px 12px 0;
  transition: height 1.15s var(--ease);
}
.pocket-back {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--pocket-h) + 56px);
  border-radius: 14px 14px 8px 8px;
  background-color: #a98258;
  background-image: var(--noise), linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 30%);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}
.pocket-front {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: var(--pocket-h);
  border-radius: 0 0 8px 8px;
  background-color: var(--kraft);
  background-image: var(--noise), linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.06));
  box-shadow: 0 -6px 14px -6px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 18px 30px -18px rgba(60, 40, 10, 0.6);
  /* the thumb notch */
  -webkit-mask: radial-gradient(66px 36px at 50% 0, transparent 98%, #000 100%);
  mask: radial-gradient(66px 36px at 50% 0, transparent 98%, #000 100%);
}
.pocket-front::after {
  content: "";
  position: absolute;
  inset: 10px 12px 12px;
  border: 1.5px dashed rgba(90, 62, 26, 0.5);
  border-radius: 3px;
  -webkit-mask: radial-gradient(72px 40px at 50% -10px, transparent 98%, #000 100%);
  mask: radial-gradient(72px 40px at 50% -10px, transparent 98%, #000 100%);
}
.pocket.is-folded .pocket-stage,
.pocket.is-opening .pocket-stage { clip-path: inset(-400px -80px 0 -80px); }
.pocket.is-folded .pocket-stage { height: calc(26px + var(--peek) + var(--pocket-h)); }
.pocket.is-folded .card { transform: translateY(24px); }
.pocket.is-rising .card { transform: translateY(-110px); transition: transform 0.8s cubic-bezier(0.3, 0.7, 0.3, 1); }
.pocket-note { transition: opacity 0.4s ease; }
.pocket.is-rising .pocket-note { opacity: 0; }

.card {
  position: relative;
  z-index: 1;
  padding: 40px 22px calc(var(--pocket-h) + 22px);
  border-radius: 0 0 3px 3px;
  background-color: var(--card);
  background-image: var(--noise), var(--noise);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 20px 36px -16px rgba(0, 0, 0, 0.5);
  transition: transform 1.15s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 12px 10px calc(var(--pocket-h) - 20px);
  border: 1px solid rgba(168, 50, 43, 0.55);
  box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px rgba(168, 50, 43, 0.3);
  pointer-events: none;
}
/* a deckled top edge, like handmade cotton card */
.card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -7px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='8'%3E%3Cpath fill='%23fcf8ef' d='M0 8V4.6c2-.9 3.4.6 5.6-.5 2-1 3.7.8 5.9-.2 2.4-1.1 3.7-.9 5.6.3 2 1.2 3.6-.8 5.8-.6 2.4.2 3.2 1.6 5.4.7 2.2-.9 3.8-1.4 5.8-.2 1.8 1 3.4.5 5.2-.4 1.6-.8 2.9-.3 4.7.6V8z'/%3E%3C/svg%3E") 0 0 / 46px 8px repeat-x;
}
.card > * { position: relative; }

.card-kicker {
  margin: 0;
  color: var(--red);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.card-title {
  margin: 2px 0 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.8rem, 13vw, 3.8rem);
  line-height: 1;
  color: #1d2c4e;
}
/* letterpress: the ink sits a little below the surface of the card */
.card-title,
.card-big,
.card-label,
.card-kicker { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 -1px 0 rgba(22, 33, 59, 0.18); }
.card-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px auto 6px;
  max-width: 260px;
  color: var(--red);
}
.card-rule::before,
.card-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.card-block {
  padding: 22px 0 20px;
  border-top: 1px solid rgba(168, 50, 43, 0.22);
}
.card-rule svg { flex: none; width: 16px; height: 16px; fill: currentColor; }
.card-rule + .card-block { border-top: 0; }
.card-label {
  margin: 0 0 6px;
  color: var(--red);
  font-family: var(--body);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.card-big {
  margin: 0 0 2px;
  font-family: var(--display);
  font-weight: 800; /* the page loads Fraunces in 800 only */
  font-size: 1.55rem;
  line-height: 1.2;
  letter-spacing: 0;
  color: #1d2c4e;
}
.card-block > p { margin-bottom: 6px; }
.card-block > .btn { margin-top: 12px; }
.card-note {
  margin: 16px 0 0 !important;
  padding: 12px 14px;
  border-radius: 4px;
  background: rgba(241, 223, 158, 0.5);
  font-size: 1.0625rem;
  text-align: left;
}

/* the fold-out list of guest houses */
.foldout {
  margin: 16px 0 0;
  text-align: left;
}
.foldout summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 12px 14px;
  border: 1px solid #b9a77f;
  border-radius: 4px;
  background: #f6eedb;
  box-shadow: 0 3px 0 -1px #ebe0c6, 0 6px 0 -2px #e0d3b6;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.foldout summary::-webkit-details-marker { display: none; }
.foldout[open] summary { box-shadow: none; border-radius: 4px 4px 0 0; }
.fold-icon {
  flex: none;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fold-text { flex: 1; }
.fold-chev {
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.25s ease;
}
.foldout[open] .fold-chev { transform: rotate(225deg) translateY(-3px); }

.fold-body {
  padding: 0;
  border: 1px solid #b9a77f;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  background: #fffdf6;
  perspective: 900px;
}
.fold-intro {
  margin: 0 !important;
  padding: 12px 14px 4px;
  font-style: italic;
  color: var(--muted);
}
.stays {
  list-style: none;
  margin: 0;
  padding: 0;
}
.stay {
  padding: 14px 14px 16px;
  border-top: 1px dashed var(--line);
  transform-origin: 50% 0;
}
.stay:first-child { border-top: 0; }
.stay:nth-child(even) { background-image: linear-gradient(180deg, rgba(90, 60, 20, 0.05), rgba(90, 60, 20, 0) 40%); }
.stay h4 {
  margin: 0 0 4px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
}
.stay p { margin: 0; font-size: 1.0625rem; }
.stay .btn-row { justify-content: flex-start; margin-top: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .foldout[open] .stay { animation: unfold 0.55s var(--ease) both; }
  .foldout[open] .stay:nth-child(2) { animation-delay: 0.08s; }
  .foldout[open] .stay:nth-child(3) { animation-delay: 0.16s; }
  .foldout[open] .stay:nth-child(4) { animation-delay: 0.24s; }
  .foldout[open] .stay:nth-child(5) { animation-delay: 0.32s; }
}
@keyframes unfold {
  from { opacity: 0; transform: rotateX(-80deg); }
  to { opacity: 1; transform: none; }
}

/* ---------- Book pages: guestbook and your page ---------- */

.guestbook,
.yourpage { padding: 20px 10px 44px; }

.book-page {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 20px 30px;
  border-radius: 2px;
  background-color: #fbf6ea;
  background-image: linear-gradient(90deg, rgba(90, 60, 20, 0.08), rgba(90, 60, 20, 0) 22px), var(--noise);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 3px rgba(80, 60, 20, 0.12), 0 24px 36px -22px rgba(80, 60, 20, 0.5);
}
.book-page > .section-title,
.book-page > .lede,
.book-page > .kicker { text-align: center; }
.book-page > .page-no {
  position: absolute;
  top: 10px;
  right: 16px;
  margin: 0;
  font-family: var(--hand);
  font-size: 1.45rem;
  color: var(--muted);
}
.gb-lede { text-align: center; }
.book-page.is-thanked .gb-lede { display: none; }
.book-page.is-thunk { animation: jolt 0.3s ease; }
@keyframes jolt {
  0%, 100% { transform: none; }
  30% { transform: translate(1px, 2px); }
  60% { transform: translate(-1px, -1px); }
}

.gb-form { margin-top: 24px; }

.field {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  min-width: 0;
}
.field-label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.35;
}
.optional { font-weight: 400; color: var(--muted); }
.hint { margin: -4px 0 8px; color: var(--muted); font-size: 1.0625rem; }

.signline {
  display: block;
  width: 100%;
  min-height: 62px;
  padding: 6px 6px 2px;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 59px, rgba(70, 100, 170, 0.2) 59px 60px);
  color: var(--ink);
  font-family: var(--hand);
  font-size: clamp(1.6rem, 7vw, 2.1rem);
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
}
.signline::placeholder { color: rgba(27, 42, 74, 0.68); }
.signline:focus { outline: none; border-bottom-color: var(--red); background-color: rgba(241, 223, 158, 0.3); }
.signline:focus-visible { box-shadow: 0 2px 0 var(--red); }

.boxed {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  border: 2px solid #8a7650;
  border-radius: 6px;
  background: #fffdf8;
  color: var(--ink);
  font: inherit;
  font-size: 1.125rem;
  -webkit-appearance: none;
  appearance: none;
}
.boxed:focus { outline: 3px solid var(--red); outline-offset: 2px; border-color: var(--ink); }

/* yes / no: two rubber stamps lying on the page. The chosen one leaves its ink behind. */
.stamps { display: grid; gap: 14px; }
.stamps legend { margin-bottom: 10px; }
.stamp {
  position: relative;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.stamp input,
.chip input {
  position: absolute;
  top: 50%;
  left: 18px;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.stamp-face {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 10px 18px 10px 8px;
  border: 2px solid rgba(27, 42, 74, 0.7);
  border-radius: 10px;
  background: linear-gradient(180deg, #fffdf8, #f5ecd8);
  color: var(--ink);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.25;
  box-shadow: 0 3px 0 rgba(27, 42, 74, 0.28), 0 10px 16px -10px rgba(70, 48, 12, 0.55);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.3s ease 0.08s, visibility 0s linear 0.38s;
}
.stamp:hover .stamp-face { border-color: var(--ink); }
.stamp-handle { flex: none; width: 46px; height: 54px; margin-left: 6px; }
.stamp-handle .knob { fill: #8a5a2e; }
.stamp-handle .ferrule { fill: #c8a24c; }
.stamp-handle .block { fill: #a7743f; }
.stamp-handle .rubber { fill: var(--red); }
.stamp-no .stamp-handle .rubber { fill: var(--ink); }
.stamp-text { flex: 1; }
.stamp.is-pressing .stamp-face { animation: press 0.16s ease; }
@keyframes press {
  50% { transform: translateY(3px) scale(0.97); box-shadow: 0 0 0 rgba(27, 42, 74, 0.28), 0 4px 8px -6px rgba(70, 48, 12, 0.5); }
}
.stamp input:checked + .stamp-face { opacity: 0; visibility: hidden; }
.stamp input:focus-visible + .stamp-face,
.stamp input:focus-visible ~ .stamp-ink { outline: 3px solid var(--red); outline-offset: 4px; }

.stamp-ink,
.gb-entry-stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 4px 18px;
  border: 4px double currentColor;
  border-radius: 9px;
  color: var(--red);
  text-transform: uppercase;
  -webkit-mask-image: var(--noise-mask);
  mask-image: var(--noise-mask);
}
.stamp-ink {
  position: absolute;
  inset: 2px 5%;
  opacity: 0;
  transform: rotate(-4deg);
  pointer-events: none;
}
.stamp-ink b,
.gb-entry-stamp b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.3rem;
  line-height: 1;
  letter-spacing: 0.04em;
}
.stamp-ink small,
.gb-entry-stamp small {
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.15;
  letter-spacing: 0.12em;
}
.stamp-no .stamp-ink,
.gb-entry-stamp.is-no { color: var(--ink); }
.stamp input:checked ~ .stamp-ink { opacity: 0.9; }
@media (prefers-reduced-motion: no-preference) {
  .stamp input:checked ~ .stamp-ink { animation: thunk 0.42s cubic-bezier(0.3, 1.4, 0.5, 1) 0.12s both; }
}
@keyframes thunk {
  0% { opacity: 0; transform: rotate(-12deg) scale(1.6); }
  55% { opacity: 0.95; transform: rotate(-3deg) scale(0.95); }
  100% { opacity: 0.9; transform: rotate(-4deg) scale(1); }
}

/* guests stepper */
.stepper {
  display: flex;
  align-items: center;
  gap: 20px;
}
.stepper button {
  width: 60px;
  height: 60px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fffdf8;
  color: var(--ink);
  font: 600 2rem/1 var(--body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.stepper button:hover:not(:disabled) { background: rgba(27, 42, 74, 0.07); }
.stepper button:disabled { opacity: 0.32; cursor: default; }
.stepper output {
  min-width: 2ch;
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.8rem;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* camping chips: the tick has its room from the start, so nothing jumps */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; cursor: pointer; }
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  padding: 8px 20px 8px 16px;
  border: 2px solid rgba(27, 42, 74, 0.7);
  border-radius: 999px;
  background: #fffdf8;
  color: var(--ink);
  font-weight: 600;
  font-size: 1.125rem;
}
/* the tick is drawn, not a font glyph: a ✓ character would pull in a whole extra font file */
.chip span::before {
  content: "";
  flex: none;
  width: 0.34em;
  height: 0.66em;
  margin: -0.2em 12px 0 2px;
  border: solid currentColor;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(42deg);
  visibility: hidden;
}
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fffaf0; }
.chip input:checked + span::before { visibility: visible; }
.chip input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 3px; }

.error {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 6px;
  background: #fbe4df;
  color: #9a231c;
  font-weight: 600;
}
/* app.js puts the RSVP message right under the question it is about */
.gb-form > .field + .error { margin: -10px 0 22px; }

/* the thanks: a real guestbook entry */
.gb-thanks {
  margin-top: 18px;
  text-align: center;
}
.gb-thanks:focus { outline: none; }
.gb-entry { margin: 0 0 22px; text-align: left; }
.gb-entry-name {
  margin: 0;
  padding: 0 6px 2px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--hand);
  font-size: clamp(1.8rem, 8vw, 2.3rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.gb-entry-stamp {
  display: inline-flex;
  margin: 18px 0 0 10px;
  opacity: 0.9;
  transform: rotate(-5deg);
}
.gb-entry-note {
  margin: 8px 0 0 14px;
  font-family: var(--hand);
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--ink-soft);
}
.gb-entry-note:empty { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .gb-thanks:not([hidden]) .gb-entry-stamp,
  .gb-thanks:not([hidden]) .thanks-stamp { animation: thunk-5 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) 0.15s both; }
}
@keyframes thunk-5 {
  0% { opacity: 0; transform: rotate(-14deg) scale(1.7); }
  55% { opacity: 0.95; transform: rotate(-4deg) scale(0.95); }
  100% { opacity: 0.9; transform: rotate(-5deg) scale(1); }
}
.thanks-stamp {
  display: inline-block;
  margin: 8px 0 18px;
  padding: 4px 22px 2px;
  border: 4px double var(--red);
  border-radius: 10px;
  color: var(--red);
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: rotate(-5deg);
  opacity: 0.9;
  -webkit-mask-image: var(--noise-mask);
  mask-image: var(--noise-mask);
}
.thanks-stamp[hidden] { display: none; }
.thanks-title {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: 0;
}
.thanks-text { font-size: 1.1875rem; }
.gb-thanks .btn-row .btn { flex: 1 1 220px; }

.gb-phase { margin-top: 18px; text-align: center; }
/* on the day: Sanet's number on one line, on a button of its own */
.gb-phase .btn-row > a[href^="tel:"] { flex-basis: 100%; }
.gb-phase .card-note { text-align: left; }

/* ---------- Your page ---------- */

.prompts {
  display: grid;
  gap: 14px;
  margin: 20px 0 8px;
  padding: 0;
  list-style: none;
  counter-reset: prompt;
}
.prompts li {
  position: relative;
  padding: 14px 16px 14px 62px;
  counter-increment: prompt;
  background: #fbf1c6;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 10px 16px -10px rgba(70, 48, 12, 0.45);
  transform: rotate(-0.8deg);
}
.prompts li:nth-child(2) { background: #f9dcd6; transform: rotate(0.7deg); }
.prompts li:nth-child(3) { background: #d9ecdf; transform: rotate(-0.4deg); }
.prompts li::before {
  content: counter(prompt);
  position: absolute;
  left: 18px;
  top: 6px;
  font-family: var(--hand);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--red);
}
.prompt-main { display: block; font-weight: 600; font-size: 1.1875rem; line-height: 1.3; }
.prompt-sub { display: block; margin-top: 2px; font-size: 1.0625rem; }

.deadline {
  margin: 22px 0 18px;
  text-align: center;
  font-size: 1.1875rem;
}
.deadline strong { background: linear-gradient(transparent 58%, rgba(241, 223, 158, 0.95) 58%); padding: 0 2px; }

.btn-xl {
  width: 100%;
  min-height: 74px;
  font-size: 1.2rem;
  border-radius: 12px;
}
.rec-dot {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.25);
}
@media (prefers-reduced-motion: no-preference) {
  .rec-dot { animation: pulse 1.8s ease-in-out infinite; }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28); }
  50% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.08); }
}

.or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 22px;
  color: var(--muted);
  font-style: italic;
  font-size: 1.0625rem;
  text-align: center;
}
.or::before,
.or::after {
  content: "";
  flex: 1 1 20px;
  height: 1px;
  background: var(--line);
}

.slot {
  position: relative;
  padding: 28px 18px 22px;
  border: 2px dashed rgba(27, 42, 74, 0.4);
  background: rgba(255, 255, 255, 0.55);
}
.slot-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--corner) 50%, rgba(0, 0, 0, 0) 50%);
}
.slot-corner.tl { left: -4px; top: -4px; }
.slot-corner.tr { right: -4px; top: -4px; transform: rotate(90deg); }
.slot-corner.br { right: -4px; bottom: -4px; transform: rotate(180deg); }
.slot-corner.bl { left: -4px; bottom: -4px; transform: rotate(270deg); }
.slot .field { margin-bottom: 16px; }
.slot [data-ben70="upload-list"] { margin-top: 16px; }
.slot [data-ben70="upload-list"]:empty { display: none; }
.slot .error { margin-top: 14px; }

.up-thanks {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 6px;
  background: #e3efe5;
  color: #1f4a30;
}
.up-thanks .thanks-title { font-size: 1.4rem; color: #1f4a30; }
.up-thanks p { margin: 0; }

.privacy {
  position: relative;
  margin: 20px 0 0;
  padding-left: 34px;
  color: var(--muted);
  font-size: 1.0625rem;
}
.privacy::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 16px;
  height: 12px;
  border: 2px solid var(--muted);
  border-radius: 2px;
}
.privacy::after {
  content: "";
  position: absolute;
  left: 7px;
  top: -2px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--muted);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

/* engine upload rows, as little prints */
.b70-upload {
  border-radius: 3px;
  box-shadow: 0 6px 12px -8px rgba(70, 48, 12, 0.5);
}

/* ---------- Back cover ---------- */

.back-cover {
  margin-top: 30px;
  padding: 60px 20px calc(60px + env(safe-area-inset-bottom));
  background-color: var(--cover);
  background-image: radial-gradient(120% 80% at 50% 0%, rgba(58, 80, 132, 0.55), rgba(15, 23, 43, 0) 72%), var(--linen);
  color: var(--cream);
  text-align: center;
}
.signoff {
  margin: 0 0 12px;
  font-family: var(--hand);
  font-size: clamp(2.2rem, 10vw, 2.7rem);
  line-height: 1.05;
}
.back-cover .credit { color: rgba(246, 239, 223, 0.85); }
.credit .note { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.14em; }
.footer-q { margin: 14px 0 0; font-size: 1.0625rem; color: rgba(246, 239, 223, 0.85); }
.footer-q a {
  display: inline-block;
  padding: 10px 2px;
  color: var(--cream);
  font-weight: 600;
  text-underline-offset: 4px;
}

/* ---------- Lightbox ---------- */

html.lb-open,
html.lb-open body { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: #0b101e;
  background-image: radial-gradient(100% 70% at 50% 40%, rgba(45, 63, 102, 0.6), rgba(11, 16, 30, 0) 75%);
  color: var(--cream);
}
.lightbox[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox:not([hidden]) { animation: lb-in 0.3s ease both; }
  .lightbox:not([hidden]) .lb-print { animation: lb-print 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-print { from { opacity: 0; transform: rotate(-4deg) scale(0.9); } to { opacity: 1; transform: rotate(-1deg); } }

.lb-dialog {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  padding-top: max(env(safe-area-inset-top), var(--b70-preview-bar, 0px));
}
.lb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 0 18px;
}
.lb-count {
  margin: 0;
  color: rgba(246, 239, 223, 0.85);
  font-size: 1.0625rem;
}
.lb-close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 52px;
  padding: 0 14px 0 18px;
  border: 2px solid rgba(246, 239, 223, 0.65);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--cream);
  font: 600 1.0625rem/1 var(--body);
  cursor: pointer;
}
.lb-close svg,
.lb-foot svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lb-close:focus-visible,
.lb-foot button:focus-visible { outline: 3px solid #f3d9a2; outline-offset: 3px; }

.lb-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin: 0;
  padding: 16px 14px 10px;
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}
.lb-print {
  position: relative;
  padding: 8px;
  background-color: #fffdf8;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  transform: rotate(-1deg);
}
.lb-img {
  display: block;
  background: #3a4566 center / cover no-repeat;
  object-fit: contain;
}
/* previous | year and caption | next, in one row so nothing sits on the words */
.lb-foot {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 4px 12px 18px;
}
.lb-cap {
  margin: 0;
  text-align: center;
}
.lb-year {
  display: block;
  font-family: var(--hand);
  font-size: 2.2rem;
  line-height: 1;
  color: #f3d9a2;
}
.lb-caption {
  display: block;
  margin-top: 4px;
  font-size: 1.125rem;
  line-height: 1.4;
}
.lb-caption:empty { display: none; }
.lb-foot button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 2px solid rgba(246, 239, 223, 0.65);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--cream);
  cursor: pointer;
}
.lb-foot button:hover,
.lb-close:hover { background: rgba(255, 255, 255, 0.14); }

/* ---------- Confetti ---------- */

.confetti {
  position: fixed;
  inset: 0;
  z-index: 90;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
}
.confetti.is-on { display: block; }

/* ---------- Wider screens ---------- */

@media (min-width: 900px) {
  body { font-size: 1.1875rem; }
  /* the 70 fills the cover and the label is pasted on its lower corner */
  .cover {
    display: block;
    padding: 0;
  }
  .cover-figure {
    position: absolute;
    top: calc(7vh + var(--b70-preview-bar, 0px));
    bottom: 13vh;
    left: 6vw;
    right: calc(2.5vw + 390px);
    margin: 0;
  }
  .cover-caption {
    position: absolute;
    left: 6vw;
    right: calc(3vw + 400px);
    bottom: 5vh;
    margin: 0;
    max-width: none;
  }
  .label-wrap {
    position: absolute;
    right: 2.5vw;
    bottom: 5vh;
    width: 370px;
    max-width: 370px;
    margin: 0;
    transform: rotate(-2deg);
  }
  .front-title { font-size: 2.8rem; }
  .book-page { padding: 48px 48px 40px; }
  .card { padding-left: 56px; padding-right: 56px; }
  .guestbook,
  .yourpage { padding-left: 24px; padding-right: 24px; }
}

@media (min-width: 1100px) {
  /* room for the label to overlap the corner of the 0, like a label pasted on the cover */
  .cover-figure { right: calc(3vw + 320px); }

  .album-pages {
    grid-template-columns: 1fr 1fr;
    gap: 48px 0;
    max-width: 1220px;
    padding: 44px 32px 0;
  }
  .album-pages > .page { padding: 46px 40px 52px; }
  .album-pages > .page:nth-child(odd) { border-radius: 4px 0 0 4px; }
  .album-pages > .page:nth-child(even) { border-radius: 0 4px 4px 0; }
  .album-pages > .page:nth-child(odd)::before {
    left: auto;
    right: 0;
    width: 40px;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.08) 12px, rgba(0, 0, 0, 0) 40px);
  }
  .album-pages > .page:nth-child(even)::before {
    width: 40px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.08) 12px, rgba(0, 0, 0, 0) 40px);
  }
  .rows { gap: 44px; }

  .spread {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1220px;
    margin: 0 auto;
    padding: 20px 32px 50px;
  }
  .spread .guestbook,
  .spread .yourpage { padding: 0; }
  .spread .book-page { max-width: none; height: 100%; padding: 52px 44px 44px; }
  .spread .guestbook .book-page { border-radius: 4px 0 0 4px; background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.05) 12px, rgba(0, 0, 0, 0) 40px), var(--noise); }
  .spread .yourpage .book-page { border-radius: 0 4px 4px 0; background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.05) 12px, rgba(0, 0, 0, 0) 40px), var(--noise); }
}

@media (min-width: 900px) and (max-height: 640px) {
  .cover-figure { top: calc(4vh + var(--b70-preview-bar, 0px)); bottom: 11vh; }
}

@media (max-width: 419px) {
  .paper-black .row > .cap .cap-text { font-size: 1.45rem; }
}
/* small phones: give the 70 the room */
@media (max-width: 379px) {
  .hero-row { gap: 6px; }
  .hero-link { padding: 0 2px; }
  .hero-row .music-pill { padding: 0 14px 0 11px; }
  .btn-open { padding: 14px 16px; font-size: 1.2rem; }
  .btn-open svg { display: none; }
  .stamp-ink b { font-size: 2rem; }
  .stamp-ink small { font-size: 0.95rem; letter-spacing: 0.08em; }
}
@media (max-height: 700px) and (max-width: 599px) {
  .face { padding: 20px 18px 16px; }
  .front-title { font-size: 2.2rem; }
  .front-when { margin: 8px 0 14px; }
  .hero-title { font-size: 2rem; }
  .hero-actions { margin-top: 12px; }
  .cover-caption { font-size: 1.45rem; margin-bottom: 10px; }
}

/* A phone turned sideways (or any short, wide window): the 70 on the left, the label beside it, so
   "Open your invitation" (and after the tap the date, the RSVP button and Music) are on the first
   screen. Also replaces the wide layout below 540px high, where the pasted-on label would be cut off. */
@media (orientation: landscape) and (max-height: 540px) and (min-width: 560px) {
  .cover {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(47vw, 390px);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: 18px;
    padding:
      calc(10px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
      calc(10px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  }
  .cover-figure { position: relative; inset: auto; grid-column: 1; grid-row: 1; min-height: 120px; margin: 0; }
  .cover-caption { position: relative; inset: auto; grid-column: 1; grid-row: 2; margin: 4px auto 0; max-width: 21em; font-size: 1.35rem; }
  .label-wrap { position: relative; inset: auto; grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 100%; max-width: 390px; margin: 0; transform: none; }
  .greeting { font-size: 1.5rem; padding: 4px 16px 6px; }
  .face { padding: 18px 18px 14px; }
  .face .kicker { margin-bottom: 2px; }
  .front-title { font-size: 2.3rem; }
  .front-when { margin: 6px 0 12px; }
  .front-when .dot { display: none; }
  .front-when .nowrap { display: block; }
  .btn-open { min-height: 56px; }
  .front-note { margin-top: 8px; }
  .hero-title { margin-bottom: 6px; font-size: 1.9rem; }
  .hero-when .when-date { white-space: nowrap; }
  .hero-when .when-time { display: inline; }
  .hero-when .when-time::before { content: " · "; }
  .hero-actions { margin-top: 10px; }
  .hero-row { margin-top: 4px; }
  .hero-credit { display: none; }
}

/* The lightbox sideways: the photo takes the left, its words and buttons sit on the right. */
@media (orientation: landscape) and (max-height: 540px) and (min-width: 560px) {
  .lb-dialog {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 36%);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .lb-bar { grid-column: 2; grid-row: 1; padding: 10px 14px 0 4px; }
  .lb-figure { grid-column: 1; grid-row: 1 / span 2; padding: 12px 8px 12px 16px; }
  .lb-foot {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: 56px minmax(0, 1fr) 56px;
    grid-template-rows: auto auto;
    align-content: center;
    row-gap: 14px;
    padding: 6px 14px 14px 4px;
  }
  .lb-cap { grid-column: 1 / -1; grid-row: 1; }
  .lb-prev { grid-column: 1; grid-row: 2; }
  .lb-next { grid-column: 3; grid-row: 2; }
  .lb-year { font-size: 1.9rem; }
}