/* ================================================================
   JewATX — styles
   Palette follows UATX: navy #0c2334, gold #bda77a.
   Change colors here, not inline.
   ================================================================ */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("fonts/jost.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --navy: #0c2334;
  --navy-deep: #07161f;
  --gold: #bda77a;
  --gold-bright: #d6c396;
  --gold-soft: rgba(189, 167, 122, 0.5);
  --gold-faint: rgba(189, 167, 122, 0.2);
  --ivory: #f4efe4;
  --ivory-dim: rgba(244, 239, 228, 0.72);
  --ivory-faint: rgba(244, 239, 228, 0.42);

  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Jost", "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;

  --interval: 3500ms;                      /* gallery: time per photo */
  --inset: clamp(10px, 1.5vw, 22px);       /* gold frame distance from screen edge */
  --pad-x: clamp(2rem, 5.5vw, 6.5rem);
  --pad-y: clamp(1.6rem, 4.6vh, 3.25rem);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--navy);
  color: var(--ivory);
  overflow-x: hidden;
}
body {
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* ---------- Atmosphere: skyline, tint, grain, frame ---------- */

.backdrop {
  position: fixed;
  inset: -2%;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(7, 22, 31, 0.93) 0%, rgba(12, 35, 52, 0.78) 38%, rgba(12, 35, 52, 0.5) 72%, rgba(12, 35, 52, 0.66) 100%),
    linear-gradient(0deg, rgba(7, 22, 31, 0.92) 0%, rgba(7, 22, 31, 0) 34%),
    linear-gradient(180deg, rgba(7, 22, 31, 0.55) 0%, rgba(7, 22, 31, 0) 22%),
    url("img/austin-2400.webp") 60% 58% / cover no-repeat,
    var(--navy);
  animation: settle 16s cubic-bezier(.2, .6, .2, 1) both;
}
@keyframes settle { from { transform: scale(1.06); } to { transform: scale(1); } }

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.frame {
  position: fixed;
  inset: var(--inset);
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(189, 167, 122, 0.3);
}
.frame i {
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
}
.frame i:nth-child(1) { top: -4px; left: -4px; }
.frame i:nth-child(2) { top: -4px; right: -4px; }
.frame i:nth-child(3) { bottom: -4px; left: -4px; }
.frame i:nth-child(4) { bottom: -4px; right: -4px; }

/* ---------- Page grid (desktop / laptop) ---------- */

.page {
  position: relative;
  z-index: 2;
  height: 100vh;
  height: 100dvh;
  padding: var(--pad-y) var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.4fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "top     top"
    "intro   gallery"
    "contact contact";
  column-gap: clamp(2rem, 5vw, 6rem);
  row-gap: clamp(0.75rem, 2.6vh, 1.9rem);
}

/* ---------- Top line ---------- */

.topline {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font: 500 0.66rem/1 var(--sans);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}
.topline .rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-faint), var(--gold-soft) 50%, var(--gold-faint));
}

/* ---------- Intro column: logo, offerings, next dinner ---------- */

.intro {
  grid-area: intro;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  gap: clamp(1rem, min(3.2vh, 2.4vw), 2.4rem);
}

.logo {
  margin: 0;
  height: clamp(92px, min(27vh, 18vw), 275px);
  flex: none;
}
.logo img {
  height: 100%;
  width: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
}

.offerings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.55rem, 1.7vh, 1.1rem);
  max-width: 30rem;
}
.offerings li {
  display: grid;
  grid-template-columns: 2.7rem 1fr;
  align-items: baseline;
  padding-top: clamp(0.55rem, 1.7vh, 1.1rem);
  border-top: 1px solid var(--gold-faint);
}
.offerings li:first-child { padding-top: 0; border-top: 0; }
.num {
  font: italic 500 clamp(1rem, min(0.8rem + 1.1vh, 1.9vw), 1.5rem)/1 var(--serif);
  color: var(--gold);
}
.offerings h2 {
  margin: 0;
  font: 500 clamp(1.2rem, min(0.85rem + 1.55vh, 2.3vw), 2.05rem)/1.08 var(--serif);
  letter-spacing: 0.005em;
  color: var(--ivory);
}
.offerings p {
  margin: 0.22rem 0 0;
  font: italic 400 clamp(0.95rem, min(0.82rem + 0.55vh, 1.5vw), 1.22rem)/1.3 var(--serif);
  color: var(--ivory-dim);
}

.upcoming {
  margin: 0;
  align-self: flex-start;
  display: inline-flex;
  flex-direction: column;
  gap: 0.38rem;
  padding: 0.8rem 1.25rem 0.85rem;
  border: 1px solid var(--gold-soft);
  background: rgba(7, 22, 31, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.upcoming-label {
  font: 500 0.64rem/1 var(--sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
.upcoming-date {
  font: italic 500 clamp(1.2rem, 0.95rem + 0.9vh, 1.6rem)/1.1 var(--serif);
  color: var(--ivory);
}

/* ---------- Gallery ---------- */

.gallery {
  grid-area: gallery;
  min-height: 0;
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2.2vh, 1.5rem);
  padding-top: 4vh;
}

.gallery-frame {
  position: relative;
  width: min(100cqw - 32px, (100cqh - 76px) * 1.5);
  padding: clamp(5px, 0.7vw, 10px);
  border: 1px solid var(--gold-soft);
  background: rgba(7, 22, 31, 0.82);
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, 0.75);
}
/* corner brackets floating outside the frame */
.gallery-frame::before {
  --c: var(--gold);
  --l: 22px;
  content: "";
  position: absolute;
  inset: -12px;
  pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) top left / 1px var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) top right / 1px var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) bottom left / 1px var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) bottom right / 1px var(--l);
  background-repeat: no-repeat;
}

.slides {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--navy-deep);
}
.slides::after { /* hairline inside the mat */
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(189, 167, 122, 0.35);
  pointer-events: none;
}
.slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  /* leaving: fade out, then quietly reset the zoom once invisible */
  transition: opacity 1s ease, transform 0s linear 1.1s;
}
.slides img.is-active {
  opacity: 1;
  transform: scale(1.07);
  transition: opacity 1s ease, transform calc(var(--interval) + 1.4s) cubic-bezier(.25, .5, .4, 1);
}
.slides img:nth-child(3n + 1) { transform-origin: 30% 40%; }
.slides img:nth-child(3n + 2) { transform-origin: 70% 35%; }
.slides img:nth-child(3n + 3) { transform-origin: 50% 65%; }

.nav {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--gold-soft);
  border-radius: 50%;
  background: rgba(7, 22, 31, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.2s ease, border-color 0.2s ease;
}
.nav svg { width: 18px; height: 18px; fill: none; stroke: var(--ivory); stroke-width: 1.3; }
.nav:hover { background: rgba(189, 167, 122, 0.22); border-color: var(--gold); }
.gallery-frame .prev { left: clamp(12px, 2%, 22px); }
.gallery-frame .next { right: clamp(12px, 2%, 22px); }
.gallery-frame:hover .nav,
.nav:focus-visible { opacity: 1; }

.dashes {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 14px;
}
.dash {
  position: relative;
  width: 18px;
  height: 14px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: width 0.4s ease;
}
.dash::before,
.dash::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
}
.dash::before { right: 0; background: var(--ivory-faint); }
.dash.is-active { width: 46px; }
.dash.is-active::after {
  width: 0;
  background: var(--gold-bright);
  animation: fill var(--interval) linear forwards;
}
.gallery.is-paused .dash.is-active::after { animation-play-state: paused; }
@keyframes fill { to { width: 100%; } }

/* ---------- Contact ---------- */

.contact {
  grid-area: contact;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.6rem, 1.7vh, 1.1rem);
}
.ornament {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.ornament .rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}
.ornament .rule:last-child { background: linear-gradient(270deg, transparent, var(--gold-soft)); }
.candles {
  width: 36px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
}
.candles .flame {
  fill: var(--gold-bright);
  stroke: none;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: flicker 3.4s ease-in-out infinite;
}
.candles .flame + .flame { animation-delay: -1.5s; animation-duration: 2.9s; }
@keyframes flicker {
  0%, 100% { transform: scale(1, 1) rotate(0deg); opacity: 1; }
  30%      { transform: scale(0.92, 1.07) rotate(-3deg); opacity: 0.9; }
  62%      { transform: scale(1.04, 0.95) rotate(2deg); opacity: 0.8; }
}

.contact-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem clamp(1.25rem, 3vw, 2.75rem);
}
.contact-lead {
  margin: 0;
  font: italic 400 clamp(1.1rem, 0.9rem + 0.6vh, 1.35rem)/1.2 var(--serif);
  color: var(--ivory-dim);
}
.emails {
  display: flex;
  align-items: center;
  gap: 0 1.7rem;
}
.email {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.1rem;
  border: 0;
  background: none;
  cursor: pointer;
}
.email + .email::before { /* hairline between the two addresses */
  content: "";
  position: absolute;
  left: calc(-0.85rem - 0.5px);
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--gold-soft);
}
.addr {
  font: 500 1.3rem/1.15 var(--serif);
  letter-spacing: 0.01em;
  color: var(--ivory);
  background: linear-gradient(var(--gold-soft), var(--gold-soft)) 0 100% / 0 1px no-repeat;
  transition: color 0.2s ease, background-size 0.35s ease;
}
.email:hover .addr { background-size: 100% 1px; }
.copy-state {
  flex: none;
  width: 17px;
  height: 17px;
  display: grid;
}
.copy-state svg {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.2s ease, transform 0.2s ease, stroke 0.2s ease;
}
.email:hover .i-copy { stroke: var(--gold-bright); }
.i-check { opacity: 0; transform: scale(0.6); stroke: var(--gold-bright); stroke-width: 1.7; }
.email.is-copied .addr { color: var(--gold-bright); }
.email.is-copied .i-copy { opacity: 0; transform: scale(0.6); }
.email.is-copied .i-check { opacity: 1; transform: scale(1); }
.copied { /* little "Copied" tag that floats above the address */
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translate(-50%, 4px);
  font: 500 0.56rem/1 var(--sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold-bright);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.email.is-copied .copied { opacity: 1; transform: translate(-50%, 0); }

.toast { /* screen-reader announcement only */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  margin: 0;
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(5, 15, 22, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: fade-in 0.3s ease;
}
.lightbox-img {
  max-width: min(92vw, 1600px);
  max-height: 84vh;
  max-height: 84dvh;
  object-fit: contain;
  border: 1px solid var(--gold-soft);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.lightbox .nav { opacity: 1; }
.lightbox .prev { left: clamp(10px, 3vw, 40px); }
.lightbox .next { right: clamp(10px, 3vw, 40px); }
.lb-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + clamp(12px, 3vh, 32px));
  right: clamp(12px, 3vw, 40px);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--gold-soft);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.lb-close svg { width: 16px; height: 16px; stroke: var(--ivory); stroke-width: 1.3; }
.lb-close:hover { border-color: var(--gold); background: rgba(189, 167, 122, 0.15); }
.lb-count {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(14px, 3vh, 30px));
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font: 500 0.66rem/1 var(--sans);
  letter-spacing: 0.3em;
  color: var(--gold);
}
@keyframes fade-in { from { opacity: 0; } }

/* ---------- Load-in choreography ---------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 1.1s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: calc(var(--d, 0) * 110ms + 150ms);
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Short laptop screens ---------- */

@media (min-width: 901px) and (max-height: 700px) {
  :root { --pad-y: 1.4rem; }
  .logo { height: clamp(96px, 21vh, 150px); }
  .intro { gap: 0.9rem; }
  .offerings p { font-size: 0.98rem; }
  .upcoming { padding: 0.55rem 1rem 0.6rem; }
}

/* ---------- Phones & narrow windows: one stacked column ---------- */

@media (max-width: 900px) {
  :root {
    --inset: 8px;
    --pad-x: 22px;
  }
  .backdrop {
    background:
      linear-gradient(180deg, rgba(7, 22, 31, 0.7) 0%, rgba(12, 35, 52, 0.62) 30%, rgba(7, 22, 31, 0.86) 62%, rgba(7, 22, 31, 0.95) 100%),
      url("img/austin-1280.webp") 42% 50% / cover no-repeat,
      var(--navy);
  }
  .page {
    display: flex;
    flex-direction: column;
    padding:
      calc(env(safe-area-inset-top, 0px) + 20px)
      max(var(--pad-x), (100vw - 560px) / 2)
      calc(env(safe-area-inset-bottom, 0px) + 22px);
    gap: clamp(0.6rem, 1.9dvh, 1.1rem);
  }
  .intro { display: contents; }
  .topline  { order: 0; gap: 0.7rem; font-size: 0.56rem; letter-spacing: 0.26em; }
  .logo     { order: 1; align-self: center; height: clamp(90px, min(20dvh, 38vw), 190px); margin-top: 1rem; }
  .gallery  { order: 2; flex: 1 1 0; min-height: 150px; gap: 0.7rem; }
  .offerings{ order: 3; max-width: none; gap: 0.5rem; }
  .upcoming { order: 4; }
  .contact  { order: 5; }

  .gallery-frame { width: min(100cqw - 20px, (100cqh - 50px) * 1.5); padding: 5px; }
  .gallery-frame::before { inset: -8px; --l: 16px; }
  .nav { display: none; }
  .lightbox .nav { display: grid; }

  .offerings li { grid-template-columns: 2.1rem 1fr; padding-top: 0.5rem; }
  .offerings h2 { font-size: 1.16rem; }
  .offerings p { font-size: 0.95rem; margin-top: 0.1rem; }
  .num { font-size: 1rem; }

  .upcoming {
    align-self: stretch;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
  }
  .upcoming-label { font-size: 0.56rem; letter-spacing: 0.22em; }
  .upcoming-date { font-size: 1.12rem; }

  .ornament { gap: 0.8rem; }
  .candles { width: 30px; height: 20px; }
  .contact { gap: 0.55rem; }
  .contact-row { gap: 0.5rem; width: 100%; }
  .contact-lead { font-size: 1.02rem; }
  .emails { width: 100%; justify-content: center; gap: 0 1.4rem; }
  .email { gap: 0.35rem; }
  .email + .email::before { left: calc(-0.7rem - 0.5px); }
  .addr { font-size: clamp(1rem, 4.4vw, 1.2rem); }
  .copy-state { width: 15px; height: 15px; }
}

/* most phones with browser bars showing: trim to essentials so the photos stay big */
@media (max-width: 900px) and (max-height: 800px) {
  .page { gap: 0.6rem; }
  .logo { height: clamp(64px, min(12dvh, 24vw), 100px); }
  .ornament { display: none; }
  .offerings { gap: 0.3rem; }
  .offerings li { padding-top: 0.3rem; }
  .offerings p { font-size: 0.9rem; margin-top: 0; line-height: 1.2; }
  .contact-lead { font-size: 0.98rem; }
}
@media (max-width: 900px) and (max-height: 600px) {
  .page { padding-top: calc(env(safe-area-inset-top, 0px) + 16px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }
  .contact-lead { display: none; }
}

/* tiny or landscape-phone screens: let it scroll rather than crush */
@media (max-height: 520px) {
  .page { height: auto; min-height: 100dvh; }
  .gallery { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .backdrop, .candles .flame { animation: none; }
  .reveal { animation: none; opacity: 1; transform: none; }
  .slides img, .slides img.is-active { transform: none; transition: opacity 0.6s ease; }
}