/* ============================================================
   components.css — "Midnight & Champagne"
   Glass surfaces, champagne accents, printed-photo placeholders,
   editorial hero. Signature: the four-frame photo strip.
   ============================================================ */

/* ---- Buttons ----------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.95rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--flash {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--flash-hover), var(--flash));
  color: var(--flash-ink);
  box-shadow: 0 8px 24px -8px rgba(232, 201, 143, 0.55), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn--flash:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -8px rgba(232, 201, 143, 0.7), inset 0 1px 0 rgba(255,255,255,0.45); }
/* champagne shine sweep on hover */
.btn--flash::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -75%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
@media (hover: hover) {
  .btn--flash:hover::after { animation: btnshine 0.75s var(--ease); }
}
@keyframes btnshine { to { left: 125%; } }

.btn--ghost {
  background: rgba(255, 255, 255, 0.02);
  color: var(--paper);
  border-color: var(--velvet-line);
}
.btn--ghost:hover { border-color: var(--champagne); color: #fff; background: rgba(228, 201, 155, 0.06); }

.section--light .btn--ghost { color: var(--ink); border-color: rgba(20,19,28,0.25); background: transparent; }
.section--light .btn--ghost:hover { border-color: var(--champagne-deep); background: rgba(183,147,90,0.08); }

/* ---- Header / nav ------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--nav-h);
  background: rgba(17, 17, 32, 0.72);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--velvet-line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--nav-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--paper);
  white-space: nowrap;
}
.brand__mark { width: auto; height: 38px; flex: 0 0 auto; }
.site-footer .brand__mark { width: auto; height: 40px; }
.brand__dot { color: var(--champagne); }
.brand__sub {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--chrome);
  align-self: center;
  padding-left: 0.15rem;
}
@media (max-width: 400px) { .brand__sub { display: none; } }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.9rem);
  list-style: none;
}
.nav-links a {
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--paper-dim);
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}
.nav-links a:hover { color: var(--paper); }
.nav-links a:not(.btn):hover::after,
.nav-links a[aria-current="page"]:not(.btn)::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--paper); }

.nav-cta { display: flex; align-items: center; }
/* Button text must ignore the light nav-link colour (specificity fix) */
.nav-links a.btn--flash,
.nav-links a.btn--flash:hover { color: var(--flash-ink); }
.nav-links a.btn { text-decoration: none; }
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--velvet-line);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem;
  color: var(--paper);
}
.nav-toggle::before {
  content: "";
  display: block;
  width: 22px; height: 22px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--curtain-2);
    border-bottom: 1px solid var(--velvet-line);
    padding: var(--space-2) var(--gutter) var(--space-5);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .nav-links[data-open="true"] { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links a { padding-block: var(--space-3); border-bottom: 1px solid var(--velvet-line); }
  .nav-links a:not(.btn)::after { display: none; }
  .nav .nav-cta { padding-top: var(--space-3); }
  .nav .nav-cta .btn { display: inline-flex; width: 100%; }
}

/* ---- Hero (showpiece) -------------------------------------- */
.hero {
  position: relative;
  min-height: min(94vh, 860px);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--velvet-line);
}
.hero__media { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; }
/* deep vignette + floor fade */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(10,7,14,0.55) 100%),
    linear-gradient(180deg, rgba(10,7,14,0.35) 0%, rgba(10,7,14,0.15) 45%, var(--curtain) 100%);
}
/* ambient colour wash behind the light-field */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(55% 55% at 80% 22%, rgba(232,201,143,0.16), transparent 60%),
    radial-gradient(60% 60% at 15% 85%, rgba(110,121,201,0.20), transparent 60%);
}
/* animated defocused party-lights */
.hero__fx { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; }

/* real hero photograph (drop img/hero.jpg in place) */
.hero__photo {
  position: absolute; inset: 0; z-index: -4;
  background: var(--curtain) var(--hero-img, url("/img/hero.jpg")) center right / cover no-repeat;
  transform-origin: 72% 45%;
}
@media (max-width: 700px) {
  .hero__photo { background-position: center; transform-origin: 50% 45%; }
}
/* slow cinematic drift — brings the still to life (one authored moment) */
@media (prefers-reduced-motion: no-preference) {
  .hero__photo { animation: kenburns 30s ease-in-out infinite alternate; }
}
@keyframes kenburns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.13); }
}
/* when a photo is present: it's the star — strong left scrim for text,
   hide the CSS photo-strip, keep the copy on the left */
.hero--photo::after {
  background:
    linear-gradient(90deg, rgba(12,8,16,0.95) 0%, rgba(12,8,16,0.78) 32%, rgba(12,8,16,0.35) 58%, rgba(12,8,16,0.05) 100%),
    linear-gradient(180deg, transparent 55%, var(--curtain) 100%);
}
.hero--photo .hero__grid { grid-template-columns: minmax(0, 640px); }
.hero--photo .hero__strip { display: none; }
@media (max-width: 960px) {
  .hero--photo::after {
    background:
      linear-gradient(180deg, rgba(12,8,16,0.7) 0%, rgba(12,8,16,0.55) 40%, rgba(12,8,16,0.85) 75%, var(--curtain) 100%);
  }
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.75fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: var(--space-9);
  position: relative;
  z-index: 1;
}
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__title { font-size: var(--t-3xl); margin-bottom: var(--space-5); max-width: 15ch; }
.hero__title .line { display: block; }
.hero__title .line { opacity: 0; transform: translateY(0.5em); animation: heroRise 0.95s var(--ease-out) forwards; }
.hero__title .line:nth-child(1) { animation-delay: 0.1s; }
.hero__title .line:nth-child(2) { animation-delay: 0.24s; }
.hero__title .line:nth-child(3) { animation-delay: 0.38s; }
@keyframes heroRise { to { opacity: 1; transform: none; } }

.hero__sub { font-size: var(--t-md); color: var(--paper); margin-bottom: var(--space-6); font-weight: 400; opacity: 0; animation: heroRise 0.9s var(--ease-out) 0.52s forwards; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); opacity: 0; animation: heroRise 0.9s var(--ease-out) 0.64s forwards; }
.hero__meta { margin-top: var(--space-6); color: var(--chrome); font-size: var(--t-xs); letter-spacing: 0.14em; opacity: 0; animation: heroRise 0.9s var(--ease-out) 0.78s forwards; }
.hero__meta b { color: var(--champagne); font-weight: 400; }

/* the developing photo strip */
.hero__strip {
  justify-self: center;
  width: min(300px, 34vw);
  background: var(--paper);
  padding: 14px 14px 40px;
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 10px;
  position: relative;
  transform: rotate(3.5deg);
  animation: heroSway 7s ease-in-out 1.4s infinite;
}
.hero__strip::after {
  content: "MEMIOR · SYDNEY";
  position: absolute; left: 0; right: 0; bottom: 15px;
  text-align: center;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em;
  color: #7A5F2E;
}
.hero__frame {
  aspect-ratio: 4 / 3;
  border-radius: 2px;
  background-image: var(--grain), var(--fimg);
  background-size: 110px, cover;
  background-blend-mode: overlay, normal;
  opacity: 0;
  animation: develop 0.8s var(--ease-out) forwards;
}
.hero__frame:nth-child(1) { --fimg: radial-gradient(120% 90% at 30% 20%, #7f8ad6, #2c3160 55%, #17131f 100%); animation-delay: 0.7s; }
.hero__frame:nth-child(2) { --fimg: radial-gradient(120% 90% at 60% 25%, #E8C98F, #7a6136 50%, #221a20 100%); animation-delay: 1.0s; }
.hero__frame:nth-child(3) { --fimg: radial-gradient(120% 90% at 40% 30%, #c98ba8, #5a3a52 50%, #1c1320 100%); animation-delay: 1.3s; }
.hero__frame:nth-child(4) { --fimg: radial-gradient(120% 90% at 55% 60%, #6E79C9, #26264a 50%, #14131c 100%); animation-delay: 1.6s; }
@keyframes develop { 0% { opacity: 0; filter: brightness(3.5) contrast(0.6); } 55% { opacity: 1; } 100% { opacity: 1; filter: brightness(1); } }
@keyframes heroSway { 0%, 100% { transform: rotate(3.5deg); } 50% { transform: rotate(1.5deg); } }
@media (max-width: 960px) { .hero__strip { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero__title .line, .hero__sub, .hero__cta, .hero__meta { opacity: 1; transform: none; animation: none; }
  .hero__frame { opacity: 1; filter: none; animation: none; }
  .hero__strip { animation: none; }
}

/* ---- Interior page hero ------------------------------------ */
.page-hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6rem) var(--section-y);
  background:
    radial-gradient(70% 130% at 88% -20%, rgba(110,121,201,0.34), transparent 55%),
    radial-gradient(50% 90% at 0% 0%, rgba(228,201,155,0.08), transparent 55%),
    var(--curtain-2);
  border-bottom: 1px solid var(--velvet-line);
}
.page-hero h1 { font-size: var(--t-2xl); margin-block: var(--space-4) var(--space-4); max-width: 18ch; }
.breadcrumb { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--chrome); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--champagne); }

/* ---- Trust bar --------------------------------------------- */
.trust-bar {
  display: flex; flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: center; justify-content: center;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--velvet-line);
  background: var(--curtain-2);
  list-style: none;
}
.trust-bar li {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chrome);
  display: flex; align-items: center; gap: var(--space-6);
}
.trust-bar li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--champagne); opacity: 0.7; margin-right: var(--space-6); margin-left: calc(-1 * var(--space-6)); }
.trust-bar strong { color: var(--paper); font-weight: 700; }
.trust-bar strong:first-child { color: var(--champagne); }

/* ---- Glass cards ------------------------------------------- */
.card {
  position: relative;
  background:
    linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012)),
    var(--velvet);
  border: 1px solid var(--velvet-line);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 var(--glass-hi);
  pointer-events: none;
}
@media (hover: hover) {
  .card--flash:hover { transform: translateY(-6px); border-color: rgba(228,201,155,0.4); box-shadow: var(--shadow); }
}

/* ---- The four-frame strip (signature) ---------------------- */
.strip {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(4, 1fr);
  counter-reset: frame;
}
.frame {
  background: var(--paper);
  color: var(--ink);
  padding: 10px 10px 14px;
  border-radius: 3px;
  box-shadow: var(--shadow);
  transform: rotate(var(--r, 0deg));
  transition: transform var(--dur) var(--ease);
}
.strip .frame:nth-child(odd) { --r: -1.2deg; }
.strip .frame:nth-child(even) { --r: 1.2deg; }
@media (hover: hover) { .frame:hover { transform: rotate(0deg) translateY(-4px); } }
.frame__img {
  aspect-ratio: 4 / 5;
  border-radius: 1px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244,239,230,0.9);
  background-image: var(--grain), radial-gradient(120% 90% at 30% 20%, var(--indigo-lift), #2a2e5c 45%, #16172a 100%);
  background-size: 120px, cover;
  background-blend-mode: overlay, normal;
  margin-bottom: var(--space-3);
}
.frame:nth-child(2) .frame__img { background-image: var(--grain), radial-gradient(120% 90% at 70% 20%, #7a6cc0, #2b2b52 45%, #16172a 100%); }
.frame:nth-child(3) .frame__img { background-image: var(--grain), radial-gradient(120% 90% at 40% 30%, var(--champagne), #7a6a4a 40%, #201a2a 100%); }
.frame:nth-child(4) .frame__img { background-image: var(--grain), radial-gradient(120% 90% at 60% 70%, #5661c9, #23264a 45%, #14131c 100%); }
img.frame__img { padding: 0; width: 100%; object-fit: cover; background: none; }
.frame__caption { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--champagne-deep); }
.frame__caption::before { counter-increment: frame; content: counter(frame, decimal-leading-zero) " · "; color: var(--ink); opacity: 0.5; }
@media (max-width: 780px) { .strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .strip { grid-template-columns: 1fr; } }

/* ---- Sprocket divider -------------------------------------- */
.sprocket {
  height: 16px; border: 0; margin: 0;
  background-image: radial-gradient(var(--velvet-line) 42%, transparent 45%);
  background-size: 20px 16px;
  background-repeat: repeat-x;
  background-position: center;
}

/* ---- Package cards ----------------------------------------- */
.pkg-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: start; }
.pkg { display: flex; flex-direction: column; gap: var(--space-4); }
.pkg--featured {
  border-color: rgba(228,201,155,0.45);
  box-shadow: 0 0 0 1px rgba(228,201,155,0.25), 0 24px 60px -20px rgba(228,201,155,0.28);
}
.pkg__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--champagne);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-weight: 700;
}
.icon-star::before,
.pkg__badge::before {
  content: "";
  width: 0.95em; height: 0.95em;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.2l2.85 5.98 6.55.62-4.94 4.38 1.45 6.42L12 16.8l-5.96 3.02 1.45-6.42L2.55 8.8l6.55-.62z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.2l2.85 5.98 6.55.62-4.94 4.38 1.45 6.42L12 16.8l-5.96 3.02 1.45-6.42L2.55 8.8l6.55-.62z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.trust-bar strong:first-child { display: inline-flex; align-items: center; gap: 0.35em; color: var(--champagne); }
.pkg .mono { color: var(--champagne); font-size: var(--t-sm); }
.pkg__price { font-family: var(--font-display); font-size: 2.6rem; font-weight: 600; color: var(--paper); line-height: 1; }
.pkg__price span { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--chrome); text-transform: uppercase; letter-spacing: 0.06em; }
.pkg__list { list-style: none; display: grid; gap: var(--space-3); }
.pkg__list li { display: flex; gap: var(--space-3); font-size: var(--t-sm); color: var(--paper-dim); align-items: flex-start; }
.pkg__list li::before {
  content: "";
  flex: 0 0 auto;
  width: 1.1em; height: 1.1em;
  margin-top: 0.12em;
  background: var(--champagne);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pkg .btn { margin-top: var(--space-2); }

/* ---- Booth cards (tall portrait) --------------------------- */
.booth-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.booth {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: var(--space-5);
  background: var(--velvet);
  border: 1px solid var(--velvet-line);
  position: relative;
  text-decoration: none;
  color: var(--paper);
  isolation: isolate;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.booth img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.booth::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(7,7,15,0.9) 0%, rgba(7,7,15,0.1) 55%); }
@media (hover: hover) { .booth:hover { transform: translateY(-6px); box-shadow: var(--shadow); } }
.booth h3 { font-size: var(--t-md); }
.booth__meta { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--champagne); margin-top: 0.35rem; }

/* ---- Included icon grid ------------------------------------ */
.included { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.included li { list-style: none; display: flex; gap: var(--space-3); align-items: flex-start; color: var(--paper-dim); font-size: var(--t-sm); }
.included .dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 0.5rem; border-radius: 50%; background: var(--champagne); box-shadow: 0 0 0 4px rgba(228,201,155,0.12); }

/* ---- Photo placeholder — rebuilt as a printed photo -------- */
.ph {
  --img: radial-gradient(120% 90% at 30% 15%, var(--indigo-lift) 0%, #2b2f5e 45%, #14131c 100%);
  position: relative;
  display: block;
  background: var(--paper);
  padding: 9px 9px 30px;
  border-radius: 3px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ph::before {
  content: "";
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 1px;
  background-image: var(--grain), var(--img);
  background-size: 110px, cover;
  background-position: center;
  background-blend-mode: overlay, normal;
}
.ph__cap {
  position: absolute;
  left: 0; right: 0; bottom: 9px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7A5F2E; /* darker gold — AA-legible date-stamp on cream border */
}
@media (hover: hover) { .ph:hover { transform: translateY(-5px) rotate(-0.8deg); box-shadow: var(--shadow); } }
/* real photo inside the print frame */
.ph img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1px; }
.ph:has(img)::before { display: none; }
.ph--landscape img { aspect-ratio: 4 / 3; }
.ph--landscape::before { aspect-ratio: 4 / 3; }
/* camera-flash blink over the photo on hover (on-brand) */
.ph::after {
  content: "";
  position: absolute;
  inset: 9px 9px 30px;
  border-radius: 1px;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.ph--landscape::after { inset: 9px 9px 30px; }
@media (hover: hover) { .ph:hover::after { animation: phflash 0.5s var(--ease); } }
@keyframes phflash { 0% { opacity: 0; } 18% { opacity: 0.42; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ph::after, .btn--flash::after { display: none; } }
.ph--wide::before { aspect-ratio: 16 / 9; }
/* hue variety so a grid reads as a curated set of prints */
.ph--h1 { --img: radial-gradient(120% 90% at 28% 12%, #6E79C9, #2b2f5e 46%, #14131c 100%); }
.ph--h2 { --img: radial-gradient(120% 90% at 72% 18%, #8E7AC6, #34305e 46%, #17131f 100%); }
.ph--h3 { --img: radial-gradient(120% 90% at 40% 30%, #E4C99B, #7a6a4a 42%, #201a2a 100%); }
.ph--h4 { --img: radial-gradient(120% 90% at 62% 20%, #5661C9, #23264a 46%, #131320 100%); }
.ph--h5 { --img: radial-gradient(120% 90% at 30% 70%, #B79BD0, #4a3a5e 44%, #191320 100%); }
.ph--h6 { --img: radial-gradient(120% 90% at 58% 40%, #6E86C9, #2a3a5e 45%, #131622 100%); }

/* ---- Gallery ----------------------------------------------- */
.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-dim);
  background: transparent;
  border: 1px solid var(--velvet-line);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  transition: all var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--champagne); color: var(--paper); }
.chip[aria-pressed="true"] { background: var(--champagne); border-color: var(--champagne); color: var(--ink); }
.gallery-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.gallery-grid .ph[hidden] { display: none; }

/* ---- Backdrop swatches ------------------------------------- */
.swatch-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.swatch { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--velvet-line); background: var(--velvet); box-shadow: var(--shadow-sm); }
.swatch__sample { aspect-ratio: 4 / 3; }
img.swatch__sample { width: 100%; object-fit: cover; }
.swatch__body { padding: var(--space-4); }
.swatch__body h3 { font-family: var(--font-body); font-size: var(--t-base); font-weight: 600; }
.swatch__body p { font-size: var(--t-sm); margin-top: 0.25rem; }
.s-gold    { background: repeating-linear-gradient(135deg, #C9A35B 0 6px, #E7CE94 6px 12px, #9E7C3A 12px 18px); }
.s-rose    { background: repeating-linear-gradient(135deg, #C98B8B 0 6px, #E7B7B7 6px 12px, #A56767 12px 18px); }
.s-silver  { background: repeating-linear-gradient(135deg, #AEB0C2 0 6px, #D7D9E6 6px 12px, #8A8CA0 12px 18px); }
.s-white   { background: radial-gradient(circle at 30% 30%, #ffffff, #E3DFD4 70%); }
.s-black   { background: radial-gradient(circle at 30% 30%, #34364a, #14151f 70%); }
.s-green   { background: radial-gradient(circle at 40% 30%, #4b7a52, #1f3a24 75%); }
.s-neon    { background: radial-gradient(circle at 50% 45%, #8E98DC, #2a2e58 70%); box-shadow: inset 0 0 40px rgba(142,152,220,0.6); }
.s-chrome  { background: linear-gradient(90deg, #8A8CA0, #E6E7F0 25%, #9092A6 50%, #E6E7F0 75%, #8A8CA0); }
.s-fabric  { background: linear-gradient(160deg, #4854A3, #23264A); }

/* ---- Booths (page rows) ------------------------------------ */
.booth-row { display: grid; grid-template-columns: minmax(0, 0.95fr) 1.05fr; gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.booth-row:nth-child(even) .booth-row__media { order: 2; }
.booth-row__media img { width: 100%; border-radius: var(--radius); border: 1px solid var(--velvet-line); box-shadow: var(--shadow); }
@media (max-width: 760px) {
  .booth-row { grid-template-columns: 1fr; }
  .booth-row:nth-child(even) .booth-row__media { order: 0; }
}
.spec-list { list-style: none; display: grid; gap: var(--space-3); }
.spec-list li { display: flex; gap: var(--space-4); font-size: var(--t-sm); color: var(--paper-dim); align-items: baseline; }
.spec-list .k { color: var(--champagne); min-width: 8.5rem; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; flex: 0 0 auto; }
.section--light .spec-list li { color: rgba(20,19,28,0.75); }
.section--light .spec-list .k { color: var(--champagne-deep); }

/* ---- Tables ------------------------------------------------ */
.table-wrap { overflow-x: auto; border: 1px solid var(--velvet-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
table.data { width: 100%; border-collapse: collapse; min-width: 460px; }
table.data th, table.data td { text-align: left; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--velvet-line); font-size: var(--t-sm); }
table.data th { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--champagne); font-weight: 400; }
table.data td:first-child { color: var(--paper); font-weight: 500; }
table.data td:last-child, table.data th:last-child { text-align: right; font-family: var(--font-mono); white-space: nowrap; color: var(--paper); }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background var(--dur-fast) var(--ease); }
@media (hover: hover) { table.data tbody tr:hover { background: rgba(228,201,155,0.05); } }

/* ---- FAQ accordion ----------------------------------------- */
.faq { border-top: 1px solid var(--velvet-line); }
.faq details { border-bottom: 1px solid var(--velvet-line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) 0;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-md);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--champagne); font-size: 1.6rem; line-height: 1; transition: transform var(--dur-fast) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > *:not(summary) { padding-bottom: var(--space-5); }
.faq p { color: var(--paper-dim); }
.faq a { color: var(--champagne); }

/* ---- Forms ------------------------------------------------- */
.form { display: grid; gap: var(--space-5); }
.form-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: grid; gap: var(--space-2); }
.field.col-2 { grid-column: 1 / -1; }
.field label { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--chrome); }
.field label .req { color: var(--champagne); }
.field input, .field select, .field textarea {
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--velvet-line);
  border-radius: var(--radius-sm);
  padding: 0.85rem 0.95rem;
  color: var(--paper);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--champagne); box-shadow: 0 0 0 3px rgba(228,201,155,0.16); }
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(244,239,230,0.32); }
.form-note { font-size: var(--t-sm); color: var(--paper-dim); }
.consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--t-sm); color: var(--paper-dim); }
.consent input { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; accent-color: var(--champagne); flex: 0 0 auto; }
.consent a, .form-note a { color: var(--champagne); }

/* ---- Testimonials / quotes --------------------------------- */
.quote-grid { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.quote { display: flex; flex-direction: column; gap: var(--space-4); }
.quote__stars {
  display: block;
  width: 104px; height: 19px;
  background: var(--champagne);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.2l2.85 5.98 6.55.62-4.94 4.38 1.45 6.42L12 16.8l-5.96 3.02 1.45-6.42L2.55 8.8l6.55-.62z'/%3E%3C/svg%3E") left center / 20px 19px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.2l2.85 5.98 6.55.62-4.94 4.38 1.45 6.42L12 16.8l-5.96 3.02 1.45-6.42L2.55 8.8l6.55-.62z'/%3E%3C/svg%3E") left center / 20px 19px repeat-x;
}
.quote blockquote { font-family: var(--font-display); font-size: var(--t-md); font-weight: 500; font-style: italic; line-height: 1.35; color: var(--paper); }
.quote figcaption { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--chrome); }

/* ---- Venue wall (marquee) ---------------------------------- */
.venue-wall { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.venue-track { display: flex; gap: var(--space-8); align-items: center; width: max-content; animation: marquee 38s linear infinite; }
.venue-track span { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--chrome); opacity: 0.75; white-space: nowrap; font-size: var(--t-lg); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .venue-track { animation: none; flex-wrap: wrap; } }

/* ---- CTA band ---------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(75% 130% at 100% 0%, rgba(232,201,143,0.30), transparent 55%),
    radial-gradient(70% 130% at 0% 100%, rgba(110,121,201,0.28), transparent 55%),
    linear-gradient(120deg, #2a2036, #171019);
  border: 1px solid rgba(232,201,143,0.32);
  border-radius: var(--radius-lg);
  padding: clamp(2.25rem, 5vw, 4rem);
  text-align: center;
  display: grid; gap: var(--space-4); justify-items: center;
}
.cta-band h2 { color: var(--paper); }
.cta-band .eyebrow { color: var(--champagne); }
.cta-band .btn--flash { background: var(--paper); color: var(--ink); box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5); }
.cta-band .btn--flash:hover { background: #fff; }
.cta-band .btn--ghost { border-color: rgba(244,239,230,0.5); color: var(--paper); }
.cta-band .btn--ghost:hover { border-color: var(--paper); background: rgba(244,239,230,0.1); }

/* ---- Location / area cards --------------------------------- */
.area-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.area-card { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; align-items: flex-start; }
.area-card h3 { font-size: var(--t-md); }
.area-card .area-suburbs { font-size: var(--t-sm); color: var(--paper-dim); }

/* ---- Prose (legal) ----------------------------------------- */
.prose { max-width: var(--maxw-text); }
.prose h2 { font-size: var(--t-lg); margin-top: var(--space-8); margin-bottom: var(--space-3); }
.prose h3 { font-size: var(--t-md); margin-top: var(--space-6); margin-bottom: var(--space-2); }
.prose p, .prose li { color: var(--paper-dim); }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.prose a { color: var(--champagne); }
.prose strong { color: var(--paper); }

/* ---- Footer ------------------------------------------------ */
.site-footer {
  background: var(--curtain-2);
  border-top: 1px solid var(--velvet-line);
  padding-block: var(--space-8) var(--space-6);
}
.footer-grid { display: grid; gap: var(--space-6); grid-template-columns: 1.5fr repeat(3, 1fr); }
.site-footer .brand { font-size: 1.4rem; }
.site-footer h4 {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--champagne);
  margin-bottom: var(--space-3);
  font-weight: 400;
}
.footer-grid ul { list-style: none; display: grid; gap: var(--space-2); }
.footer-grid a { text-decoration: none; color: var(--paper-dim); font-size: var(--t-sm); transition: color var(--dur-fast) var(--ease); }
.footer-grid a:hover { color: var(--paper); }
.footer-bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--velvet-line);
  display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.06em; color: var(--chrome);
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---- Small helpers ----------------------------------------- */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--champagne);
  border: 1px solid rgba(228,201,155,0.4);
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
}
.lede { font-size: var(--t-md); color: var(--paper); font-weight: 400; line-height: 1.5; }

/* ---- Scroll reveal ----------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: calc(var(--si, 0) * 70ms);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .card, .booth, .frame, .ph { transition: none; }
}