/* Emerald garden: carved stone, ivory flowers, antique brass, and quiet type. */
:root {
  --green: #082b23;
  --green2: #103a30;
  --dark: #061f19;
  --gold: #c3a366;
  --gold2: #e5cfa0;
  --cream: #f8f1df;
}
body { color: var(--cream); }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold2); outline-offset: 6px; }
.stage { background: var(--dark); isolation: isolate; }
.stage::after { content: ''; position: absolute; inset: 18px; border: 1px solid #c3a36638; pointer-events: none; z-index: 26; }
.invitation-art { position: absolute; inset: 0 auto 0 0; width: 51%; overflow: hidden; }
.invitation-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.invitation-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 80%, var(--dark)), linear-gradient(0deg, #061f1945, transparent 60%); }
.art-inscription { position: absolute; top: 53%; left: 20%; width: 60%; text-align: center; z-index: 1; color: var(--cream); }
.art-monogram { font: 62px 'Cormorant Garamond', serif; color: var(--gold2); letter-spacing: -.09em; }
.art-monogram span { font-size: 36px; font-style: italic; margin: 0 9px; }
.art-inscription p { font: italic 25px/1.35 'Cormorant Garamond', serif; margin: 18px 0; }
.art-inscription small { font: 11px Marcellus, serif; letter-spacing: .16em; color: var(--gold2); }
.invite-scroll { left: 51%; justify-content: center; padding: 46px 24px 30px; background: radial-gradient(ellipse at 40% 35%, #16463770, transparent 70%); }
#invite { max-width: 530px; padding: 0 12px; }
.eyebrow { font: italic 19px 'Cormorant Garamond', serif; letter-spacing: .035em; color: var(--gold2); margin-bottom: 22px; }
.arch { max-width: none; overflow: visible; border: 0; border-radius: 0; padding: 0; }
.arch-inner { border: 0; border-radius: 0; padding: 0; }
.arch::after { display: none; }
.bismillah { font-size: 25px; line-height: 1.8; }
.divider { margin: 18px 0 22px; gap: 13px; }
.divider .line { width: 57px; background: linear-gradient(90deg, transparent, var(--gold-40)); }
.divider .line:last-child { transform: rotate(180deg); }
.star8 { width: 5px; height: 5px; }
.grace { font-size: 9px; letter-spacing: .23em; color: #e1d7be; margin-bottom: 10px; }
.request { font-size: 18px; line-height: 1.45; max-width: 280px; margin: 0 auto 22px; color: #e1d7be; }
.couple { font: 500 clamp(38px, 4.2vw, 62px)/1.06 'Cormorant Garamond', serif; text-shadow: 0 3px 24px #0004; }
.couple .title { font-size: .42em; letter-spacing: .025em; vertical-align: middle; }
.amp { font-size: 33px; line-height: 1.25; }
.countdown { margin: 26px auto 0; gap: 0; width: min(100%, 300px); border-top: 1px solid #c3a36645; border-bottom: 1px solid #c3a36645; padding: 14px 0; }
.cd-cell { width: 25%; padding: 0; border: 0; border-radius: 0; background: none; }
.cd-cell + .cd-cell { border-left: 1px solid #c3a36635; }
.cd-num { font: 27px 'Cormorant Garamond', serif; }
.cd-lab { font-size: 8px; letter-spacing: .14em; color: var(--gold2); margin-top: 4px; }
.big-date { font-size: 11px; letter-spacing: .15em; margin-top: 23px; }
.big-venue { font-size: 17px; margin-top: 8px; color: #e1d7be; }
#slideWrap { width: min(300px, 100%); padding: 25px 0 0; }
#slideTrack { height: 54px; border-color: #c3a36685; background: #ffffff04; }
#thumb { width: 44px; height: 44px; top: 4px; background: linear-gradient(135deg, #f3deb0, #b68e47); box-shadow: 0 3px 12px #0006, inset 0 1px #fff8; }
#slideFill { width: 48px; }
#slideLabel { font-size: 10px; letter-spacing: .16em; animation: none; color: var(--gold2); background: none; }
.slide-hint { color: #d5cdb7; font-size: 14px; }
.details-link { cursor: pointer; display: block; margin: 13px auto 0; padding: 8px 12px; border: 0; border-bottom: 1px solid #c3a36665; background: none; color: var(--gold2); font: 12px Marcellus, serif; }

/* One considered entrance, built from two halves of the same garden scene. */
#gate { background: var(--dark); transition: background 1s; }
.door { width: 50%; overflow: hidden; background: var(--dark); transition: transform 1.8s cubic-bezier(.65,0,.2,1) .15s; }
.door::before { content: ''; position: absolute; top: 0; bottom: 0; width: 200%; background: url('./emerald-garden.webp') center / auto 112% no-repeat; }
#doorL { transform-origin: left center; border: 0; box-shadow: none; }
#doorR { transform-origin: right center; border: 0; box-shadow: none; }
#doorL::before { left: 0; }
#doorR::before { right: 0; }
.seam { top: 42%; bottom: 15%; opacity: .25; animation: none; background: linear-gradient(transparent, #d4b57655, transparent); }
#medallion { top: 57%; width: min(360px, 80vw); }
.med-disc { width: 135px; height: 135px; margin-bottom: 21px; }
.med-ring-spin, .med-ring-spin2 { animation: none; border-style: solid; border-color: #dab87880; }
.med-ring-spin2 { inset: 5px; border-color: #dac19135; }
.med-core { width: 113px; height: 113px; border: 1px solid #edd6a0; background: radial-gradient(circle at 35% 25%, #eddbac, #b7924d 55%, #71531e); box-shadow: 0 12px 28px #0009, inset 0 0 0 5px #b18a494d, inset 0 0 0 6px #f8e5af80, inset 0 2px 3px #fff9; transform: rotate(-8deg); }
.med-init { font: 40px 'Cormorant Garamond', serif; letter-spacing: -.05em; padding: 0; color: #3b321d; text-shadow: 0 1px #ffe6af; }
.med-date { font-size: 11px; color: #44391f; }
.med-bism { font-size: 20px; color: var(--gold2); margin-bottom: 16px; text-shadow: 0 2px 8px #000; }
.gate-names { font: 38px/1.2 'Cormorant Garamond', serif; margin: 0 0 8px; }
.gate-note { font: italic 17px 'Cormorant Garamond', serif; color: #e0d7c0; margin: 0 0 25px; }
.open-btn { animation: none; font-size: 10px; letter-spacing: .16em; border-radius: 4px; background: linear-gradient(125deg, #f0ddb2, #c5a568); color: #19372a; border: 1px solid #e6cc94; padding: 16px 25px; box-shadow: 0 6px 26px #0005, inset 0 1px #fff7; transition: transform .3s, box-shadow .3s; }
.open-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 32px #0008, 0 0 25px #c3a36630; }
.gate-footer { position: absolute; bottom: 35px; left: 0; right: 0; text-align: center; font: 10px Marcellus, serif; letter-spacing: .17em; color: var(--gold2); transition: opacity .4s; }
body.open #gate { background: transparent; }
body.open .gate-footer { opacity: 0; }
#dust { z-index: 31; opacity: .5; }

/* Details stay a readable, scrollable keepsake. */
#sheet { inset: 24px 24px 24px auto; width: min(580px, calc(100% - 48px)); border: 1px solid #c3a36660; border-radius: 12px; background: #10372d; z-index: 27; }
.sheet-head { max-width: 510px; padding: 15px 24px; background: linear-gradient(#10372d 80%, #10372d00); }
.sheet-body { max-width: 510px; padding: 10px 28px 40px; }
.sheet-title { font-size: 10px; letter-spacing: .16em; }
.close-btn { width: 36px; height: 36px; font-size: 15px; }
.welcome { font-size: 21px; line-height: 1.4; margin: 4px 0 26px; }
.panel { padding: 22px; border-radius: 3px; background: #082b2340; }
.save-date { border-radius: 120px 120px 3px 3px; padding-top: 35px; }
.card-eyebrow { letter-spacing: .2em; color: var(--gold2); }
.sd-date { font-size: 29px; }
.sd-time { font-size: 18px; }
.btn-line, .btn-solid { font-size: 10px; letter-spacing: .13em; padding: 13px 20px; }
.card { opacity: 1; transform: none; transition: none; will-change: auto; }
.route-line, .dest-node::before, .dest-node::after { animation: none; }
.gallery-card { border-radius: 3px; padding: 25px; }
.gallery-card .btn-line { font-size: 10px; }
.memory-art { height: 165px; position: relative; overflow: hidden; margin: -25px -25px 24px; }
.memory-art img { height: 100%; width: 100%; object-fit: cover; object-position: center 90%; }
.memory-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 50%, #10372d); }
.signoff { padding-top: 26px; }
.signoff-names { letter-spacing: .035em; font: 30px 'Cormorant Garamond', serif; }
.contact-rel, .journey-hint, .signoff-note { color: #d0c9b5; }

@media (min-width: 1500px) {
  .invitation-art { width: 54%; }
  .invite-scroll { left: 54%; }
  #sheet { right: max(24px, calc((46vw - 580px) / 2)); }
}
@media (min-width: 761px) and (max-height: 780px) {
  .invite-scroll { justify-content: flex-start; padding-top: 32px; }
  .eyebrow { margin-bottom: 12px; }
  .divider { margin: 10px 0 15px; }
  .request { margin-bottom: 12px; }
  .couple { font-size: 45px; }
  .countdown { margin-top: 18px; }
}
@media (max-width: 760px) {
  .stage::after { inset: 10px; }
  .invitation-art { width: 100%; }
  .invitation-art img { object-position: center top; }
  .invitation-art::after { background: linear-gradient(0deg, #061f19 0%, #061f19bf 26%, #061f1930 60%, transparent); }
  .art-inscription { display: none; }
  .invite-scroll { left: 0; padding: 160px 25px 32px; justify-content: flex-start; background: none; }
  #invite { max-width: 400px; padding: 0 8px; }
  .eyebrow { font-size: 17px; margin-bottom: 13px; }
  .bismillah { font-size: 22px; }
  .divider { margin: 11px 0 16px; }
  .request { font-size: 17px; max-width: 250px; margin-bottom: 18px; }
  .couple { font-size: 48px; }
  .amp { font-size: 28px; }
  .grace { font-size: 8px; letter-spacing: .17em; }
  .countdown { max-width: 270px; margin-top: 22px; background: #061f192e; }
  .big-date { font-size: 10px; letter-spacing: .11em; margin-top: 20px; }
  .big-venue { font-size: 16px; }
  #slideWrap { padding-top: 23px; width: 280px; max-width: 100%; }
  #medallion { top: 58%; }
  .gate-names { font-size: 34px; }
  .gate-footer { bottom: 26px; font-size: 9px; }
  .door::before { background-size: auto 100%; }
  #sheet { inset: 12px 8px 0; width: auto; border-radius: 16px 16px 0 0; }
  .sheet-body { padding: 8px 20px 35px; }
  .sheet-head { padding-inline: 20px; }
  .panel { padding: 18px; }
}
@media (max-width: 380px) {
  .invite-scroll { padding: 138px 19px 30px; }
  .couple { font-size: 43px; }
  .contact-name { font-size: 13px; }
  .contact-tel { font-size: 11px; }
  .sheet-body { padding-inline: 16px; }
}
@media (max-height: 620px) {
  .med-disc { width: 100px; height: 100px; margin-bottom: 10px; }
  .med-core { width: 84px; height: 84px; }
  .med-init { font-size: 31px; }
  .med-date { font-size: 9px; }
  .med-bism { margin-bottom: 8px; font-size: 17px; }
  .gate-note { margin-bottom: 14px; }
  .gate-names { font-size: 30px; }
  .gate-footer { bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}