:root {
  --wine: #762d3d;
  --wine-dark: #5e2130;
  --ink: #2c2522;
  --paper: #f8f5ef;
  --card: #fffdf9;
  --muted: #766a64;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: Manrope, Arial, sans-serif; }
.checking-access #site-content { visibility: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .68; }
svg { width: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
[hidden] { display: none !important; }
.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; }

.wedding-page { min-height: 100svh; display: grid; grid-template-columns: minmax(330px,.92fr) minmax(500px,1.08fr); }
.story-panel { position: relative; min-height: 100svh; overflow: hidden; color: #fff; background: #4a1d28; }
.story-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-overlay { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(32,26,22,.04),rgba(40,20,25,.76)); }
.monogram { position: absolute; top: 2.25rem; left: 2.5rem; display: flex; align-items: center; gap: .65rem; font-size: .84rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.monogram svg, .mobile-brand svg { width: 1.2rem; fill: currentColor; }
.story-copy { position: absolute; left: clamp(2rem,5vw,5rem); right: clamp(2rem,5vw,5rem); bottom: clamp(3rem,8vh,7rem); max-width: 38rem; }
.eyebrow { margin: 0 0 1rem; font-size: .73rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.story-copy h1 { margin: 0; font-family: "Cormorant Garamond",Georgia,serif; font-size: clamp(3.2rem,6vw,6.2rem); line-height: .88; font-weight: 600; letter-spacing: -.045em; }
.story-copy>p:last-child { max-width: 33rem; margin: 1.6rem 0 0; color: rgba(255,255,255,.84); font-size: clamp(1rem,1.4vw,1.12rem); line-height: 1.7; }

.upload-panel { display: flex; min-height: 100svh; align-items: center; justify-content: center; padding: clamp(2rem,6vw,6rem); }
.upload-shell { width: min(100%,34rem); }
.mobile-brand { display: none; }
.upload-heading { text-align: center; }
.camera-mark { display: grid; width: 3.2rem; height: 3.2rem; margin: 0 auto 1.25rem; place-items: center; border-radius: 50%; color: var(--wine); background: #f0e1e1; }
.camera-mark svg { width: 1.45rem; }
.upload-heading .eyebrow { margin-bottom: .65rem; color: #9b6670; }
.upload-heading h2, .success-card h2 { margin: 0; font-family: "Cormorant Garamond",Georgia,serif; font-size: clamp(2.7rem,4.3vw,4.3rem); line-height: 1; font-weight: 600; letter-spacing: -.04em; }
.upload-heading>p:last-child { max-width: 27rem; margin: 1rem auto 2.2rem; color: var(--muted); line-height: 1.65; }

.drop-zone { display: flex; min-height: 19rem; flex-direction: column; align-items: center; justify-content: center; border: 1.5px dashed #cbbab4; border-radius: 1.5rem; padding: 2rem; text-align: center; background: rgba(255,253,249,.82); box-shadow: 0 24px 70px rgba(77,42,40,.08); transition: border-color .2s,transform .2s,background .2s; }
.drop-zone:hover, .drop-zone.dragging { border-color: #9d5262; transform: translateY(-2px); background: var(--card); }
.upload-icon { display: grid; width: 4rem; height: 4rem; place-items: center; border-radius: 1.1rem; color: var(--wine); background: #f7eeee; transform: rotate(-2deg); }
.upload-icon svg { width: 1.8rem; }
.drop-zone strong { margin-top: 1.2rem; font-family: "Cormorant Garamond",Georgia,serif; font-size: 1.55rem; font-weight: 600; }
.drop-zone>span:not(.upload-icon) { margin-top: .35rem; color: #877a74; font-size: .875rem; }
.drop-zone .desktop-only { margin-top: .8rem; font-size: .74rem; }
.primary-button, .upload-button { min-height: 3.25rem; border: 0; border-radius: 999px; padding: 0 1.75rem; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; color: #fffaf5; background: var(--wine); font-weight: 800; box-shadow: 0 10px 24px rgba(118,45,61,.22); transition: background .2s,transform .15s; }
.primary-button:hover, .upload-button:hover { background: var(--wine-dark); }
.primary-button:active, .upload-button:active { transform: translateY(1px); }
.drop-zone .primary-button { margin-top: 1.5rem; }
.privacy-note { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: 1.15rem 0 0; color: #81756f; font-size: .78rem; text-align: center; }
.privacy-note svg { flex: 0 0 auto; width: 1rem; }

.selection-card { border: 1px solid #dfd5cf; border-radius: 1.5rem; padding: 1.35rem; background: rgba(255,253,249,.92); box-shadow: 0 24px 70px rgba(77,42,40,.08); }
.selection-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .2rem .15rem 1rem; border-bottom: 1px solid #eee5df; }
.selection-title>div { display: flex; flex-direction: column; gap: .18rem; }
.selection-title strong { font-family: "Cormorant Garamond",Georgia,serif; font-size: 1.35rem; }
.selection-title span { color: #877a74; font-size: .78rem; }
.outline-button { min-height: 2.45rem; border: 1px solid #d9cbc4; border-radius: 999px; padding: 0 .85rem; display: inline-flex; align-items: center; gap: .35rem; color: var(--ink); background: var(--card); font-size: .8rem; font-weight: 700; }
.outline-button:hover { border-color: #9d5262; }
.outline-button svg { width: .95rem; }
.file-list { max-height: 13rem; overflow-y: auto; margin: .45rem -.25rem .25rem; padding: 0 .25rem; }
.file-row { display: grid; grid-template-columns: 2.5rem minmax(0,1fr) 2rem; align-items: center; gap: .7rem; padding: .7rem .15rem; border-bottom: 1px solid #f0e8e3; }
.file-row:last-child { border-bottom: 0; }
.file-icon { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .8rem; color: var(--wine); background: #f6eceb; }
.file-icon svg { width: 1.15rem; }
.file-name { display: flex; min-width: 0; flex-direction: column; gap: .18rem; }
.file-name strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.file-name small { color: #8a7d76; font-size: .7rem; }
.icon-button { width: 2rem; height: 2rem; border: 0; display: grid; place-items: center; color: #8a7d76; background: transparent; border-radius: 50%; }
.icon-button:hover { color: #9e3043; background: #f6eceb; }
.icon-button svg { width: 1rem; }
.progress-box { margin: 1rem .15rem .25rem; font-size: .8rem; font-weight: 700; }
.progress-box>div { display: flex; justify-content: space-between; margin-bottom: .5rem; }
.progress-box progress { width: 100%; height: .45rem; display: block; overflow: hidden; border: 0; border-radius: 999px; background: #eee4df; }
.progress-box progress::-webkit-progress-bar { background: #eee4df; }
.progress-box progress::-webkit-progress-value { background: var(--wine); transition: width .2s; }
.progress-box progress::-moz-progress-bar { background: var(--wine); }
.upload-button { width: 100%; min-height: 3.35rem; margin-top: 1rem; }
.upload-button.loading svg { animation: spin .9s linear infinite; }
.error-message { margin: .8rem .2rem 0; color: #a22d3e; font-size: .8rem; line-height: 1.5; }

.success-card { text-align: center; border: 1px solid #ded1c9; border-radius: 1.8rem; padding: clamp(2.25rem,6vw,4rem) clamp(1.5rem,5vw,3.5rem); background: rgba(255,253,249,.94); box-shadow: 0 24px 70px rgba(77,42,40,.09); }
.success-icon { display: grid; width: 4.5rem; height: 4.5rem; margin: 0 auto 1.35rem; place-items: center; border-radius: 50%; color: #fff; background: var(--wine); box-shadow: 0 12px 26px rgba(118,45,61,.2); }
.success-icon svg { width: 2rem; }
.success-card .eyebrow { margin-bottom: .65rem; color: #9b6670; }
.success-card h2 { font-size: clamp(3rem,5vw,4.7rem); }
.success-card>p:not(.eyebrow) { margin: 1.15rem auto 0; color: var(--muted); line-height: 1.7; }
.success-card .primary-button { margin-top: 1.8rem; }

.access-screen { min-height: 100svh; display: grid; place-items: center; padding: 2rem; text-align: center; background: var(--paper); }
.access-screen>div { width: min(100%,30rem); }
.access-screen svg { width: 3rem; height: 3rem; color: var(--wine); }
.access-screen h1 { margin: 1.4rem 0 .7rem; font-family: "Cormorant Garamond",Georgia,serif; font-size: clamp(2.5rem,7vw,4rem); line-height: .95; }
.access-screen p { color: var(--muted); line-height: 1.65; }

.gallery-section { padding: clamp(4rem,8vw,7rem) clamp(1.25rem,6vw,6rem) clamp(5rem,10vw,9rem); color: var(--ink); background: #efe9e1; }
.gallery-header { max-width: 82rem; margin: 0 auto 2.2rem; display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.gallery-header .eyebrow { margin-bottom: .55rem; color: #9b6670; }
.gallery-header h2 { margin: 0; font-family: "Cormorant Garamond",Georgia,serif; font-size: clamp(3rem,6vw,5.4rem); line-height: .92; font-weight: 600; letter-spacing: -.045em; }
.gallery-header>div>p:last-child { margin: .85rem 0 0; color: var(--muted); }
.gallery-header .outline-button { flex: 0 0 auto; min-height: 2.8rem; padding-inline: 1rem; }
.gallery-grid { max-width: 82rem; margin: 0 auto; columns: 4 16rem; column-gap: 1rem; }
.gallery-item { position: relative; width: 100%; margin: 0 0 1rem; padding: 0; overflow: hidden; display: block; break-inside: avoid; border: 0; border-radius: 1rem; color: #fff; background: #dfd5cf; box-shadow: 0 10px 30px rgba(54,39,35,.09); }
.gallery-item img { width: 100%; min-height: 12rem; max-height: 26rem; display: block; object-fit: cover; transition: transform .35s ease; }
.gallery-item:hover img { transform: scale(1.025); }
.gallery-item:after { content: ""; position: absolute; inset: auto 0 0; height: 35%; pointer-events: none; background: linear-gradient(transparent,rgba(26,18,19,.6)); opacity: 0; transition: opacity .2s; }
.gallery-item:hover:after { opacity: 1; }
.gallery-item .video-badge { position: absolute; z-index: 1; right: .7rem; bottom: .7rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(28,20,22,.76); backdrop-filter: blur(8px); }
.gallery-item .video-badge svg { width: 1rem; fill: currentColor; }
.gallery-message { max-width: 82rem; min-height: 15rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #cbbeb6; border-radius: 1.4rem; padding: 2rem; text-align: center; color: var(--muted); background: rgba(255,253,249,.5); }
.gallery-message>svg { width: 2.5rem; height: 2.5rem; color: var(--wine); }
.gallery-message h3 { margin: 1rem 0 .35rem; font-family: "Cormorant Garamond",Georgia,serif; color: var(--ink); font-size: 1.8rem; }
.gallery-message p { margin: .2rem 0; }
.gallery-spinner { width: 2rem; height: 2rem; border: 2px solid #d8c8c3; border-top-color: var(--wine); border-radius: 50%; animation: spin .8s linear infinite; }
.gallery-error { max-width: 82rem; margin: 0 auto 1rem; color: #a22d3e; }

.lightbox { width: min(94vw,72rem); height: min(92vh,54rem); margin: auto; padding: 0; overflow: visible; border: 0; color: #fff; background: transparent; }
.lightbox::backdrop { background: rgba(21,15,17,.9); backdrop-filter: blur(10px); }
.lightbox-content { width: 100%; height: calc(100% - 2.5rem); display: grid; place-items: center; }
.lightbox-content img, .lightbox-content video { max-width: 100%; max-height: 100%; border-radius: .8rem; box-shadow: 0 24px 80px rgba(0,0,0,.3); }
.lightbox-content video { width: min(100%,70rem); }
.lightbox-close { position: absolute; z-index: 2; top: -2.8rem; right: 0; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.13); }
.lightbox-close svg { width: 1.2rem; }
.lightbox>p { margin: .75rem 0 0; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

button:focus-visible, .drop-zone:focus-visible { outline: 3px solid rgba(157,82,98,.35); outline-offset: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width:820px) {
  .wedding-page { display: block; }
  .story-panel { min-height: 36svh; }
  .story-image { object-position: 50% 37%; }
  .story-copy { bottom: 2rem; }
  .story-copy h1 { font-size: clamp(2.8rem,13vw,4.8rem); }
  .story-copy>p:last-child, .monogram { display: none; }
  .upload-panel { min-height: 64svh; padding: 2rem 1.25rem 3rem; }
  .mobile-brand { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-bottom: 2rem; color: var(--wine); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .camera-mark { display: none; }
  .upload-heading h2 { font-size: 2.8rem; }
  .upload-heading>p:last-child { margin-bottom: 1.5rem; }
  .drop-zone { min-height: 16rem; }
  .desktop-only { display: none; }
  .gallery-header { align-items: center; }
  .gallery-grid { columns: 3 11rem; column-gap: .7rem; }
  .gallery-item { margin-bottom: .7rem; border-radius: .75rem; }
}

@media (max-width:420px) {
  .story-panel { min-height: 31svh; }
  .story-copy { left: 1.4rem; right: 1.4rem; bottom: 1.4rem; }
  .story-copy h1 { font-size: 2.65rem; }
  .story-copy .eyebrow { margin-bottom: .65rem; }
  .upload-panel { padding-top: 1.5rem; }
  .mobile-brand { margin-bottom: 1.25rem; }
  .upload-heading h2 { font-size: 2.35rem; }
  .drop-zone { min-height: 15rem; padding: 1.4rem; }
  .selection-card { padding: 1rem; }
  .privacy-note { padding: 0 .5rem; }
  .gallery-section { padding-top: 3.5rem; }
  .gallery-header { align-items: flex-start; }
  .gallery-header h2 { font-size: 3.15rem; }
  .gallery-header>div>p:last-child { max-width: 15rem; font-size: .9rem; }
  .gallery-header .outline-button { width: 2.8rem; padding: 0; font-size: 0; }
  .gallery-header .outline-button svg { width: 1.1rem; }
  .gallery-grid { columns: 2 8rem; }
  .gallery-item img { min-height: 9rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}