/* Danny & Yayra — shared styles. Most layout lives inline in each page's templates. */
@font-face{font-family:"Pinyon Script";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/pinyon-script-400.woff2) format("woff2")}
@font-face{font-family:"Cormorant SC";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/cormorant-sc-400.woff2) format("woff2")}
@font-face{font-family:"Cormorant SC";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-sc-500.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/eb-garamond-400.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/eb-garamond-400-italic.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:500 600;font-display:swap;src:url(/assets/fonts/eb-garamond-500.woff2) format("woff2")}

*{-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"EB Garamond",Garamond,Georgia,serif;background:#FDFBF6;color:#3A2E1F;overflow-x:hidden}
a{color:#7A5A1E}a:hover{color:#5A4216}
input,button,select,textarea{font-family:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.55}
strong{font-weight:500}
img,video{max-width:100%}
:focus-visible{outline:2px solid #8A6A2B;outline-offset:2px}
input:focus,textarea:focus,select:focus{outline:2px solid #8A6A2B;outline-offset:0;border-color:#3A2E1F !important}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
details[open] summary .faq-plus{transform:rotate(45deg)}
.faq-plus{display:inline-block;transition:transform 200ms ease}
[id]{scroll-margin-top:16px}

.btn-o{transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease}
.btn-o:hover{background:#8A6A2B !important;border-color:#8A6A2B !important;color:#FFFFFF !important}
.btn-lb:hover{background:#FDFBF6 !important;color:#2E2418 !important}
[role="tab"]{transition:background-color 150ms ease}
[role="tab"][aria-selected="false"]:hover{background:#F6F1E7 !important}
.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.swipe{scrollbar-width:none}.swipe::-webkit-scrollbar{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pre-line{white-space:pre-line}

/* Hero over a photo (only used if content.heroPhoto is set) */
.hero-photo > div, .hero-photo > div *{color:#FFFFFF !important}
.hero-photo .btn-o{color:#2E2418 !important}
.hero-photo .btn-o:hover{color:#FFFFFF !important}
.hero-photo h1 img{filter:brightness(0) invert(1)}
.hero-photo [role="dialog"], .hero-photo [role="dialog"] *{color:#3A2E1F !important}
.hero-photo .hero-frame,.hero-photo .hero-corner{display:none}

/* Album tiles */
.tile .tile-cap{opacity:1;transition:opacity 200ms ease}
@media (min-width:1024px) and (hover:hover){.tile .tile-cap{opacity:0}.tile:hover .tile-cap,.tile:focus-visible .tile-cap{opacity:1}}
.tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tile:focus-visible{outline:2px solid #8A6A2B;outline-offset:2px}

/* Toasts / page loader */
.loading{min-height:100vh;display:flex;align-items:center;justify-content:center}

.btn-f{transition:background-color 150ms ease}
.btn-f:hover{background:#6F5420 !important}
/* Solid bronze buttons (on paper) and light-gold buttons (on espresso) */
.btn-b{transition:background-color 150ms ease}
.btn-b:hover{background:#6F5420 !important}
.btn-g{transition:background-color 150ms ease}
.btn-g:hover{background:#E6CF9E !important}

/* No single words left alone on the last line of a paragraph; headings break into even lines */
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}

/* Hero: fills the screen below the menu bar; everything shrinks a little on short screens so nothing is cut off.
   Very short screens (a phone held sideways) get the minimum height and simply scroll. */
.hero{display:flex;flex-direction:column;align-items:center}
.hero > *{z-index:1}
.hero-mid{flex:1 1 auto;min-height:0}
/* The invitation's thin gold frame, with flower sprays in its corners */
.hero-frame{position:absolute;pointer-events:none;border:1px solid #C9A24D;z-index:0}
.hero-corner{position:absolute;display:block;height:auto;pointer-events:none;user-select:none;z-index:0}
.hero-m .hero-frame{inset:10px}
.hero-m .hero-corner{top:14px;width:clamp(78px,13vh,104px)}
.hero-m .hero-corner.tl{left:14px}.hero-m .hero-corner.tr{right:14px;transform:scaleX(-1)}
.hero-d .hero-frame{inset:20px 40px}
.hero-d .hero-corner{width:clamp(130px,19vh,170px)}
.hero-d .hero-corner.tl{left:46px;top:26px}.hero-d .hero-corner.tr{right:46px;top:26px;transform:scaleX(-1)}
.hero-d .hero-corner.bl{left:46px;bottom:26px;transform:scaleY(-1)}.hero-d .hero-corner.br{right:46px;bottom:26px;transform:scale(-1,-1)}
.hero-m{height:calc(100vh - 64px);height:calc(100svh - 64px);min-height:540px;padding:clamp(64px,11vh,92px) 24px clamp(26px,4.5vh,40px);gap:clamp(8px,2vh,18px)}
.hero-m .hero-num{font-size:clamp(34px,6.5vh,46px)}
.hero-m .hero-low{gap:clamp(8px,1.8vh,16px)}
.hero-m .hero-names{width:clamp(220px,40vh,320px);max-width:calc(100vw - 56px)}
.hero-m .hero-flourish{width:clamp(140px,22vh,190px);margin-top:-4px}
.hero-m .hero-date .dn{font-size:clamp(32px,5.4vh,44px)}
.hero-m .hero-date .dr{height:clamp(32px,5.4vh,44px)}
.hero-m .hero-date .dw{font-size:clamp(14px,2.1vh,16px)}
.hero-m .hero-venue{font-size:clamp(14px,2vh,16px)}
.hero-m .hero-btns > *{min-height:clamp(44px,6.2vh,50px) !important}
.hero-d{height:calc(100vh - 80px);height:calc(100svh - 80px);min-height:600px;padding:clamp(48px,8.5vh,76px) 80px clamp(40px,7vh,64px);gap:clamp(12px,2.4vh,22px)}
.hero-d .hero-units{gap:clamp(40px,5vw,64px)}
.hero-d .hero-num{font-size:clamp(56px,10vh,88px)}
.hero-d .hero-low{gap:clamp(12px,2.2vh,20px)}
.hero-d .hero-names{width:clamp(380px,56vh,560px)}
.hero-d .hero-flourish{width:clamp(200px,28vh,260px);margin-top:-6px}
.hero-d .hero-date .dn{font-size:clamp(44px,6.6vh,60px)}
.hero-d .hero-date .dr{height:clamp(44px,6.4vh,58px)}
.hero-d .hero-date .dw{font-size:clamp(17px,2.3vh,20px)}
.hero-d .hero-venue{font-size:clamp(16px,2.1vh,19px)}
.hero-d .hero-btns > *{min-height:clamp(50px,6.5vh,56px) !important}
@supports (height:1svh){
  .hero-m{padding-top:clamp(64px,11svh,92px)}
  .hero-m .hero-num{font-size:clamp(34px,6.5svh,46px)}
  .hero-m .hero-names{width:clamp(220px,40svh,320px)}
  .hero-m .hero-corner{width:clamp(78px,13svh,104px)}
  .hero-d .hero-num{font-size:clamp(56px,10svh,88px)}
  .hero-d .hero-names{width:clamp(380px,56svh,560px)}
}

/* Garland (gold line-art spray: the vine draws in, then the four flowers open) */
.gl{position:relative;aspect-ratio:1304/601}
.gl img{position:absolute;display:block;height:auto;max-width:none;pointer-events:none;user-select:none}
.gl-fl{position:absolute;inset:0}
/* Undrawn until on screen; js/garland.js sets data-gl="in" while at least a third of it is visible */
.gl .gl-fol{clip-path:inset(0 100% 0 0)}
.gl .gl-flw{opacity:0}
.gl[data-gl="in"] .gl-fl{animation:bqnod 7s ease-in-out infinite}
.gl[data-gl="in"] .gl-fol{animation:glfol12 12s cubic-bezier(.4,.1,.3,1) infinite both}
.gl[data-gl="in"] .gl-flw{animation:glflw12 12s ease-out infinite both}
.gl-static .gl .gl-fol{clip-path:none}.gl-static .gl .gl-flw{opacity:1}
@keyframes bqnod{0%,100%{transform:rotate(0)}50%{transform:rotate(2.2deg)}}
/* One 12 s cycle: vine draws (0-2.2 s), flowers bloom, rest with a sway, fade out at about 10.5 s, replay */
@keyframes glfol12{0%{clip-path:inset(0 100% 0 0);opacity:1}18%{clip-path:inset(0 0 0 0);opacity:1}88%{clip-path:inset(0 0 0 0);opacity:1}94%{clip-path:inset(0 0 0 0);opacity:0}100%{clip-path:inset(0 100% 0 0);opacity:0}}
@keyframes glflw12{0%{transform:scale(.1) rotate(-60deg);opacity:0}4%{opacity:1}7.5%{transform:none;opacity:1}82%{transform:none;opacity:1}88%{transform:scale(.6);opacity:0}100%{transform:scale(.1) rotate(-60deg);opacity:0}}
@media (prefers-reduced-motion: reduce){.gl *{animation:none !important}.gl .gl-fol{clip-path:none}.gl .gl-flw{opacity:1}html{scroll-behavior:auto}}

/* Couple admin on small screens */
@media (max-width: 899px){
  .admin-root{flex-direction:column !important}
  .admin-root > aside{width:auto !important;padding:16px !important;gap:12px !important}
  .admin-root > aside nav{flex-direction:row !important;overflow-x:auto;gap:4px}
  .admin-root > main{padding:28px 16px !important;overflow:visible !important}
  .admin-root > main > div[style*="grid-template-columns: repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .admin-root > main > div[style*="grid-template-columns: repeat(6"]{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .admin-root table{display:block;overflow-x:auto}
}

/* "Along the way" on computers: two rows drifting left at different speeds; hovering pauses both */
.atw-track{position:relative;height:325px;overflow:hidden}
.atw-row{position:absolute;left:0;top:0;height:325px;display:flex;gap:24px;will-change:transform;backface-visibility:hidden;animation-name:atwdrift;animation-timing-function:linear;animation-iteration-count:infinite}
.atw-row img{flex-shrink:0;height:325px;object-fit:cover;display:block;border-radius:2px;background:#F0E8D8;backface-visibility:hidden;transform:translateZ(0)}
.atw:hover .atw-row{animation-play-state:paused}
@keyframes atwdrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion: reduce){.atw-row{animation:none;position:static}.atw-track{overflow-x:auto}}

/* Older browsers (Safari < 15) without aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .gl{height:0 !important;padding-bottom:46.09%}
  .tile{aspect-ratio:auto !important;height:0 !important;padding-bottom:110% !important}
}