/* ===========================================================
   Mosope & Ibukun, 2026/2027
   Palette taken from the couple's own wedding styling guide:
   champagne gold, chocolate brown, deep burgundy, light blue.
   =========================================================== */

:root {
  --ink:        #F3E9DC;   /* cream, the main text colour   */
  --ink-soft:   #C9B59D;
  --ink-faint:  #8A7867;

  --ground:     #1A0A0E;   /* near black burgundy            */
  --ground-2:   #241014;
  --burgundy:   #4A151D;
  --burgundy-l: #7B1E2B;

  --gold:       #D9BE7E;   /* champagne gold                 */
  --gold-deep:  #B1904F;
  --choc:       #4A3225;
  --sky:        #A8C6DE;

  --display: "Cormorant Garamond", Georgia, serif;
  --body:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --pad: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute must beat any display rule we set below.
   Without this, .gate and .colourcue stay on screen when hidden. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }

::selection { background: var(--gold); color: var(--ground); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--ground); padding: .75rem 1.25rem;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- type ---------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: .005em;
  margin: 0 0 .6em;
}
h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }
h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }

p { margin: 0 0 1.1em; }

.kicker {
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4em;
}
.kicker.center { text-align: center; }

.center { text-align: center; }

.lede {
  color: var(--ink-soft);
  font-size: 1.08em;
  max-width: 56ch;
  margin-inline: auto;
}

.fineprint {
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--ink-faint);
}

/* ---------- layout ---------- */

.section { padding: clamp(4.5rem, 9vw, 9rem) var(--pad); position: relative; }

.wrap { max-width: var(--maxw); margin-inline: auto; }
.wrap--narrow { max-width: 760px; }

.wrap--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
@media (min-width: 880px) {
  .wrap--split { grid-template-columns: 1.05fr .95fr; }
}

/* hairline divider between sections */
.section + .section::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--maxw), calc(100% - 2 * var(--pad)));
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,190,126,.32) 20%, rgba(217,190,126,.32) 80%, transparent);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ground);
  background: var(--gold);
  padding: 1.05rem 2.4rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.btn:hover { background: transparent; color: var(--gold); }
.btn:active { transform: translateY(1px); }
.btn--small { padding: .62rem 1.4rem; font-size: .68rem; letter-spacing: .18em; }
.btn--block { width: 100%; }
.btn--ghost {
  background: transparent; color: var(--gold);
  border-color: rgba(217,190,126,.4);
  padding: .7rem 1.5rem; font-size: .68rem;
}
.btn--ghost:hover { background: var(--gold); color: var(--ground); }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- nav ---------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .85rem var(--pad);
  background: rgba(26,10,14,0);
  backdrop-filter: blur(0px);
  transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(26,10,14,.9);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(217,190,126,.2);
}
.nav__mark img { height: 34px; width: auto; }
.nav__links { display: none; gap: 1.9rem; margin-left: auto; }
.nav__links a {
  color: var(--ink-soft); text-decoration: none;
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: color .25s ease, background-size .3s ease;
}
.nav__links a:hover { color: var(--gold); background-size: 100% 1px; }
.nav .btn { margin-left: auto; }
@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav .btn { margin-left: 1.9rem; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 7rem var(--pad) 5rem;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(26,10,14,.42), rgba(26,10,14,.86) 72%),
    linear-gradient(to bottom, rgba(26,10,14,.72), rgba(26,10,14,.42) 38%, rgba(26,10,14,.94));
}
.hero__inner { position: relative; z-index: 1; max-width: 740px; }

.hero__mono {
  height: clamp(66px, 10vw, 104px); width: auto; margin: 0 auto 1.8rem;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.6));
}
.hero .kicker {
  color: var(--gold); margin-bottom: 1.1em;
  text-shadow: 0 2px 14px rgba(0,0,0,.85);
}

.hero__names {
  font-size: clamp(3rem, 1.3rem + 9vw, 7rem);
  font-weight: 300;
  line-height: .98;
  margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 0 .35em;
}
.hero__names em {
  font-style: italic;
  color: var(--gold);
  font-size: .56em;
  font-weight: 300;
}
.hero__sub {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.1rem, .9rem + .9vw, 1.7rem);
  color: var(--ink-soft);
  margin: .5rem 0 2.2rem;
}

.hero__dates {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 1rem clamp(1.2rem, 4vw, 2.8rem);
  margin-bottom: .9rem;
}
.hero__dates > div { display: grid; gap: .25rem; }
.hero__dateday {
  font-family: var(--display);
  font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem);
  letter-spacing: .02em;
}
.hero__datelabel {
  font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold);
}
.hero__rule { width: 1px; height: 38px; background: rgba(217,190,126,.45); }
@media (max-width: 560px) {
  .hero__dates { flex-direction: column; gap: 1.1rem; }
  .hero__rule { width: 52px; height: 1px; }
}

.hero__place {
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-soft); margin: 1.6rem 0 2.4rem;
}
.hero__tag {
  margin: 1.8rem 0 0;
  font-size: .74rem; letter-spacing: .28em; color: var(--ink-faint);
}

.hero__scroll {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); z-index: 1;
}
.hero__scroll span {
  display: block; width: 1px; height: 46px;
  background: linear-gradient(var(--gold), transparent);
  animation: drip 2.4s ease-in-out infinite;
}
@keyframes drip { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

/* ---------- story ---------- */

.story { background: var(--ground); }
.story__text h2 { margin-bottom: .7em; }
.story__text p { color: var(--ink-soft); max-width: 50ch; }
.story__sign {
  font-family: var(--display); font-style: italic;
  font-size: 1.4rem; color: var(--gold); margin-top: 1.6rem;
}

.story__figure { margin: 0; position: relative; }
.story__figure img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border: 1px solid rgba(217,190,126,.28);
  padding: .55rem;
}
.story__figure figcaption {
  margin-top: .9rem; text-align: right;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}

.strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  max-width: var(--maxw);
  margin: clamp(3rem, 6vw, 5rem) auto 0;
}
@media (min-width: 760px) { .strip { grid-template-columns: repeat(4, 1fr); } }
.strip figure { margin: 0; overflow: hidden; }
.strip img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  filter: saturate(.92);
  transition: transform .7s cubic-bezier(.2,.7,.3,1), filter .5s ease;
}
.strip figure:hover img { transform: scale(1.045); filter: saturate(1.05); }

/* ---------- the days ---------- */

.days { background: var(--ground-2); }

.daygrid {
  display: grid; gap: clamp(1rem, 2.5vw, 1.8rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 820px) { .daygrid { grid-template-columns: 1fr 1fr; } }

.day {
  border: 1px solid rgba(217,190,126,.26);
  padding: clamp(1.8rem, 4vw, 3rem);
  background: linear-gradient(160deg, rgba(74,21,29,.42), rgba(26,10,14,.1));
  position: relative;
}
.day__num {
  font-family: var(--display); font-size: 3.2rem; line-height: 1;
  color: rgba(217,190,126,.3); margin: 0 0 .3em;
}
.day h3 { margin-bottom: .5em; }
.day__date {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .2em;
}
.day__city {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 1.4em;
}
.day > p:last-child { color: var(--ink-soft); margin-bottom: 0; }

.notice {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-left: 2px solid var(--gold);
  background: rgba(217,190,126,.06);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.4rem);
  max-width: 68ch;
}
.notice p { color: var(--ink-soft); }
.notice p:last-child { margin-bottom: 0; }
.notice strong { color: var(--ink); font-weight: 400; }

/* ---------- colours ---------- */

.colours { background: var(--ground); }

.swatches {
  display: grid; gap: 1px;
  background: rgba(217,190,126,.22);
  border: 1px solid rgba(217,190,126,.22);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 680px) { .swatches { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .swatches { grid-template-columns: repeat(3, 1fr); } }

.sw { background: var(--ground); padding: clamp(1.6rem, 3vw, 2.2rem); }
.sw__chips { display: flex; gap: .5rem; margin-bottom: 1.4rem; }
.sw__chips span {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.sw h3 { font-size: 1.35rem; margin-bottom: .25em; }
.sw__main {
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1em;
}
.sw > p:last-child { color: var(--ink-soft); font-size: .95rem; margin-bottom: 0; }
.sw--couple { background: linear-gradient(150deg, rgba(74,50,37,.5), var(--ground)); }

.colours .fineprint { margin-top: 2rem; }

/* ---------- rsvp ---------- */

.rsvp { background: var(--ground-2); }

.wrap--form {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 940px) { .wrap--form { grid-template-columns: .9fr 1.1fr; } }

.rsvp__intro p { color: var(--ink-soft); max-width: 46ch; }

.steps { list-style: none; margin: 2rem 0; padding: 0; display: grid; gap: 1.1rem; }
.steps li { display: flex; gap: 1rem; align-items: flex-start; }
.steps span {
  flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(217,190,126,.5);
  display: grid; place-items: center;
  font-size: .78rem; color: var(--gold);
}
.steps div { color: var(--ink-soft); font-size: .96rem; line-height: 1.6; }
.steps strong { color: var(--ink); font-weight: 400; }

.rsvp__figure { margin: 2.5rem 0 0; display: none; }
.rsvp__figure img {
  width: 100%; aspect-ratio: 3/2; object-fit: cover;
  border: 1px solid rgba(217,190,126,.22); padding: .5rem;
}
@media (min-width: 940px) { .rsvp__figure { display: block; } }

/* form */

.form {
  border: 1px solid rgba(217,190,126,.26);
  background: rgba(26,10,14,.5);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.field { margin-bottom: 1.6rem; border: 0; padding: 0; }
.field--half { display: grid; gap: 1.2rem; }
@media (min-width: 560px) { .field--half { grid-template-columns: 1fr 1fr; gap: 1.4rem; } }

label, legend {
  display: block;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: .65rem; padding: 0;
}
.req { color: var(--gold); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], select, textarea {
  width: 100%;
  font-family: var(--body); font-size: 1rem; font-weight: 300;
  color: var(--ink);
  background: rgba(243,233,220,.05);
  border: 1px solid rgba(217,190,126,.28);
  border-radius: 0;
  padding: .85rem 1rem;
  transition: border-color .25s ease, background .25s ease;
}
textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
input:hover, select:hover, textarea:hover { border-color: rgba(217,190,126,.5); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gold); background: rgba(243,233,220,.08);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: #D98A8A; }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
select option { background: var(--ground-2); color: var(--ink); }

.hint { font-size: .78rem; color: var(--ink-faint); margin: .5rem 0 0; }

.check {
  display: flex; align-items: flex-start; gap: .85rem;
  text-transform: none; letter-spacing: 0; font-size: 1rem;
  color: var(--ink); margin-bottom: .7rem;
  border: 1px solid rgba(217,190,126,.2);
  padding: .85rem 1rem;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.check:hover { border-color: rgba(217,190,126,.45); }
.check input { flex: none; margin-top: .3rem; accent-color: var(--gold); width: 16px; height: 16px; }
.check span { display: grid; gap: .1rem; }
.check strong { font-weight: 400; font-size: .98rem; }
.check em { font-style: normal; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.check:has(input:checked) { border-color: var(--gold); background: rgba(217,190,126,.07); }

.colourcue {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 1rem; padding: 1rem;
  border: 1px dashed rgba(217,190,126,.4);
  background: rgba(217,190,126,.05);
  animation: fade .4s ease;
}
@keyframes fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.colourcue__chips { display: flex; gap: .4rem; flex: none; }
.colourcue__chips span {
  width: 26px; height: 26px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.colourcue__name {
  margin: 0; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.colourcue__note { margin: .2rem 0 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.5; }

.form__error {
  color: #E8A7A7; font-size: .9rem;
  border-left: 2px solid #D98A8A; padding-left: .9rem; margin-bottom: 1.2rem;
}
.form .fineprint { margin: 1rem 0 0; text-align: center; }

/* thank you */

.thanks {
  grid-column: 1 / -1;
  text-align: center;
  border: 1px solid rgba(217,190,126,.3);
  background: rgba(26,10,14,.5);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 3rem);
  animation: fade .5s ease;
}
.thanks__mono { height: 68px; width: auto; margin: 0 auto 1.5rem; }
.thanks p { color: var(--ink-soft); max-width: 48ch; margin-inline: auto; }
.thanks__colour {
  display: inline-flex; align-items: center; gap: .9rem;
  border: 1px solid rgba(217,190,126,.4);
  padding: .9rem 1.5rem; margin: .5rem 0 1.8rem;
  text-align: left;
}
.thanks__colour .sw__chips { margin: 0; }
.thanks__colour span.lbl {
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.thanks__tag { font-size: .76rem; letter-spacing: .28em; color: var(--ink-faint); margin: 2rem 0 0; }

/* ---------- gifts ---------- */

.gifts { background: var(--ground); }

.accounts {
  display: grid; gap: clamp(1rem, 2.5vw, 1.8rem);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 880px;
}
@media (min-width: 760px) { .accounts { grid-template-columns: 1fr 1fr; } }

.acct {
  border: 1px solid rgba(217,190,126,.26);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  background: linear-gradient(160deg, rgba(74,21,29,.34), transparent);
}
.acct__label {
  font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.6em;
}
.acct dl { margin: 0 0 1.8rem; display: grid; gap: .9rem; }
.acct dl > div { display: grid; gap: .15rem; }
.acct dt {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint);
}
.acct dd { margin: 0; font-size: 1.05rem; }
.acct__num { font-family: var(--display); font-size: 1.5rem; letter-spacing: .06em; }

[data-placeholder] {
  color: var(--ink-faint);
  background: repeating-linear-gradient(45deg, rgba(217,190,126,.07) 0 6px, transparent 6px 12px);
  padding: 0 .35em;
}

/* ---------- faq ---------- */

.faq { background: var(--ground-2); }

.faq details {
  border-bottom: 1px solid rgba(217,190,126,.2);
}
.faq details:first-of-type { border-top: 1px solid rgba(217,190,126,.2); margin-top: clamp(2rem, 4vw, 3rem); }
.faq summary {
  list-style: none; cursor: pointer;
  font-family: var(--display); font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem);
  padding: 1.3rem 2.5rem 1.3rem 0;
  position: relative;
  transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold); }
.faq summary::after {
  content: ""; position: absolute; right: .4rem; top: 50%;
  width: 11px; height: 11px;
  border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s ease;
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(225deg); }
.faq details p {
  color: var(--ink-soft); font-size: .98rem;
  padding: 0 2.5rem 1.6rem 0; margin: 0; max-width: 66ch;
}

/* ---------- footer ---------- */

.foot {
  text-align: center;
  padding: clamp(3.5rem, 7vw, 6rem) var(--pad);
  background: var(--ground);
  border-top: 1px solid rgba(217,190,126,.22);
}
.foot__mono { height: 58px; width: auto; margin: 0 auto 1.5rem; }
.foot__names {
  font-family: var(--display); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  margin-bottom: .3rem;
}
.foot__tag { font-size: .74rem; letter-spacing: .28em; color: var(--gold); margin-bottom: 1.6rem; }
.foot__contact { margin-bottom: .6rem; }
.foot__contact a { font-size: .95rem; }
.foot__fine { font-size: .74rem; letter-spacing: .12em; color: var(--ink-faint); margin: 0; }

/* ---------- entrance reveals ---------- */

.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ---------- print ---------- */

@media print {
  .nav, .hero__scroll, .btn, .form, .strip { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ===========================================================
   WEDDING PARTY
   =========================================================== */

.party { background: var(--ground); }

.partygrid {
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 820px) { .partygrid { grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(217,190,126,.22); } }

.side { background: var(--ground); padding: clamp(0rem, 2vw, 2.4rem) 0; }
@media (min-width: 820px) { .side { padding: 0 clamp(1.5rem, 3vw, 2.8rem); } }

.side h3 {
  font-size: .76rem; letter-spacing: .26em; text-transform: uppercase;
  font-family: var(--body); font-weight: 400; color: var(--gold);
  padding-bottom: 1rem; margin-bottom: 1.6rem;
  border-bottom: 1px solid rgba(217,190,126,.22);
}

.side__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.side__list li { display: flex; align-items: center; gap: 1.1rem; }

.side__face {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(217,190,126,.35);
  display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(74,21,29,.6), rgba(74,50,37,.35));
}
.side__face img { width: 100%; height: 100%; object-fit: cover; }
.side__initial {
  font-family: var(--display); font-size: 1.5rem; color: var(--gold); line-height: 1;
}

.side__name { margin: 0; font-family: var(--display); font-size: 1.3rem; line-height: 1.25; }
.side__role {
  margin: .15rem 0 0;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
}

.party__pending {
  grid-column: 1 / -1; text-align: center; color: var(--ink-faint);
  border: 1px dashed rgba(217,190,126,.3);
  padding: clamp(2rem, 5vw, 3.5rem); margin: 0;
}


/* ===========================================================
   THE DIGITAL INVITATION
   =========================================================== */

.inv-body { background: var(--ground); }

.inv-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.inv-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.inv-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(26,10,14,.32), rgba(26,10,14,.86) 72%),
    linear-gradient(to bottom, rgba(26,10,14,.62), rgba(26,10,14,.5) 40%, rgba(26,10,14,.93));
}

/* ---------------------- the gate ---------------------- */

.gate {
  min-height: 100svh;
  display: grid; place-items: center;
  padding: clamp(2rem, 6vw, 4rem) var(--pad);
}
.gate__card {
  width: 100%; max-width: 440px; text-align: center;
  border: 1px solid rgba(217,190,126,.3);
  background: rgba(26,10,14,.72);
  backdrop-filter: blur(10px);
  padding: clamp(2rem, 6vw, 3.25rem);
  animation: rise .9s cubic-bezier(.2,.7,.3,1) both;
}
.gate__mono { height: 84px; width: auto; margin: 0 auto 1.6rem; }
.gate h1 {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.7rem);
  margin-bottom: .55em;
}
.gate__lede { color: var(--ink-soft); font-size: .96rem; margin-bottom: 2rem; }
.gate label { text-align: left; }
.gate #code {
  text-align: center;
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: .22em;
  padding: 1rem .75rem;
  text-transform: uppercase;
}
.gate #code::placeholder { font-size: 1.1rem; letter-spacing: .18em; }
.gate .field { margin-bottom: 1.2rem; text-align: left; }
.gate .btn { margin-top: 1.4rem; }
.gate .form__error { text-align: left; margin: 1.1rem 0 0; }
.gate__fine {
  margin: 1.8rem 0 0; font-size: .8rem; line-height: 1.7; color: var(--ink-faint);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------- the invitation ------------------- */

.inv { padding: clamp(2rem, 6vw, 5rem) var(--pad) clamp(3rem, 8vw, 6rem); }

.card {
  max-width: 660px; margin-inline: auto;
  background: rgba(26,10,14,.82);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(217,190,126,.32);
  padding: clamp(2rem, 6vw, 4rem) clamp(1.4rem, 5vw, 3.5rem);
}

.card__head { position: relative; text-align: center; padding-bottom: clamp(2rem, 5vw, 3rem); }
.card__corner {
  position: absolute; width: 22px; height: 22px;
  border: 0 solid rgba(217,190,126,.55);
}
.card__corner--tl { top: -12px; left: -12px; border-top-width: 1px; border-left-width: 1px; }
.card__corner--tr { top: -12px; right: -12px; border-top-width: 1px; border-right-width: 1px; }
.card__corner--bl { bottom: 10px; left: -12px; border-bottom-width: 1px; border-left-width: 1px; }
.card__corner--br { bottom: 10px; right: -12px; border-bottom-width: 1px; border-right-width: 1px; }

.card__mono { height: clamp(66px, 11vw, 92px); width: auto; margin: 0 auto 1.8rem; }

.card__pre {
  font-family: var(--display); font-style: italic;
  font-size: clamp(.95rem, .9rem + .3vw, 1.1rem);
  color: var(--ink-soft); margin-bottom: 1rem;
}
.card__pre--last { margin: 1.6rem 0 0; }

.card__names {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.9rem, 1.1rem + 3.6vw, 3.1rem);
  line-height: 1.08; margin: 0 0 1rem;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .3em;
}
.card__names em { font-style: italic; color: var(--gold); font-size: .55em; }

.card__guest {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.1rem);
  color: var(--gold);
  margin: .3rem 0 .2rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(217,190,126,.3);
  display: inline-block;
}
.card__seats {
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-faint); margin: .6rem 0 0;
}

/* events */

.card__events { display: grid; gap: clamp(1.2rem, 3vw, 2rem); }

.ev {
  border: 1px solid rgba(217,190,126,.25);
  background: linear-gradient(160deg, rgba(74,21,29,.38), transparent);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  text-align: center;
}
.ev__num {
  font-family: var(--display); font-size: .9rem; letter-spacing: .4em;
  color: var(--gold); margin: 0 0 1rem;
}
.ev h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin-bottom: .4em; }
.ev__date { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: .25em; }
.ev__time { font-family: var(--display); font-style: italic; font-size: 1.15rem; color: var(--ink-soft); margin-bottom: 1.6rem; }

.ev dl { margin: 0; display: grid; gap: 1.1rem; text-align: left; }
.ev__row { display: grid; gap: .25rem; }
.ev__row dt {
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
}
.ev__row dd { margin: 0; font-size: 1rem; line-height: 1.6; }
.ev__pending span { display: block; margin-top: .3rem; font-size: .84rem; color: var(--ink-faint); }
.ev__map { font-size: .84rem; }

.ev__prog {
  list-style: none; margin: 1.6rem 0 0; padding: 1.4rem 0 0;
  border-top: 1px solid rgba(217,190,126,.2);
  display: grid; gap: .7rem; text-align: left;
}
.ev__prog li { display: flex; gap: 1rem; align-items: baseline; }
.ev__prog span {
  flex: none; width: 4.5rem;
  font-size: .72rem; letter-spacing: .14em; color: var(--gold);
}
.ev__prog div { color: var(--ink-soft); font-size: .95rem; }

.ev__tba {
  border: 1px dashed rgba(217,190,126,.3);
  padding: clamp(1.5rem, 4vw, 2.4rem); color: var(--ink-faint); margin: 0;
}

/* blocks inside the card */

.card__block {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid rgba(217,190,126,.2);
}

.card__colour {
  display: flex; align-items: center; justify-content: center;
  gap: 1.2rem; flex-wrap: wrap; text-align: left;
  border: 1px solid rgba(217,190,126,.28);
  padding: 1.2rem 1.5rem;
}
.card__colour .sw__chips { margin: 0; }
.card__colourname {
  margin: 0; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.card__colournote { margin: .35rem 0 0; font-size: .95rem; color: var(--ink-soft); max-width: 34ch; }
.card__colourgrp { margin: .5rem 0 0; font-size: .74rem; letter-spacing: .1em; color: var(--ink-faint); }

/* the access card */

.pass__card {
  position: relative;
  border: 1px solid var(--gold);
  background:
    linear-gradient(150deg, rgba(217,190,126,.14), rgba(74,21,29,.4)),
    repeating-linear-gradient(135deg, rgba(217,190,126,.05) 0 2px, transparent 2px 7px);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  text-align: center;
  max-width: 400px; margin-inline: auto;
}
.pass__mono { height: 40px; width: auto; margin: 0 auto .9rem; }
.pass__name { font-family: var(--display); font-size: 1.35rem; margin: 0 0 1.2rem; }
.pass__code {
  font-family: var(--display);
  font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.6rem);
  letter-spacing: .16em;
  color: var(--gold);
  margin: 0;
  padding: .7rem 0;
  border-top: 1px solid rgba(217,190,126,.35);
  border-bottom: 1px solid rgba(217,190,126,.35);
}
.pass__seats {
  margin: 1rem 0 0; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft);
}
.pass__note { margin: .4rem 0 0; font-size: .78rem; color: var(--ink-faint); }

.card__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem;
  margin-top: 1.6rem;
}

.gifts-mini .center { color: var(--ink-soft); font-size: .95rem; max-width: 44ch; margin-inline: auto; }
.accounts--mini { margin-top: 1.8rem; gap: 1rem; }
.accounts--mini .acct { padding: 1.4rem; }
.accounts--mini .acct__num { font-size: 1.3rem; }

.card__foot {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: clamp(1.6rem, 4vw, 2.4rem);
  border-top: 1px solid rgba(217,190,126,.2);
  text-align: center;
}
.card__tag { font-size: .76rem; letter-spacing: .28em; color: var(--gold); margin-bottom: .8rem; }
.card__foot .fineprint { margin: 0; }

/* printing the invitation */

@media print {
  .inv-bg, .gate, .card__actions, .card__corner { display: none !important; }
  .inv-body { background: #fff; }
  .inv { padding: 0; }
  .card {
    background: #fff; border-color: #B1904F; backdrop-filter: none;
    max-width: none; color: #1A0A0E;
  }
  .card h1, .card h2, .card__guest, .pass__code, .card__tag, .kicker, .ev__date { color: #6E5527 !important; }
  .card__pre, .ev__time, .card__colournote, .gifts-mini .center { color: #3B2B22 !important; }
  .ev, .pass__card, .acct, .card__colour { background: #fff !important; border-color: #C3AB78 !important; }
  .ev__row dd, .acct dd { color: #1A0A0E !important; }
}

.notice__cta { margin-top: 1.2rem; }
.notice__cta a { font-size: .9rem; letter-spacing: .04em; }
.foot__links { margin-bottom: .9rem; font-size: .88rem; color: var(--ink-faint); }
.foot__links a { margin: 0 .2rem; }

.accounts--mini .btn--ghost { width: 100%; letter-spacing: .14em; }

/* hex codes inside the colour guide */
.sw code, .ev code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86em; letter-spacing: .02em;
  color: var(--ink); background: rgba(243,233,220,.07);
  padding: .08em .4em; border-radius: 2px;
}

.ev__blurb {
  font-family: var(--display); font-style: italic;
  font-size: 1.02rem; line-height: 1.7; color: var(--ink-soft);
  max-width: 44ch; margin: 0 auto 1.8rem;
}
.ev__stay {
  margin-top: 1.6rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(217,190,126,.2); text-align: left;
}
.ev__staylabel {
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: .4rem;
}
.ev__stay p:last-child { margin: 0; font-size: .95rem; color: var(--ink-soft); }

/* Only one side named so far: centre it and run the names in two
   columns, rather than leaving half the grid empty. */
@media (min-width: 820px) {
  .partygrid:has(.side:only-child) {
    grid-template-columns: minmax(0, 700px);
    justify-content: center;
    background: none;
  }
  .partygrid:has(.side:only-child) .side { padding: 0; }
  .partygrid:has(.side:only-child) .side__list {
    grid-template-columns: 1fr 1fr;
    gap: 1.3rem 2.5rem;
  }
}

/* ===========================================================
   THE GUEST LIST (admin.html)
   =========================================================== */

.admin-body { background: var(--ground); }

.desk { padding: 0 0 5rem; }

.desk__bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem var(--pad);
  background: rgba(26,10,14,.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(217,190,126,.22);
}
.desk__bar img { height: 28px; width: auto; }
.desk__title { font-family: var(--display); font-size: 1.3rem; margin: 0; line-height: 1.1; }
.desk__who { margin: 0; font-size: .72rem; letter-spacing: .1em; color: var(--ink-faint); }
.desk__bar .btn:nth-of-type(1) { margin-left: auto; }

.stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: rgba(217,190,126,.2);
  border-bottom: 1px solid rgba(217,190,126,.2);
}
@media (min-width: 620px) { .stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .stats { grid-template-columns: repeat(8, 1fr); } }
.stat { background: var(--ground-2); padding: 1rem .9rem; text-align: center; }
.stat__n { font-family: var(--display); font-size: 1.9rem; line-height: 1; margin: 0 0 .25rem; color: var(--gold); }
.stat__l { margin: 0; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }

.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
  padding: 1.2rem var(--pad);
}
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.tab {
  font-family: var(--body); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); background: transparent;
  border: 1px solid rgba(217,190,126,.25); border-radius: 999px;
  padding: .5rem 1rem; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.tab:hover { border-color: var(--gold); color: var(--gold); }
.tab.is-on { background: var(--gold); color: var(--ground); border-color: var(--gold); }

.search {
  flex: 1 1 220px; min-width: 180px;
  padding: .65rem .9rem; font-size: .95rem;
}
.toolbar__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.desk__note {
  margin: 0 var(--pad) 1rem;
  padding: .75rem 1rem;
  border-left: 2px solid var(--gold);
  background: rgba(217,190,126,.08);
  font-size: .9rem; color: var(--ink-soft);
}
.desk__note.is-bad { border-left-color: #D98A8A; background: rgba(217,138,138,.08); color: #E8B7B7; }
.desk__empty { text-align: center; color: var(--ink-faint); padding: 3rem var(--pad); }

.rows { display: grid; gap: 1px; background: rgba(217,190,126,.18); border-top: 1px solid rgba(217,190,126,.18); }

.row { background: var(--ground-2); padding: 1.3rem var(--pad); }

.row__head { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: flex-start; }
.row__name { font-family: var(--display); font-size: 1.45rem; margin: 0 0 .2rem; line-height: 1.15; }
.row__no {
  font-family: var(--body); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: #E8A7A7; border: 1px solid rgba(232,167,167,.4); padding: .1rem .45rem; border-radius: 999px;
  vertical-align: middle;
}
.row__meta { margin: 0; font-size: .82rem; color: var(--ink-faint); line-height: 1.7; }
.row__meta a { color: var(--ink-soft); text-decoration: none; }
.row__meta a:hover { color: var(--gold); text-decoration: underline; }

.row__chips { margin-left: auto; display: flex; align-items: center; gap: .7rem; }
.row__swatch { display: flex; gap: .25rem; }
.row__swatch span { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

.pill {
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px; border: 1px solid;
}
.pill--pending   { color: var(--ink-faint); border-color: rgba(138,120,103,.5); }
.pill--confirmed { color: #9ED8B4; border-color: rgba(158,216,180,.45); }
.pill--waitlist  { color: var(--gold); border-color: rgba(217,190,126,.5); }
.pill--declined  { color: #E8A7A7; border-color: rgba(232,167,167,.4); }

.row__asked { margin: .9rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.row__asked strong { color: var(--ink); font-weight: 400; }
.row__msg {
  margin: .7rem 0 0; padding-left: .9rem;
  border-left: 2px solid rgba(217,190,126,.3);
  font-family: var(--display); font-style: italic; font-size: 1.02rem; color: var(--ink-soft);
}

.row__controls { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.1rem; }
.ctl { display: flex; align-items: center; gap: .6rem; }
.ctl > span { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.ctl input[type="number"] { width: 74px; padding: .4rem .5rem; font-size: .92rem; }

.seg { display: flex; border: 1px solid rgba(217,190,126,.25); border-radius: 999px; overflow: hidden; }
.seg button {
  font-family: var(--body); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  background: transparent; color: var(--ink-soft); border: 0;
  padding: .45rem .8rem; cursor: pointer;
  border-right: 1px solid rgba(217,190,126,.18);
  transition: background .2s, color .2s;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: rgba(217,190,126,.12); color: var(--gold); }
.seg button.is-on { background: var(--gold); color: var(--ground); }

.row__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid rgba(217,190,126,.14);
}
.code {
  font-family: var(--display); font-size: 1.15rem; letter-spacing: .1em; color: var(--gold);
}
.code--none { font-family: var(--body); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.mini {
  font-family: var(--body); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  background: transparent; color: var(--ink-soft);
  border: 1px solid rgba(217,190,126,.25); border-radius: 999px;
  padding: .35rem .8rem; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.mini:hover { border-color: var(--gold); color: var(--gold); }
.opens { font-size: .7rem; letter-spacing: .1em; color: var(--ink-faint); }
.notes { flex: 1 1 200px; min-width: 160px; padding: .45rem .7rem; font-size: .88rem; }

@media (max-width: 560px) {
  .row__chips { margin-left: 0; }
  .row__controls { gap: .9rem; }
  .ctl { flex-wrap: wrap; }
}