:root {
      --sage: #8f9b89;
      --sage-2: #74826e;
      --sage-3: #bcc7b7;
      --ivory: #f7f4ee;
      --paper: #fffdf9;
      --text: #5a5149;
      --muted: #7d736b;
      --accent: #c3aa92;
      --white: #fff;
      --shadow: 0 24px 58px rgba(72, 78, 66, .14);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: #e8eee4;
      color: var(--text);
      font-family: 'Cormorant Garamond', Georgia, serif;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    button, input, textarea { font: inherit; }
    .script { font-family: "Brush Script MT", "Segoe Script", "URW Chancery L", cursive; font-weight: 400; }
    .sans { font-family: 'Montserrat', Arial, sans-serif; }

    .page {
      width: min(100%, 560px);
      margin: 0 auto;
      background: var(--ivory);
      box-shadow: 0 0 70px rgba(0,0,0,.08);
      overflow: hidden;
    }

    .section { padding: 74px 28px; position: relative; }
    .section.sage {
      background: linear-gradient(180deg, var(--sage), var(--sage-2));
      color: var(--white);
    }
    .section-title {
      margin: 0 0 22px;
      text-align: center;
      font-size: clamp(3.7rem, 17vw, 6.1rem);
      line-height: .82;
      font-weight: 400;
    }
    .section-title .small { display:block; font-size:.62em; margin-top:8px; }
    .kicker {
      text-align: center;
      text-transform: uppercase;
      letter-spacing: .18em;
      font: 600 .72rem/1 'Montserrat', Arial, sans-serif;
      opacity: .82;
      margin-bottom: 14px;
    }
    .lead {
      max-width: 460px;
      margin: 0 auto;
      text-align: center;
      font-size: 1.45rem;
      line-height: 1.45;
    }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      padding: 0 26px;
      border-radius: 999px;
      border: 1px solid currentColor;
      text-transform: uppercase;
      letter-spacing: .13em;
      font: 500 .78rem/1 'Montserrat', Arial, sans-serif;
      background: transparent;
      cursor: pointer;
      transition: transform .25s ease, opacity .25s ease;
    }
    .button:hover { transform: translateY(-2px); }
    .button.light {
      color: var(--sage-2);
      background: var(--white);
      border-color: rgba(255,255,255,.8);
      box-shadow: 0 14px 30px rgba(41,51,37,.18);
    }





    /* Envelope */
    #cover {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: grid;
      place-items: center;
      padding: 0;
      background: linear-gradient(180deg, #8f9b89 0%, #74826e 100%);
      transition: opacity 1.05s ease, visibility 1.05s ease;
      overflow: hidden;
    }
    #cover.opened { opacity: 0; visibility: hidden; pointer-events: none; }

    .cover-card {
      position: relative;
      width: 100%;
      min-height: 100vh;
      color: #fffdf8;
      text-align: center;
      overflow: hidden;
      perspective: 1200px;
      background: linear-gradient(180deg, #8f9b89 0%, #74826e 100%);
    }
    .cover-card::before,
    .cover-card::after {
      content:'';
      position:absolute;
      border:1px solid rgba(255,255,255,.16);
      border-radius:50%;
      pointer-events:none;
    }
    .cover-card::before { width:560px; height:560px; left:-280px; top:180px; }
    .cover-card::after { width:480px; height:480px; right:-250px; top:60px; }

    .cover-top {
      position: relative;
      z-index: 5;
      padding: 88px 24px 0;
      min-height: 48vh;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .cover-top .overline {
      display: block;
      font-family: 'Montserrat', Arial, sans-serif;
      font-size: clamp(1.1rem, 4vw, 1.55rem);
      line-height: 1;
      letter-spacing: .18em;
      margin-bottom: 10px;
      opacity: .98;
    }
    .cover-top .title {
      display: block;
      font-family: 'Montserrat', Arial, sans-serif;
      font-size: clamp(2rem, 8vw, 3.15rem);
      line-height: .98;
      letter-spacing: .08em;
      margin-bottom: 2px;
      opacity: .98;
    }
    .cover-top .script-line {
      display: block;
      font-size: clamp(4.2rem, 15vw, 6.9rem);
      line-height: .82;
      color: #fffdf8;
      text-shadow: 0 1px 0 rgba(0,0,0,.02);
    }

    .cover-letter {
      position: absolute;
      inset: 0;
      z-index: 4;
      background:
        radial-gradient(circle at 50% 14%, rgba(255,255,255,.92), transparent 42%),
        linear-gradient(180deg, #fffdf8 0%, #f4f0e8 100%);
      color: #74826e;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 48px 26px;
      opacity: 0;
      transform: translateY(100%) scale(.96);
      transition: transform .95s cubic-bezier(.2,.9,.25,1), opacity .65s ease;
    }
    .cover-letter::before {
      content: '';
      position: absolute;
      inset: 22px;
      border: 2px solid rgba(116,130,110,.52);
      border-radius: 26px;
      pointer-events: none;
    }
    .letter-inner {
      position: relative;
      width: min(88vw, 460px);
      text-align: center;
      z-index: 1;
    }
    .letter-ornament {
      position: relative;
      height: 40px;
      margin-bottom: 8px;
    }
    .letter-ornament::before,
    .letter-ornament::after {
      content: '';
      position: absolute;
      top: 18px;
      width: 36%;
      border-top: 2px solid rgba(116,130,110,.72);
      border-radius: 999px;
    }
    .letter-ornament::before { left: 0; }
    .letter-ornament::after { right: 0; }
    .letter-ornament span {
      position: absolute;
      left: 50%;
      top: -3px;
      transform: translateX(-50%);
      font-family: "Brush Script MT", "Segoe Script", "URW Chancery L", cursive;
      font-size: 32px;
      line-height: 1;
      color: #74826e;
    }
    .letter-names {
      margin: 0;
      font-size: clamp(3.2rem, 12vw, 5rem);
      line-height: .9;
      color: #74826e;
    }
    .letter-amp {
      margin: 2px 0;
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.35rem;
      color: #74826e;
    }
    .letter-text {
      margin: 18px auto 8px;
      max-width: 290px;
      font-size: 1.02rem;
      line-height: 1.45;
      color: #7d736b;
    }
    .letter-date {
      margin: 8px 0 0;
      font-size: clamp(2.7rem, 10vw, 4rem);
      line-height: 1;
      color: #74826e;
    }

    .cover-envelope {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 52vh;
      min-height: 320px;
      z-index: 6;
      cursor: pointer;
      transition: transform .9s cubic-bezier(.2,.9,.25,1), opacity .65s ease;
    }
    .env-left,
    .env-right,
    .env-bottom,
    .env-top {
      position: absolute;
      inset: 0;
    }
    .env-left {
      background: linear-gradient(160deg, #81907b 0%, #6e7d69 100%);
      clip-path: polygon(0 0, 50% 50%, 0 100%);
    }
    .env-right {
      background: linear-gradient(200deg, #81907b 0%, #6e7d69 100%);
      clip-path: polygon(100% 0, 50% 50%, 100% 100%);
    }
    .env-bottom {
      background: linear-gradient(180deg, #96a291 0%, #7a8874 100%);
      clip-path: polygon(0 100%, 50% 36%, 100% 100%);
      z-index: 2;
    }
    .env-top {
      background: linear-gradient(180deg, #879581 0%, #707f6b 100%);
      clip-path: polygon(0 0, 100% 0, 50% 65%);
      z-index: 3;
      filter: drop-shadow(0 12px 22px rgba(0,0,0,.17));
      transform-origin: 50% 0%;
      backface-visibility: hidden;
    }
    .seal {
      position: absolute;
      left: 50%;
      top: 47%;
      transform: translate(-50%, -50%);
      width: 118px;
      height: 118px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      z-index: 7;
      color: #74826e;
      background: radial-gradient(circle at 32% 28%, #f0cfa8, #d4a06f 72%);
      box-shadow: inset 0 0 0 8px rgba(255,242,225,.32), 0 12px 26px rgba(0,0,0,.24);
      text-transform: uppercase;
      letter-spacing: .08em;
      text-align: center;
      font: 500 14px/1.12 'Montserrat', Arial, sans-serif;
      transition: transform .45s ease, opacity .45s ease;
    }
    .cover-message {
      position: absolute;
      left: 50%;
      bottom: 86px;
      transform: translateX(-50%);
      z-index: 5;
      width: min(86vw, 560px);
      color: rgba(255,253,248,.98);
      font-size: clamp(1rem, 3.8vw, 1.22rem);
      line-height: 1.45;
      padding: 0 8px;
    }

    #cover.opening .cover-letter {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    #cover.opening .cover-envelope {
      transform: translateY(58%);
      opacity: .06;
    }
    #cover.opening .cover-top {
      opacity: 0;
      transform: translateY(-10px);
      transition: opacity .45s ease, transform .45s ease;
    }
    #cover.opening .cover-message {
      opacity: 0;
      transition: opacity .35s ease;
    }
    #cover.opening .seal {
      opacity: 0;
      transform: translate(-50%, -50%) scale(.76);
    }

    /* Hero */
    .hero {
      min-height: 100vh;
      padding: 54px 28px 42px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      background:
        radial-gradient(circle at top left, rgba(255,255,255,.6), transparent 40%),
        linear-gradient(180deg, rgba(248,246,239,.9), rgba(248,246,239,.98));
      position:relative;
    }
    .hero:before, .hero:after {
      content:'';
      position:absolute;
      border:1px solid rgba(137,151,131,.22);
      border-radius:50%;
      pointer-events:none;
    }
    .hero:before { width:420px; height:420px; left:-230px; top:120px; }
    .hero:after { width:520px; height:520px; right:-280px; bottom:-120px; }
    .hero-content { position:relative; z-index:2; }
    .hero-kicker {
      text-align:center;
      text-transform:uppercase;
      letter-spacing:.22em;
      font:600 .75rem/1 'Montserrat', Arial, sans-serif;
      color:var(--sage-2);
      margin-bottom:22px;
    }
    .names {
      text-align:center;
      margin:0;
      font-family: "Brush Script MT", "Segoe Script", "URW Chancery L", cursive;
      font-weight: 400;
      font-size:clamp(4.4rem, 18vw, 6.8rem);
      line-height:.83;
      letter-spacing: 0;
      color:var(--text);
    }
    .hero-date {
      margin-top:16px;
      text-align:center;
      font-size:1.45rem;
      letter-spacing:.05em;
      color:var(--muted);
    }
    .hero-text {
      max-width:440px;
      margin:22px auto 0;
      text-align:center;
      font-size:1.28rem;
      line-height:1.45;
      color:var(--muted);
    }
    .photo-grid {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
      margin-top:34px;
    }
    .photo-card {
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,246,239,.98));
      padding:10px;
      border-radius:24px;
      box-shadow:var(--shadow);
      border:1px solid rgba(137,151,131,.12);
    }
    .photo-card img {
      width:100%;
      aspect-ratio:4/5;
      object-fit:cover;
      border-radius:18px;
    }
    .hero-action { text-align:center; z-index:2; position:relative; }

    /* Calendar */
    .calendar-card {
      max-width:470px;
      margin:30px auto 0;
      padding:28px 18px 22px;
      border-radius:30px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.18);
    }
    .month-title {
      text-align:center;
      margin:0 0 18px;
      font-size:clamp(3.1rem, 14vw, 4.3rem);
      line-height:.9;
    }
    .calendar {
      display:grid;
      grid-template-columns:repeat(7, 1fr);
      gap:14px 8px;
      text-align:center;
      font-size:1.1rem;
    }
    .dow {
      font:500 .72rem/1 'Montserrat', Arial, sans-serif;
      letter-spacing:.12em;
      text-transform:uppercase;
      opacity:.75;
    }
    .day { min-height:32px; display:grid; place-items:center; }
    .muted { opacity:.35; }
    .heart-date {
      position:relative;
      width:32px; height:32px;
      display:grid; place-items:center;
      color:var(--sage-2);
      font-weight:700;
      transform:rotate(-45deg);
      background:#fff;
      border-radius:4px;
      box-shadow:0 8px 18px rgba(33,39,30,.18);
    }
    .heart-date:before, .heart-date:after {
      content:'';
      position:absolute;
      width:32px; height:32px;
      border-radius:50%;
      background:#fff;
      z-index:-1;
    }
    .heart-date:before { left:0; top:-16px; }
    .heart-date:after { left:16px; top:0; }
    .heart-date span { transform:rotate(45deg) translateY(1px); display:block; }

    .venue-card {
      margin-top:28px;
      padding:30px 24px;
      border-radius:30px;
      background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(249,247,241,.98));
      box-shadow:var(--shadow);
      border:1px solid rgba(137,151,131,.14);
      text-align:center;
      position:relative;
      overflow:hidden;
    }
    .venue-name {
      margin:0 0 10px;
      color:var(--sage-2);
      font-size:2.5rem;
    }
    .venue-address {
      margin:0 auto 20px;
      max-width:400px;
      color:var(--muted);
      font-size:1.28rem;
      line-height:1.42;
    }
    .venue-pill {
      margin:10px auto;
      padding:13px 18px;
      border-radius:999px;
      background:rgba(137,151,131,.1);
      font-size:1.08rem;
      color:var(--text);
    }

    /* Smooth timeline */
    .program-wrap {
      position: relative;
      max-width: 470px;
      margin: 28px auto 0;
      padding: 20px 0 24px;
      min-height: 1120px;
    }
    .program-wrap:before, .program-wrap:after {
      content: '';
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.12);
      pointer-events: none;
    }
    .program-wrap:before { width: 500px; height: 500px; left: -290px; top: 140px; }
    .program-wrap:after { width: 420px; height: 420px; right: -240px; top: -60px; }
    .timeline-svg {
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      overflow:visible;
      pointer-events:none;
      z-index:1;
    }
    .timeline-path-back {
      fill:none;
      stroke:rgba(255,255,255,.22);
      stroke-width:2;
      stroke-linecap:round;
    }
    .timeline-path-front {
      fill:none;
      stroke:rgba(255,255,255,.88);
      stroke-width:3;
      stroke-linecap:round;
      stroke-dasharray:0 9999;
      opacity:0;
      transition: opacity .28s ease;
    }
    .heart-marker {
      position:absolute;
      left:50%;
      top:50px;
      width:44px; height:44px;
      transform:translate(-50%,-50%);
      border-radius:50%;
      background:#fff;
      box-shadow:0 12px 25px rgba(49,56,45,.22);
      display:grid; place-items:center;
      z-index:5;
      will-change:left, top;
      pointer-events:none;
      opacity:0;
      transition: opacity .28s ease;
    }
    .heart-marker span { color:var(--sage-2); font-size:1.05rem; }
    .timeline-item {
      display:grid;
      grid-template-columns:41% 18% 41%;
      align-items:center;
      min-height:178px;
      position:relative;
      z-index:4;
    }
    .timeline-left .timeline-card { grid-column:1/2; text-align:right; padding-right:8px; }
    .timeline-right .timeline-card { grid-column:3/4; text-align:left; padding-left:8px; }
    .timeline-card { max-width:100%; }
    .timeline-item .point {
      display:none !important;
      width:0;
      height:0;
      opacity:0;
    }
    .timeline-card { opacity:.78; transition:opacity .35s ease, transform .35s ease; }
    .timeline-item.active .timeline-card { opacity:1; transform:scale(1.01); }
    .timeline-item.active .point { background:#fff; border-color:#fff; }
    .timeline-label { margin:0; font-size:2.28rem; line-height:.92; overflow-wrap:normal; word-break:normal; }
    .timeline-time { margin:10px 0 12px; font-size:1.4rem; letter-spacing:.04em; }
    .timeline-desc { margin:0; font-size:1.08rem; line-height:1.48; opacity:.92; }
    .timeline-note {
      max-width:420px;
      margin:0 auto 12px;
      text-align:center;
      font-size:1.28rem;
      line-height:1.45;
      opacity:.92;
    }

    .countdown-section {
      overflow:hidden;
    }
    .countdown-section::before,
    .countdown-section::after {
      content:'';
      position:absolute;
      border:1px solid rgba(255,255,255,.16);
      border-radius:50%;
      pointer-events:none;
    }
    .countdown-section::before { width:560px; height:560px; left:-320px; top:-120px; }
    .countdown-section::after { width:420px; height:420px; right:-240px; bottom:-110px; }
    .countdown-title {
      margin-bottom: 30px;
      line-height: .9;
    }
    .countdown-title .small {
      margin-top: 18px;
      font-size: .48em;
      line-height: 1.06;
    }
    .countdown-grid {
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
      max-width:480px;
      margin:0 auto;
    }
    .countdown-item {
      min-height:144px;
      padding:20px 10px 18px;
      border-radius:28px;
      border:1px solid rgba(255,255,255,.32);
      background:rgba(255,255,255,.06);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      text-align:center;
      backdrop-filter: blur(2px);
    }
    .countdown-num {
      font-size: clamp(2.35rem, 9vw, 3.5rem);
      line-height: .9;
      color: var(--white);
      margin-bottom: 10px;
    }
    .countdown-label {
      font: 500 .82rem/1.15 'Montserrat', Arial, sans-serif;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.92);
    }

    .details-grid { display:grid; gap:18px; margin-top:28px; }
    .detail-card {
      padding:26px 22px;
      background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(249,247,241,.98));
      border-radius:28px;
      box-shadow:var(--shadow);
      border:1px solid rgba(137,151,131,.14);
      text-align:center;
    }
    .detail-num { color:var(--sage-2); font-size:3.5rem; line-height:.9; }
    .detail-card h3 { margin:4px 0 10px; font-size:2rem; font-weight:500; }
    .detail-card p { margin:0; color:var(--muted); font-size:1.24rem; line-height:1.45; }

    .chat-buttons { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:20px; }

    #rsvp .section-title { margin-top:0; margin-bottom:18px; }

    /* RSVP */
    .form-intro { max-width:450px; margin:0 auto 32px; text-align:center; font-size:1.3rem; line-height:1.45; }
    .rsvp-form { max-width:490px; margin:0 auto; }
    .field { margin-bottom:30px; }
    .label { display:block; margin-bottom:14px; font-size:1.8rem; }
    .choice, .choice-grid label {
      display:block;
      margin-bottom:12px;
      padding:16px 18px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.34);
      background:rgba(255,255,255,.04);
      cursor:pointer;
    }
    .choice-row { display:flex; gap:14px; align-items:center; font-size:1.18rem; }
    input[type="radio"], input[type="checkbox"] { width:24px; height:24px; margin:0; accent-color:#fff; flex:0 0 auto; }
    .text-input, .text-area {
      width:100%;
      border:none;
      border-bottom:1px solid rgba(255,255,255,.52);
      background:transparent;
      color:#fff;
      outline:none;
      padding:14px 2px;
      font-size:1.2rem;
    }
    .text-input::placeholder, .text-area::placeholder { color:rgba(255,255,255,.55); }
    .text-area { min-height:96px; resize:vertical; }
    .choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .submit-btn {
      width:100%;
      min-height:58px;
      border:none;
      border-radius:16px;
      background:#fff;
      color:var(--sage-2);
      text-transform:uppercase;
      letter-spacing:.16em;
      font:600 .82rem/1 'Montserrat', Arial, sans-serif;
      cursor:pointer;
      box-shadow:0 16px 34px rgba(52,59,49,.18);
    }
    .form-note {
      max-width:420px;
      margin:14px auto 0;
      text-align:center;
      font:400 .95rem/1.45 'Montserrat', Arial, sans-serif;
      opacity:.82;
    }
    .thanks {
      display:none;
      margin-top:24px;
      padding:20px;
      border-radius:20px;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.18);
    }
    .thanks.show { display:block; }
    .copybox {
      width:100%;
      min-height:180px;
      margin-top:14px;
      padding:14px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.28);
      background:rgba(255,255,255,.08);
      color:#fff;
      resize:vertical;
    }

    .footer {
      padding:54px 28px 64px;
      text-align:center;
      background:linear-gradient(180deg, #eef1eb, var(--ivory));
    }
    .footer .names { font-size:clamp(3.7rem,16vw,5.8rem); color:var(--sage-2); }
    .footer p { margin:0; color:var(--muted); font-size:1.28rem; }

    .reveal { opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }

    @media (max-width:520px) {
      .section { padding-left:22px; padding-right:22px; }
      .photo-grid { gap:12px; }
      .timeline-item { grid-template-columns:39% 22% 39%; min-height:174px; }
      .timeline-label { font-size:1.62rem; }
      .timeline-time { font-size:1.02rem; }
      .timeline-desc { font-size:.82rem; }
      .choice-grid { grid-template-columns:1fr; }
      .calendar { gap:12px 6px; }
      .countdown-grid { gap:10px; }
      .countdown-item { min-height:128px; padding:18px 8px 16px; border-radius:24px; }
      .countdown-label { font-size:.72rem; }
    }

    @media (max-width: 768px) {
      .cover-top { padding-top: 92px; min-height: 44vh; }
      .cover-letter { padding: 44px 20px; }
      .letter-inner { width: min(88vw, 400px); }
      .letter-names { font-size: clamp(3rem, 12vw, 4.4rem); }
      .letter-date { font-size: clamp(2.55rem, 10vw, 3.55rem); }
      .letter-text { max-width: 250px; font-size: .98rem; }
      .cover-envelope { height: 48vh; min-height: 300px; }
      .seal { width: 108px; height: 108px; font-size: 13px; }
      .cover-message { bottom: 72px; width: min(88vw, 430px); }
    }
    @media (max-width: 420px) {
      .cover-top { padding-top: 80px; }
      .cover-top .title { font-size: 1.92rem; }
      .cover-top .script-line { font-size: 4.25rem; }
      .cover-letter::before { inset: 16px; }
      .letter-text { max-width: 235px; font-size: .92rem; }
      .cover-envelope { min-height: 280px; }
      .seal { width: 102px; height: 102px; top: 48%; }
      .cover-message { bottom: 60px; font-size: .95rem; }
      .countdown-title { font-size: clamp(3.4rem, 16vw, 5rem); }
      .countdown-title .small { font-size: .44em; }
      .countdown-grid { grid-template-columns:repeat(2,1fr); max-width:340px; }
      .timeline-item { grid-template-columns:42% 16% 42%; min-height:184px; }
      .timeline-left .timeline-card { padding-right: 4px; }
      .timeline-right .timeline-card { padding-left: 4px; }
      .timeline-label { font-size: 1.64rem; }
      .timeline-time { font-size: 1.05rem; }
      .timeline-desc { font-size: .84rem; line-height: 1.38; }
    }


    /* v10 premium collection refinements */
    body {
      background:
        radial-gradient(circle at top, rgba(143,155,137,.14), transparent 30%),
        linear-gradient(180deg, #e3eadf 0%, #edf1e8 24%, #f6f3ec 100%);
    }
    .page {
      position: relative;
      width: min(100%, 580px);
      background: linear-gradient(180deg, #fcfbf7 0%, #f7f4ee 100%);
      box-shadow: 0 20px 80px rgba(55, 63, 50, .17);
    }
    .page::before {
      content: '';
      position: absolute;
      inset: 12px;
      border: 1px solid rgba(195,170,146,.15);
      pointer-events: none;
      border-radius: 2px;
    }
    .section {
      padding: 82px 30px;
    }
    .section:not(.sage)::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 126px;
      height: 1px;
      transform: translateX(-50%);
      background: linear-gradient(90deg, transparent, rgba(195,170,146,.55), transparent);
    }
    .section.sage {
      background:
        radial-gradient(circle at top left, rgba(255,255,255,.09), transparent 28%),
        radial-gradient(circle at bottom right, rgba(255,255,255,.08), transparent 32%),
        linear-gradient(180deg, #93a08d 0%, #7d8a76 55%, #73806d 100%);
      color: var(--white);
    }
    .section.sage::before {
      content: '';
      position: absolute;
      inset: 18px;
      border: 1px solid rgba(255,255,255,.08);
      pointer-events: none;
      border-radius: 26px;
    }
    .section-title {
      margin-bottom: 24px;
      letter-spacing: .01em;
      text-shadow: 0 1px 0 rgba(255,255,255,.04);
    }
    .kicker {
      letter-spacing: .24em;
      opacity: .78;
      margin-bottom: 16px;
    }
    .lead,
    .hero-text,
    .timeline-note,
    .form-intro,
    .detail-card p,
    .venue-address,
    .timeline-desc,
    .footer p {
      line-height: 1.55;
    }
    .button {
      min-height: 56px;
      padding: 0 30px;
      border-width: 1px;
      letter-spacing: .16em;
      font-size: .8rem;
      transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease, background .25s ease;
    }
    .button:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 32px rgba(59,67,54,.14);
    }
    .button:not(.light) {
      background: rgba(255,255,255,.055);
      border-color: rgba(255,255,255,.28);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
      backdrop-filter: blur(2px);
    }
    .button.light,
    .submit-btn {
      background: linear-gradient(180deg, #fffefb 0%, #f3ede4 100%);
      color: var(--sage-2);
      border: 1px solid rgba(195,170,146,.38);
      box-shadow: 0 18px 40px rgba(73,82,66,.16);
    }
    .submit-btn {
      min-height: 60px;
      border-radius: 20px;
    }
    .cover-card,
    #cover {
      background: linear-gradient(180deg, #92a08d 0%, #7a8873 100%);
    }
    .seal {
      background: radial-gradient(circle at 32% 28%, #f6eee2, #d8c8b3 72%);
      box-shadow: inset 0 0 0 8px rgba(255,248,238,.36), 0 18px 36px rgba(55,63,50,.28);
      color: #7b8774;
    }
    .cover-message {
      max-width: 420px;
      font-size: clamp(1rem, 3.8vw, 1.18rem);
      line-height: 1.5;
    }
    .hero {
      background:
        radial-gradient(circle at top left, rgba(255,255,255,.78), transparent 36%),
        radial-gradient(circle at bottom right, rgba(143,155,137,.12), transparent 30%),
        linear-gradient(180deg, rgba(252,251,247,.96), rgba(247,244,238,.98));
    }
    .hero-kicker,
    .month-title,
    .venue-name,
    .detail-num,
    .footer .names {
      color: var(--sage-2);
    }
    .photo-card,
    .venue-card,
    .detail-card,
    .calendar-card {
      position: relative;
      overflow: hidden;
    }
    .photo-card,
    .venue-card,
    .detail-card {
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,245,239,.98));
      border: 1px solid rgba(195,170,146,.18);
      box-shadow: 0 16px 38px rgba(70,78,64,.11);
    }
    .photo-card img,
    .venue-card,
    .detail-card {
      border-radius: 26px;
    }
    .venue-card::before,
    .detail-card::before,
    .calendar-card::before {
      content: '';
      position: absolute;
      inset: 12px;
      border-radius: 20px;
      border: 1px solid rgba(195,170,146,.12);
      pointer-events: none;
    }
    .calendar-card {
      position: relative;
      background: rgba(255,255,255,.075);
      border: 1px solid rgba(255,255,255,.24);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
    }
    .calendar-card .month-title {
      color: #fff;
    }
    .heart-date {
      box-shadow: 0 12px 26px rgba(58,67,53,.18);
    }
    .venue-pill {
      background: linear-gradient(180deg, rgba(143,155,137,.11), rgba(143,155,137,.08));
      border: 1px solid rgba(143,155,137,.14);
    }
    .heart-marker {
      width: 48px;
      height: 48px;
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,243,236,.98));
      border: 1px solid rgba(255,255,255,.7);
      box-shadow: 0 16px 34px rgba(51,59,47,.25);
    }
    .heart-marker span {
      color: var(--sage-2);
      font-size: 1.18rem;
      transform: translateY(-1px);
    }
    .timeline-path-front {
      stroke: rgba(255,255,255,.94);
    }
    .timeline-card {
      padding: 6px 0;
    }
    .timeline-note {
      max-width: 430px;
      margin-bottom: 18px;
      opacity: .96;
    }
    .countdown-item,
    .choice,
    .choice-grid label,
    .thanks,
    .copybox {
      border-radius: 24px;
      box-shadow: 0 14px 30px rgba(52,60,48,.10);
    }
    .countdown-item {
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.28);
    }
    .choice,
    .choice-grid label {
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.26);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
    }
    .label {
      font-size: 1.9rem;
      margin-bottom: 16px;
    }
    .text-input,
    .text-area {
      border-bottom-color: rgba(255,255,255,.62);
      padding-top: 16px;
      padding-bottom: 16px;
    }
    .thanks {
      background: rgba(255,255,255,.09);
      border-color: rgba(255,255,255,.24);
    }
    .copybox {
      background: rgba(255,255,255,.09);
      border-color: rgba(255,255,255,.26);
    }
    .footer {
      background: linear-gradient(180deg, #f4f1ea 0%, #fbfaf6 100%);
    }
    .footer::before {
      content: '';
      display: block;
      width: 110px;
      height: 1px;
      margin: 0 auto 28px;
      background: linear-gradient(90deg, transparent, rgba(195,170,146,.55), transparent);
    }
    @media (max-width: 768px) {
      .page::before { inset: 10px; }
      .section { padding: 76px 26px; }
      .label { font-size: 1.72rem; }
      .button { min-height: 54px; }
      .timeline-label { font-size: 2.36rem; }
      .timeline-time { font-size: 1.44rem; }
      .timeline-desc,
      .venue-address,
      .detail-card p,
      .form-intro,
      .lead,
      .hero-text { font-size: 1.18rem; }
    }



    /* v12 safe premium floral refinements */
    #cover,
    .cover-card {
      background:
        radial-gradient(circle at 20% 12%, rgba(255,255,255,.16), transparent 26%),
        radial-gradient(circle at 84% 18%, rgba(255,255,255,.10), transparent 24%),
        linear-gradient(180deg, #94a08d 0%, #7c8975 52%, #6f7c68 100%);
    }

    .cover-card::before {
      border-color: rgba(255,255,255,.13);
    }

    .cover-card::after {
      border-color: rgba(255,255,255,.15);
    }

    .cover-top .overline {
      letter-spacing: .30em;
      opacity: .88;
    }

    .cover-top .title {
      letter-spacing: .12em;
      text-shadow: 0 10px 26px rgba(45,54,42,.15);
    }

    .cover-top .script-line {
      text-shadow: 0 12px 34px rgba(45,54,42,.20);
    }

    .cover-letter {
      transition: transform 1.65s cubic-bezier(.18,.86,.22,1), opacity 1.05s ease;
      background:
        radial-gradient(circle at 50% 12%, rgba(255,255,255,.96), transparent 42%),
        linear-gradient(180deg, #fffdf9 0%, #f5efe5 100%);
    }

    .cover-letter::before {
      border-radius: 34px;
      border-color: rgba(116,130,110,.38);
    }

    .letter-inner {
      padding: 28px 22px;
      border-radius: 28px;
      background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.24));
      box-shadow: 0 20px 42px rgba(64,72,58,.08);
    }

    .cover-envelope {
      transition: transform 1.55s cubic-bezier(.18,.86,.22,1), opacity 1.05s ease;
    }

    #cover.opening .cover-envelope {
      transform: translateY(64%);
      opacity: .05;
    }

    .seal {
      width: 124px;
      height: 124px;
      background: radial-gradient(circle at 34% 28%, #f8f0e4, #d8c8b3 72%);
      box-shadow: inset 0 0 0 10px rgba(255,248,238,.40), 0 18px 34px rgba(55,63,50,.28);
      letter-spacing: .12em;
    }

    .floral-mass {
      position: absolute;
      pointer-events: none;
      z-index: 1;
      width: 160px;
      height: 190px;
      opacity: .85;
      filter: drop-shadow(0 18px 32px rgba(70,78,64,.12));
    }

    .floral-mass .bloom,
    .floral-mass .bud,
    .floral-mass .leaf,
    .floral-mass .stem {
      position: absolute;
      display: block;
    }

    .floral-mass .bloom {
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #fffefb 0 20%, #f4eee5 58%, #ded0bf 100%);
      box-shadow: inset 0 0 0 7px rgba(255,255,255,.22);
    }

    .floral-mass .bud {
      border-radius: 50% 50% 44% 44%;
      background: radial-gradient(circle at 35% 35%, #fffdf8 0 22%, #eae0d1 60%, #d4c2aa 100%);
    }

    .floral-mass .leaf {
      border-radius: 60% 0 60% 0;
      background: linear-gradient(135deg, #8ca08a 0%, #74856f 100%);
      transform-origin: center;
    }

    .floral-mass .stem {
      width: 3px;
      border-radius: 4px;
      background: linear-gradient(180deg, rgba(116,130,110,0), rgba(116,130,110,.50), rgba(116,130,110,0));
    }

    .floral-cover-left {
      left: -12px;
      bottom: 130px;
    }

    .floral-cover-right {
      right: -12px;
      top: 120px;
      transform: scaleX(-1);
    }

    .floral-section-left {
      left: -14px;
      bottom: 24px;
      opacity: .36;
    }

    .floral-section-right {
      right: -12px;
      top: 34px;
      transform: scaleX(-1);
      opacity: .30;
    }

    .section:not(.sage) .floral-mass {
      opacity: .44;
    }

    .section.sage .floral-mass {
      opacity: .28;
      filter: none;
    }

    .hero .floral-mass {
      opacity: .55;
    }

    .hero .floral-section-left {
      bottom: 24px;
    }

    .hero .floral-section-right {
      top: 110px;
    }

    @media (max-width: 768px) {
      .floral-mass {
        width: 126px;
        height: 150px;
      }

      .floral-cover-left {
        left: -18px;
        bottom: 122px;
      }

      .floral-cover-right {
        right: -18px;
        top: 116px;
      }

      .seal {
        width: 112px;
        height: 112px;
      }

      .letter-inner {
        padding: 24px 18px;
      }
    }


    /* v15 cleaner layout, restored envelope, scheme-style timeline */
    .floral-mass { display: none !important; }

    .cover-letter {
      transform: translateY(104%) scale(.97) rotateX(4deg);
      transform-origin: 50% 100%;
      transition:
        transform 1.55s cubic-bezier(.18,.86,.22,1) .48s,
        opacity 1s ease .42s;
    }
    .cover-envelope {
      left: 50%;
      right: auto;
      bottom: 0;
      width: min(100%, 760px);
      height: min(52vh, 430px);
      min-height: 320px;
      transform: translateX(-50%);
      transform-style: preserve-3d;
      transition:
        transform 1.72s cubic-bezier(.18,.86,.22,1) .72s,
        opacity 1.05s ease 1.18s;
      will-change: transform, opacity;
    }
    .env-left,
    .env-right,
    .env-bottom {
      transition:
        transform 1.3s cubic-bezier(.18,.86,.22,1) .42s,
        opacity .95s ease .72s;
      will-change: transform, opacity;
    }
    .env-top {
      transition:
        transform 1.15s cubic-bezier(.14,.84,.18,1),
        filter .9s ease,
        opacity .9s ease;
      will-change: transform, opacity;
    }
    #cover.opening .cover-envelope {
      transform: translateX(-50%) translateY(64%);
      opacity: .07;
    }
    #cover.opening .cover-letter {
      opacity: 1;
      transform: translateY(-3%) scale(1) rotateX(0deg);
    }
    #cover.opening .env-top {
      transform: rotateX(176deg) translateY(-10px);
      filter: drop-shadow(0 -10px 20px rgba(0,0,0,.10));
      opacity: .86;
    }
    #cover.opening .env-left {
      transform: translate(-2%, 7%) rotate(-1.2deg);
      opacity: .74;
    }
    #cover.opening .env-right {
      transform: translate(2%, 7%) rotate(1.2deg);
      opacity: .74;
    }
    #cover.opening .env-bottom {
      transform: translateY(10%);
      opacity: .82;
    }
    .seal {
      left: 50%;
      transform: translate(-50%, -50%);
      transition:
        transform .82s cubic-bezier(.2,.86,.2,1),
        opacity .62s ease;
      will-change: transform, opacity;
    }
    #cover.opening .seal {
      opacity: 0;
      transform: translate(-50%, -58%) scale(.62) rotate(-10deg);
    }

    .timeline-note {
      max-width: 360px;
      margin-bottom: 18px;
      font-size: 1.08rem;
      letter-spacing: .03em;
    }
    .timeline-left .timeline-card,
    .timeline-right .timeline-card {
      text-align: center;
      padding: 20px 18px 18px;
    }
    .timeline-card {
      max-width: 100%;
      color: #7b5c49;
      background: linear-gradient(180deg, rgba(251,248,241,.98), rgba(246,240,230,.98));
      border: 1px solid rgba(126, 95, 72, .14);
      border-radius: 28px;
      box-shadow: 0 18px 40px rgba(63, 70, 56, .12);
      opacity: .84;
      transition: opacity .4s ease, transform .4s ease, box-shadow .4s ease;
    }
    .timeline-item.active .timeline-card {
      opacity: 1;
      transform: translateY(-2px) scale(1.015);
      box-shadow: 0 22px 46px rgba(63, 70, 56, .16);
    }
    .timeline-icon {
      width: 70px;
      height: 70px;
      margin: 0 auto 10px;
      color: #7b5c49;
      opacity: .92;
    }
    .timeline-icon svg { width: 100%; height: 100%; display: block; }
    .timeline-label {
      font-size: 2.2rem;
      line-height: .92;
      color: #7b5c49;
    }
    .timeline-time {
      margin: 10px 0 10px;
      font-size: 1.5rem;
      letter-spacing: .03em;
      color: #6c735f;
    }
    .timeline-desc {
      font-size: 1rem;
      line-height: 1.42;
      color: rgba(90, 75, 63, .86);
    }
    .heart-marker {
      width: 42px;
      height: 42px;
      box-shadow: 0 14px 28px rgba(49,56,45,.18);
    }
    .heart-marker span { font-size: 1rem; }

    @media (max-width: 768px) {
      .cover-envelope {
        width: min(100%, 560px);
        height: 42vh;
        min-height: 280px;
      }
      .timeline-item {
        grid-template-columns: 41% 18% 41%;
        min-height: 208px;
      }
      .timeline-left .timeline-card,
      .timeline-right .timeline-card {
        padding: 18px 14px 16px;
      }
      .timeline-icon {
        width: 58px;
        height: 58px;
        margin-bottom: 8px;
      }
      .timeline-label { font-size: 1.72rem; }
      .timeline-time { font-size: 1.22rem; }
      .timeline-desc { font-size: .94rem; }
    }

    /* v16 scroll-bound route timeline */
    #program.section.sage {
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.76), transparent 32%),
        linear-gradient(180deg, #faf7ef 0%, #f2eadf 52%, #fbf8f1 100%);
      color: #6a5145;
    }
    #program.section.sage::before {
      display: none;
    }
    #program .kicker {
      color: rgba(113, 74, 56, .62);
    }
    #program .section-title {
      color: #6e4b3d;
      text-shadow: none;
      text-wrap: balance;
      font-size: clamp(3.7rem, 15vw, 5.4rem);
      margin-bottom: 14px;
    }
    #program .timeline-note {
      max-width: 320px;
      color: rgba(89, 66, 55, .72);
      font-size: 1.05rem;
      text-wrap: pretty;
    }
    #program .program-wrap {
      max-width: 430px;
      margin-top: 22px;
      padding: 4px 0 52px;
      min-height: 1080px;
    }
    #program .program-wrap::before,
    #program .program-wrap::after {
      display: none;
    }
    #program .timeline-svg {
      z-index: 1;
      filter: drop-shadow(0 5px 8px rgba(91, 55, 39, .08));
    }
    #program .timeline-path-back {
      stroke: rgba(105, 63, 45, .18);
      stroke-width: 1.45;
    }
    #program .timeline-path-front {
      stroke: #68402f;
      stroke-width: 1.65;
      opacity: 1;
      transition: opacity .18s ease;
    }
    #program .heart-marker {
      left: 0;
      top: 0;
      width: 38px;
      height: 38px;
      background: transparent;
      border: 0;
      box-shadow: none;
      color: #68402f;
      transform: translate3d(var(--heart-x, 0px), var(--heart-y, 0px), 0) translate(-50%, -50%);
      transition: opacity .18s ease;
      will-change: transform, opacity;
    }
    #program .heart-marker span {
      color: #68402f;
      font-size: 0;
      line-height: 1;
    }
    #program .heart-marker span::before {
      content: '♥';
      display: block;
      font-size: 2.02rem;
      transform: translateY(1px);
      color: #68402f;
      text-shadow:
        0 1px 0 #fbf8f1,
        1px 0 0 #fbf8f1,
        0 -1px 0 #fbf8f1,
        -1px 0 0 #fbf8f1,
        0 8px 18px rgba(89, 55, 38, .18);
    }
    #program .timeline-item {
      grid-template-columns: 36% 28% 36%;
      min-height: 168px;
    }
    #program .timeline-left .timeline-card,
    #program .timeline-right .timeline-card {
      padding: 0;
      text-align: center;
    }
    #program .timeline-left .timeline-card {
      grid-column: 1/2;
      transform: translateX(-10px);
    }
    #program .timeline-right .timeline-card {
      grid-column: 3/4;
      transform: translateX(10px);
    }
    #program .timeline-card {
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      color: #68402f;
      opacity: .68;
      transition: opacity .18s ease, filter .18s ease, transform .18s ease;
    }
    #program .timeline-item.active .timeline-card {
      opacity: 1;
      filter: drop-shadow(0 7px 13px rgba(91, 55, 39, .10));
      box-shadow: none;
    }
    #program .timeline-item.active.timeline-left .timeline-card {
      transform: translateX(-10px) translateY(-2px);
    }
    #program .timeline-item.active.timeline-right .timeline-card {
      transform: translateX(10px) translateY(-2px);
    }
    #program .timeline-icon {
      position: relative;
      width: 64px;
      height: 64px;
      margin: 0 auto 2px;
      color: rgba(104, 64, 47, .88);
      opacity: .96;
      filter: drop-shadow(0 8px 14px rgba(104, 64, 47, .10));
    }
    #program .timeline-icon::before {
      content: '';
      position: absolute;
      inset: 5px;
      border: 1px solid rgba(104, 64, 47, .14);
      border-radius: 50%;
      transform: rotate(-9deg) scaleX(.86);
      box-shadow: inset 0 0 0 8px rgba(255, 253, 248, .18);
    }
    #program .timeline-icon::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -1px;
      width: 34px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(104,64,47,.40), transparent);
      transform: translateX(-50%);
    }
    #program .timeline-icon svg {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    #program .timeline-icon .icon-main {
      stroke-width: 1.05;
      vector-effect: non-scaling-stroke;
    }
    #program .timeline-icon .icon-fine {
      stroke-width: .62;
      opacity: .64;
      vector-effect: non-scaling-stroke;
    }
    #program .timeline-icon .icon-fill {
      fill: currentColor;
      opacity: .10;
    }
    #program .timeline-icon .icon-dot {
      fill: currentColor;
      opacity: .44;
    }
    #program .timeline-art {
      display: block;
      width: min(178px, 100%);
      max-width: 178px;
      height: auto;
      margin: 0 auto;
      filter: drop-shadow(0 7px 13px rgba(91, 55, 39, .08));
    }
    #program .timeline-label {
      font-family: "Brush Script MT", "Segoe Script", "URW Chancery L", cursive;
      font-weight: 400;
      color: #68402f;
      font-size: 2.12rem;
      line-height: .9;
      text-wrap: balance;
      max-width: 160px;
      margin-left: auto;
      margin-right: auto;
    }
    #program .timeline-time {
      margin: 8px 0 0;
      color: rgba(87, 65, 54, .82);
      font-size: 1.28rem;
      font-variant-numeric: tabular-nums;
    }
    #program .timeline-desc {
      display: none;
    }
    @media (max-width: 768px) {
      #program.section {
        padding-left: 22px;
        padding-right: 22px;
      }
      #program .program-wrap {
        max-width: 360px;
        min-height: 1060px;
      }
      #program .timeline-item {
        grid-template-columns: 40% 20% 40%;
        min-height: 170px;
      }
      #program .timeline-left .timeline-card {
        transform: translateX(-2px);
      }
      #program .timeline-right .timeline-card {
        transform: translateX(2px);
      }
      #program .timeline-item.active.timeline-left .timeline-card {
        transform: translateX(-2px) translateY(-2px);
      }
      #program .timeline-item.active.timeline-right .timeline-card {
        transform: translateX(2px) translateY(-2px);
      }
      #program .timeline-icon {
        width: 52px;
        height: 52px;
      }
      #program .timeline-art {
        width: min(158px, 100%);
      }
      #program .timeline-label {
        font-size: 1.48rem;
        max-width: 132px;
      }
      #program .timeline-time {
        font-size: 1.08rem;
      }
      #program .heart-marker {
        width: 34px;
        height: 34px;
      }
      #program .heart-marker span::before { font-size: 1.84rem; }
    }



    /* v17: beige + dark sage program section + extra hero photo */
    .photo-card.featured {
      grid-column: 1 / -1;
      max-width: min(82%, 320px);
      justify-self: center;
    }
    .photo-card.featured img {
      aspect-ratio: 4 / 5;
      object-position: center 28%;
    }

    #program.section.sage {
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.78), transparent 34%),
        linear-gradient(180deg, #fcfaf4 0%, #f3ede4 52%, #fbf8f1 100%);
      color: #6f7c68;
    }
    #program .kicker {
      color: rgba(116, 130, 110, .76);
    }
    #program .section-title {
      color: #74826e;
      text-shadow: none;
    }
    #program .timeline-note {
      color: rgba(93, 103, 88, .82);
    }
    #program .timeline-svg {
      filter: drop-shadow(0 5px 8px rgba(73, 91, 66, .08));
    }
    #program .timeline-path-back {
      stroke: rgba(116, 130, 110, .22);
    }
    #program .timeline-path-front {
      stroke: #74826e;
    }
    #program .heart-marker {
      color: #74826e;
    }
    #program .heart-marker span::before {
      color: #74826e;
      text-shadow:
        0 1px 0 #fbf8f1,
        1px 0 0 #fbf8f1,
        0 -1px 0 #fbf8f1,
        -1px 0 0 #fbf8f1,
        0 8px 18px rgba(76, 95, 68, .16);
    }
    #program .timeline-card {
      color: #6f7c68;
    }
    #program .timeline-item.active .timeline-card {
      filter: drop-shadow(0 7px 13px rgba(76, 95, 68, .10));
    }
    #program .timeline-icon {
      color: rgba(116, 130, 110, .92);
      filter: drop-shadow(0 8px 14px rgba(76, 95, 68, .10));
    }
    #program .timeline-icon::before {
      border: 1px solid rgba(116, 130, 110, .16);
      box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .18);
    }
    #program .timeline-icon::after {
      background: linear-gradient(90deg, transparent, rgba(116,130,110,.38), transparent);
    }
    #program .timeline-label {
      color: #74826e;
    }
    #program .timeline-time {
      color: rgba(97, 111, 91, .88);
    }
    #program .timeline-desc {
      color: rgba(97, 111, 91, .82);
    }

    @media (max-width: 768px) {
      .photo-card.featured {
        max-width: min(88%, 300px);
      }
    }


    /* v19: use the original generated illustrations from chat, not simplified hand-drawn icons */
    #program .timeline-icon.generated-art {
      width: min(158px, 100%);
      height: 128px;
      margin: 0 auto 4px;
      display: grid;
      place-items: end center;
      color: #74826e;
      filter: drop-shadow(0 9px 14px rgba(76, 95, 68, .10));
    }
    #program .timeline-icon.generated-art::before,
    #program .timeline-icon.generated-art::after {
      display: none;
    }
    #program .timeline-icon.generated-art img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center bottom;
      display: block;
    }
    #program .timeline-left .timeline-card,
    #program .timeline-right .timeline-card {
      text-align: center;
    }
    #program .timeline-label {
      margin-top: 2px;
    }

    @media (max-width: 768px) {
      #program .timeline-icon.generated-art {
        width: min(146px, 112%);
        height: 118px;
      }
      #program .timeline-label {
        font-size: 1.42rem;
      }
    }

    @media (max-width: 420px) {
      #program .timeline-icon.generated-art {
        width: min(136px, 118%);
        height: 110px;
      }
    }


    /* v20: captions above images + new vector scenes */
    #program .timeline-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }
    #program .timeline-meta {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      margin: 0 0 14px;
    }
    #program .timeline-label {
      margin: 0;
      line-height: .96;
    }
    #program .timeline-time {
      margin: 0;
    }
    #program .timeline-icon.generated-art {
      width: min(170px, 100%);
      height: 140px;
      margin: 0 auto;
      display: grid;
      place-items: center;
    }
    #program .timeline-icon.generated-art img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center center;
      display: block;
    }
    #program .timeline-end .timeline-icon.generated-art {
      width: min(156px, 96%);
      height: 128px;
    }
    #program .timeline-end .timeline-label {
      max-width: 170px;
    }
    @media (max-width: 768px) {
      #program .timeline-meta {
        margin-bottom: 12px;
      }
      #program .timeline-icon.generated-art {
        width: min(156px, 108%);
        height: 128px;
      }
      #program .timeline-end .timeline-icon.generated-art {
        width: min(144px, 102%);
        height: 118px;
      }
    }
    @media (max-width: 420px) {
      #program .timeline-icon.generated-art {
        width: min(144px, 114%);
        height: 118px;
      }
      #program .timeline-end .timeline-icon.generated-art {
        width: min(136px, 108%);
        height: 110px;
      }
    }


    /* v21: transparent background for meeting/photo images + tighter caption spacing */
    #program .timeline-meta {
      gap: 2px;
      margin: 0 0 8px;
    }
    #program .timeline-label {
      line-height: .92;
      margin-bottom: 0;
    }
    #program .timeline-time {
      margin-top: 0;
    }
    @media (max-width: 768px) {
      #program .timeline-meta {
        margin-bottom: 7px;
      }
    }


    /* v22: furshet caption position + darker cover envelope */
    #program .timeline-furshet .timeline-meta {
      transform: translateX(14px);
    }

    .env-left {
      background: linear-gradient(160deg, #65745f 0%, #53634e 100%);
    }
    .env-right {
      background: linear-gradient(200deg, #65745f 0%, #53634e 100%);
    }
    .env-bottom {
      background: linear-gradient(180deg, #77866f 0%, #5d6d57 100%);
    }
    .env-top {
      background: linear-gradient(180deg, #6d7d67 0%, #53634e 100%);
      filter: drop-shadow(0 14px 24px rgba(0,0,0,.22));
    }
    .cover-envelope {
      bottom: 34px;
    }

    @media (max-width: 768px) {
      #program .timeline-furshet .timeline-meta {
        transform: translateX(10px);
      }
      .cover-envelope {
        bottom: 28px;
      }
    }

    @media (max-width: 420px) {
      #program .timeline-furshet .timeline-meta {
        transform: translateX(8px);
      }
      .cover-envelope {
        bottom: 22px;
      }
    }


    /* v23: make the first-screen envelope clearer and swap hero photos */
    #cover,
    .cover-card {
      background:
        radial-gradient(circle at 50% 16%, rgba(255,255,255,.14), transparent 26%),
        linear-gradient(180deg, #7f8e77 0%, #65745f 52%, #4f5f49 100%);
    }

    .cover-top {
      padding-top: 72px;
      min-height: 39vh;
      text-shadow: 0 10px 28px rgba(30, 39, 28, .20);
    }

    .cover-envelope {
      bottom: clamp(70px, 10vh, 106px);
      height: min(47vh, 410px);
      min-height: 300px;
      filter:
        drop-shadow(0 28px 42px rgba(28, 35, 26, .34))
        drop-shadow(0 4px 0 rgba(255,255,255,.07));
    }

    .cover-envelope::before {
      content: '';
      position: absolute;
      inset: -10px -8px -8px;
      z-index: 0;
      border-radius: 34px;
      background: rgba(255,255,255,.07);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.16),
        0 18px 46px rgba(30, 39, 28, .24);
      pointer-events: none;
    }

    .cover-envelope::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 8;
      pointer-events: none;
      background:
        linear-gradient(146deg, transparent 49.2%, rgba(255,253,248,.34) 49.8%, rgba(255,253,248,.34) 50.2%, transparent 50.8%),
        linear-gradient(34deg, transparent 49.2%, rgba(255,253,248,.25) 49.8%, rgba(255,253,248,.25) 50.2%, transparent 50.8%),
        linear-gradient(180deg, rgba(255,255,255,.16), transparent 28%);
      mix-blend-mode: screen;
      opacity: .86;
    }

    .env-left {
      background: linear-gradient(160deg, #60715a 0%, #475842 100%);
      filter: brightness(.96);
    }
    .env-right {
      background: linear-gradient(200deg, #60715a 0%, #475842 100%);
      filter: brightness(.96);
    }
    .env-bottom {
      background: linear-gradient(180deg, #7c8b74 0%, #53664d 100%);
    }
    .env-top {
      background: linear-gradient(180deg, #718268 0%, #495a43 100%);
      filter: drop-shadow(0 18px 28px rgba(21, 28, 20, .32));
    }

    .seal {
      width: 118px;
      height: 118px;
      background: radial-gradient(circle at 34% 28%, #fff9ee, #d7c5ad 74%);
      color: #4f5f49;
      box-shadow:
        inset 0 0 0 9px rgba(255,248,238,.44),
        0 18px 34px rgba(25, 32, 23, .34);
      border: 1px solid rgba(255,253,248,.42);
      z-index: 10;
    }

    .cover-message {
      bottom: 28px;
      text-shadow: 0 8px 20px rgba(30, 39, 28, .22);
    }

    .photo-grid .photo-card:nth-child(2) img {
      object-position: center 24%;
    }
    .photo-card.featured img {
      object-position: center center;
    }

    @media (max-width: 768px) {
      .cover-top {
        padding-top: 64px;
        min-height: 38vh;
      }
      .cover-envelope {
        bottom: clamp(68px, 9vh, 92px);
        height: 43vh;
        min-height: 286px;
      }
      .cover-message {
        bottom: 22px;
      }
    }

    @media (max-width: 420px) {
      .cover-top {
        padding-top: 58px;
        min-height: 37vh;
      }
      .cover-envelope {
        bottom: 62px;
        height: 42vh;
        min-height: 276px;
      }
      .seal {
        width: 104px;
        height: 104px;
      }
      .cover-message {
        bottom: 18px;
      }
    }


    /* v24: beige first-screen background, envelope stays as in v23 */
    #cover,
    .cover-card {
      background:
        radial-gradient(circle at 50% 10%, rgba(255,255,255,.86), transparent 34%),
        radial-gradient(circle at 18% 20%, rgba(143,155,137,.13), transparent 28%),
        radial-gradient(circle at 86% 18%, rgba(195,170,146,.16), transparent 30%),
        linear-gradient(180deg, #fcfaf4 0%, #f5efe6 52%, #fbf8f1 100%);
    }

    .cover-card::before,
    .cover-card::after {
      border-color: rgba(116, 130, 110, .16);
    }

    .cover-top,
    .cover-top .overline,
    .cover-top .title,
    .cover-top .script-line {
      color: #5d6d57;
      text-shadow: 0 8px 22px rgba(76, 95, 68, .10);
    }

    .cover-date-badge {
      color: #5d6d57 !important;
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .cover-message {
      color: rgba(86, 100, 80, .92);
      text-shadow: none;
    }

    .cover-envelope {
      /* конверт оставлен тёмным, как в v23 */
      filter:
        drop-shadow(0 30px 46px rgba(76, 86, 68, .30))
        drop-shadow(0 4px 0 rgba(255,255,255,.16));
    }

    .cover-envelope::before {
      background: rgba(255,255,255,.13);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.28),
        0 20px 48px rgba(76, 86, 68, .22);
    }

    .seal {
      box-shadow:
        inset 0 0 0 9px rgba(255,248,238,.44),
        0 18px 34px rgba(76, 86, 68, .28);
    }


    /* v25: chat buttons removed, dress code block, local RSVP */
    .dresscode-section {
      background:
        radial-gradient(circle at top left, rgba(255,255,255,.78), transparent 34%),
        linear-gradient(180deg, #fcfaf4 0%, #f5efe6 52%, #fbf8f1 100%);
      color: var(--text);
    }
    .dresscode-section .kicker,
    .dresscode-section .section-title {
      color: var(--sage-2);
    }
    .dresscode-card {
      max-width: 470px;
      margin: 28px auto 0;
      padding: 30px 24px;
      border-radius: 30px;
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,245,239,.98));
      border: 1px solid rgba(195,170,146,.18);
      box-shadow: 0 16px 38px rgba(70,78,64,.11);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .dresscode-card::before {
      content: '';
      position: absolute;
      inset: 12px;
      border-radius: 22px;
      border: 1px solid rgba(195,170,146,.12);
      pointer-events: none;
    }
    .dresscode-card p {
      position: relative;
      z-index: 1;
      margin: 0;
      color: var(--muted);
      font-size: 1.28rem;
      line-height: 1.55;
    }
    .rsvp-status {
      margin: 12px auto 0;
      opacity: .88;
    }


    /* v27: remove old hidden cover message under the envelope */
    .cover-message {
      display: none !important;
    }


    /* v29: mobile-safe RSVP choices */
    #rsvp,
    #rsvp .rsvp-form,
    #rsvp .field,
    #rsvp .choice,
    #rsvp .choice-grid label {
      position: relative;
      z-index: 3;
      pointer-events: auto;
    }

    #rsvp .choice,
    #rsvp .choice-grid label,
    #rsvp input[type="radio"],
    #rsvp input[type="checkbox"] {
      touch-action: manipulation;
      -webkit-tap-highlight-color: rgba(255,255,255,.18);
    }

    #rsvp .choice,
    #rsvp .choice-grid label {
      user-select: none;
      -webkit-user-select: none;
      min-height: 58px;
    }

    #rsvp .choice-row {
      pointer-events: none;
    }

    #rsvp input[type="radio"],
    #rsvp input[type="checkbox"] {
      pointer-events: none;
      appearance: auto;
      -webkit-appearance: auto;
      accent-color: #74826e;
      background: #fff;
      border-radius: 50%;
    }

    #rsvp .option-choice.selected {
      background: rgba(255,255,255,.18);
      border-color: rgba(255,255,255,.72);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.20),
        0 12px 26px rgba(52,60,48,.13);
    }

    #rsvp .option-choice.selected .choice-row span:last-child {
      font-weight: 500;
    }


/* v30: requested content/layout updates */
.cover-invite-title,
.cover-date-badge {
  display:block;
  font-size: clamp(3.3rem, 9vw, 4.6rem);
  line-height: .92;
  color: #5f6f59;
  text-shadow: 0 8px 20px rgba(76,95,68,.10);
}
.cover-top { justify-content: center; gap: 16px; min-height: 41vh; }
#cover.opening .cover-letter { opacity: 0 !important; transform: translateY(100%) scale(.96) !important; }
.letter-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.70), transparent 38%),
    linear-gradient(180deg, #fcfaf4 0%, #f4efe5 100%);
}
.letter-page-shell {
  width: min(92vw, 720px);
  min-height: min(88vh, 760px);
  border-radius: 34px;
  background: rgba(255,255,255,.66);
  box-shadow: 0 22px 48px rgba(76,95,68,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
}
.letter-page-shell::before {
  content:'';
  position:absolute;
  inset: 18px;
  border: 1.5px solid rgba(116,130,110,.24);
  border-radius: 28px;
  pointer-events:none;
}
.letter-page .letter-inner { width:min(82vw, 470px); }
.hero { min-height: auto; }
.hero-content { padding-top: 16px; }
.hero-content .photo-grid { margin-top: 28px; }
.hero-action { display:none !important; }
.single-script-title {
  font-size: clamp(3.8rem, 16vw, 6rem);
  line-height: .9;
}
#place .lead, #transfer .lead, #gifts .dresscode-card p, #dresscode .dresscode-card p { max-width: 620px; }
.transfer-section .section-title,
.gifts-section .section-title,
#dresscode .section-title,
#place .section-title { margin-bottom: 26px; }
.info-card, .transfer-card {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,242,234,.97));
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 28px;
  box-shadow: 0 18px 42px rgba(41,51,37,.14);
  padding: 28px 24px;
  color: #7a6a5f;
}
.transfer-grid {
  max-width: 930px;
  margin: 34px auto 0;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.transfer-card h3 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 8vw, 3.1rem);
  line-height: .95;
  color: #74826e;
  text-align:center;
}
.transfer-card p {
  margin: 10px 0 0;
  text-align:center;
  font-size: 1.08rem;
  line-height: 1.55;
}
#gifts .dresscode-card { max-width: 860px; margin-inline: auto; }
#program .timeline-icon.transport-icon {
  width: 118px;
  height: 110px;
  color: rgba(116,130,110,.92);
  display:grid;
  place-items:center;
  margin: 0 auto;
}
#program .timeline-icon.transport-icon svg {
  width: 100%;
  height: 100%;
}
#program .timeline-note { margin-bottom: 34px; }
#program .timeline-desc {
  max-width: 260px;
  margin: 10px auto 0;
  text-align: center;
  font-size: .98rem;
  line-height: 1.45;
  color: rgba(97,111,91,.82);
}
#program .timeline-card { min-width: 0; }
#program .timeline-item.timeline-end .timeline-desc { max-width: 230px; }
#countdownSection .kicker,
#program .kicker,
#dresscode .kicker { display:none !important; }
#rsvp .form-intro strong { font-weight: 700; color: #fffdf8; }
@media (max-width: 768px) {
  .cover-top { min-height: 38vh; gap: 12px; }
  .cover-invite-title { font-size: clamp(2.9rem, 14vw, 4.5rem); }
  .letter-page-shell { min-height: 84vh; border-radius: 28px; }
  .letter-page-shell::before { inset: 14px; border-radius: 22px; }
  .transfer-grid { grid-template-columns: 1fr; }
  #program .timeline-desc { max-width: 220px; font-size: .92rem; }
}


/* v31: insert generated transfer illustration */
.transfer-illustration-card {
  max-width: 980px;
  margin: 34px auto 0;
  padding: 24px 20px 16px;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(245,239,229,.86));
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: 0 18px 42px rgba(41,51,37,.14);
}
.transfer-illustration-img {
  display: block;
  width: min(100%, 760px);
  margin: 0 auto;
  height: auto;
  object-fit: contain;
}
#transfer .transfer-grid {
  margin-top: 22px;
}
@media (max-width: 768px) {
  .transfer-illustration-card {
    margin-top: 26px;
    padding: 16px 12px 10px;
    border-radius: 28px;
  }
  .transfer-illustration-img {
    width: 100%;
  }
}


/* v32: move transfer illustration from transfer block into schedule */
.transfer-illustration-card {
  display: none !important;
}
#program .timeline-icon.generated-art.transfer-inline-art {
  width: min(188px, 100%);
  height: 138px;
  margin: 0 auto;
}
#program .timeline-icon.generated-art.transfer-inline-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}
@media (max-width: 768px) {
  #program .timeline-icon.generated-art.transfer-inline-art {
    width: min(168px, 100%);
    height: 124px;
  }
}


/* v33: adjust section backgrounds for intro card / countdown / final card */
.letter-page {
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.18), transparent 38%),
    linear-gradient(180deg, #a9b49f 0%, #95a28d 52%, #8d9a84 100%) !important;
}
.letter-page-shell {
  background: rgba(255,255,255,.18) !important;
  box-shadow: 0 22px 48px rgba(54, 68, 48, .16) !important;
}
.letter-page-shell::before {
  border-color: rgba(255,255,255,.30) !important;
}
.letter-page .letter-inner {
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 20px 42px rgba(54, 68, 48, .10) !important;
}

/* make countdown white/beige like light sections */
#countdownSection {
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.82), transparent 36%),
    linear-gradient(180deg, #fcfaf4 0%, #f4efe5 100%) !important;
  color: #75655b !important;
}
#countdownSection .countdown-title,
#countdownSection .countdown-title .small {
  color: #6f7c68 !important;
}
#countdownSection .countdown-item {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,242,234,.96)) !important;
  border: 1px solid rgba(116,130,110,.18) !important;
  box-shadow: 0 16px 36px rgba(64, 77, 58, .08) !important;
}
#countdownSection .countdown-num {
  color: #6f7c68 !important;
}
#countdownSection .countdown-label {
  color: rgba(111,124,104,.82) !important;
}

/* keep final RSVP card green and slightly emphasized */
#rsvp {
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.18), transparent 38%),
    linear-gradient(180deg, #a7b29d 0%, #95a18d 52%, #8d9a84 100%) !important;
}


/* v34: transparent transfer art in schedule + final section green */
#program .timeline-icon.generated-art.transfer-inline-art {
  background: transparent !important;
}
#program .timeline-icon.generated-art.transfer-inline-art img {
  filter: none;
}

/* make the last section green */
#countdownSection {
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.18), transparent 38%),
    linear-gradient(180deg, #a7b29d 0%, #95a18d 52%, #8d9a84 100%) !important;
  color: #fffaf4 !important;
}
#countdownSection .countdown-title,
#countdownSection .countdown-title .small,
#countdownSection .countdown-num,
#countdownSection .countdown-label {
  color: #fffaf4 !important;
}
#countdownSection .countdown-item {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: 0 16px 36px rgba(64, 77, 58, .10) !important;
}


/* v35: swap backgrounds for countdown and "Михаил и Мария" card */
.letter-page {
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.18), transparent 38%),
    linear-gradient(180deg, #a9b49f 0%, #95a28d 52%, #8d9a84 100%) !important;
}
.letter-page-shell {
  background: rgba(255,255,255,.10) !important;
}
.letter-page-shell::before {
  border-color: rgba(255,255,255,.26) !important;
}
.letter-page .letter-inner {
  background: rgba(255,255,255,.94) !important;
}

/* countdown should be light/white */
#countdownSection {
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.82), transparent 36%),
    linear-gradient(180deg, #fcfaf4 0%, #f4efe5 100%) !important;
  color: #75655b !important;
}
#countdownSection .countdown-title,
#countdownSection .countdown-title .small {
  color: #6f7c68 !important;
}
#countdownSection .countdown-item {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,242,234,.96)) !important;
  border: 1px solid rgba(116,130,110,.18) !important;
  box-shadow: 0 16px 36px rgba(64, 77, 58, .08) !important;
}
#countdownSection .countdown-num {
  color: #6f7c68 !important;
}
#countdownSection .countdown-label {
  color: rgba(111,124,104,.82) !important;
}

/* final "Михаил и Мария" slide in the site palette */
.footer {
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.18), transparent 38%),
    linear-gradient(180deg, #a7b29d 0%, #95a18d 52%, #8d9a84 100%) !important;
  color: #fffaf4;
}
.footer .names {
  color: #fffaf4 !important;
  text-shadow: 0 10px 28px rgba(54, 68, 48, .16);
}
.footer p {
  color: rgba(255,250,244,.86) !important;
}
#dresscode::after {
  display: none;
}
@media (max-width: 480px) {
  .cover-top .cover-invite-title {
    width: 100%;
    padding-inline: 10px;
    font-size: clamp(2.25rem, 9.6vw, 2.7rem);
    line-height: 1;
  }
}

@media (min-width: 769px) and (max-height: 800px) {
  .cover-top {
    min-height: 38vh;
    gap: 8px;
  }

  .cover-top .cover-invite-title,
  .cover-top .cover-date-badge {
    font-size: clamp(3.3rem, 7vw, 4.6rem);
  }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #fffaf4;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

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

/* Catalog edition: keep the invitation within the studio renderer's safe height. */
.section {
  padding-block: 40px !important;
}

.letter-page {
  min-height: min(84vh, 720px) !important;
}

.letter-page-shell {
  min-height: min(74vh, 620px) !important;
}

.hero {
  padding-block: 36px 32px !important;
}

.photo-card img {
  aspect-ratio: 4 / 3 !important;
}

.photo-card.featured img {
  aspect-ratio: 16 / 9 !important;
}

#program .program-wrap {
  min-height: 980px !important;
}

#program .timeline-item {
  min-height: 105px !important;
}

#program .timeline-icon.generated-art,
#program .timeline-icon.generated-art.transfer-inline-art {
  height: 64px !important;
}

#program .timeline-label {
  font-size: 1.32rem !important;
  line-height: .92 !important;
}

#program .timeline-time {
  margin-top: 4px !important;
  font-size: .96rem !important;
}

.guest-notes-section {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.78), transparent 34%),
    linear-gradient(180deg, #fcfaf4 0%, #f5efe6 52%, #fbf8f1 100%);
  color: var(--text);
}

.guest-notes-section .section-title {
  color: var(--sage-2);
}

.guest-notes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 24px auto 0;
}

.guest-note {
  min-width: 0;
  padding: 16px 14px;
  border: 1px solid rgba(195,170,146,.18);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,245,239,.98));
  box-shadow: 0 14px 32px rgba(70,78,64,.09);
  text-align: center;
}

.guest-note-index {
  margin: 0;
  color: rgba(111,124,104,.68);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.guest-note h3 {
  margin: 6px 0 8px;
  color: var(--sage-2);
  font-size: 2rem;
  line-height: .92;
}

.guest-note > p:last-child {
  margin: 0;
  color: #75655b;
  font-size: .86rem;
  line-height: 1.38;
}

#rsvp .field {
  margin-bottom: 18px !important;
}

#rsvp .form-intro {
  margin-bottom: 22px !important;
  font-size: 1.05rem !important;
  line-height: 1.4 !important;
}

#rsvp .label {
  margin-bottom: 10px !important;
  font-size: 1.45rem !important;
}

#rsvp .choice,
#rsvp .choice-grid label {
  min-height: 50px !important;
  margin-bottom: 7px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
}

#rsvp .choice-row {
  gap: 9px !important;
  font-size: .98rem !important;
}

#rsvp .choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

#rsvp .choice-grid label {
  min-height: 44px !important;
  padding: 7px 8px !important;
}

#rsvp .choice-grid .choice-row {
  gap: 6px !important;
  font-size: .84rem !important;
}

#rsvp .text-input,
#rsvp .text-area {
  padding-block: 10px !important;
}

#rsvp .text-area {
  min-height: 72px !important;
}

.countdown-item {
  min-height: 104px !important;
  padding-block: 12px !important;
}

.footer {
  padding-block: 32px 36px !important;
}

@media (max-width: 520px) {
  .guest-notes-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .guest-note h3 {
    font-size: 1.75rem;
  }
}