/* Y.S.P. Annual Dinner: Hawaiian "Aloha Night"
   Matches HR's 2026 e-card: cream paper, rose-brown ink, a gold date band, soft watercolour
   teal and peach in the corners, brush-script greeting. Colours and fonts only: no extra scripts. */
/* Fonts are bundled in wwwroot/fonts (SIL Open Font Licence), so the look doesn't depend on Google being reachable */
@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond-italic.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Mrs Saint Delafield"; src: url("../fonts/mrs-saint-delafield.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }

:root {
  --cream: #FEF1DE;        /* page, like the e-card paper */
  --paper: #FFFAF2;        /* cards */
  --rose: #854440;         /* headings, script, buttons (e-card lettering) */
  --rose-deep: #6A3430;
  --gold: #ECC47F;         /* date band */
  --gold-line: #E2A840;
  --gold-soft: #FBEBCB;    /* selected answers */
  --peach: #F4C9B7;
  --teal: #5F8FA2;         /* watercolour wash */
  --ink: #3F2C28;
  --muted: #7A625C;
  --line: #EBDAC2;
  --ok-bg: #E8F1E2; --ok-ink: #2F5A2B;
  --err-bg: #FAE6E1; --err-ink: #8A2F22;
  --warn-bg: #FCEFD6; --warn-ink: #75500F;
  --script: "Mrs Saint Delafield", "Segoe Script", "Brush Script MT", cursive;
  --display: "EB Garamond", Garamond, Georgia, serif;
  --body: "Figtree", "Segoe UI", Arial, sans-serif;
  --radius: 6px;
  --foil: linear-gradient(100deg, #A87A33 0%, #F2D9A2 30%, #CF9F52 50%, #F7E6BF 66%, #B88A40 100%);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  /* cream paper with soft watercolour washes, like the e-card */
  background:
    radial-gradient(40% 30% at 0% 0%, rgba(95, 143, 162, .30), transparent 70%),
    radial-gradient(35% 28% at 100% 0%, rgba(95, 143, 162, .26), transparent 70%),
    radial-gradient(30% 25% at 0% 70%, rgba(244, 201, 183, .45), transparent 70%),
    radial-gradient(30% 25% at 100% 100%, rgba(244, 201, 183, .45), transparent 70%),
    var(--cream);
}
[hidden] { display: none !important; }
a { color: var(--rose); }
a:hover { color: var(--rose-deep); }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

/* Top bar: light paper, with the company logo */
.topbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem;
  padding: .35rem 1.5rem;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; }
.brand-logo { display: block; height: 38px; width: auto; }
.brand-text {
  padding-left: .85rem; border-left: 1px solid var(--line);
  font-family: var(--display); font-weight: 600; font-size: 1.2rem; color: var(--rose); line-height: 1;
}
.topnav { display: flex; gap: 1.5rem; }
.topnav a { color: var(--rose); text-decoration: none; font-size: .95rem; }
.topnav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Hero: like the top of the e-card. Centred lettering on cream, watercolour washes in the corners. */
.hero {
  background:
    radial-gradient(55% 60% at 0% 0%, rgba(95, 143, 162, .38), transparent 70%),
    radial-gradient(45% 55% at 100% 0%, rgba(95, 143, 162, .32), transparent 70%),
    radial-gradient(30% 45% at 0% 95%, rgba(244, 201, 183, .6), transparent 70%),
    radial-gradient(28% 40% at 100% 100%, rgba(244, 201, 183, .5), transparent 70%),
    var(--cream);
  border-bottom: 1px solid var(--line);
}
.hero-inner { max-width: 640px; margin: 0 auto; padding: 2.75rem 1.5rem 2.25rem; text-align: center; }
.hero-kicker { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: var(--rose); }
.hero-title {
  margin: .1rem 0 0; font-family: var(--script); font-weight: 400;
  font-size: clamp(4.5rem, 19vw, 7.5rem); line-height: 1; color: var(--rose);
}
.hero-name { margin: .25rem 0 0; font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: .06em; color: var(--rose-deep); }
.hero-name::after { content: ""; display: block; width: 72px; height: 2px; margin: 1rem auto 0; background: var(--gold-line); border-radius: 2px; }
.hero-day { margin: 1rem 0 0; font-family: var(--display); font-weight: 500; font-size: 1.6rem; letter-spacing: .04em; text-transform: uppercase; color: var(--rose); }
.hero-date {
  display: inline-block; margin: .35rem 0 0; padding: .2rem 1.5rem;
  background: var(--gold); font-family: var(--display); font-weight: 600; font-size: 1.85rem; letter-spacing: .03em;
  text-transform: uppercase; color: var(--rose);
}
.hero-lead { margin: 1rem 0 0; color: var(--muted); }

/* Page column */
.page { max-width: 640px; margin: 0 auto; padding: 1rem 1.5rem 3rem; }
.is-wide .page { max-width: 1120px; }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem; margin-bottom: 1.25rem;
}
.card > :last-child { margin-bottom: 0; }
.card-title { margin: 0 0 1.1rem; font-family: var(--display); font-weight: 600; font-size: 1.75rem; line-height: 1.15; color: var(--rose); }
.section-title { margin: 2.25rem 0 .75rem; font-family: var(--display); font-weight: 600; font-size: 1.6rem; color: var(--rose); }
.hint { color: var(--muted); font-size: .9rem; }

/* Reply form */
.reply-form fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; }
.reply-form legend { font-weight: 600; margin-bottom: .6rem; padding: 0; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: block; padding: .85rem 1rem; border: 1px solid #DCC6A8; border-radius: var(--radius);
  background: #fff;
}
.choice:hover span { border-color: var(--rose-deep); }
.choice input:checked + span { border-color: var(--rose); background: var(--gold-soft); color: var(--rose); font-weight: 600; box-shadow: inset 3px 0 0 var(--rose); }
.choice input:focus-visible + span { outline: 2px solid var(--rose-deep); outline-offset: 2px; }
.field-error { display: block; margin-top: .4rem; color: var(--err-ink); font-size: .9rem; font-weight: 600; }
.reply-summary { font-family: var(--display); font-weight: 600; font-size: 1.5rem; color: var(--rose); }

.btn {
  display: inline-block; border: 1px solid var(--rose); border-radius: 4px; cursor: pointer;
  padding: .8rem 1.75rem; background: var(--rose); color: #fff;
  font: 500 .95rem var(--body); letter-spacing: .03em; text-decoration: none;
}
.btn:hover { background: var(--rose-deep); border-color: var(--rose-deep); color: #fff; }
.btn-quiet { background: #fff; color: var(--rose); }
.btn-quiet:hover { background: var(--gold-soft); color: var(--rose); }

/* Notices */
.notice { border-radius: var(--radius); padding: .85rem 1rem; margin-bottom: 1.25rem; }
.notice ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.notice p { margin: 0; }
.notice-ok { background: var(--ok-bg); color: var(--ok-ink); }
.notice-error { background: var(--err-bg); color: var(--err-ink); }
.notice-warn { background: var(--warn-bg); color: var(--warn-ink); }
.validation-summary-valid { display: none; }
.notice.validation-summary-errors ul { margin: 0; padding-left: 1.2rem; }

/* Event details */
.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem 1.5rem; margin: 0; }
.details dt { color: var(--muted); font-size: .85rem; letter-spacing: .02em; }
.details dd { margin: .15rem 0 0; font-family: var(--display); font-weight: 600; font-size: 1.3rem; line-height: 1.25; color: var(--rose); }

/* Programme: times lead each line */
.programme { list-style: none; margin: 0 0 1rem; padding: 0; }
.programme li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.programme li:last-child { border-bottom: 0; }
.programme-time { font-variant-numeric: tabular-nums; color: var(--rose-deep); }

/* Admin */
.admin-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 1rem 0; }
.admin-title { margin: 0; font-family: var(--display); font-weight: 600; font-size: 2.4rem; line-height: 1.1; color: var(--rose); }
.admin-head .hint { margin: .25rem 0 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.stat b { display: block; font-family: var(--display); font-weight: 600; font-size: 2.4rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--rose); }
.stat span { color: var(--muted); font-size: .88rem; }
.stat-main { background: var(--rose); border-color: var(--rose); }
.stat-main b { color: #fff; }
.stat-main span { color: #F3D9C8; }

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin: 1.25rem 0 1rem; }
.filters label { display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; color: var(--muted); }
.filters .grow { flex: 1 1 220px; }
.filters select, .filters input {
  font: inherit; color: var(--ink); padding: .55rem .7rem; border: 1px solid #DCC6A8; border-radius: 4px; background: #fff;
}

.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.list { width: 100%; border-collapse: collapse; font-size: .95rem; }
.list th { text-align: left; padding: .7rem .85rem; background: #FBF1E2; color: var(--rose); font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--line); }
.list td { padding: .65rem .85rem; border-top: 1px solid var(--line); vertical-align: top; }
.list .empty { color: var(--muted); text-align: center; padding: 1.5rem; }
.tag { display: inline-block; padding: .1rem .55rem; border-radius: 3px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.tag-yes { background: var(--ok-bg); color: var(--ok-ink); }
.tag-no { background: #ECEFF0; color: #44585C; }
.tag-wait { background: var(--warn-bg); color: var(--warn-ink); }

.upload { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1rem 0; }
.back { display: inline-block; margin: 1rem 0; }

.foot { text-align: center; color: var(--muted); font-size: .85rem; padding: 1.5rem 1.5rem 2.25rem; }

/* Event form */
.form .field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1.1rem; flex: 1 1 220px; }
.form .field > span:first-child { font-weight: 600; }
.form .field-short { flex: 0 1 140px; }
.field-row { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.form input, .form textarea {
  font: inherit; color: var(--ink); padding: .6rem .75rem; border: 1px solid #DCC6A8; border-radius: 4px; background: #fff; width: 100%;
}
.form textarea { font-variant-numeric: tabular-nums; line-height: 1.6; resize: vertical; }
.form input:focus, .form textarea:focus { border-color: var(--rose-deep); }
.form .hint { margin: 0; font-size: .85rem; }
.card-title .tag { vertical-align: middle; margin-left: .4rem; font-family: var(--body); }

/* Events list and year picker */
.row-actions { white-space: nowrap; }
.row-actions a, .row-actions form { display: inline; margin-right: .9rem; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--rose-deep); text-decoration: underline; cursor: pointer; }
.link-button:hover { color: var(--rose); }
.link-danger { color: #A32D1E; }
.link-danger:hover { color: #7E1F13; }
.year-picker { margin: .5rem 0 0; display: flex; gap: .5rem; }
.year-picker select { font: inherit; color: var(--rose); padding: .45rem .7rem; border: 1px solid #DCC6A8; border-radius: 4px; background: #fff; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Invitation card (layout from the prototype, look from HR's e-card) ===== */
.invite-page { max-width: 600px; padding-top: 1.75rem; }
.invite-page .notice { text-align: center; }
.invite {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  background: var(--cream);
  border: 1px solid var(--gold);
  outline: 1px solid var(--gold); outline-offset: -9px;   /* the thin double frame */
  border-radius: 4px;
  padding: 3.25rem 2.5rem 8.5rem;
  box-shadow: 0 30px 60px -30px rgba(106, 52, 48, .45), 0 2px 6px rgba(106, 52, 48, .06);
}
.invite > * { position: relative; z-index: 1; }

/* HR's artwork: leaves in the top corners, frangipani along the bottom, palms beside the card */
.invite > .deco { position: absolute; z-index: 0; pointer-events: none; user-select: none; height: auto; }
.deco-tl { top: 0; left: 0; width: 180px;
  -webkit-mask-image: radial-gradient(130% 110% at 0 0, #000 50%, transparent 78%);
          mask-image: radial-gradient(130% 110% at 0 0, #000 50%, transparent 78%); }
.deco-tr { top: 0; right: 0; width: 180px;
  -webkit-mask-image: radial-gradient(130% 110% at 100% 0, #000 50%, transparent 78%);
          mask-image: radial-gradient(130% 110% at 100% 0, #000 50%, transparent 78%); }
.deco-bottom { left: 0; bottom: 0; width: 100%;
  -webkit-mask-image: linear-gradient(to top, #000 62%, transparent);
          mask-image: linear-gradient(to top, #000 62%, transparent); }
.side-palm { display: none; }
@media (min-width: 1100px) {
  .invite-page { position: relative; z-index: 1; }
  .side-palm {
    display: block; position: fixed; bottom: 0; z-index: -1; height: min(80vh, 780px); width: auto;
    pointer-events: none; opacity: .95;
  }
  /* fade the inner side and the top so the cut edges disappear into the page */
  .side-palm-left { left: 0;
    -webkit-mask-image: linear-gradient(to right, #000 45%, transparent 98%), linear-gradient(to top, #000 70%, transparent);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, #000 45%, transparent 98%), linear-gradient(to top, #000 70%, transparent);
            mask-composite: intersect; }
  .side-palm-right { right: 0;
    -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 98%), linear-gradient(to top, #000 70%, transparent);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to left, #000 45%, transparent 98%), linear-gradient(to top, #000 70%, transparent);
            mask-composite: intersect; }
}
.invite::before, .invite::after {
  /* small gold diamonds at the top corners of the frame */
  content: ""; position: absolute; top: 4px; width: 9px; height: 9px;
  border: 1px solid var(--gold-line); background: var(--cream); transform: rotate(45deg); z-index: 2;
}
.invite::before { left: 4px; }
.invite::after { right: 4px; }
.invite-logo { display: block; height: 30px; width: auto; margin: 0 auto; }
.invite-company { margin: .9rem 0 0; font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--rose); }
.invite-greeting { margin: 1rem 0 0; }
.invite-greeting-word { display: block; font-family: var(--script); font-size: 2.6rem; line-height: 1.1; color: var(--rose); }
.invite-greeting-name { display: block; margin-top: .1rem; font-family: var(--display); font-weight: 600; font-size: 1.1rem; letter-spacing: .03em; color: var(--rose-deep); }
.invite-lead { margin: .35rem 0 0; font-family: var(--display); font-style: italic; font-size: 1.15rem; color: var(--muted); }
.invite-title {
  margin: .25rem 0 0; font-family: var(--script); font-weight: 400;
  font-size: clamp(3.6rem, 14vw, 5.6rem); line-height: 1.1; color: var(--rose); white-space: nowrap;
}
.invite-year { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: .25rem 0 0; }
.invite-year::before, .invite-year::after { content: ""; width: 70px; height: 1px; background: var(--gold-line); }
.invite-year span { font-family: var(--display); font-weight: 600; letter-spacing: .3em; color: var(--rose); }

/* Date block: SATURDAY | 21 | FROM 5:00 PM, with the month under it */
.invite-date {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 1rem;
  margin: 1.75rem 0 0;
}
.invite-date-side {
  padding: .55rem 0; border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line);
  font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--rose);
}
.invite-date-day {
  font-family: var(--display); font-weight: 600; font-size: 5rem; line-height: 1; padding: 0 .25rem;
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.invite-date-month {
  grid-column: 1 / -1; justify-self: center; margin-top: .6rem; padding: .2rem 1.1rem;
  background: var(--gold); font-size: .85rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--rose);
}
.invite-tbc { margin: 1.5rem 0 0; font-family: var(--display); font-size: 1.4rem; color: var(--rose); }

.invite-venue { margin: 1.75rem 0 0; font-family: var(--display); font-weight: 600; font-size: 1.9rem; line-height: 1.15; color: var(--rose-deep); }
.invite-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; margin: .5rem 0 0; color: var(--muted); }
.invite-meta b, .invite-rsvp b { color: var(--rose); font-weight: 600; }
.invite-rsvp { margin: .9rem 0 0; color: var(--muted); }

.invite-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .65rem; margin: 1.5rem 0 0; }
.invite-actions .btn { text-align: center; }

.invite-divider { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 2rem 0 0; }
.invite-divider::before, .invite-divider::after { content: ""; width: 80px; height: 1px; background: var(--gold-line); }
.invite-divider span { width: 7px; height: 7px; background: var(--gold-line); transform: rotate(45deg); }
.invite-subtitle { margin: 1rem 0 .75rem; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.7rem; color: var(--rose); }
.invite-programme { max-width: 400px; margin: 0 auto; text-align: left; }
.invite-programme li { grid-template-columns: 5.25rem 1fr; }
.invite-note { margin: .9rem auto 0; max-width: 30em; font-size: .9rem; color: var(--muted); }

.invite-register { margin: 1.75rem 0 0; }
.invite-status { margin: 0 0 .85rem; padding: .6rem 1rem; background: var(--gold-soft); border-radius: 4px; color: var(--ink); }
.invite-status b { color: var(--rose); }
.btn-wide { display: block; width: 100%; padding: 1rem 1.5rem; font-size: 1.05rem; text-align: center; }
.invite .btn-wide {
  background: var(--foil); border: 0; color: var(--rose-deep); font-weight: 600; letter-spacing: .08em;
  box-shadow: 0 10px 22px -12px rgba(133, 68, 64, .6);
}
.invite .btn-wide:hover { filter: brightness(1.05); color: var(--rose-deep); }
.invite .btn-quiet { background: rgba(255, 250, 242, .7); }
.invite-ecard { margin: 1.25rem 0 0; font-size: .9rem; }

.register-card { margin-top: .25rem; }

/* Signed-in person in the top bar */
.userbox { display: flex; align-items: center; gap: .9rem; padding-left: 1.25rem; border-left: 1px solid var(--line); }
.userbox-name { font-family: var(--display); font-weight: 600; color: var(--rose-deep); max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userbox form { margin: 0; }
.userbox .link-button { font-size: .9rem; }
.topbar .topnav { margin-left: auto; }

/* Sign-in page: same card as the invitation */
.login-page { max-width: 460px; padding-top: 2.5rem; }
.login { padding-top: 3.5rem; padding-bottom: 6.5rem; }
.login > .deco-tl, .login > .deco-tr { width: 120px; }
.login-title { font-size: clamp(3rem, 12vw, 3.9rem); margin-top: 1rem; }
.login-form { margin: 1.5rem 0 0; text-align: left; }
.login-form .field input { padding: .75rem .85rem; font-size: 1rem; background: rgba(255, 255, 255, .85); }
.login-form .btn-wide { margin-top: .5rem; }
.login-form .invite-note { text-align: center; }

/* Access page form */
.access-form { margin: 0; }
.access-form select, .access-form input { min-width: 220px; }

/* Replies page: invitation email bar and checkboxes */
.invite-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem;
  margin: 0 0 .75rem; padding: .75rem 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
}
.invite-bar-count { font-weight: 600; color: var(--rose); min-width: 6.5rem; }
.invite-bar .btn:disabled { opacity: .45; cursor: not-allowed; }
.invite-bar .hint { margin: 0; }
.list .col-check { width: 2.5rem; text-align: center; }
.list .col-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--rose); cursor: pointer; }

/* Not attending: supporting documents reminder */
.docs-notice { margin: 0 0 1.25rem; text-align: left; font-size: .95rem; line-height: 1.5; }
.invite .docs-notice { margin: 0 0 .85rem; }
.register-card .notice { text-align: left; }
.docs-notice a { color: inherit; font-weight: 700; }

/* ===== Invitation built on HR's e-card artwork =====
   The card keeps the artwork's proportions, and all sizes use cqw (1cqw = 1% of the card's width),
   so the text sits in the same place as on the printed e-card at any screen size. */
.ecard {
  container-type: inline-size; position: relative; overflow: hidden;
  aspect-ratio: 1000 / 1419; width: 100%;
  background: var(--cream) center / cover no-repeat;
  border-radius: 6px; text-align: center; color: var(--rose);
  box-shadow: 0 30px 60px -30px rgba(106, 52, 48, .45), 0 2px 6px rgba(106, 52, 48, .06);
}
.ecard-plain { border: 1px solid var(--gold); }
.ecard > * { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
.ec-lead { top: 10.4%; width: 80%; font-family: var(--display); font-weight: 600; font-size: 3.1cqw; color: var(--rose); }
.ec-title {
  top: 14.5%; display: flex; flex-direction: column; align-items: center;
  font-family: var(--script); font-weight: 400; font-size: 16.5cqw; line-height: 1.02; color: var(--rose);
  -webkit-text-stroke: .16cqw currentColor;   /* a touch bolder, closer to the e-card's brush lettering */
}
.ec-title span:nth-child(2) { margin-left: 4cqw; }
.ec-title span:nth-child(3) { margin-left: -2cqw; }
.ec-when { top: 52%; width: 74%; display: flex; flex-direction: column; align-items: center; }
.ec-day { margin: 0; font-family: var(--display); font-weight: 500; font-size: 4.4cqw; letter-spacing: .02em; text-transform: uppercase; color: var(--rose); }
.ec-date {
  margin: .8cqw 0 0; padding: .15cqw 6cqw; background: var(--gold);
  font-family: var(--display); font-weight: 700; font-size: 4.6cqw; letter-spacing: .03em; text-transform: uppercase; color: var(--rose);
}
.ec-reg { margin: 1.6cqw 0 0; font-family: var(--display); font-size: 3.1cqw; color: var(--rose); }
.ec-reg b { font-weight: 700; }
.ec-details { list-style: none; margin: 1.4cqw 0 0; padding: 0; font-family: var(--display); font-size: 2.75cqw; line-height: 1.3; color: var(--rose); }
.ec-details b { font-weight: 700; }
.ec-logos { top: 78.5%; width: 56%; height: auto; }

/* Reply panel under the e-card */
.invite.reply-panel { margin-top: 1.25rem; padding: 2rem 1.75rem 1.75rem; }
.reply-panel .invite-greeting { margin-top: 0; }
.reply-panel .invite-rsvp { margin-top: .35rem; }
.reply-panel .invite-register { margin-top: 1.25rem; }

/* ===== Invitation: one card on HR's e-card artwork =====
   Keeps at least the artwork's proportions and grows taller if the content needs it.
   Decorative text scales with the card (cqw), with a readable minimum on phones. */
.ecard2 {
  container-type: inline-size; position: relative;
  aspect-ratio: 1000 / 1419; width: 100%;
  /* top artwork pinned to the top, bottom artwork (flowers) pinned to the bottom, plain cream between */
  background-color: #FFF0DF;
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center bottom;
  background-size: 100% auto, 100% auto;
  border-radius: 6px; text-align: center; color: var(--rose);
  box-shadow: 0 30px 60px -30px rgba(106, 52, 48, .45), 0 2px 6px rgba(106, 52, 48, .06);
}
.ec2-inner { width: 66%; margin: 0 auto; padding: 6cqw 0 32cqw; }
.ec2-inner > p, .ec2-inner > ul, .ec2-inner > h1 { margin: 0; }
.ec2-logos { display: block; width: 100%; height: auto; margin: 0 auto; }
.ec2-lead { margin-top: 2.5cqw !important; font-family: var(--display); font-weight: 600; font-size: clamp(.85rem, 3.1cqw, 1.25rem); color: var(--rose); }
.ec2-title { margin-top: 1.5cqw !important; font-weight: 400; line-height: 1; }
.ec2-title img { display: block; width: 70%; height: auto; margin: 0 auto; }
.ec2-title span { font-family: var(--script); font-size: clamp(2.6rem, 13cqw, 5rem); color: var(--rose); }
.ec2-day { margin-top: 2.5cqw !important; font-family: var(--display); font-weight: 600; font-size: clamp(.95rem, 3.4cqw, 1.35rem); letter-spacing: .22em; text-transform: uppercase; color: var(--rose); }
.ec2-date {
  display: inline-block; margin-top: 1.5cqw !important; padding: .1em .55em; background: var(--gold);
  font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 4.2cqw, 1.6rem); letter-spacing: .02em; text-transform: uppercase; color: var(--rose);
}
.ec2-name { margin-top: 2.2cqw !important; font-family: var(--display); font-weight: 700; font-size: clamp(1rem, 3.5cqw, 1.35rem); letter-spacing: .03em; color: var(--rose-deep); }
.ec2-reg { margin-top: .6cqw !important; font-family: var(--display); font-size: clamp(.95rem, 3.2cqw, 1.25rem); color: var(--rose); }
.ec2-reg b { font-weight: 700; }
.ec2-details { list-style: none; padding: 0; margin-top: 2cqw !important; font-family: var(--display); font-size: clamp(.95rem, 3.1cqw, 1.2rem); line-height: 1.35; color: var(--rose); }
.ec2-details b { font-weight: 700; }
.ecard2 .invite-actions { margin-top: .75rem; }
.ecard2 .btn-quiet { background: rgba(255, 250, 242, .75); color: var(--rose); border-color: var(--rose); }
.ecard2 .invite-register { margin-top: 1.25rem; }
.ecard2 .btn-wide {
  background: var(--foil); border: 0; color: var(--rose-deep); font-weight: 600; letter-spacing: .12em;
  box-shadow: 0 10px 22px -12px rgba(133, 68, 64, .6);
}
.ecard2 .btn-wide:hover { filter: brightness(1.05); color: var(--rose-deep); }
.ecard2 .invite-status, .ecard2 .docs-notice { margin-bottom: .75rem; }
.ecard2 .invite-rsvp { margin-top: .9rem; }
.ecard2 .invite-ecard { margin-top: .35rem; }
.ecard2 .invite-programme { background: rgba(255, 250, 242, .8); padding: .25rem .9rem; border-radius: 4px; }
@media (max-width: 520px) {
  .ec2-inner { width: 80%; padding-bottom: 38cqw; }
}

/* HR's e-card image */
.ecard-img { display: block; width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--line); }

@media (max-width: 520px) {
  .topbar { padding: .75rem 1.1rem; }
  .brand-logo { height: 30px; }
  .brand-text { font-size: 1.05rem; }
  .hero-inner { padding: 2rem 1.1rem 1.75rem; }
  .hero-day { font-size: 1.35rem; }
  .hero-date { font-size: 1.55rem; }
  .invite { padding: 2.75rem 1.35rem 5.5rem; }
  .deco-tl, .deco-tr { width: 112px; }
  .invite-date-day { font-size: 4rem; }
  .invite-date { column-gap: .6rem; }
  .invite-date-side { font-size: .7rem; letter-spacing: .1em; }
  .invite-venue { font-size: 1.6rem; }
  .userbox { padding-left: 0; border-left: 0; width: 100%; justify-content: space-between; }
  .topbar .topnav { margin-left: 0; }
  .page { padding: .75rem 1.1rem 2.5rem; }
  .card { padding: 1.25rem; }
}

/* ---- Added for the PHP version ---- */
.dev-banner { max-width: 1120px; margin: .75rem auto 0; text-align: center; }
.login-card .field { margin-bottom: 1rem; }
.error-detail { white-space: pre-wrap; font-size: .8rem; overflow-x: auto; background: var(--err-bg); padding: .75rem; border-radius: var(--radius); }