/* ═══════════════════════════════════════════════════════════════════════
   wedding-rustic-country-card-kraft-and-twine — styles.css
   "Kraft & Twine" — a rustic country wedding invitation card.

   Palette (kraft paper, linen, harvest earth):
     linen      #F5EEDD · paper #FBF4E6 · kraft #EFE0C4 · kraft-deep #E3CEA4
     burlap     #C9A878 · gold #DFAE45 · harvest #D9A441
     sage       #8A9A64 / #6E7D4E · terracotta #B55E3E
     ink        #3A2818 · ink-soft #5C4632 · muted #8A7458

   Layout: one 100dvh shell — masthead / tabs / active panel / foot.
   Only the active panel scrolls (html.js gates this; without JS the page
   reads as a normal scrolling document).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* palette */
  --linen: #F5EEDD;
  --paper: #FBF4E6;
  --kraft: #EFE0C4;
  --kraft-deep: #E3CEA4;
  --burlap: #C9A878;
  --gold: #DFAE45;
  --harvest: #D9A441;
  --sage: #8A9A64;
  --sage-deep: #6E7D4E;
  --terracotta: #B55E3E;
  --terracotta-deep: #9A4D31;
  --ink: #3A2818;
  --ink-soft: #5C4632;
  --muted: #8A7458;
  --line: rgba(58, 40, 24, 0.18);
  --line-strong: rgba(58, 40, 24, 0.32);

  /* type */
  --font-script: "Dancing Script", "Brush Script MT", cursive;
  --font-display: "Playfair Display", "Georgia", serif;
  --font-body: "Old Standard TT", "Times New Roman", serif;
  --font-ui: "Karla", "Helvetica Neue", Arial, sans-serif;

  /* shape */
  --radius: 14px;
  --shadow-soft: 0 14px 40px rgba(90, 62, 34, 0.18);
  --shadow-card: 0 26px 60px rgba(90, 62, 34, 0.28);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html { height: 100%; }

body {
  height: 100%;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* faint paper grain over the whole app so the linen feels like real card */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0.45;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ── the shell ─────────────────────────────────────────────────────────── */
/* JS mode: one 100dvh app with a fixed chrome and a single scrolling
   panel. Without JS this collapses to a normal scrolling document and
   every panel reads in order (progressive enhancement). */
html.js .app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  overflow: hidden;
}

/* Mobile-critical: grid items default to min-width:auto, so without this
   the masthead / tab bar / panels refuse to shrink below their min-content
   width (~700px) on narrow screens and get clipped by the shell's
   overflow:hidden — the page would render cut off on phones. */
html.js .app > * { min-width: 0; }
html.js .panels > * { min-width: 0; }

html:not(.js) .app { height: auto; overflow: visible; display: block; }
html:not(.js) .panels { height: auto; overflow: visible; }
html:not(.js) .panel { display: block; position: static; overflow: visible; }
html:not(.js) .tabs-wrap { display: none; }

/* ── masthead (kraft) ──────────────────────────────────────────────────── */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px clamp(14px, 3vw, 28px);
  padding-top: calc(10px + env(safe-area-inset-top));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.05)),
    linear-gradient(160deg, var(--paper), var(--kraft) 60%, var(--kraft-deep));
  border-bottom: 1px solid rgba(58, 40, 24, 0.22);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

.masthead__brand { display: flex; align-items: center; gap: 11px; min-width: 0; }

.masthead__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #DDBB7E, var(--burlap));
  box-shadow: inset 0 0 0 1px rgba(59, 36, 16, 0.35), 0 4px 12px rgba(90, 62, 34, 0.28);
}

.masthead__monogram {
  font: 700 16px/1 var(--font-script);
  color: #F7EBD3;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(59, 36, 16, 0.5);
}

.masthead__text { min-width: 0; line-height: 1.25; }
.masthead__top {
  display: block;
  font: 500 9.5px var(--font-ui);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.masthead__name {
  display: block;
  font: 700 21px var(--font-script);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.masthead__name i { font-style: normal; color: var(--terracotta); padding: 0 3px; }

.masthead__actions { display: flex; gap: 8px; flex: none; }

.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(58, 40, 24, 0.32);
  background: rgba(251, 244, 230, 0.6);
  color: var(--ink);
  font: 500 12.5px var(--font-ui);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.chip-btn:hover { background: rgba(201, 168, 120, 0.28); border-color: rgba(58, 40, 24, 0.5); }
.chip-btn:active { transform: translateY(1px); }
.chip-btn.is-done { border-color: var(--terracotta); color: var(--terracotta); }

/* ── tabs (generated by main.js) ───────────────────────────────────────── */
/* The tab bar scrolls horizontally when it overflows; on small screens the
   JS shows prev/next icon buttons (flanking .tabs) so every tab stays
   reachable without a hunt for the scroll. */
.tabs-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(180deg, var(--kraft-deep), #DCC493);
  border-bottom: 1px solid rgba(58, 40, 24, 0.22);
}
.tabs {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 8px;
  align-items: center;
  padding: 10px clamp(14px, 3vw, 28px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs[hidden] { display: none; }
.tabs::-webkit-scrollbar { display: none; }

.tabs-nav {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0 8px;
  border-radius: 50%;
  border: 1px solid rgba(58, 40, 24, 0.32);
  background: rgba(251, 244, 230, 0.65);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.tabs-nav:hover { border-color: var(--terracotta); color: var(--ink); }
.tabs-nav:disabled { opacity: 0.35; cursor: default; }
.tabs-nav[hidden] { display: none; }

.tab {
  flex: none;
  appearance: none;
  border: 1px solid rgba(58, 40, 24, 0.28);
  border-radius: 999px;
  padding: 8px 16px;
  background: rgba(251, 244, 230, 0.35);
  color: var(--ink-soft);
  font: 500 12.5px var(--font-ui);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.tab:hover { border-color: var(--terracotta); color: var(--ink); }
.tab[aria-selected="true"] {
  background: linear-gradient(180deg, #D9B878, var(--burlap));
  border-color: rgba(90, 58, 32, 0.4);
  color: #241509;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(90, 62, 34, 0.25);
}

/* ── panels ────────────────────────────────────────────────────────────── */
.panels {
  position: relative;
  min-height: 0;
}

html.js .panel {
  display: none;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
html.js .panel.is-active { display: block; }

.panel-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 44px) clamp(18px, 4.5vw, 40px);
  padding-bottom: calc(clamp(28px, 5vw, 52px) + env(safe-area-inset-bottom));
}

/* thin rustic scrollbar inside the panel */
.panel::-webkit-scrollbar { width: 10px; }
.panel::-webkit-scrollbar-thumb { background: rgba(90, 62, 34, 0.35); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
.panel::-webkit-scrollbar-track { background: transparent; }

/* ── the invitation card (linen wall + kraft sheet) ────────────────────── */
.linen-panel {
  background:
    linear-gradient(180deg, rgba(201, 168, 120, 0.28), rgba(201, 168, 120, 0) 90px),
    var(--linen);
}

.card-stage {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(16px, 3vw, 32px) clamp(12px, 3vw, 28px);
  padding-bottom: calc(clamp(18px, 3vw, 30px) + env(safe-area-inset-bottom));
}

/* margin:auto centres the card AND degrades gracefully when the card is
   taller than the viewport (flex centering alone would clip the top and
   make it unreachable by scroll). */
.card { margin: auto; }

.card__greeting {
  margin: 0 0 clamp(10px, 2vw, 18px);
  max-width: 540px;
  text-align: center;
  font-family: var(--font-script);
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  color: var(--terracotta-deep);
}
.card__greeting b { font-weight: 700; color: var(--terracotta); }

.card {
  position: relative;
  width: min(94%, 600px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #F5E8CB, var(--kraft) 55%, #E9D6AE);
  color: var(--ink);
  border-radius: 5px;
  padding: clamp(30px, 6vw, 52px) clamp(22px, 6vw, 56px) clamp(26px, 5vw, 44px);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(58, 40, 24, 0.3);
  transform: rotate(-0.4deg);
  text-align: center;
}

/* letterpress double frame: hairline + stitched border */
.card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(58, 40, 24, 0.3);
  border-radius: 3px;
  pointer-events: none;
}
.card::after {
  content: "";
  position: absolute;
  inset: 17px;
  border: 1px dashed rgba(58, 40, 24, 0.22);
  border-radius: 3px;
  pointer-events: none;
}

/* wheat sprigs in the top corners — sit behind the text (z-index 0) so
   they frame the lettering without ever covering it */
.card__sprig {
  position: absolute;
  width: clamp(74px, 14vw, 118px);
  height: auto;
  pointer-events: none;
  opacity: 0.9;
  z-index: 0;
}
.card__sprig--tl { top: 26px; left: 20px; }
.card__sprig--tr { top: 26px; right: 20px; }

/* all card text paints above the artwork */
.card > *:not(.card__sprig) {
  position: relative;
  z-index: 1;
}

.card__kicker {
  margin: 0 0 14px;
  font: 600 10.5px var(--font-ui);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.card__names {
  margin: 0;
  font: 700 clamp(2.5rem, 9vw, 4.3rem) / 1.12 var(--font-script);
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 3px rgba(90, 62, 34, 0.16);
}
.card__name { display: inline-block; }
.card__amp {
  display: inline-block;
  margin: 0 0.18em;
  font-style: normal;
  color: var(--terracotta);
}

.card__line {
  margin: 10px auto 0;
  max-width: 420px;
  font: italic 500 clamp(0.95rem, 2.6vw, 1.1rem)/1.6 var(--font-display);
  color: var(--ink-soft);
}

/* couple portrait on the card — optional; delete the <figure> to remove.
   A paper mat with a dashed letterpress inner frame, slightly tilted like
   a photograph propped on the mantel. object-fit: cover + a warm fallback
   behind the image mean any real photo fills the frame neatly. */
.card__photo {
  position: relative;
  margin: clamp(18px, 3.2vw, 26px) auto clamp(10px, 2vw, 16px);
  width: min(56%, 214px);
  padding: 7px;
  background: linear-gradient(180deg, var(--paper), #EFE3C8);
  border: 1px solid rgba(58, 40, 24, 0.32);
  box-shadow: 0 12px 26px rgba(90, 62, 34, 0.28), 0 0 0 1px rgba(251, 244, 230, 0.7) inset;
  transform: rotate(-1.4deg);
}
.card__photo::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px dashed rgba(58, 40, 24, 0.2);
  pointer-events: none;
}
.card__photo-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--kraft-deep);   /* warm fallback behind the image */
}
.photo-open {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.photo-open img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.photo-open:hover img,
.photo-open:focus-visible img { transform: scale(1.04); }

/* gentle zoom badge — whispers "tap me" on every photo slot */
.photo-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--paper);
  background: rgba(58, 40, 24, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: 0 3px 10px rgba(58, 40, 24, 0.35);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.photo-open:hover .photo-zoom,
.photo-open:focus-visible .photo-zoom,
.gallery-item:hover .photo-zoom,
.gallery-item:focus-visible .photo-zoom,
.banner-open:hover .photo-zoom,
.banner-open:focus-visible .photo-zoom,
.free-media:hover .photo-zoom,
.free-media:focus-visible .photo-zoom {
  opacity: 1;
  transform: none;
}
/* touch devices have no hover — keep the badge gently visible */
@media (hover: none) {
  .photo-zoom { opacity: 0.85; transform: none; }
}
.card__photo-cap {
  margin: 8px 0 0;
  font: italic 500 0.8rem/1.4 var(--font-display);
  color: var(--ink-soft);
}
/* wheat · daisy · wheat divider */
.card__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 14px);
  margin: clamp(18px, 3.4vw, 26px) auto clamp(14px, 2.6vw, 20px);
}
.card__divider-item {
  width: clamp(26px, 6vw, 40px);
  height: auto;
}
.card__divider-item--mid { width: clamp(20px, 4.5vw, 30px); }

.card__date {
  margin: 0 0 6px;
  font: 400 clamp(1rem, 3vw, 1.15rem)/1.55 var(--font-body);
  color: var(--ink);
}
.card__time {
  margin: 0 0 clamp(18px, 3vw, 24px);
  font: italic 400 0.98rem var(--font-body);
  color: var(--ink-soft);
}

/* burlap ribbon, stitched top & bottom */
.card__ribbon {
  position: relative;
  margin: 0 auto;
  max-width: 430px;
  padding: 13px 16px 12px;
  background:
    repeating-linear-gradient(90deg, rgba(90, 58, 32, 0.16) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(90, 58, 32, 0.14) 0 1px, transparent 1px 3px),
    radial-gradient(120% 160% at 50% 0%, #D9B878, var(--burlap) 70%);
  border-radius: 3px;
  box-shadow: 0 3px 10px rgba(58, 40, 24, 0.28), inset 0 0 0 1px rgba(90, 58, 32, 0.35);
}
.card__ribbon::before,
.card__ribbon::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  border-top: 1px dashed rgba(36, 21, 9, 0.55);
}
.card__ribbon::before { top: 5px; }
.card__ribbon::after { bottom: 5px; }

.card__ribbon-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.45;
  pointer-events: none;
}

.card__ribbon-text {
  position: relative;
  margin: 0;
  font: 700 clamp(1rem, 3vw, 1.2rem) var(--font-ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FBF4E6;
  text-shadow: 0 1px 2px rgba(58, 40, 24, 0.5);
}

.card__venue {
  margin: clamp(14px, 2.6vw, 18px) 0 0;
  font: 400 0.96rem var(--font-body);
  color: var(--ink-soft);
}

.card__reception {
  margin: 12px auto 0;
  max-width: 380px;
  padding-top: 14px;
  border-top: 1px dashed rgba(58, 40, 24, 0.24);
  font: italic 400 0.92rem/1.55 var(--font-body);
  color: var(--ink-soft);
}

.card__footnote {
  margin: 14px auto 0;
  font: 500 10px var(--font-ui);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── section heads (details / RSVP / guestbook) ────────────────────────── */
.section-head { margin-bottom: clamp(22px, 4vw, 34px); }
.kicker {
  margin: 0 0 8px;
  font: 600 10.5px var(--font-ui);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.section-head h2 {
  margin: 0 0 10px;
  font: 700 clamp(1.6rem, 4.5vw, 2.3rem) / 1.2 var(--font-display);
  color: var(--ink);
}
.lede {
  margin: 0;
  font: italic 400 1rem/1.65 var(--font-body);
  color: var(--ink-soft);
}
.rsvp-date-line {
  margin: 12px 0 0;
  font: italic 400 1rem/1.65 var(--font-body);
  color: var(--ink-soft);
}
.rsvp-date-line .rsvp-date { font-style: normal; font-weight: 700; color: var(--terracotta); }

.block-title {
  margin: clamp(26px, 4vw, 36px) 0 14px;
  font: 700 1.2rem var(--font-display);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 12px;
}
.block-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
}

/* ── ceremony countdown tiles ──────────────────────────────────────────── */
.countdown-tiles {
  text-align: center;
  padding: clamp(18px, 3vw, 26px);
  background: rgba(251, 244, 230, 0.7);
  border: 1px dashed rgba(58, 40, 24, 0.35);
  border-radius: var(--radius);
}
.countdown-tiles__label {
  margin: 0 0 14px;
  font: 500 10.5px var(--font-ui);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.tiles { display: flex; justify-content: center; gap: clamp(8px, 2vw, 14px); }
.tile {
  min-width: 64px;
  padding: 10px 8px 8px;
  background: linear-gradient(180deg, var(--paper), #EFE3C8);
  border-radius: 8px;
  border: 1px solid rgba(58, 40, 24, 0.22);
  box-shadow: 0 2px 6px rgba(58, 40, 24, 0.16);
}
.tile-num {
  display: block;
  font: 700 1.7rem/1 var(--font-display);
  color: var(--ink);
}
.tile-cap {
  display: block;
  margin-top: 6px;
  font: 500 9px var(--font-ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.countdown-tiles__here {
  margin: 14px 0 0;
  font: italic 1.02rem var(--font-body);
  color: var(--terracotta);
}

/* ── timeline ──────────────────────────────────────────────────────────── */
.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline-item {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 11px 0 11px 26px;
  border-bottom: 1px dashed rgba(58, 40, 24, 0.16);
}
.timeline-item:last-child { border-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold), var(--harvest));
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.22);
}
.timeline-item__time {
  flex: none;
  width: 82px;
  font: 700 13px var(--font-ui);
  letter-spacing: 0.06em;
  color: var(--terracotta);
  padding-top: 2px;
}
.timeline-item__text { font: 400 1rem var(--font-body); color: var(--ink-soft); }

/* ── venues ────────────────────────────────────────────────────────────── */
.event-list {
  display: grid;
  gap: 14px;
  margin-top: 8px;
}
.event-item {
  position: relative;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, var(--paper), #F2E6CB);
  border: 1px solid rgba(58, 40, 24, 0.24);
  border-radius: var(--radius);
  box-shadow: 0 3px 10px rgba(58, 40, 24, 0.12);
}
.event-item__chip {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #D9B878, var(--burlap));
  color: #241509;
  font: 700 9.5px var(--font-ui);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.event-item__title { margin: 0 0 4px; font: 700 1.25rem var(--font-display); color: var(--ink); }
.event-item__when { margin: 0; font: 500 12.5px var(--font-ui); color: var(--terracotta); }
.event-item__addr { margin: 4px 0 0; font: 400 0.94rem var(--font-body); color: var(--ink-soft); }
.event-item__actions { margin-top: 12px; }

.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  font: 600 13px var(--font-ui);
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--ghost {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--terracotta); color: var(--terracotta); }
.btn--primary {
  background: linear-gradient(180deg, #C46947, var(--terracotta));
  border-color: rgba(90, 58, 32, 0.35);
  color: var(--paper);
  box-shadow: 0 3px 10px rgba(154, 77, 49, 0.35);
}
.btn--primary:hover { background: linear-gradient(180deg, #B55E3E, var(--terracotta-deep)); }
.btn--block { display: block; width: 100%; text-align: center; }

/* ── notes ─────────────────────────────────────────────────────────────── */
.notes { margin-top: clamp(24px, 4vw, 34px); }
.note {
  position: relative;
  margin: 0 0 10px;
  padding-left: 20px;
  font: 400 0.96rem/1.6 var(--font-body);
  color: var(--ink-soft);
}
.note::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--harvest);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.2);
}
.note strong { color: var(--ink); font-weight: 700; }

/* ── official flyer / banner (optional) ──────────────────────────────────
   A slot for hosts who already have a designed flyer or save-the-date
   poster (this card's companion poster is barnwood-burlap) — display it
   so guests can confirm they are in the right place. Delete the whole
   <figure class="banner-flyer"> block to hide the feature. Clicking it
   opens the full-screen viewer with zoom (main.js). */
.banner-block { margin-top: clamp(26px, 4vw, 36px); }
.banner-flyer {
  position: relative;
  margin: 0;
  text-align: center;
}
.banner-open {
  appearance: none;
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(58, 40, 24, 0.32);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--paper), #EFE3C8);
  box-shadow: 0 8px 20px rgba(90, 62, 34, 0.2), 0 0 0 1px rgba(251, 244, 230, 0.7) inset;
  cursor: zoom-in;
  transform: rotate(-0.6deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.banner-open:hover,
.banner-open:focus-visible {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: 0 18px 40px rgba(90, 62, 34, 0.3), 0 0 0 1px rgba(251, 244, 230, 0.7) inset;
}
.banner-img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: var(--kraft-deep);   /* warm fallback behind the image */
}
.banner-caption {
  margin: 10px 0 0;
  font: italic 500 0.82rem var(--font-display);
  color: var(--muted);
}

/* ── optional film feature (video URL embed) ─────────────────────────────
   Ships visible with a built-in placeholder poster, so the film slot is
   seen right away. When data-video-url holds a URL (YouTube / Vimeo / any
   embeddable link), guests tap play and an <iframe> is lazily built —
   nothing loads until then. Empty URL = the poster shows with a gentle
   "the film will play here soon" note; delete the block = removed. */
.film-card {
  margin-top: clamp(30px, 5vw, 44px);
  padding-top: clamp(24px, 4vw, 34px);
  border-top: 1px dashed rgba(58, 40, 24, 0.24);
  text-align: center;
}
.film-card[hidden] { display: none; }
.film-label {
  margin: 0;
  font: 600 10.5px var(--font-ui);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.film-frame {
  position: relative;
  width: 100%;
  max-width: 660px;
  margin: 16px auto 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: var(--kraft-deep);
  border: 1px solid rgba(58, 40, 24, 0.32);
  box-shadow: 0 14px 32px rgba(90, 62, 34, 0.28);
}
.film-open {
  appearance: none;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.film-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  background: linear-gradient(135deg, #C46947, var(--terracotta));
  box-shadow: 0 12px 26px -10px rgba(154, 77, 49, 0.9);
  animation: film-pulse 2.6s ease-in-out infinite;
  transition: transform 0.25s ease;
}
.film-play svg { width: 27px; height: 27px; margin-left: 4px; }
.film-open:hover .film-play,
.film-open:focus-visible .film-play { transform: translate(-50%, -50%) scale(1.08); }
.film-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  font: 600 10px var(--font-ui);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(58, 40, 24, 0.6);
  padding: 7px 14px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
/* gentle "coming soon" note: shown on the poster when data-video-url is
   empty, replacing the tap-to-play hint so a guest who taps is never
   left with nothing happening */
.film-note {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 88%;
  margin: 0;
  font: 600 10px var(--font-ui);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(58, 40, 24, 0.78);
  padding: 10px 18px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.film-note[hidden] { display: none; }
/* empty-URL state: the play button stops pulsing (it can't play yet) and
   dims once the note is shown */
.film-frame.is-coming-soon .film-play { animation: none; }
.film-frame.is-noted .film-play { opacity: 0.35; }
.film-frame.is-noted .film-hint { visibility: hidden; }
.film-frame.is-playing iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.film-external {
  display: inline-block;
  margin-top: 16px;
  font: 600 12px var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  padding: 10px 18px;
  border: 1px solid rgba(154, 77, 49, 0.4);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.film-external:hover { background: rgba(181, 94, 62, 0.1); border-color: var(--terracotta); }
.film-external[hidden] { display: none; }
@keyframes film-pulse {
  0%, 100% { box-shadow: 0 12px 26px -10px rgba(154, 77, 49, 0.9), 0 0 0 0 rgba(154, 77, 49, 0.45); }
  50%      { box-shadow: 0 12px 26px -10px rgba(154, 77, 49, 0.9), 0 0 0 14px rgba(154, 77, 49, 0); }
}

/* ── RSVP form ─────────────────────────────────────────────────────────── */
.rsvp-form { margin-top: 6px; }

.form-group { margin-bottom: 16px; }
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font: 700 12px var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.form-group label small {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px var(--font-body);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group textarea { resize: vertical; min-height: 74px; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: #A18D6F; }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(181, 94, 62, 0.18);
}

.error {
  display: block;
  margin-top: 5px;
  font: 600 12px var(--font-ui);
  color: #B0413A;
}
.error:empty { display: none; }

.form-hint {
  margin: -6px 0 18px;
  font: italic 400 0.86rem var(--font-body);
  color: var(--muted);
}

/* declined state: main.js toggles .is-declining on the form */
.rsvp-extras,
.declined-note {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.rsvp-extras { padding-top: 4px; }
.declined-note {
  display: none;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px dashed rgba(181, 94, 62, 0.5);
  border-radius: 10px;
  background: rgba(181, 94, 62, 0.08);
  font: italic 400 0.95rem var(--font-body);
  color: var(--terracotta-deep);
}
form.is-declining .rsvp-extras { opacity: 0.35; pointer-events: none; }
form.is-declining .declined-note { display: block; }

/* RSVP deadline countdown (revealed only when the platform sets rsvpDeadline) */
.rsvp-countdown {
  margin: 0 0 22px;
  padding: 14px 18px;
  text-align: center;
  background: rgba(217, 164, 65, 0.12);
  border: 1px dashed rgba(217, 164, 65, 0.55);
  border-radius: 10px;
}
.rsvp-countdown__label {
  margin: 0 0 4px;
  font: 500 10px var(--font-ui);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}
.rsvp-countdown__nums {
  margin: 0;
  font: 700 1.25rem var(--font-display);
  color: var(--terracotta);
}
.rsvp-countdown__nums span { color: var(--ink); }

.loading {
  display: none;
  text-align: center;
  padding: 12px 0 0;
  font: italic 600 0.9rem var(--font-body);
  color: var(--muted);
}

/* ── guestbook (platform injects form + list into .guestbook-body) ─────── */
.guestbook-body #guestbookForm { margin-top: 6px; }
.guestbook-body #guestbookForm input,
.guestbook-body #guestbookForm textarea {
  width: 100%;
  padding: 11px 13px;
  margin-bottom: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px var(--font-body);
}
.guestbook-body #guestbookForm textarea { min-height: 96px; resize: vertical; }
.guestbook-body #guestbookForm button {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 8px;
  border: 1px solid rgba(90, 58, 32, 0.35);
  background: linear-gradient(180deg, #C46947, var(--terracotta));
  color: var(--paper);
  font: 600 13px var(--font-ui);
  cursor: pointer;
}
.guestbook-body .guestbook-chapta { margin-bottom: 14px; }
.guestbook-body .loading-guestbook {
  text-align: center;
  font-style: italic;
  color: var(--muted);
  padding: 8px 0;
}

#comments-container { margin-top: 26px; }
.guestbook-entry {
  padding: 14px 18px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, var(--paper), #F2E6CB);
  border: 1px solid rgba(58, 40, 24, 0.22);
  border-left: 3px solid var(--burlap);
  border-radius: 10px;
}
.guestbook-entry h5 {
  margin: 0 0 4px;
  font: 700 1.02rem var(--font-display);
  color: var(--ink);
}
.guestbook-entry p { margin: 0 0 4px; font: 400 0.95rem/1.55 var(--font-body); color: var(--ink-soft); }
.guestbook-entry small { font: 500 11px var(--font-ui); color: var(--muted); }

.more-guestbook-wrap { text-align: center; margin-top: 14px; }
.more-guestbook-wrap #load-more {
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font: 600 12.5px var(--font-ui);
  cursor: pointer;
}
.more-guestbook-wrap #load-more:hover { border-color: var(--terracotta); color: var(--terracotta); }

/* ── free page (optional "More" panel, host-filled) ──────────────────────
   One repeatable block per entry: a title, free text and an OPTIONAL
   photo. The panel is removed by the render engine when there are no
   blocks (or when the host toggles the Free Page section off), so the
   "More" tab main.js builds from this panel disappears with it. */
.free-blocks {
  display: grid;
  gap: clamp(28px, 4.5vw, 44px);
}
.free-block {
  margin: 0;
  text-align: center;
}
.free-title {
  margin: 0 0 clamp(12px, 2.4vw, 18px);
  font: 700 clamp(1.35rem, 4vw, 1.9rem) / 1.25 var(--font-display);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.free-title:focus { outline: none; }
.free-media {
  position: relative;
  margin: 0 auto clamp(14px, 2.6vw, 20px);
  max-width: 560px;
  cursor: zoom-in;
  outline-offset: 4px;
}
.free-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  padding: 6px;
  background: linear-gradient(180deg, var(--paper), #EFE3C8);
  border: 1px solid rgba(58, 40, 24, 0.32);
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(90, 62, 34, 0.2), 0 0 0 1px rgba(251, 244, 230, 0.7) inset;
  transition: transform 0.45s ease;
}
.free-media:hover .free-img,
.free-media:focus-visible .free-img { transform: scale(1.02); }
.free-content {
  margin: 0 auto;
  max-width: 34em;
  text-align: left;
  font: 400 0.98rem/1.7 var(--font-body);
  color: var(--ink-soft);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* ── photo gallery (Our Album panel) ─────────────────────────────────── */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2.2vw, 20px);
}
/* the repeatable photo set: the platform clones .gallery-item inside
   .gallery-grid; display:contents keeps those clones flowing in the same
   grid as the fixed wide opening shot above it */
.gallery-grid { display: contents; }
.gallery-item {
  margin: 0;
  border-radius: 8px;
  cursor: zoom-in;
  outline-offset: 4px;
}
.gallery-item__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(58, 40, 24, 0.28);
  box-shadow: 0 6px 16px rgba(90, 62, 34, 0.18);
  background: var(--kraft-deep);   /* warm fallback behind the image */
}
.gallery-item__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.gallery-item:hover .gallery-item__media img,
.gallery-item:focus-visible .gallery-item__media img {
  transform: scale(1.05);
}
.gallery-item--wide { grid-column: 1 / -1; }
.gallery-item--wide .gallery-item__media { aspect-ratio: 16 / 9; }
.gallery-item__cap {
  margin: 8px 2px 0;
  font: italic 500 0.88rem var(--font-display);
  color: var(--ink-soft);
}

/* ── lightbox ─────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 44px);
  background: rgba(36, 23, 12, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-align: center;
}
.lightbox[hidden] { display: none; }

.lightbox__figure {
  margin: 0;
  max-width: min(900px, 94vw);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox__img {
  max-width: 100%;
  max-height: min(78vh, 82dvh);
  border-radius: 6px;
  border: 6px solid var(--paper);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  background: var(--kraft-deep);
  cursor: zoom-in;
}

/* tap/click the photo to zoom in — the frame scrolls to explore;
   tap again to zoom out (keyboard: Enter/Space on the photo) */
.lightbox__figure.is-zoomed {
  overflow: auto;
  max-width: 94vw;
  max-height: 94vh;
  -webkit-overflow-scrolling: touch;
}
.lightbox__figure.is-zoomed .lightbox__img {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  cursor: zoom-out;
}
.lightbox__hint {
  margin: 10px 0 0;
  font: 600 10.5px var(--font-ui);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(251, 244, 230, 0.65);
}
.lightbox__cap {
  margin-top: 16px;
  font: italic 500 1.05rem var(--font-display);
  color: var(--paper);
}
.lightbox__count {
  margin: 8px 0 0;
  font: 600 12px var(--font-ui);
  letter-spacing: 0.2em;
  color: rgba(251, 244, 230, 0.6);
}

.lightbox__close {
  position: absolute;
  top: clamp(12px, 3vw, 26px);
  right: clamp(12px, 3vw, 26px);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(251, 244, 230, 0.35);
  background: rgba(251, 244, 230, 0.08);
  color: var(--paper);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox__close:hover { background: rgba(251, 244, 230, 0.18); transform: rotate(90deg); }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(251, 244, 230, 0.35);
  background: rgba(251, 244, 230, 0.08);
  color: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox__nav:hover { background: rgba(251, 244, 230, 0.18); }
.lightbox__nav--prev { left: clamp(0.8rem, 3vw, 2.2rem); }
.lightbox__nav--next { right: clamp(0.8rem, 3vw, 2.2rem); }
.lightbox__nav--prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox__nav--next:hover { transform: translateY(-50%) translateX(3px); }
.lightbox__nav:disabled { opacity: 0.25; cursor: default; }

/* ── foot ──────────────────────────────────────────────────────────────── */
.foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px clamp(14px, 3vw, 28px);
  padding-bottom: calc(9px + env(safe-area-inset-bottom));
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  background: linear-gradient(180deg, var(--kraft-deep), #DCC493);
  border-top: 1px solid rgba(58, 40, 24, 0.22);
  color: var(--ink-soft);
  font: 500 11.5px var(--font-ui);
  letter-spacing: 0.08em;
}
.foot::-webkit-scrollbar { display: none; }
.foot__dot { opacity: 0.5; }
.footer-brand { font-weight: 700; letter-spacing: 0.12em; }
.footer-brand-name { color: var(--terracotta); font-style: normal; }

/* ── full-width powered-by brand strip ──────────────────────────────────
   A slim, full-width closing credit line at the bottom of the shell. The
   platform swaps the literal brand token inside .link-footer for the
   platform name at render; the cockpit's Free Powered By field can
   override the whole line. Stays visible even when the free page is
   hidden. */
html:not(.js) .powered-by {
  width: 100%;
  text-align: center;
  padding: 14px 16px 22px;
  border-top: 1px solid rgba(58, 40, 24, 0.18);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
html.js .powered-by {
  width: 100%;
  text-align: center;
  padding: 5px 14px;
  border-top: 1px solid rgba(58, 40, 24, 0.18);
  background: rgba(251, 244, 230, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.powered-by .link-footer { color: var(--terracotta); }

/* ── reveal-on-scroll (skipped entirely under reduced motion) ──────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

html:not(.js) [data-reveal] { opacity: 1; transform: none; }

/* ── reduced motion ────────────────────────────────────────────────────── */
html.no-motion *,
html.no-motion *::before,
html.no-motion *::after {
  animation: none !important;
  transition: none !important;
}
html.no-motion [data-reveal] { opacity: 1; transform: none; }
html.no-motion .film-play { animation: none; }

/* ── focus visibility ──────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--harvest);
  outline-offset: 2px;
}

/* ── small screens ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* icon-only action buttons: keep them near the 44px touch-target size */
  .chip-btn { padding: 9px 11px; min-width: 42px; min-height: 42px; justify-content: center; }
  .chip-btn__label { display: none; }
  /* the kicker line shrinks so it truncates later (or not at all) */
  .masthead { gap: 8px; }
  .masthead__top { font-size: 8.5px; letter-spacing: 0.14em; max-width: none; }
  .masthead__name { font-size: 19px; }
  .timeline-item__time { width: 68px; font-size: 12px; }
  .tile { min-width: 56px; }
  .tile-num { font-size: 1.4rem; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .card__photo { width: min(62%, 190px); }
  /* easy-to-operate touch targets for the tab navigation */
  .tabs { gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .tab { padding: 12px 16px; min-height: 44px; }
  .tabs-nav { width: 44px; height: 44px; margin: 0 5px; }
  /* let the footer wrap into tidy centred lines instead of scrolling
     out of reach on a narrow screen */
  .foot {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 3px;
    white-space: normal;
    text-align: center;
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    line-height: 1.5;
  }
  .banner-img { aspect-ratio: 8 / 4.4; }
}

/* ── touch devices (any orientation / size) ─────────────────────────────
   iOS Safari zooms the viewport when a focused field's font-size is
   under 16px — keep every field at 16px so focusing never jumps the
   page. Keyed to pointer capability, not width, so landscape phones and
   tablets are covered too. */
@media (hover: none) and (pointer: coarse) {
  .form-group input,
  .form-group select,
  .form-group textarea,
  .guestbook-body #guestbookForm input,
  .guestbook-body #guestbookForm textarea {
    font-size: 16px;
  }
}

/* ── print ─────────────────────────────────────────────────────────────── */
@media print {
  @page { margin: 12mm; }

  html.js .app { height: auto; display: block; overflow: visible; }
  html.js .panels { height: auto; overflow: visible; }
  html.js .panel { display: block !important; overflow: visible !important; position: static; }

  .masthead__actions, .tabs-wrap, .foot, .powered-by, .no-print { display: none !important; }

  /* the lightbox is an on-screen overlay — never print it */
  .lightbox { display: none !important; }

  /* a playing video can't print — the poster prints instead */
  .film-frame iframe { display: none !important; }
  .film-play, .film-hint { box-shadow: none; }

  .card {
    transform: none;
    box-shadow: none;
    width: 100%;
    border: 1px solid rgba(58, 40, 24, 0.4);
  }
  .panel-inner { max-width: none; }
  .rsvp-form input, .rsvp-form select, .rsvp-form textarea {
    border-color: #9A8A6E;
  }

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}