*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { background: #FAF6EC; }
  /* Kill sub-pixel hairline seams between full-bleed bands on retina:
     bleed each band's OWN colour ~1.5px on every side so the lighter page
     background can never show through a fractional-pixel edge. */
  .se-section { margin-top: -1px; }
  #note, #schedule, #rsvp { box-shadow: 0 0 0 1.5px #FAF6EC; }
  #about, #travel, #gifts { box-shadow: 0 0 0 1.5px #F1E7D1; }
  .hero { max-width: 100%; }
  .road-wrap { display: flex; justify-content: center; }
  .road-mobile { display: none; }
  @media (max-width: 780px) { .road-stage { transform: scale(0.84); } .road-wrap { height: 882px; } }
  @media (max-width: 680px) { .road-wrap { display: none; } .road-mobile { display: block; } }
  .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 76% center; z-index: 0; }
  /* the <picture> is only a wrapper for choosing the file; it should take no
     part in the hero's own layout */
  .hero picture { display: contents; }
  #video-intro { display: none; position: fixed; inset: 0; z-index: 2000; background: #FAF6EC; overflow: hidden; transition: opacity .9s ease; }
  #video-intro.out { opacity: 0; pointer-events: none; }
  #video-intro .vi-ground { position: absolute; inset: 0; background: #FAF6EC; }
  #vi-video { position: absolute; inset: 0; margin: auto; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
  @media (max-width: 760px) { #vi-video { width: 100%; height: 100%; object-fit: cover; } }
  /* The way into the site, with how much film is left shown as a short rule
     beneath it. The two belong together: a bare hairline floating on its own
     over the footage read as a scratch on the print rather than a timer.
     Both carry the cream-and-blur of the sound button so the film can be any
     colour underneath and they stay legible. */
  #vi-enter { position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(44px, 8vh, 74px); display: inline-flex; align-items: center; gap: 9px; padding: 11px 24px; border-radius: 0; border: 1px solid rgba(18,48,31,.4); background: rgba(250,246,236,.82); backdrop-filter: blur(6px); color: #252D1E; font-family: 'Cormorant Garamond', serif; font-size: 15.5px; letter-spacing: .18em; font-variant: small-caps; line-height: 1; cursor: pointer; transition: background .25s ease; }
  #vi-enter:hover { background: #F1E7D1; }
  #vi-enter svg { flex: none; }
  #vi-progress { position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(26px, 4.6vh, 46px); width: min(164px, 34vw); height: 3px; background: rgba(250,246,236,.55); box-shadow: inset 0 0 0 .5px rgba(37,45,30,.14); backdrop-filter: blur(4px); overflow: hidden; }
  #vi-progress-fill { display: block; width: 0%; height: 100%; background: rgba(37,45,30,.62); transition: width .25s linear; }
  /* Sits to the left of the sound button and borrows its cream-and-blur, so
     it reads as a label on the same control rather than a notice of its own.
     Fades itself out once it has been seen, or the moment sound comes on. */
  /* Ink by default, because on a wide screen the film is letterboxed and the
     corner behind this is the cream ground, not footage. Below 760px the
     video switches to cover and fills the screen, so it turns light there. */
  #vi-sound-hint { position: absolute; top: clamp(16px, 3vh, 34px); right: calc(clamp(16px, 3vw, 34px) + 54px); height: 44px; display: inline-flex; align-items: center; gap: 8px; color: #252D1E; font-family: 'Cormorant Garamond', serif; font-size: 13.5px; letter-spacing: .18em; font-variant: small-caps; line-height: 1; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateX(7px); transition: opacity .6s ease, transform .6s ease; }
  @media (max-width: 760px) {
    #vi-sound-hint { color: #F4EFE2; text-shadow: 0 1px 10px rgba(14,22,15,.75), 0 0 3px rgba(14,22,15,.55); }
  }
  #vi-sound-hint.show { opacity: 1; transform: translateX(0); }
  #vi-sound-hint svg { flex: none; }
  #vi-sound { position: absolute; right: clamp(16px, 3vw, 34px); top: clamp(16px, 3vh, 34px); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(18,48,31,.4); background: rgba(250,246,236,.78); backdrop-filter: blur(6px); color: #252D1E; font-family: 'Cormorant Garamond', serif; font-size: 17px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  @media (max-aspect-ratio: 5/4) { .hero-bg { object-position: center; } .hero { aspect-ratio: auto !important; min-height: 100svh !important; } }
  @media (max-width: 760px) { .hero-copy { padding: 26px !important; } }
  .nav { transition: background .4s ease, box-shadow .4s ease, padding .3s ease; }
  .nav::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 104px; pointer-events: none; background: linear-gradient(180deg, rgba(16,24,16,.72) 0%, rgba(16,24,16,.52) 55%, rgba(16,24,16,0) 100%); transition: opacity .4s ease; }
  .nav.scrolled::before { opacity: 0; }
  .nav.scrolled { background: rgba(250,246,236,0.94); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(95,75,53,0.08); padding-top: 14px; padding-bottom: 14px; }
  .nav.scrolled .nav-link, .nav.scrolled .lang-btn, .nav.scrolled .hamburger span { color: #252D1E; }
  .nav:not(.scrolled) .nav-link { color: #F4EFE2 !important; }
  .nav:not(.scrolled) .lang-btn { color: #F4EFE2 !important; }
  .nav:not(.scrolled) .hamburger span { background: #F4EFE2 !important; }
  .nav .logo-cream { display: block; } .nav .logo-ink { display: none; }
  .nav.scrolled .logo-cream { display: none; } .nav.scrolled .logo-ink { display: block; }
  .nav-link { position: relative; }
  .nav-link::after { content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0; background: var(--accent, #252D1E); transition: width .3s ease; }
  .nav-link:hover::after { width: 100%; }
  .lang-btn:hover { color: var(--accent, #252D1E) !important; }
  .mg, .mgn { position: absolute; pointer-events: none; z-index: 0; display: block; }
  /* The venue story is four paragraphs long, so its setting is here rather
     than inline: on a phone the leading has to come in or the panel fills
     the screen and the reader loses the page behind it. */
  /* overscroll-behavior so that reaching the end of the story scrolls
     nothing: without it the page behind carries on moving. */
  /* The italic asides in the Celebrations cards are one voice: the notes under
     each venue and the note under the dress code. The dress one sat at 19px
     because it inherits from the value above it, where the other two are
     paragraphs of their own. */
  #schedule em { font-size: 17px; line-height: 1.45; font-style: italic; }
  /* The RSVP reminder is one line with an underline under it, so a wrap
     splits the rule in two and looks like a mistake. Spanish is the longest
     of the three languages and wrapped on every phone; tighter tracking and
     a slightly smaller size hold all three on one line down to 375px. */
  .rsvp-reminder { font-size: clamp(16px, 4vw, 21px); letter-spacing: 0.1em; }
  @media (max-width: 640px) {
    .rsvp-reminder { font-size: clamp(14px, 3.7vw, 21px); letter-spacing: 0.05em; }
  }
  /* The note is four paragraphs and the first thing read on a phone. The
     section's 16px of side padding put it against both edges, and the body
     copy sitting at its clamp floor of 21px left only a few words a line. */
  @media (max-width: 640px) {
    #note { padding-left: 26px !important; padding-right: 26px !important; }
    #note .note-body { font-size: 18px !important; line-height: 1.7 !important; }
  }
  .venue-modal-panel { padding: clamp(34px, 5vw, 54px); overscroll-behavior: contain; -ms-overflow-style: none; scrollbar-width: none; }
  .venue-modal-panel::-webkit-scrollbar { display: none; }
  /* the title keeps clear of the close button rather than running under it */
  .venue-modal-panel h2 { font-family: 'Bodoni Moda', serif; font-weight: 600; font-size: clamp(31px, 5.4vw, 62px); line-height: 1.05; color: #252D1E; margin: 0 0 22px; padding-right: 52px; }
  .venue-modal-close { position: absolute; top: 8px; right: 10px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; font-family: 'Cormorant Garamond', serif; font-size: 34px; line-height: 1; color: #252D1E; }
  .venue-modal-panel p { margin: 0 0 15px; font-size: 17.5px; line-height: 1.65; color: #5A5548; }
  .venue-modal-panel .venue-close-line { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 26px; line-height: 1.4; color: var(--accent, #252D1E); margin: 10px 0 0; }
  @media (max-width: 640px) {
    .venue-modal-panel { padding: 30px 24px 28px; }
    .venue-modal-panel h2 { margin-bottom: 16px; }
    .venue-modal-panel p { font-size: 16.5px; line-height: 1.55; margin-bottom: 12px; }
    .venue-modal-panel .venue-close-line { font-size: 21px; margin-top: 8px; }
  }
  @media (max-width: 1180px){ .mg { display: none !important; } }
  @media (max-width: 980px){ .mgn { display: none !important; } }
  @media (max-width: 860px) {
    .nav-links { display: none !important; }
    .hamburger { display: flex !important; }
    .venue-grid { grid-template-columns: 1fr !important; }
    .card-grid { grid-template-columns: 1fr !important; }
    .facts-grid { grid-template-columns: 1fr !important; }
  }
  .rsvp-input:focus { outline: none; border-color: #252D1E; box-shadow: 0 0 0 2px rgba(18,48,31,.10); }
  .rsvp-toggle:hover { border-color: #252D1E; }
  .rsvp-btn { transition: opacity .2s ease, transform .2s ease; }
  .rsvp-btn:hover:not([disabled]) { opacity: .92; transform: translateY(-1px); }
  .rsvp-btn[disabled] { opacity: .55; cursor: default; }
  .rsvp-textlink:hover { color: #252D1E; }
  /* ---- Two-of-Us merging timeline ---- */
  .tl-heads { display: grid; grid-template-columns: 1fr 1fr; column-gap: 84px; align-items: end; margin: 0 0 22px; }
  .tl-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 84px; align-items: stretch; }
  .tl-her { border-right: 2px solid #252D1E; }
  .tl-his { border-left: 2px solid #252D1E; }
  .tl-item-her { position: relative; display: flex; align-items: center; gap: 20px; padding: 0 22px 0 0; margin-bottom: 30px; text-align: right; }
  .tl-item-his { position: relative; display: flex; align-items: center; gap: 20px; padding: 0 0 0 22px; margin-bottom: 30px; text-align: left; }
  .tl-dot { position: absolute; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 4px #FAF6EC; }
  .tl-dot-her { right: -7px; background: #252D1E; }
  .tl-dot-his { left: -7px; background: #252D1E; }
  .tl-photo { background: #fff; padding: 6px; border: 1px solid #DCD2B9; flex-shrink: 0; }
  .tl-meet-photo { animation: tlPulse 3.2s ease-in-out infinite; }
  @keyframes tlPulse {
    0%, 100% { box-shadow: 0 10px 26px rgba(35,46,30,.18), 0 0 0 0 rgba(18,48,31,.34); }
    50% { box-shadow: 0 10px 26px rgba(35,46,30,.18), 0 0 0 13px rgba(18,48,31,0); }
  }
  @media (max-width: 860px) {
    .tl-heads { grid-template-columns: 1fr; gap: 4px; }
    .tl-heads > div { text-align: left !important; }
    .tl-grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 6px; }
    .tl-her, .tl-his { border-right: none; border-left: 2px solid; }
    .tl-her { border-left-color: #252D1E; }
    .tl-his { border-left-color: #252D1E; }
    .tl-item-her, .tl-item-his { justify-content: flex-start !important; text-align: left !important; padding: 0 0 0 26px !important; }
    .tl-item-her .tl-dot, .tl-item-his .tl-dot { left: -7px !important; right: auto !important; }
    .tl-merge-svg { display: none !important; }
  }
  .alb-note{display:flex;align-items:center;justify-content:center;gap:9px;margin:26px auto 0;max-width:520px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:17px;line-height:1.5;color:#5A5548;text-wrap:pretty}
  .pc{position:relative;margin:34px auto 0;max-width:560px}
  .pc-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
  .pc-track::-webkit-scrollbar{display:none}
  .pc-slide{flex:0 0 100%;scroll-snap-align:start;cursor:grab;-webkit-user-select:none;user-select:none}
    /* level with the photograph: half a slide down, less half a caption. Not
       50% of the carousel, whose height moves with the dots. */
    .pc-arrow{position:absolute;top:calc((var(--slide-h) - var(--meta-h)) / 2);transform:translateY(-50%);z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid #DCD2B9;background:rgba(250,246,236,.94);color:#252D1E;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,opacity .2s}
  .pc-arrow:hover{background:#F1E7D1}
  .pc-arrow[data-off="1"]{opacity:.28;pointer-events:none}
  .pc-prev{left:-21px}
  .pc-next{right:-21px}
  .pc-dots{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:var(--dots-gap);transition:margin-top .3s ease}
  .pc-dot{width:7px;height:7px;border-radius:50%;background:#DCD2B9;border:0;padding:0;cursor:pointer;transition:background .25s,transform .25s}
  .pc-dot[data-on="1"]{background:#252D1E;transform:scale(1.4)}
  @media(max-width:860px){
    .pc{max-width:none;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
    .pc-track{gap:0}
    /* The arrows used to be hidden here, which left a phone with no sign that
       anything followed the first photo. They sit on the paper margin now,
       inside the screen rather than hung off the edges as on desktop. */
    .pc-arrow{width:34px;height:34px;background:rgba(250,246,236,.82);border-color:rgba(214,203,178,.9);box-shadow:0 2px 9px rgba(70,58,36,.15)}
    .pc-prev{left:6px}
    .pc-next{right:6px}
    /* thirty-two dots have to fit across a phone */
    .pc-dots{gap:5px}
    .pc-dot{width:6px;height:6px}
  }
  /* ===== envelope intro ===== */
  #envelope-intro { position: fixed; inset: 0; z-index: 4000; overflow: hidden; }
  #envelope-intro .env-backdrop { position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 40%, #F8F4E9 0%, #EFE8D8 62%, #E3DAC5 100%); transition: opacity 1s ease; }
  /* portrait artwork is drawn to bleed, so the field matches its paper and the cut edges feather out */
  #envelope-intro.tall .env-backdrop { background: #EBDDCB; }
  #envelope-intro.tall .env-body { filter: none; }
  #envelope-intro .env-backdrop.out { opacity: 0; }
  .env-scene { position: absolute; inset: 0; perspective: 2000px; will-change: transform, opacity;
      transition: transform 1.35s cubic-bezier(.42,0,.2,1), opacity 1.15s ease; }
  .env-scene.pressed { transform: scale(.994); transition: transform .22s ease; }
  .env-scene.out { transform: scale(1.03); opacity: 0; transition: transform 1.5s ease-out, opacity 1.25s ease; }
  .env-scene.fade { opacity: 0; transition: opacity .8s ease; }
  .env-layer { position: absolute; display: block; }
  .env-body { z-index: 1; filter: drop-shadow(0 26px 52px rgba(96,76,46,.20)); }
  .env-flip { position: absolute; z-index: 3; transform-style: preserve-3d;
      transition: transform 1.15s cubic-bezier(.33,.05,.2,1); }
  .env-flip.open { transform: rotateX(-176deg); }
  .env-flip .env-layer { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; backface-visibility: hidden; }
  .flap-front { filter: drop-shadow(0 8px 14px rgba(96,76,46,.16)); }
  .env-wax { z-index: 4; transform: scale(var(--ws, 1)); transition: transform .6s cubic-bezier(.34,.05,.2,1), opacity .6s ease; }
  .env-wax.lift { transform: translateY(-2.5%) rotate(-9deg) scale(calc(var(--ws, 1) * 1.07)); opacity: 0; }
  .env-seal { position: absolute; z-index: 5; border: 0; padding: 0; background: transparent; border-radius: 50%; cursor: pointer; }
  .env-seal:focus-visible { outline: 2px solid rgba(35,78,54,.55); outline-offset: 8px; }
  .env-gate { position: absolute; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; transition: opacity .6s ease; }
  .env-gate.done { opacity: 0; pointer-events: none; }
  .env-gate-hint { font-family: 'Cormorant Garamond', serif; font-variant: small-caps; letter-spacing: .16em; color: #4A4636; line-height: 1.35; }
  .env-gate-input { width: 100%; background: rgba(252,247,236,.72); box-shadow: inset 0 1px 7px rgba(96,76,46,.12); border: 0; border-bottom: 1px solid rgba(74,70,54,.45); font-family: 'Cormorant Garamond', serif; font-style: italic; color: #252D1E; text-align: center; padding: 4px 10px 6px; outline: none; transition: border-color .3s ease, background .3s ease; }
  .env-gate-input::placeholder { color: rgba(90,85,72,.6); }
  .env-gate-input.filled { font-family: 'Italianno', cursive; font-style: normal; }
  .env-gate-input:focus { border-bottom-color: rgba(37,45,30,.75); background: #FFFDF7; }
  .env-gate-err { font-family: 'Cormorant Garamond', serif; font-style: italic; color: #8A3B23; opacity: 0; transition: opacity .3s ease; }
  .env-gate.err .env-gate-err { opacity: 1; }
  .nav, .hero-copy, .hero-meta { transition: opacity .9s ease; }
  #se-root.intro-active .nav, #se-root.intro-active .hero-copy, #se-root.intro-active .hero-meta { opacity: 0; pointer-events: none; }
  @keyframes heroDrift { from { transform: scale(1); } to { transform: scale(1.035); } }
  @media (prefers-reduced-motion: no-preference) { img.hero-bg { animation: heroDrift 48s ease-in-out infinite alternate; } }

/* ==========================================================================
   Added during the port out of the design canvas.
   ========================================================================== */

/* Carousel photos. Replaces <image-slot>; slides are built by site.js.
   !important is required throughout this block: the design keeps its colours
   in inline style attributes, which outrank any selector here. */
.pc-slide img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
.pc-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #F1E7D1; color: #A8894A; font-family: 'Cormorant Garamond', serif; font-variant: small-caps; letter-spacing: .18em; font-size: 16px; }

/* Hover states. These were style-hover attributes in the canvas file, which
   nothing ever read, so none of them fired. */
.venue-link:hover { color: #A8894A !important; text-decoration-color: #A8894A !important; }
.hotel-link:hover span { color: #A8894A !important; }
.venue-history-link:hover, .hotel-note-link:hover { background: #252D1E !important; color: #FAF6EC !important; border-color: #252D1E !important; }
.venue-history-link:hover svg, .hotel-note-link:hover svg { stroke: #FAF6EC !important; }
.registry-btn:hover { background: var(--accent, #252D1E) !important; color: #FAF6EC !important; }

/* The envelope gate is checking the typed name against the guest list. */
.env-gate.checking { cursor: progress; }
.env-gate.checking .env-gate-input { opacity: .55; transition: opacity .2s ease; }



/* ---- carousel: a page from a photo album ----------------------------------
   Loose sheets of handmade paper, the print laid on top with torn edges, and
   two strips of tape holding it down. The print takes its shape from the
   photo so landscape and portrait are both shown whole; the slide behind
   keeps a fixed height so nothing jumps as you swipe. */
/* Held on the carousel rather than the slide so the arrows can read them too:
   they sit level with the photograph, which is higher than the middle of the
   slide by half the caption. An absolute slide height, because a percentage
   cannot resolve against these auto-height parents and tall photos would
   overflow. */
.pc {
  --slide-h: clamp(440px, 78vh, 760px);
  --meta-h: 68px;
  --mat: 42px;
  /* how far the dots sit below the caption; site.js closes whatever empty
     paper the current photo leaves between the two */
  --dots-gap: 18px;
}
.pc-slide {
  height: var(--slide-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.pc-stage {
  flex: 0 1 auto;
  min-height: 0;
  max-height: calc(var(--slide-h) - var(--meta-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
}

/* Everything that should tilt together: sheets, print and tape. */
.pc-mount {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  transform: rotate(-0.7deg);
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.pc-slide:nth-child(even) .pc-mount { transform: rotate(0.8deg); }
.pc-slide:nth-child(3n)   .pc-mount { transform: rotate(-0.25deg); }
.pc-track:hover .pc-mount { transform: rotate(0deg); }

/* The loose sheets peeking out behind the print. */
.pc-sheet {
  position: absolute;
  background: linear-gradient(150deg, #FCF8EE 0%, #F5EEDE 60%, #EFE6D2 100%);
  box-shadow: 0 6px 16px rgba(70, 58, 36, .10);
  pointer-events: none;
}
/* The sheets are the same size as before, but their overhang is weighted
   upward rather than downward. Hanging 26px below the print put the torn
   edge straight through the date underneath it. */
.pc-sheet-a {
  inset: -28px -30px -8px -16px;
  transform: rotate(-2.6deg);
  filter: url(#deckle2);
}
.pc-sheet-b {
  inset: -26px -10px -10px -26px;
  transform: rotate(2deg);
  filter: url(#deckle);
}

/* The print. The torn edge is drawn on a layer behind the photograph, so the
   paper looks hand-cut while the image itself stays crisp and rectangular.
   aspect-ratio is set per photo in site.js; content-box makes it shape the
   picture, with the paper margin added outside. */
.pc-frame {
  position: relative;
  box-sizing: content-box;
  display: block;
  max-width: calc(100% - var(--mat));
  max-height: calc(var(--slide-h) - var(--meta-h) - var(--mat));
  padding: 18px 18px 20px;
  background: transparent;
}
.pc-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(158deg, #FFFDF8 0%, #FDFAF1 45%, #F7F1E3 100%);
  filter: url(#deckle);
  box-shadow: 0 2px 3px rgba(37, 45, 30, .08), 0 14px 30px rgba(70, 58, 36, .18);
  z-index: 0;
}
.pc-frame img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: 0 1px 4px rgba(37, 45, 30, .18);
  /* A whisper of warmth, so a phone photo sits happily on album paper
     without actually looking sepia. */
  filter: saturate(.96) contrast(1.02);
}

/* Two strips of tape over the top edge. Translucent, so the paper and the
   page tone show through, with slightly ragged ends. */
.pc-tape {
  position: absolute;
  z-index: 2;
  height: 34px;
  pointer-events: none;
  background:
    repeating-linear-gradient(94deg, rgba(255,255,255,.30) 0 2px, rgba(255,255,255,0) 2px 6px),
    linear-gradient(180deg,
      rgba(214,203,178,.30) 0%,
      rgba(226,215,192,.58) 14%,
      rgba(238,229,209,.62) 50%,
      rgba(222,210,186,.58) 86%,
      rgba(206,194,168,.30) 100%);
  border-top: 1px solid rgba(255,255,255,.45);
  border-bottom: 1px solid rgba(146,132,104,.20);
  box-shadow: 0 2px 5px rgba(70, 58, 36, .14);
  mix-blend-mode: multiply;
}
.pc-tape-a {
  width: 140px;
  top: -18px;
  left: 6%;
  transform: rotate(-6deg);
  /* ragged, hand-torn ends */
  clip-path: polygon(6% 0, 94% 4%, 100% 0, 97% 97%, 92% 100%, 5% 96%, 0 100%, 2% 4%);
}
.pc-tape-b {
  width: 124px;
  top: -22px;
  right: 8%;
  transform: rotate(7deg);
  clip-path: polygon(3% 3%, 90% 0, 96% 4%, 100% 96%, 93% 100%, 8% 97%, 2% 100%, 0 6%);
}

/* Date and place, set like the schedule cards rather than a social caption.
   Positioned so it paints above the loose sheets: those are absolute and
   overhang the print by up to 24px at the bottom, and an unpositioned
   caption sits underneath them in the painting order. */
.pc-meta {
  flex: none;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 30px 12px 0;
  text-align: center;
}
.pc-when {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13.5px;
  letter-spacing: 0.18em;
  font-variant: small-caps;
  color: #252D1E;
}
.pc-where {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: #5A5548;
}
.pc-where svg { flex: none; }

@media (prefers-reduced-motion: reduce) {
  .pc-mount, .pc-slide:nth-child(even) .pc-mount,
  .pc-slide:nth-child(3n) .pc-mount { transform: none; transition: none; }
}

@media (max-width: 860px) {
  /* Shorter than it was. The slide has to be tall enough for the tallest
     portrait photo, and a landscape one then sits in the middle of it with
     empty paper above and below — which was pushing the dots so far under
     the caption that nothing connected them to the photo. */
  .pc { --slide-h: clamp(360px, 62vh, 560px); --mat: 30px; --meta-h: 70px; --dots-gap: 12px; }
  .pc-meta { padding-top: 26px; }
  .pc-stage { padding: 0 30px; }
  .pc-frame { padding: 13px 13px 15px; }
  .pc-tape { height: 24px; }
  .pc-tape-a { width: 96px; top: -12px; }
  .pc-tape-b { width: 84px; top: -15px; }
}