/*
 * Celebrate: card and cord. The site's own layer on the direction's system
 * (assets/system, copied unchanged from the hub). Shippo, rose ink, Cormorant
 * italic for display (28 px and over, weight 600 only). Every state is a class
 * or an attribute; nothing here is ever written as a style attribute.
 *
 * Site-local overrides of shared parts (named in the report):
 *  - the first frame after any family hand-over paints Celebrate's tint;
 *  - a quiet line or link inside a rose band takes the band's own text colour.
 */

/* ------------------------------------------------------------ Overrides -- */
html[data-arrived-from-hub]:root { --arrive-tint: var(--tint-celebrate); }
.band .quiet-line, .band .c-quiet { color: inherit; opacity: .94; }
.c-display, .c-page h2.c-display {
  font-family: var(--face-celebrate);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.02;
}

/* ------------------------------------------------------------- Header -- */
.c-brand { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.c-area-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4) 0 var(--s-3);
  background: var(--ink-celebrate);
  color: var(--band-text);
  font-family: var(--face-celebrate);
  font-style: italic;
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1;
  text-decoration: none;
  border-radius: 2px var(--radius-tag) var(--radius-tag) 2px;
  box-shadow: 0 6px 14px -10px var(--shadow-ink);
  transition: transform var(--t-lift) var(--ease-paper);
}
.c-area-tag span { padding-bottom: 3px; }
.c-knot { width: 30px; height: 22px; flex: none; }
.c-area-tag:hover { transform: translateY(-2px); }
.c-area-tag:active { transform: scale(.985); }
@media (max-width: 879px) { .c-area-tag { display: none; } }

/* ------------------------------------------------------------- Frames -- */
.c-page { width: min(100% - 2 * var(--gutter), 86rem); margin: var(--s-3) auto 0; }
.c-front { width: min(100% - 2 * var(--gutter), var(--sheet-max)); }
.c-section { margin-top: var(--s-8); }
.c-section-head { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); max-width: 46rem; }
.c-section-head h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.c-section-head p { color: var(--ink-2); font-size: var(--text-l); line-height: 1.4; max-width: 44ch; }
.c-lede { font-size: clamp(1.0625rem, 1rem + .35vw, 1.3rem); line-height: 1.45; max-width: 46ch; }
.c-price-lines { display: grid; gap: 2px; margin-top: var(--s-3); }
.c-price-lines .quiet-line { margin: 0; }
.c-fourteen { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-s); color: var(--ink-2); text-decoration-color: currentColor; }
.band .c-fourteen { color: inherit; }
.c-scope-label { display: inline-block; font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
.c-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.c-ticks li { position: relative; padding-left: 1.6rem; }
.c-ticks li::before { content: ""; position: absolute; left: .1rem; top: .5em; width: .75rem; height: .42rem; border-left: 2px solid var(--area); border-bottom: 2px solid var(--area); transform: rotate(-45deg); }
.c-sheet-gap { margin-top: var(--s-5); }

/* ------------------------------------------- The tented card (a stand-up) -- */
.tent {
  position: relative;
  background: var(--sheet-raised);
  border-radius: 2px;
  box-shadow: 0 1px 0 var(--hairline), 0 34px 40px -34px var(--shadow-ink);
}
/* The ridge: the card's back half, seen as a narrow slope above its fold. */
.tent::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -11px;
  height: 11px;
  background: linear-gradient(180deg, var(--sheet-shade), color-mix(in srgb, var(--sheet-raised) 70%, var(--sheet-shade)));
  clip-path: polygon(1.2% 100%, 2.6% 0, 97.4% 0, 98.8% 100%);
  pointer-events: none;
}
/* Its shadow, cast back on the table. */
.tent::after {
  content: "";
  position: absolute;
  left: 6%;
  right: -4%;
  bottom: -14px;
  height: 22px;
  z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 46% 30%, var(--shadow-ink), transparent 72%);
  pointer-events: none;
}
.tent-crease { display: block; height: 0; border-top: 1px dashed var(--crease); margin: 0 var(--s-5); }

/* =================================================================== FRONT */
/* Before the doors open: the hall, the band on a tented card, the place cards. */
.hall { position: relative; margin-top: var(--s-2); }
.hall-card { position: relative; z-index: 3; }
.hall-card > .band { padding-block: .7rem .75rem; }
.hall-card > .band .band-name { font-size: 2.25rem; }
.hall-card-body { display: grid; gap: var(--s-4); padding: var(--s-5) clamp(1.25rem, .9rem + 1.4vw, 2.25rem) var(--s-5); }
.hall-card h1 {
  font-family: var(--face-celebrate);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.875rem, 1.25rem + 1.6vw, 2.875rem);
  line-height: 1.04;
  letter-spacing: -.01em;
}
.c-prices { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.c-prices li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px dashed var(--crease); }
.c-prices li:last-child { border-bottom: 1px dashed var(--crease); }
.c-prices .price { font-weight: 650; font-size: var(--text-body); white-space: nowrap; }
.c-prices .suggested { color: var(--ink-2); }
.c-prices .c-what { flex-basis: 100%; font-size: var(--text-s); color: var(--ink-2); }
.hall-call { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.hall-photo { position: relative; overflow: hidden; border-radius: var(--radius-paper); background: var(--sheet-shade); box-shadow: 0 1px 0 var(--hairline), 0 28px 50px -36px var(--shadow-ink); }
.hall-photo img { width: 100%; object-fit: cover; }
.hall-caption { text-align: right; }

/* The place cards: one per package, standing on the table's edge. */
.places-wrap { position: relative; z-index: 2; }
.places { list-style: none; margin: 0; padding: 0; perspective: 900px; }
.place {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 4px;
  min-height: 8.25rem;
  padding: 1.1rem .7rem .9rem;
  background: linear-gradient(180deg, var(--sheet-raised), color-mix(in srgb, var(--sheet-raised) 82%, var(--sheet-shade)));
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  border-radius: 2px;
  box-shadow: 0 1px 0 var(--hairline), 0 1px 3px var(--shadow-ink-soft);
  transform-origin: 50% 100%;
  -webkit-user-drag: none;
  transition: translate var(--t-lift) var(--ease-paper);
}
.place::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
  background: linear-gradient(180deg, var(--sheet-shade), color-mix(in srgb, var(--sheet-raised) 70%, var(--sheet-shade)));
  clip-path: polygon(2% 100%, 5% 0, 95% 0, 98% 100%);
}
.place::after {
  content: "";
  position: absolute;
  left: 10%;
  right: -12%;
  bottom: -10px;
  height: 16px;
  z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 44% 28%, var(--shadow-ink), transparent 72%);
  pointer-events: none;
}
.place-rule { width: 2.25rem; height: 6px; background: var(--area); -webkit-mask: var(--pattern) repeat 0 0 / 10px 10px; mask: var(--pattern) repeat 0 0 / 10px 10px; opacity: .9; }
.place-name { font-family: var(--face-celebrate); font-style: italic; font-weight: 600; font-size: 1.75rem; line-height: .98; color: var(--area); text-wrap: balance; }
.place-line { font-size: var(--text-xs); line-height: 1.35; color: var(--ink-2); max-width: 15ch; }
@media (hover: hover) { .place:hover { translate: 0 -4px; } }
.place:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.place:active { scale: .985; }
@media (prefers-reduced-motion: no-preference) {
  .lt-ready .places li .place { animation: c-stand 360ms var(--ease-paper) both; animation-delay: 200ms; }
  .lt-ready .places li:nth-child(2) .place { animation-delay: 280ms; }
  .lt-ready .places li:nth-child(3) .place { animation-delay: 360ms; }
  .lt-ready .places li:nth-child(4) .place { animation-delay: 440ms; }
  .lt-ready .places li:nth-child(5) .place { animation-delay: 520ms; }
  html[data-arrived-from-hub].lt-ready .places li .place { animation-delay: 420ms; }
  html[data-arrived-from-hub].lt-ready .places li:nth-child(2) .place { animation-delay: 500ms; }
  html[data-arrived-from-hub].lt-ready .places li:nth-child(3) .place { animation-delay: 580ms; }
  html[data-arrived-from-hub].lt-ready .places li:nth-child(4) .place { animation-delay: 660ms; }
  html[data-arrived-from-hub].lt-ready .places li:nth-child(5) .place { animation-delay: 740ms; }
}
@keyframes c-stand { from { transform: rotateX(84deg); } }
@media (prefers-reduced-motion: reduce) { .place { transition: none; } .place:hover, .place:active { translate: none; scale: none; } }
.hall-ledge {
  position: relative;
  height: 2.75rem;
  margin-top: -2.25rem;
  background: linear-gradient(180deg, var(--sheet-raised), var(--sheet-shade));
  border-radius: 0 0 var(--radius-paper) var(--radius-paper);
  box-shadow: 0 -1px 0 var(--hairline), 0 18px 24px -20px var(--shadow-ink);
  z-index: 1;
}
.places-controls { display: none; }

/* Laptop: the card stands at the left of the hall, the place cards along its foot. */
@media (min-width: 1000px) {
  .hall { display: grid; grid-template-columns: minmax(22rem, 30rem) minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .hall-card { grid-column: 1; grid-row: 1 / span 2; align-self: end; margin: 0 -3rem 1.5rem 0; }
  .hall-photo { grid-column: 2; grid-row: 1; }
  .hall-photo img { height: clamp(28rem, 66vh, 42rem); object-position: 50% 62%; }
  .places-wrap { grid-column: 2; grid-row: 2; margin-top: -5.75rem; padding: 0 1.25rem 0 4.25rem; }
  .places { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; }
  .hall-ledge { grid-column: 1 / -1; grid-row: 3; }
  .hall-caption { grid-column: 2; grid-row: 4; }
}
@media (min-width: 1000px) and (max-width: 1239px) { .place-name { font-size: 1.75rem; } .place-line { display: none; } .place { min-height: 7rem; } }
/* Tablet: the card across the top, the hall wide, five cards in a row. */
@media (min-width: 720px) and (max-width: 999px) {
  .hall-card { max-width: 40rem; margin-bottom: var(--s-5); }
  .hall-photo img { aspect-ratio: 16 / 10; object-position: 50% 62%; }
  .places-wrap { margin-top: -5rem; padding-inline: var(--s-4); }
  .places { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; }
  .place-line { display: none; }
  .place { min-height: 7rem; }
}
/* Phone: the band first, the hall as a tall crop, the place cards a row you swipe. */
@media (max-width: 719px) {
  .hall-card { margin: var(--s-3) 0 var(--s-4); }
  .hall-card > .band .band-name { font-size: 2rem; }
  .hall-card-body { gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-4); }
  .hall-call { display: none; }
  .hall-photo img { aspect-ratio: 4 / 5; object-position: 58% 50%; }
  .places-wrap { margin-top: -7.25rem; }
  .places.swipe-track { grid-auto-columns: 9.5rem; gap: .75rem; padding: 10px var(--s-4) 1.75rem; scroll-padding-inline: var(--s-4); }
  .places-controls { display: flex; padding-inline: var(--s-1); }
  .hall-caption { text-align: left; }
}

/* ---------------------------------------- The boxes on the front (doors) -- */
.shelf { display: grid; gap: var(--s-5); align-items: end; }
.shelf-group { display: grid; gap: var(--s-3); align-items: end; }
.shelf-label { font-size: var(--text-s); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
.gb {
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  text-decoration: none;
  -webkit-user-drag: none;
}
.gb-lid {
  position: relative;
  z-index: 1;
  background: var(--sheet-raised);
  border-radius: 3px;
  box-shadow: 0 1px 0 var(--hairline), 0 6px 0 -2px var(--sheet-shade), 0 16px 22px -16px var(--shadow-ink);
  transition: translate var(--t-lift) var(--ease-paper), rotate var(--t-lift) var(--ease-paper);
  transform-origin: 0 100%;
}
.gb-lid .band { margin-inline: -7px; padding-block: .55rem .6rem; }
.gb-lid .band-name { font-size: 1.75rem; }
.gb-paper { position: relative; display: block; height: 1.5rem; border-radius: 0 0 3px 3px; overflow: hidden; }
.gb-paper::before { content: ""; position: absolute; inset: 0; background: var(--area); -webkit-mask: var(--pattern) repeat 0 0 / var(--pattern-size); mask: var(--pattern) repeat 0 0 / var(--pattern-size); opacity: .2; }
.gb-body {
  margin: 0 7px;
  padding: var(--s-4) var(--s-4) var(--s-4);
  background: var(--sheet);
  border-radius: 0 0 3px 3px;
  box-shadow: inset 0 12px 14px -12px var(--shadow-ink), 0 1px 0 var(--hairline), 0 14px 20px -18px var(--shadow-ink);
  font-size: var(--text-m);
  line-height: 1.45;
  color: var(--ink-2);
  display: grid;
  gap: var(--s-1);
  align-content: start;
}
.gb-body b { color: var(--ink); font-weight: 650; }
.gb-s .gb-body { min-height: 5.5rem; }
.gb-m .gb-body { min-height: 7.5rem; }
.gb-l .gb-body { min-height: 9.5rem; }
@media (hover: hover) {
  .gb:hover .gb-lid { translate: 0 -7px; rotate: -1.2deg; }
}
.gb:focus-visible { outline: none; }
.gb:focus-visible .gb-lid { outline: 2px solid var(--ink); outline-offset: 4px; translate: 0 -7px; }
.gb:active .gb-lid { translate: 0 1px; transition-duration: var(--t-press); }
@media (prefers-reduced-motion: reduce) { .gb-lid { transition: none; } .gb:hover .gb-lid, .gb:focus-visible .gb-lid { translate: none; rotate: none; } }
.crate .gb-lid { box-shadow: 0 1px 0 var(--hairline); }
.crate .gb-body { border: 1.5px dashed var(--crease); box-shadow: none; background: transparent; }
@media (min-width: 1000px) {
  .shelf { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--s-7); }
  .shelf-party { grid-template-columns: .82fr .92fr 1fr; }
  .shelf-wedding { grid-template-columns: 1fr 1fr; }
  .shelf-group > .shelf-label { grid-column: 1 / -1; }
  .shelf-bigger { grid-column: 1 / -1; }
}
@media (min-width: 720px) and (max-width: 999px) {
  .shelf-party { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shelf-wedding { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shelf-group > .shelf-label, .shelf-bigger { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
  .gb-body { min-height: 0 !important; padding: var(--s-3) var(--s-3) var(--s-3); }
  .gb-s .gb-body { padding-bottom: var(--s-3); }
  .gb-m .gb-body { padding-bottom: var(--s-4); }
  .gb-l .gb-body { padding-bottom: var(--s-5); }
  .gb-paper { height: .9rem; }
}

/* ------------------------------------------------- The cord, and its tags -- */
/* One cord line ties Celebrate's pages: it runs out of each page to the next. */
.cord-run { display: block; width: 100%; height: 34px; color: var(--area); overflow: visible; }
.cord-run path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cord-next { margin-top: var(--s-8); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0; }
.cord-tag {
  position: relative;
  display: grid;
  gap: 2px;
  min-height: 4.5rem;
  min-width: min(20rem, 70vw);
  padding: var(--s-3) var(--s-5) var(--s-3) 2.6rem;
  background: var(--sheet-raised);
  color: var(--ink);
  text-decoration: none;
  clip-path: polygon(1.4rem 0, 100% 0, 100% 100%, 1.4rem 100%, 0 50%);
  filter: drop-shadow(0 8px 10px var(--shadow-ink-soft));
  transition: translate var(--t-lift) var(--ease-paper);
}
.cord-tag::before { content: ""; position: absolute; left: 1.05rem; top: 50%; width: .7rem; height: .7rem; margin-top: -.35rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--area); background: var(--ground); }
.cord-tag .caps { color: var(--ink-2); font-size: var(--text-xs); }
.cord-tag b { font-family: var(--face-celebrate); font-style: italic; font-weight: 600; font-size: 1.75rem; line-height: 1.05; color: var(--area); }
.cord-tag span:last-child { font-size: var(--text-s); color: var(--ink-2); }
@media (hover: hover) { .cord-tag:hover { translate: 4px 0; } }
.cord-tag:focus-visible { outline: none; filter: drop-shadow(0 0 0 var(--ink)) drop-shadow(0 0 1.5px var(--ink)) drop-shadow(0 0 1px var(--ink)); }
.cord-tag:active { translate: 1px 0; }
@media (prefers-reduced-motion: reduce) { .cord-tag { transition: none; } .cord-tag:hover { translate: none; } }
.cord-back { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin-top: var(--s-3); justify-content: flex-end; }
.cord-back a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: var(--text-m); }
@media (max-width: 719px) {
  .cord-next { grid-template-columns: 1fr; }
  .cord-run { height: 26px; }
  .cord-tag { justify-self: end; min-width: 0; width: 88%; }
  .cord-back { justify-content: flex-start; }
}

/* The cord with its tags hanging, on the front: the other pages, one move away. */
.cord-tags { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4) var(--s-3); grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
.cord-tags li { position: relative; }
.cord-tags li::before { content: ""; position: absolute; left: -.5rem; right: -.5rem; top: 1px; height: 2px; background: var(--area); }
.hang { position: relative; display: grid; gap: 2px; padding: var(--s-5) var(--s-4) var(--s-4); margin-top: var(--s-4); min-height: 6.5rem; background: var(--sheet-raised); color: var(--ink); text-decoration: none; border-radius: 3px; box-shadow: 0 1px 0 var(--hairline), 0 12px 18px -16px var(--shadow-ink); transform-origin: 50% -1.1rem; transition: rotate 260ms var(--ease-paper); }
.hang::before { content: ""; position: absolute; left: 50%; top: -1.15rem; width: 2px; height: 1.6rem; margin-left: -1px; background: var(--area); }
.hang::after { content: ""; position: absolute; left: 50%; top: .45rem; width: .6rem; height: .6rem; margin-left: -.3rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--area); background: var(--ground); }
.hang b { font-family: var(--face-display); font-weight: 760; font-size: var(--text-l); line-height: 1.15; }
.hang span { font-size: var(--text-s); color: var(--ink-2); }
@media (hover: hover) { .hang:hover { rotate: -2deg; } li:nth-child(even) > .hang:hover { rotate: 2deg; } }
.hang:active { rotate: 0deg; scale: .985; }
@media (prefers-reduced-motion: reduce) { .hang { transition: none; } .hang:hover { rotate: none !important; } }
@media (max-width: 719px) {
  .cord-tags { grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-2); }
  .hang { min-height: 5.5rem; padding: var(--s-5) var(--s-3) var(--s-3); }
  .hang b { font-size: 1.0625rem; }
  .hang span { display: none; }
}

/* ------------------------------------------------- Occasions (doors) -- */
.occasions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.occasion { position: relative; display: grid; gap: 0; color: var(--ink); text-decoration: none; background: var(--sheet-raised); border-radius: 3px; box-shadow: 0 1px 0 var(--hairline), 0 22px 34px -28px var(--shadow-ink); overflow: hidden; transition: translate var(--t-lift) var(--ease-paper); }
.occasion picture img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.occasion .band { margin: 0; padding-block: .55rem .6rem; }
.occasion .band::before, .occasion .band::after { display: none; }
.occasion .band-name { font-size: 1.75rem; }
.occasion-line { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-4) var(--s-4); font-size: var(--text-m); color: var(--ink-2); }
.occasion-line b { color: var(--ink); font-weight: 650; }
.occasion .caption { margin: 0; padding: 0 var(--s-4) var(--s-4); }
@media (hover: hover) { .occasion:hover { translate: 0 -4px; } }
.occasion:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.occasion:active { scale: .99; }
@media (prefers-reduced-motion: reduce) { .occasion { transition: none; } .occasion:hover { translate: none; } }
.occasion-controls { display: none; }
@media (max-width: 899px) {
  .occasions.swipe-track { grid-template-columns: none; grid-auto-columns: 84%; gap: var(--s-3); padding-bottom: var(--s-3); }
  .occasion-controls { display: flex; }
}

/* ------------------------------------------------ The day, a preview (front) -- */
.preview-programme { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); perspective: 1200px; margin-top: var(--s-4); }
.preview-programme li { list-style: none; padding: var(--s-3); min-height: 5.5rem; font-size: var(--text-s); background: var(--sheet-raised); transform-origin: 0 50%; }
.preview-programme li:nth-child(odd) { background: linear-gradient(90deg, var(--sheet-raised) 70%, var(--sheet-shade)); transform: rotateY(5deg); }
.preview-programme li:nth-child(even) { background: linear-gradient(90deg, var(--sheet-shade), var(--sheet-raised) 30%); transform: rotateY(-5deg); }
.preview-programme b { display: block; font-variant-numeric: tabular-nums; color: var(--area); }
.day-door { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--sheet); border-radius: 3px; color: var(--ink); text-decoration: none; box-shadow: 0 1px 0 var(--hairline), 0 20px 32px -28px var(--shadow-ink); }
.day-door h3 { font-family: var(--face-celebrate); font-style: italic; font-weight: 600; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); color: var(--area); }
.day-door .text-link { justify-self: start; }
@media (hover: hover) { .day-door:hover .preview-programme li { transform: none; transition: transform 420ms var(--ease-paper); } }
.day-door:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (max-width: 719px) {
  .preview-programme { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .preview-programme li:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .preview-programme li { transform: none !important; } }

/* ===================================================== INNER PAGE BAND ==== */
.c-band { position: relative; background: var(--sheet-raised); box-shadow: 0 1px 0 var(--hairline), 0 26px 50px -38px var(--shadow-ink); border-radius: 2px; }
.c-band > .band { margin: 0; padding: var(--s-4) clamp(1.25rem, 1rem + 2vw, 3rem) var(--s-5); display: grid; gap: var(--s-3); justify-content: stretch; }
.c-band > .band::before, .c-band > .band::after { display: none; }
.c-band h1 { font-family: var(--face-celebrate); font-style: italic; font-weight: 600; font-size: clamp(2.375rem, 1.5rem + 3vw, 4.25rem); line-height: .98; letter-spacing: -.01em; color: var(--band-text); }
.c-band .band-line { font-size: clamp(1.0625rem, 1rem + .35vw, 1.3rem); max-width: 50ch; line-height: 1.4; }
.c-crumb { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; justify-self: start; color: inherit; text-decoration: none; font-size: var(--text-s); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; }
.c-crumb svg { width: 30px; height: 22px; }
.c-crumb:hover span { text-decoration: underline; text-underline-offset: .22em; }
.c-crumb:focus-visible { outline-color: currentColor; }
.c-band-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) clamp(1.25rem, 1rem + 2vw, 3rem); }
.c-band-foot .c-strip { flex: 1 1 10rem; height: 22px; background: var(--area); -webkit-mask: var(--pattern) repeat 0 0 / var(--pattern-size); mask: var(--pattern) repeat 0 0 / var(--pattern-size); opacity: .75; }
.c-band .band :focus-visible { outline-color: var(--band-text); }
@media (max-width: 719px) {
  .c-band > .band { padding: var(--s-3) var(--s-4) var(--s-4); gap: var(--s-2); }
  .c-band-foot { padding: var(--s-3) var(--s-4); }
  .c-band-foot .seal { display: none; }
}

/* Pleats on a phone (one open at a time); headings stay headings. */
.c-pleat { min-width: 0; }
.pleat-btn { display: none; }
@media (max-width: 719px) {
  .c-pleats { display: grid; gap: var(--s-3); }
  .c-pleat { background: var(--sheet-raised); border-radius: var(--radius-tag); box-shadow: 0 1px 0 var(--hairline), 0 10px 18px -16px var(--shadow-ink); padding: 0 var(--s-4); }
  .c-pleat:has(.pleat-btn[aria-expanded="false"]) { background: linear-gradient(180deg, var(--sheet-raised) calc(100% - .6rem), var(--sheet-shade)); }
  .c-pleat > h2, .c-pleat > h3 { margin: 0; font-size: 1.1875rem; }
  .pleat-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 52px; padding: var(--s-2) 0; border: 0; background: transparent; color: var(--ink); font-family: var(--face-display); font-weight: 760; font-size: 1.1875rem; letter-spacing: -.01em; text-align: left; }
  .pleat-btn::after { content: ""; flex: none; width: 22px; height: 12px; background: linear-gradient(var(--crease), var(--crease)) 0 0 / 100% 1.5px no-repeat, linear-gradient(var(--crease), var(--crease)) 0 100% / 100% 1.5px no-repeat; }
  .pleat-btn[aria-expanded="true"]::after { background: linear-gradient(var(--ink), var(--ink)) 0 50% / 100% 1.5px no-repeat; }
  .pleat-btn:not([hidden]) + .pleat-text { display: none; }
  .pleat-body { padding-bottom: var(--s-4); }
  .pleat-body[hidden] { display: none; }
}

/* ============================================================ PACKAGES ==== */
.box-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin: var(--s-6) 0 var(--s-4); }
.box-tools p { color: var(--ink-2); max-width: 52ch; }
html:not(.lt-js) .box-tools .chit { display: none; }
.stacks { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1000px) { .stacks { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); column-gap: var(--s-6); } }
.stack-h { font-size: var(--text-s); font-family: var(--face-sans); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-4); }
.stack-col { display: grid; gap: var(--s-5); align-content: start; }
.box { position: relative; }
.box-h { margin: 0; font: inherit; letter-spacing: 0; }
.box-lid { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.box-lid .band { margin-inline: -7px; padding: .6rem calc(var(--s-4) + 7px) .65rem; }
.box-lid .band-name { font-size: 1.875rem; }
.box-lid .band-price { font-size: var(--text-body); }
.lid-face {
  position: relative;
  display: grid;
  gap: 2px;
  padding: var(--s-3) var(--s-4) var(--s-4);
  background: var(--sheet-raised);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 1px 0 var(--hairline), 0 7px 0 -3px var(--sheet-shade), 0 16px 22px -16px var(--shadow-ink);
  transform-origin: 50% 0;
  backface-visibility: hidden;
  transition: translate var(--t-lift) var(--ease-paper);
  overflow: hidden;
}
.lid-face::before { content: ""; position: absolute; inset: 0; background: var(--area); -webkit-mask: var(--pattern) repeat 0 0 / var(--pattern-size); mask: var(--pattern) repeat 0 0 / var(--pattern-size); opacity: .1; pointer-events: none; }
.lid-cue { position: relative; display: flex; align-items: center; gap: var(--s-2); font-weight: 650; font-size: var(--text-m); }
.lid-cue svg { width: 20px; height: 20px; flex: none; color: var(--area); }
.lid-inside { position: relative; font-size: var(--text-s); color: var(--ink-2); }
@media (hover: hover) { .box-lid:hover .lid-face { translate: 0 -4px; } }
.box-lid:focus-visible { outline: none; }
.box-lid:focus-visible .band { outline: 2px solid var(--ink); outline-offset: 3px; }
.box-lid:active .lid-face { translate: 0 1px; }
html:not(.lt-js) .lid-face, .box.lid-gone > .box-h .lid-face { display: none; }
.box.lid-lifting > .box-h .lid-face { position: absolute; left: 0; right: 0; top: 100%; z-index: 3; pointer-events: none; }
.lid-pull { display: flex; align-items: center; justify-content: center; gap: var(--s-2); margin: 0 auto; width: 11rem; min-height: 44px; padding: 0 var(--s-3); border: 1px solid var(--hairline); border-top: 0; border-radius: 0 0 12px 12px; background: var(--sheet); color: var(--ink-2); font-size: var(--text-s); font-weight: 600; touch-action: none; box-shadow: 0 8px 12px -10px var(--shadow-ink); }
.lid-pull .pull-grip { width: 2rem; height: 5px; border-radius: 3px; background: var(--crease); }
html:not(.lt-js) .lid-pull, .box.is-open > .lid-pull { display: none; }
@media (hover: hover) and (pointer: fine) { .lid-pull { display: none; } }
.box-in { position: relative; margin: 0 7px; padding: var(--s-4) var(--s-4) var(--s-5); background: var(--sheet); border-radius: 0 0 4px 4px; box-shadow: inset 0 18px 20px -18px var(--shadow-ink), 0 1px 0 var(--hairline); display: grid; gap: var(--s-4); }
.box-in .box-in { background: color-mix(in srgb, var(--sheet) 72%, var(--area-tint)); }
.box-in .box-in .box-in { background: color-mix(in srgb, var(--sheet) 50%, var(--area-tint)); }
.box-in[hidden] { display: none; }
.box-adds { display: grid; gap: var(--s-3); transform-origin: 50% 0; }
.box-adds h4 { font-family: var(--face-sans); font-size: var(--text-s); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--area); }
.box-facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; font-size: var(--text-m); }
.box-facts div { display: grid; }
.box-facts dt { font-size: var(--text-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.box-facts dd { margin: 0; font-weight: 600; }
.box .box { transform-origin: 50% 0; }
@media (prefers-reduced-motion: reduce) { .lid-face { transition: none; } .box-lid:hover .lid-face { translate: none; } }
.pack-print { margin-top: var(--s-2); }
.pack-print img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.addons { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.addon { display: grid; gap: var(--s-1); padding: var(--s-4); background: var(--sheet-raised); color: var(--ink); text-decoration: none; border-radius: 3px; box-shadow: 0 1px 0 var(--hairline), 0 10px 18px -16px var(--shadow-ink); transition: translate var(--t-lift) var(--ease-paper); }
.addon b { font-family: var(--face-display); font-weight: 760; font-size: var(--text-l); }
.addon .price { font-weight: 650; }
.addon span { font-size: var(--text-m); color: var(--ink-2); }
@media (hover: hover) { .addon:hover { translate: 0 -3px; } }
.addon:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.yours-strip { margin-top: var(--s-6); padding: var(--s-5); border: 1.5px dashed var(--crease); border-radius: var(--radius-tag); display: grid; gap: var(--s-3); }
.yours-strip h2 { font-size: var(--text-xl); }
.yours-strip p { color: var(--ink-2); max-width: 70ch; }
@media (max-width: 719px) {
  .box-lid .band-name { font-size: 1.75rem; }
  .box-in { padding: var(--s-3) var(--s-3) var(--s-4); margin: 0 4px; }
  .stacks { gap: var(--s-6); }
}

/* ============================================================= THE DAY ==== */
.programme { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
.prog-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4); }
.prog-head h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); }
.prog-controls { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: end; padding: var(--s-4) var(--s-5); background: var(--sheet-raised); border-radius: var(--radius-tag); box-shadow: 0 1px 0 var(--hairline), 0 12px 22px -20px var(--shadow-ink); }
.stepper { display: grid; gap: var(--s-1); }
.stepper label { font-size: var(--text-s); font-weight: 650; }
.stepper-row { display: flex; align-items: stretch; gap: 0; border: 1.5px solid var(--ink); border-radius: var(--radius-tag); overflow: hidden; background: var(--sheet); }
.stepper-row button { width: 48px; min-height: 48px; display: grid; place-items: center; border: 0; background: var(--sheet-raised); color: var(--ink); padding: 0; }
.stepper-row button:first-child { border-right: 1px solid var(--hairline); }
.stepper-row button:last-child { border-left: 1px solid var(--hairline); }
.stepper-row button svg { width: 18px; height: 18px; }
.stepper-row button:hover { background: var(--sheet); }
.stepper-row button:active { background: var(--sheet-shade); }
.stepper-row button:disabled { color: var(--crease); cursor: not-allowed; background: var(--sheet); }
.stepper-row button:focus-visible { outline-offset: -4px; }
.stepper-row input { width: 7.5rem; min-height: 48px; border: 0; padding: 0 var(--s-3); background: transparent; color: var(--ink); font-weight: 650; font-size: var(--text-body); font-variant-numeric: tabular-nums; text-align: center; }
.stepper-row input[type="number"] { width: 5rem; -moz-appearance: textfield; appearance: textfield; }
.stepper-row input::-webkit-outer-spin-button, .stepper-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-row input:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.stepper-note { font-size: var(--text-xs); color: var(--ink-2); }
.prog-status { flex: 1 1 18rem; margin: 0; }
.marks { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--text-s); color: var(--ink-2); list-style: none; margin: 0; padding: 0; }
.marks li { display: inline-flex; align-items: center; gap: var(--s-2); }
.mark { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 3px; border-radius: 999px; font-size: var(--text-xs); font-weight: 650; letter-spacing: .02em; white-space: nowrap; border: 1.5px solid var(--area); color: var(--area); }
.mark::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.mark-set { background: var(--area-tint); color: var(--ink); }
.mark-set::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.mark-day { background: var(--area); color: var(--band-text); border-color: var(--area); }
.mark-day::before { background: currentColor; }
.prog-swipe { min-width: 0; }
.prog-track { list-style: none; margin: 0; padding: 0; }
.prog-pleat { display: grid; align-content: start; gap: var(--s-3); min-height: 23rem; padding: var(--s-5) var(--s-4); }
.prog-when { font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
.prog-pleat h3 { font-family: var(--face-celebrate); font-style: italic; font-weight: 600; font-size: 1.875rem; line-height: 1; color: var(--area); letter-spacing: 0; }
.prog-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.prog-rows li { display: grid; gap: 4px; padding: var(--s-3) 0; border-top: 1px dashed var(--crease); font-size: var(--text-m); line-height: 1.4; }
.prog-rows time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.prog-rows .mark { justify-self: start; }
.prog-rows li.is-changed { animation: c-crease 240ms var(--ease-paper); }
@keyframes c-crease { 0% { border-top-color: var(--area); box-shadow: inset 0 2px 0 var(--area); } 100% { border-top-color: var(--crease); box-shadow: inset 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .prog-rows li.is-changed { animation: none; } }
@media (min-width: 1000px) {
  .prog-track.swipe-track { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-columns: auto; gap: 0; overflow: visible; }
  .prog-swipe .swipe-controls { display: none; }
}
@media (min-width: 720px) and (max-width: 999px) {
  .prog-track.swipe-track { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; gap: 0; overflow: visible; }
  .prog-swipe .swipe-controls { display: none; }
  .prog-pleat { min-height: 0; }
}
@media (max-width: 719px) {
  .lt-js .concertina.prog-track.is-set .prog-pleat { transform: none; }
  .prog-track.swipe-track { gap: var(--s-3); }
  .prog-pleat { min-height: 0; border-radius: var(--radius-tag); box-shadow: 0 1px 0 var(--hairline); background: var(--sheet-raised) !important; }
  .prog-controls { padding: var(--s-3) var(--s-4); gap: var(--s-3) var(--s-4); }
  .stepper-row input { width: 6.5rem; }
}
.shoplist { position: relative; padding: var(--s-5) var(--s-5) var(--s-5) 3.25rem; background: var(--sheet-raised); border-radius: 2px; box-shadow: 0 1px 0 var(--hairline), 0 22px 34px -28px var(--shadow-ink); background-image: linear-gradient(90deg, transparent 2.35rem, var(--area-tint) 2.35rem, var(--area-tint) 2.5rem, transparent 2.5rem); }
.shoplist h3 { font-family: var(--face-celebrate); font-style: italic; font-weight: 600; font-size: 1.875rem; color: var(--area); letter-spacing: 0; }
.shoplist > p { color: var(--ink-2); font-size: var(--text-m); margin-top: var(--s-1); }
.shop-items { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); column-gap: var(--s-6); }
.shop-items li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--hairline); font-size: var(--text-m); }
.shop-items b { font-variant-numeric: tabular-nums; font-weight: 700; }
.shop-items li.is-changed { animation: c-ink 240ms var(--ease-paper); }
@keyframes c-ink { from { background: var(--area-tint); } }
@media (prefers-reduced-motion: reduce) { .shop-items li.is-changed { animation: none; } }
.day-who { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: var(--s-6); }
.day-who > div { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4); background: var(--sheet-raised); border-radius: 3px; box-shadow: 0 1px 0 var(--hairline); }
.day-who .price { font-weight: 650; }
.day-who p { font-size: var(--text-m); color: var(--ink-2); }

/* =========================================================== OCCASIONS ==== */
.occ-grid { display: grid; gap: var(--s-6); margin-top: var(--s-6); align-items: start; }
@media (min-width: 1000px) { .occ-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: var(--s-7); } }
.c-print { position: relative; padding: var(--s-2); background: var(--sheet-raised); box-shadow: 0 1px 0 var(--hairline), 0 14px 26px -20px var(--shadow-ink); border-radius: 2px; }
.c-print img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 1px; }
.c-print::before, .c-print::after { content: ""; position: absolute; width: 22px; height: 22px; background: var(--area); opacity: .85; z-index: 1; }
.c-print::before { left: 2px; top: 2px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.c-print::after { right: 2px; bottom: 2px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.c-print .caption { padding: 0 var(--s-1); }
.occ-col { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
.c-sheet { background: var(--sheet); border-radius: 2px; box-shadow: 0 1px 0 var(--hairline), 0 18px 40px -32px var(--shadow-ink); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.c-sheet h2 { font-size: var(--text-xl); margin-bottom: var(--s-3); }
.c-sheet h3 { font-size: var(--text-l); margin-bottom: var(--s-2); }
.c-sheet p + p, .c-sheet p + ul, .c-sheet ul + p { margin-top: var(--s-3); }
.c-pricecards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.c-pricecard { display: grid; gap: var(--s-1); align-content: start; padding: 0 0 var(--s-4); background: var(--sheet-raised); color: var(--ink); text-decoration: none; border-radius: 3px; overflow: hidden; box-shadow: 0 1px 0 var(--hairline), 0 12px 22px -18px var(--shadow-ink); transition: translate var(--t-lift) var(--ease-paper); }
.c-pricecard .band { margin: 0 0 var(--s-2); padding-block: .5rem .55rem; }
.c-pricecard .band::before, .c-pricecard .band::after { display: none; }
.c-pricecard .band-name { font-size: 1.75rem; }
.c-pricecard > span { padding: 0 var(--s-4); font-size: var(--text-m); color: var(--ink-2); }
.c-pricecard .c-cardgo { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
@media (hover: hover) { .c-pricecard:hover { translate: 0 -3px; } }
.c-pricecard:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.c-pricecard:active { scale: .99; }

/* Children's parties: the tented card opened flat, two faces and a crease. */
.two-faces { display: grid; gap: 0; margin-top: var(--s-6); perspective: 1600px; }
.face { padding: clamp(1.25rem, 1rem + 1.6vw, 2.5rem); display: grid; gap: var(--s-3); align-content: start; }
.face h2 { font-family: var(--face-celebrate); font-style: italic; font-weight: 600; font-size: clamp(1.875rem, 1.4rem + 1.5vw, 2.75rem); line-height: 1.02; letter-spacing: 0; }
.face-laura h2 { color: var(--area); }
.face-you { background: linear-gradient(90deg, var(--sheet-shade), var(--sheet-raised) 18%); }
.face-laura { background: linear-gradient(90deg, var(--sheet-raised) 82%, var(--sheet-shade)); }
.boundary { font-family: var(--face-display); font-weight: 700; font-size: var(--text-l); line-height: 1.3; }
@media (min-width: 900px) {
  .two-faces { grid-template-columns: 1fr 1fr; }
  .two-faces .tent-crease { display: none; }
  .face-laura { transform-origin: 100% 50%; }
  .face-you { transform-origin: 0 50%; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .lt-ready .face-laura { animation: c-face-l 680ms var(--ease-paper) both; }
  .lt-ready .face-you { animation: c-face-r 680ms 110ms var(--ease-paper) both; }
}
@keyframes c-face-l { from { transform: rotateY(9deg); } }
@keyframes c-face-r { from { transform: rotateY(-9deg); } }
@media (max-width: 899px) { .face-you, .face-laura { background: var(--sheet-raised); } }
.supplier-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.supplier-list li { padding: var(--s-1) var(--s-3); border: 1.5px solid var(--hairline); border-radius: 999px; font-size: var(--text-s); font-weight: 600; background: var(--sheet-raised); }

/* Small weddings: the cord with its knots, and the hours of the day. */
.knots { display: grid; gap: var(--s-4); }
.knot-line { position: relative; list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.knot-line::before { content: ""; position: absolute; background: var(--area); border-radius: 2px; }
.knot { position: relative; display: grid; gap: 4px; align-content: start; padding: var(--s-4); background: var(--sheet-raised); border-radius: 3px; box-shadow: 0 1px 0 var(--hairline), 0 12px 20px -18px var(--shadow-ink); transition: opacity 260ms var(--ease-paper), translate 260ms var(--ease-paper); }
.knot::before { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--area); box-shadow: 0 0 0 4px var(--ground); }
.knot b { font-family: var(--face-display); font-weight: 760; font-size: var(--text-l); line-height: 1.2; }
.knot .when { font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--area); }
.knot p { font-size: var(--text-m); color: var(--ink-2); }
.knot-only { justify-self: start; font-size: var(--text-xs); font-weight: 650; padding: 1px 8px 2px; border-radius: 999px; border: 1.5px solid var(--area); color: var(--area); }
[data-choice="wedding-day"] .knot.is-together { opacity: .5; translate: 0 6px; }
[data-choice="wedding-day"] .knot.is-together .knot-out { display: inline; }
.knot-out { display: none; font-size: var(--text-xs); font-weight: 650; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .knot { transition: opacity 150ms; } [data-choice="wedding-day"] .knot.is-together { translate: none; } }
@media (min-width: 900px) {
  .knot-line { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 1.75rem; }
  .knot-line::before { left: 0; right: 0; top: .5rem; height: 2px; }
  .knot::before { left: var(--s-4); top: -1.75rem; }
}
@media (max-width: 899px) {
  .knot-line { padding-left: 2rem; }
  .knot-line::before { left: .55rem; top: 0; bottom: 0; width: 2px; }
  .knot::before { left: -1.95rem; top: var(--s-4); }
}
.hours { margin-top: var(--s-4); }
.hour-ribbon { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.hour-ribbon li { min-height: 3.5rem; padding: var(--s-2) 6px; background: var(--area-tint); border-radius: 2px; font-size: var(--text-xs); line-height: 1.3; display: grid; align-content: start; gap: 2px; }
.hour-ribbon li b { font-variant-numeric: tabular-nums; }
.hour-ribbon li.is-event { background: var(--area); color: var(--band-text); }
@media (max-width: 719px) {
  .hour-ribbon { grid-template-columns: 1fr; gap: 2px; }
  .hour-ribbon li { min-height: 0; grid-template-columns: 4.5rem 1fr; align-items: baseline; padding: 6px var(--s-3); font-size: var(--text-s); }
  .hour-ribbon li:not(.is-event) { display: none; }
}

/* Launches: the order of the evening and the welcome desk. */
.order { position: relative; padding: var(--s-5); background: var(--sheet-raised); border-radius: 2px; box-shadow: 0 1px 0 var(--hairline), 0 20px 34px -28px var(--shadow-ink); }
.order h3 { font-family: var(--face-celebrate); font-style: italic; font-weight: 600; font-size: 1.875rem; color: var(--area); letter-spacing: 0; }
.order ol { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; }
.order li { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px dashed var(--crease); font-size: var(--text-m); }
.order time { font-weight: 700; font-variant-numeric: tabular-nums; }
.desk { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--sheet); border-radius: 2px; box-shadow: 0 1px 0 var(--hairline), 0 20px 34px -28px var(--shadow-ink); }
.desk-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.desk-head h3 { font-size: var(--text-l); }
.badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--s-2); }
.badge { position: relative; width: 100%; min-height: 4rem; display: grid; align-content: center; gap: 2px; padding: var(--s-2) var(--s-3) var(--s-2) 2.5rem; border: 1px solid var(--hairline); border-radius: 4px; background: var(--sheet-raised); color: var(--ink); text-align: left; box-shadow: 0 4px 10px -8px var(--shadow-ink); transition: translate var(--t-lift) var(--ease-paper), background var(--t-lift); }
.badge::before { content: ""; position: absolute; left: var(--s-3); top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 3px; border: 1.5px solid var(--ink-2); }
.badge b { font-family: var(--face-display); font-weight: 700; font-size: var(--text-m); }
.badge span { font-size: var(--text-xs); color: var(--ink-2); }
.badge[aria-pressed="true"] { background: var(--area-tint); border-color: var(--area); translate: 0 2px; box-shadow: none; }
.badge[aria-pressed="true"]::before { background: var(--area); border-color: var(--area); box-shadow: inset 0 0 0 3px var(--area-tint); }
@media (hover: hover) { .badge:hover { translate: 0 -2px; } .badge[aria-pressed="true"]:hover { translate: 0 2px; } }
.badge:active { translate: 0 1px; }
.desk-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
@media (prefers-reduced-motion: reduce) { .badge { transition: none; } .badge:hover, .badge[aria-pressed="true"] { translate: none; } }

/* Stationery: the invitation slides out of its envelope. */
.envelope-stage { position: relative; display: grid; gap: var(--s-4); }
.envelope { position: relative; height: 22rem; max-width: 34rem; width: 100%; margin-inline: auto; }
.env-back { position: absolute; left: 0; right: 0; bottom: 0; height: 13rem; background: color-mix(in srgb, var(--area-tint) 70%, var(--sheet-shade)); border-radius: 4px; box-shadow: 0 20px 30px -24px var(--shadow-ink); }
.invite { position: absolute; left: 7%; right: 7%; bottom: 1.25rem; height: 19rem; transition: transform 520ms var(--ease-paper); transform: translateY(8.5rem); z-index: 1; }
.invite svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 10px var(--shadow-ink-soft)); }
.env-front { position: absolute; left: 0; right: 0; bottom: 0; height: 10.5rem; z-index: 2; border-radius: 0 0 4px 4px; background: linear-gradient(160deg, var(--area-tint), color-mix(in srgb, var(--area-tint) 80%, var(--sheet-shade))); clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%); box-shadow: inset 0 -1px 0 var(--hairline); }
.env-front::after { content: ""; position: absolute; left: 50%; top: 33%; width: 2.75rem; height: 2.75rem; margin-left: -1.375rem; border-radius: 50%; background: var(--area); -webkit-mask: radial-gradient(circle, #000 60%, transparent 61%); mask: radial-gradient(circle, #000 60%, transparent 61%); opacity: .9; }
[data-state="out"] .invite { transform: translateY(-1rem); }
@media (prefers-reduced-motion: reduce) { .invite { transition: none; } }
.inv-paper { fill: rgb(252 252 250); stroke: rgb(209 213 205); }
.inv-ink { fill: rgb(139 45 82); }
.inv-text { fill: rgb(35 38 44); font-family: "Schibsted Grotesk", sans-serif; }
.inv-script { fill: rgb(139 45 82); font-family: Cormorant, serif; font-style: italic; font-weight: 600; }
.inv-pattern { stroke: rgb(139 45 82); fill: none; opacity: .35; }
.env-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.env-out, [data-state="out"] .env-in { display: none; }
[data-state="out"] .env-out { display: inline; }
.suite { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--s-3); }
.suite li { display: grid; gap: var(--s-2); justify-items: center; text-align: center; font-size: var(--text-s); font-weight: 600; }
.suite-card { width: 100%; aspect-ratio: 5 / 7; border-radius: 2px; background: var(--sheet-raised); box-shadow: 0 1px 0 var(--hairline), 0 10px 16px -12px var(--shadow-ink); position: relative; overflow: hidden; }
.suite-card::before { content: ""; position: absolute; left: 12%; right: 12%; top: 14%; height: 12%; background: var(--area); -webkit-mask: var(--pattern) repeat 0 0 / 12px 12px; mask: var(--pattern) repeat 0 0 / 12px 12px; opacity: .5; }
.suite-card::after { content: ""; position: absolute; left: 22%; right: 22%; top: 38%; height: 40%; background: linear-gradient(var(--crease), var(--crease)) 0 0 / 100% 2px no-repeat, linear-gradient(var(--crease), var(--crease)) 0 30% / 80% 2px no-repeat, linear-gradient(var(--crease), var(--crease)) 0 60% / 90% 2px no-repeat, linear-gradient(var(--crease), var(--crease)) 0 90% / 60% 2px no-repeat; }
.suite-card.wide { aspect-ratio: 7 / 5; }
.suite-card.tent-mini { aspect-ratio: 7 / 4; }

/* What's included, what's yours: two columns the same size. */
.halves { display: grid; gap: 0; margin-top: var(--s-6); }
.half { padding: clamp(1.25rem, 1rem + 1.6vw, 2.5rem); display: grid; gap: var(--s-4); align-content: start; background: var(--sheet-raised); }
.half h2 { font-family: var(--face-celebrate); font-style: italic; font-weight: 600; font-size: clamp(1.875rem, 1.4rem + 1.5vw, 2.75rem); line-height: 1; letter-spacing: 0; }
.half-laura h2 { color: var(--area); }
.receipt { list-style: none; margin: 0; padding: 0; display: grid; }
.receipt li { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: baseline; padding: var(--s-3) 0; border-top: 1px dashed var(--crease); font-size: var(--text-m); }
.receipt li span:last-child { font-size: var(--text-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.receipt li b { font-weight: 650; }
@media (min-width: 900px) {
  .halves { grid-template-columns: 1fr 1fr; box-shadow: 0 1px 0 var(--hairline), 0 26px 50px -38px var(--shadow-ink); }
  .half-laura { background: linear-gradient(90deg, var(--sheet-raised) 85%, var(--sheet-shade)); }
  .half-you { background: linear-gradient(90deg, var(--sheet-shade), var(--sheet-raised) 15%); }
}

/* Questions: an index-card box filed by worry; tabs on a phone. */
.qbox { margin-top: var(--s-6); }
.qtabs { display: none; }
.qgroups { display: grid; gap: var(--s-6) var(--s-5); }
@media (min-width: 900px) { .qgroups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qgroup { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5) var(--s-4) var(--s-4); background: var(--sheet-shade); border-radius: var(--radius-tag); box-shadow: inset 0 14px 18px -16px var(--shadow-ink); position: relative; }
.qgroup > h2 { position: absolute; top: -1.15rem; left: var(--s-4); padding: .35rem var(--s-4) .4rem; background: var(--area); color: var(--band-text); border-radius: 6px 6px 0 0; font-family: var(--face-sans); font-size: var(--text-s); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; }
.qgroup .cards { margin-top: var(--s-2); }
@media (max-width: 719px) {
  .lt-js .qtabs { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; padding: 0 0 0 var(--s-1); }
  .qtabs button { flex: none; min-height: 44px; padding: 0 var(--s-4); border: 1.5px solid var(--hairline); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--sheet-raised); color: var(--ink); font-weight: 650; font-size: var(--text-s); }
  .qtabs button[aria-pressed="true"] { background: var(--area); color: var(--band-text); border-color: var(--area); }
  .lt-js .qgroup { border-radius: 0 var(--radius-tag) var(--radius-tag) var(--radius-tag); padding-top: var(--s-4); }
  .lt-js .qgroup > h2 { position: static; padding: 0; background: none; color: var(--area); border-radius: 0; }
  .lt-js .qgroup.is-filed { display: none; }
}

/* About: a folded letter tied with the cord. */
.c-letter { position: relative; margin-top: var(--s-4); padding: clamp(1.5rem, 1rem + 3vw, 4rem); background: linear-gradient(180deg, var(--sheet-raised) 33.3%, color-mix(in srgb, var(--sheet-raised) 55%, var(--sheet-shade)) 33.3% 66.6%, var(--sheet-raised) 66.6%); box-shadow: 0 1px 0 var(--hairline), 0 26px 50px -38px var(--shadow-ink); display: grid; gap: var(--s-5); max-width: 60rem; }
.c-letter::before { content: ""; position: absolute; top: 0; bottom: 0; right: clamp(1.5rem, 4vw, 3.5rem); width: 2px; background: var(--area); opacity: .85; }
.c-letter::after { content: ""; position: absolute; right: calc(clamp(1.5rem, 4vw, 3.5rem) - 9px); top: 33.3%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--area); background: var(--sheet-raised); }
.c-letter > * { position: relative; z-index: 1; max-width: calc(100% - 3rem); }
.c-letter h1 { font-family: var(--face-celebrate); font-style: italic; font-weight: 600; font-size: clamp(2.375rem, 1.5rem + 3vw, 4rem); line-height: 1; letter-spacing: -.01em; color: var(--area); }
.c-letter blockquote { font-family: var(--face-display); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); line-height: 1.3; letter-spacing: -.01em; max-width: 36ch; padding-left: var(--s-4); border-left: 2px solid var(--seal); }
.c-letter blockquote p { margin: 0; }
.c-letter q { quotes: "\201C" "\201D"; }
.c-letter .measure { max-width: 60ch; }
.letter-sign { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.letter-sign a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .lt-ready .c-letter-top { animation: c-letter 520ms var(--ease-paper) both; transform-origin: 50% 100%; }
}
@keyframes c-letter { from { transform: perspective(1200px) rotateX(14deg); } }

/* Book: the reply card, with the lead times beside it. */
.book-grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1000px) { .book-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.reply-card { max-width: 48rem; }
.reply-title { font-family: var(--face-celebrate); font-style: italic; font-weight: 600; font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); line-height: 1; letter-spacing: -.01em; color: var(--area); margin-block: var(--s-2) var(--s-3); }
.reply-actions { display: grid; gap: var(--s-3); justify-items: start; }
.reply-routes { color: var(--ink-2); font-size: var(--text-m); }
.reply-lede { font-size: clamp(1.0625rem, 1rem + .4vw, 1.3rem); line-height: 1.4; max-width: 40ch; }
.leads { display: grid; gap: var(--s-3); }
.leads h2 { font-size: var(--text-xl); }
.lead-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.lead-list li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--s-1) var(--s-3); padding: var(--s-3) var(--s-4); background: var(--sheet-raised); border-radius: 3px; box-shadow: 0 1px 0 var(--hairline); }
.lead-list b { font-family: var(--face-display); font-weight: 760; }
.lead-list .lead { font-weight: 650; font-size: var(--text-m); color: var(--area); text-align: right; }
.lead-list .price { font-size: var(--text-m); }
.lead-list .lead-price { grid-column: 1 / -1; font-size: var(--text-s); color: var(--ink-2); }

/* 404: the crumpled sheet that flattens. */
.lost { display: grid; gap: var(--s-5); justify-items: start; max-width: 50rem; margin-top: var(--s-6); }
.lost h1 { font-family: var(--face-celebrate); font-style: italic; font-weight: 600; font-size: clamp(2.375rem, 1.5rem + 3vw, 4rem); line-height: 1; color: var(--area); }
.lost-doors { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); width: 100%; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.cr-paper { fill: var(--sheet-raised); stroke: var(--crease); stroke-width: 1.5; }
.cr-line { fill: none; stroke: var(--crease); }
.cr-dash { stroke-dasharray: 4 4; }
.cr-cord { fill: none; stroke: var(--area); stroke-width: 2; stroke-linecap: round; }

/* Small print pages: the leaflet on the same paper. */
.c-leaflet { max-width: 62rem; }

/* Neighbours and the hub, at the foot of every page. */
.c-neighbours { margin-top: var(--s-7); }
.c-neighbours h2 { font-size: var(--text-s); font-family: var(--face-sans); letter-spacing: var(--track-caps); text-transform: uppercase; font-weight: 650; color: var(--ink-2); margin-bottom: var(--s-3); }
.c-neighbours ul { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
@media (max-width: 719px) { .c-neighbours .door-line { display: none; } .c-neighbours .door { grid-template-areas: "edge band"; } .c-neighbours .door .band { margin-top: 0; min-height: 3rem; align-content: center; border-radius: 0 var(--radius-tag) var(--radius-tag) 0; margin-right: 0; } .c-neighbours .door .band::after { display: none; } }

/* The site's sheet list in the contents dialog, marked with the cord. */
.c-sheet-pages a { position: relative; padding-left: var(--s-5) !important; }
.c-sheet-pages a::before { content: ""; position: absolute; left: var(--s-3); top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ink-celebrate); }

/* An example's label sits on its own line, never squeezed beside a heading. */
.example-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); }

/* ======================================================= ADDED: SHARED INNER */
/* The page band is printed paper you can still select and read. */
.c-band > .band { user-select: text; -webkit-user-select: text; touch-action: auto; }
.c-crumb-ink { color: var(--area); margin-bottom: var(--s-2); }
.c-crumb-ink:focus-visible { outline-color: var(--ink); }
.c-prices-h { font-size: clamp(1.875rem, 1.4rem + 1.5vw, 2.75rem); margin-bottom: var(--s-4); }
.c-page > .c-band + * { margin-top: var(--s-6); }
.boundary { margin-bottom: var(--s-2); }
.c-pleat p + p { margin-top: var(--s-3); }
@media (min-width: 720px) {
  .c-pleats { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-content: start; }
  .c-pleat { background: var(--sheet-raised); border-radius: 3px; box-shadow: 0 1px 0 var(--hairline), 0 14px 24px -22px var(--shadow-ink); padding: var(--s-5); display: grid; gap: var(--s-3); align-content: start; }
  .c-pleat > h2 { font-size: var(--text-l); }
}
.c-pleats { margin-top: var(--s-6); }
.occ-grid .c-pleats { margin-top: 0; }
.kids-grid, .wed-info { margin-top: var(--s-7); }
.cord-back { margin-bottom: 0; }

/* ======================================================= PACKAGES, ADDED */
.crate { margin-top: var(--s-2); }
.crate-h .band { margin-inline: -7px; padding: .6rem calc(var(--s-4) + 7px) .65rem; }
.crate-h .band-name { font-size: 1.875rem; }
.crate-in { background: transparent; box-shadow: none; border: 1.5px dashed var(--crease); border-top: 0; color: var(--ink-2); font-size: var(--text-m); }
.c-price-foot { margin-top: var(--s-5); }
.box-adds h4 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.box-adds .c-ticks { font-size: var(--text-m); }
.box-xl > .box-h .band-name { font-size: 2.125rem; }
.pack-more { display: grid; gap: var(--s-6); align-items: start; }
.pack-more-text { display: grid; gap: var(--s-4); align-content: start; }
.pack-more .yours-strip { margin-top: var(--s-2); }
@media (min-width: 1000px) { .pack-more { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: var(--s-7); } }
@media (max-width: 719px) { .pack-print { display: none; } }

/* ======================================================= THE DAY, ADDED */
.programme { margin-top: var(--s-6); }
.prog-controls { display: grid; gap: var(--s-4); }
.day-pkgs legend { font-size: var(--text-s); }
.steppers { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: end; }
@media (min-width: 1000px) { .prog-controls { grid-template-columns: auto auto minmax(16rem, 1fr); align-items: end; column-gap: var(--s-6); } }
html:not(.lt-js) .prog-controls .steppers, html:not(.lt-js) .day-pkgs { display: none; }
.prog-pleat > .mark { justify-self: start; }
.row-when { font-weight: 700; color: var(--ink); font-size: var(--text-s); }
.who { justify-self: start; display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 var(--s-2); border-radius: 999px; font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; background: var(--area); color: var(--band-text); }
.prog-rows li.is-yours .who { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.prog-rows li.is-yours > span:nth-child(2) { color: var(--ink); }
.prog-rows li:not(.is-yours) > span:nth-child(2) { color: var(--ink-2); }
.shoplist { margin-top: var(--s-2); }
.shoplist h3 { margin: 0; }

/* ======================================================= CHILDREN'S PARTIES */
.who-board { margin-top: var(--s-6); display: grid; gap: var(--s-5); }
.who-head { display: grid; gap: var(--s-2); }
.who-head h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.who-head p { color: var(--ink-2); max-width: 52ch; }
.who-faces { display: grid; gap: var(--s-5); perspective: 1600px; }
.who-faces .face { gap: var(--s-3); }
.who-faces .face h3 { font-family: var(--face-celebrate); font-style: italic; font-weight: 600; font-size: clamp(1.875rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1.02; letter-spacing: 0; }
.face-laura h3 { color: var(--area); }
.who-pile { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); min-height: 3rem; }
.who-fixed { padding: var(--s-2) var(--s-3); border-top: 1px dashed var(--crease); font-weight: 650; }
.who-middle { display: grid; gap: var(--s-3); align-content: start; }
.who-tray { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.who-item button { width: 100%; display: grid; gap: 2px; justify-items: start; min-height: 48px; padding: var(--s-2) var(--s-4); text-align: left; border: 1.5px solid var(--hairline); border-radius: var(--radius-tag); background: var(--sheet-raised); color: var(--ink); font-weight: 600; font-size: var(--text-m); line-height: 1.3; box-shadow: 0 6px 12px -10px var(--shadow-ink); transition: transform var(--t-lift) var(--ease-paper); }
@media (hover: hover) { .who-item:not(.is-filed) button:hover { transform: translateY(-2px); } }
.who-item:not(.is-filed) button:active { transform: scale(.985); }
.who-a { display: none; font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--area); }
html:not(.lt-js) .who-a, .who-item.is-filed .who-a { display: block; }
.who-item.is-filed button { cursor: default; box-shadow: none; border-color: var(--area); background: color-mix(in srgb, var(--sheet-raised) 80%, var(--area-tint)); }
.face-you .who-item.is-filed button { border-color: var(--ink-2); background: var(--sheet); }
.face-you .who-a { color: var(--ink-2); }
.who-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
html:not(.lt-js) .who-actions { display: none; }
.who-board[data-state="done"] [data-who-all] { opacity: .45; }
@media (min-width: 900px) {
  .who-faces { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .who-middle { padding-top: var(--s-4); }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .lt-ready .who-faces .face-laura { animation: c-face-l 680ms var(--ease-paper) both; transform-origin: 100% 50%; }
  .lt-ready .who-faces .face-you { animation: c-face-r 680ms 110ms var(--ease-paper) both; transform-origin: 0 50%; }
}
@media (prefers-reduced-motion: reduce) { .who-item button { transition: none; } }

/* ======================================================= SMALL WEDDINGS, ADDED */
.knots .chits { margin-top: var(--s-2); }
.knots h2.c-display { font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); margin: 0; }
.occ-grid .knot-line { grid-template-columns: none; }
@media (min-width: 900px) {
  .occ-grid .knot-line { padding-top: 0; padding-left: 2rem; }
  .occ-grid .knot-line::before { left: .55rem; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .occ-grid .knot::before { left: -1.95rem; top: var(--s-4); }
}
.hours .c-display { font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); }
.hours .c-lede { margin-top: var(--s-2); color: var(--ink-2); }
@media (max-width: 719px) { .hour-ribbon li:not(.is-event) { display: grid; background: transparent; color: var(--ink-2); } }

/* ======================================================= LAUNCHES, ADDED */
.desk .c-display { font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); }
.order { margin-top: var(--s-7); }
.order h3 { margin: 0; }
.launch-design .c-lede { color: var(--ink-2); margin: var(--s-2) 0 var(--s-4); }
.launch-design .c-display { font-size: clamp(1.875rem, 1.4rem + 1.5vw, 2.75rem); }
.launch-door { display: grid; max-width: 34rem; }

/* ======================================================= STATIONERY, ADDED */
.envelope-stage h2.c-display { font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.5rem); }
.invite { transform: translateY(6rem); }
html:not(.lt-js) .invite { transform: none; }
[data-choice="sage"] .inv-ink, [data-choice="sage"] .inv-script { fill: rgb(43 94 83); }
[data-choice="sage"] .inv-pattern { stroke: rgb(43 94 83); }
[data-choice="ink"] .inv-ink, [data-choice="ink"] .inv-script { fill: rgb(42 61 110); }
[data-choice="ink"] .inv-pattern { stroke: rgb(42 61 110); }
.inv-ink, .inv-script, .inv-pattern { transition: fill 260ms var(--ease-paper), stroke 260ms var(--ease-paper); }
@media (prefers-reduced-motion: reduce) { .inv-ink, .inv-script, .inv-pattern { transition: none; } }
.inv-chits { justify-content: center; }
.inv-chits legend { width: 100%; text-align: center; font-size: var(--text-s); }
html:not(.lt-js) .env-actions, html:not(.lt-js) .inv-chits { display: none; }
.addon-sheet { display: grid; gap: var(--s-3); }
.addon-sheet h2 { margin: 0; }
.addon-price .price { font-weight: 700; font-size: var(--text-l); }
@media (max-width: 719px) { .envelope { height: 17rem; } .invite { height: 14rem; left: 4%; right: 4%; } .envelope { --inv-rest: 4.5rem; --inv-lift: -5rem; } .env-back { height: 10rem; } .env-front { height: 8rem; } }

/* ======================================================= INCLUDED, ADDED */
.receipt-board { margin-top: var(--s-6); display: grid; gap: var(--s-4); }
.receipt-head { display: grid; gap: var(--s-3); }
.receipt-head h2 { font-size: clamp(1.875rem, 1.4rem + 1.5vw, 2.75rem); }
.halves { margin-top: var(--s-2); }
.receipt li.is-yours > span:last-child { color: var(--ink-2); }
.receipt li:not(.is-yours)[data-task] > span:last-child, .half-laura .receipt li > span:last-child { color: var(--area); }
.receipt-note { color: var(--ink-2); max-width: 70ch; font-size: var(--text-m); }

/* ======================================================= BOOK, ADDED */
.lead-stepper { margin-bottom: var(--s-2); }
.lead-fit { display: none; grid-column: 1 / -1; justify-self: start; font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; padding: 1px var(--s-2) 2px; border-radius: 999px; }
.is-live .lead-fit { display: inline-block; }
.is-in-time .lead-fit { background: var(--area); color: var(--band-text); }
.is-too-soon .lead-fit { box-shadow: inset 0 0 0 1.5px var(--ink-2); color: var(--ink); }
.lead-list li { transition: opacity 200ms var(--ease-paper); }
.lead-list li.is-too-soon b { color: var(--ink-2); }
.c-letter-lede { font-size: var(--text-l); }
.page-book .c-cord-back, .page-book .cord-back { margin-top: var(--s-6); }

/* ======================================================= FRONT, PHONE TIGHTENED */
@media (max-width: 719px) {
  .shelf .gb-body { font-size: var(--text-s); }
  .shelf .gb-body > :not(b) { display: none; }
  .shelf .gb-paper { height: .6rem; }
  .shelf { gap: var(--s-4); }
  .shelf-group { gap: var(--s-2); }
  .u-foot { grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-3); }
  .u-foot-sign { grid-column: 1 / -1; }
}

/* A chit's label can hold a price run and its label: only the outer span is the chit. */
.chit-input span span { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; font-size: inherit; transition: none; }
.chit-input span span::before { content: none; }
.chit-input span .suggested { font-size: var(--text-xs); font-weight: 500; }
.chit-input input:checked + span span { box-shadow: none; transform: none; }
.stepper-row select { min-height: 48px; border: 0; padding: 0 var(--s-3); background: transparent; color: var(--ink); font-weight: 650; font-size: var(--text-body); font-variant-numeric: tabular-nums; text-align: center; text-align-last: center; appearance: none; -webkit-appearance: none; width: 7rem; cursor: pointer; }
.stepper-row select:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.stepper-row select option { color: var(--ink); background: var(--sheet); }

/* Fixes after the first look. */
.c-pricecard > .band { padding: .5rem var(--s-4) .55rem; color: var(--band-text); font-size: inherit; }
.order time, .prog-rows time, .lead-list, .hour-ribbon li b { font-variant-numeric: normal; }
.occ-grid .c-pleats { grid-template-columns: 1fr; }
.who-tray .who-item:nth-child(odd) button { rotate: -.6deg; }
.who-tray .who-item:nth-child(even) button { rotate: .5deg; }
.who-item button { font-size: var(--text-body); }

/* Boxes with bodies: a closed box shows its front, its depth by its size. */
.box-xl { --box-body: 6.5rem; }
.box-l { --box-body: 4.75rem; }
.box-m { --box-body: 3.25rem; }
/* The lid face is the closed box's front: the lid's edge, then the front with its label. */
.box[data-box] > .box-h .lid-face {
  min-height: calc(var(--box-body, 3rem) + 2.5rem);
  padding: 1.15rem var(--s-4) var(--s-4);
  align-content: start;
  gap: var(--s-2);
  margin: 0 7px;
  background:
    linear-gradient(180deg, var(--sheet-raised) 0 .55rem, var(--sheet-shade) .55rem .75rem, transparent .75rem),
    linear-gradient(90deg, var(--shadow-ink-soft), transparent 6%, transparent 94%, var(--shadow-ink-soft)),
    linear-gradient(180deg, var(--sheet), var(--sheet-raised));
  box-shadow: 0 1px 0 var(--hairline), 0 22px 26px -20px var(--shadow-ink);
}
.box[data-box] > .box-h .lid-inside { justify-self: start; max-width: 34rem; padding: var(--s-2) var(--s-3); background: var(--sheet-raised); border: 1px solid var(--hairline); border-radius: 3px; box-shadow: 0 4px 10px -8px var(--shadow-ink); color: var(--ink-2); line-height: 1.45; }
.lt-js .box[data-box].is-open > .box-in { box-shadow: inset 0 18px 20px -18px var(--shadow-ink), inset 0 0 0 1px var(--hairline), 0 22px 26px -20px var(--shadow-ink); }
.box-in > .box { margin-inline: clamp(.5rem, 2vw, 1.5rem); }
.box .lid-pull { position: relative; z-index: 2; margin-top: -1px; }
.box .lid-face { z-index: 2; }
/* The invitation: tucked in at rest; taken out, it rises clear of the envelope and is laid in front of it. */
.envelope { clip-path: inset(-100vh -1rem 0 -1rem); --inv-rest: 6rem; --inv-lift: -7rem; }
.lt-js .invite { transition: none; transform: translateY(var(--inv-rest)); }
.lt-js [data-state="out"] .invite { z-index: 3; transform: translateY(-.5rem); }
@media (prefers-reduced-motion: no-preference) {
  .lt-js [data-state="out"] .invite { animation: c-inv-out 560ms var(--ease-paper) both; }
  .lt-js .envelope-stage.was-out:not([data-state="out"]) .invite { animation: c-inv-in 480ms var(--ease-paper) both; }
}
@keyframes c-inv-out { 0% { transform: translateY(var(--inv-rest)); z-index: 1; } 55% { transform: translateY(var(--inv-lift)); z-index: 1; } 56% { z-index: 3; } 100% { transform: translateY(-.5rem); z-index: 3; } }
@keyframes c-inv-in { 0% { transform: translateY(-.5rem); z-index: 3; } 45% { transform: translateY(var(--inv-lift)); z-index: 3; } 46% { z-index: 1; } 100% { transform: translateY(var(--inv-rest)); z-index: 1; } }
.suite { align-items: end; }

/* Phone: the day's run sheet one panel at a time, the next one peeking. */
@media (max-width: 719px) {
  .prog-track.swipe-track { grid-template-columns: none; grid-auto-columns: 86%; }
  .steppers { gap: var(--s-3); flex-wrap: nowrap; }
  .stepper-row select { width: 5.5rem; padding: 0 var(--s-1); }
  .stepper-row input[type="number"] { width: 3.5rem; padding: 0 var(--s-1); }
  .day-pkgs { display: grid; gap: var(--s-2); }
  .day-pkgs .chit-input span { width: 100%; }
  .prog-pleat { padding: var(--s-4); }
}
/* Phone: the two faces side by side, the jobs below them in two columns. */
@media (max-width: 899px) {
  .who-faces { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .who-middle { grid-column: 1 / -1; grid-row: 2; }
  .who-faces .face { padding: var(--s-4) var(--s-3); }
  .who-faces .face h3 { font-size: 1.75rem; }
  .who-tray { grid-template-columns: 1fr 1fr; }
  .who-item button { font-size: var(--text-m); padding: var(--s-2) var(--s-3); }
  .who-pile .who-item button { font-size: var(--text-s); }
  .who-fixed { padding-inline: 0; font-size: var(--text-m); }
}
@media (max-width: 719px) { .envelope { --inv-rest: 4.5rem; --inv-lift: -5rem; } }
.places > li { display: grid; } .places .place { height: 100%; }
.stepper-row { justify-self: start; }

/* Site-local override: the body is area-celebrate, so other areas' doors take back the family face. */
.area-organise, .area-simplify, .area-juggle, .area-declutter, .area-stage, .area-design, .area-share, .area-hub { --area-face: var(--face-display); --area-face-style: normal; --area-face-weight: 760; }
.c-sheet-fourteen { margin: 0 0 var(--s-3); }
.c-sheet-new + .c-price-lines { margin-top: var(--s-2); }
.c-travel { font-size: var(--text-s); color: var(--ink-2); }

/* Footer theme reset: Theme: match my device (clears lt-theme) */
.foot-theme { display: inline-flex; align-items: center; justify-content: flex-start; text-align: left; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.foot-theme:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }