:root {
  --ink: #23201c;
  --ink-soft: #6b6459;
  --line: #e2dcd2;
  --bg: #faf7f2;
  --card: #fffdfa;
  --accent: #7d6a4f;
  --accent-soft: #f0e9dd;
  --ok: #3f6b4f;
  --bad: #9a4a3c;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(35,32,28,.05), 0 8px 24px rgba(35,32,28,.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: 0 0 .4em;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.05rem; }

a { color: var(--accent); }

.wrap { max-width: 680px; margin: 0 auto; padding: 40px 20px 80px; }
.wide { max-width: 1200px; }

header.site {
  text-align: center;
  padding: 40px 20px 8px;
}
header.site .sub {
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin-top: -.2em;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 20px 0;
  max-width: 1100px; margin: 0 auto;
}
nav.site {
  display: flex; gap: 22px;
  font-size: .9rem; letter-spacing: .06em; text-transform: uppercase;
}
.langs { display: flex; gap: 4px; }
button.lang {
  background: transparent; color: var(--ink-soft); border: 1px solid transparent;
  padding: 5px 9px; border-radius: 6px; font-size: .8rem; letter-spacing: .06em;
}
button.lang:hover { background: var(--accent-soft); color: var(--accent); filter: none; }
button.lang.current {
  color: var(--accent); border-color: var(--line);
  background: var(--accent-soft); cursor: default;
}
nav.site a { color: var(--ink-soft); text-decoration: none; }
nav.site a:hover, nav.site a[aria-current] { color: var(--accent); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 18px;
}

.muted { color: var(--ink-soft); }
.small { font-size: .875rem; }
.center { text-align: center; }
.stack > * + * { margin-top: 14px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }

label.field { display: block; font-weight: 500; margin-bottom: 6px; }

input[type=text], input[type=password], input[type=search], select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
textarea { min-height: 74px; resize: vertical; }

button {
  font: inherit;
  padding: 11px 20px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
button:hover { filter: brightness(1.08); }
button[disabled] { opacity: .5; cursor: not-allowed; filter: none; }
button.ghost { background: transparent; color: var(--accent); }
button.link {
  background: none; border: none; color: var(--accent);
  padding: 0; text-decoration: underline; cursor: pointer;
}

/* segmented yes/no + day/meal choices */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice .day-label { font-weight: 500; display: block; }
.choice .day-date { font-size: .8rem; color: var(--ink-soft); }

ul.results { list-style: none; margin: 12px 0 0; padding: 0; }
ul.results li + li { border-top: 1px solid var(--line); }
ul.results button {
  width: 100%; text-align: left;
  background: none; border: none; color: inherit;
  padding: 12px 4px; cursor: pointer; border-radius: 0;
}
ul.results button:hover { background: var(--accent-soft); filter: none; }
ul.results .who { font-weight: 500; }
ul.results .meta { font-size: .85rem; color: var(--ink-soft); }

.person { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 20px; }
.person:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.notice {
  border-radius: 8px; padding: 12px 14px; font-size: .92rem;
  background: var(--accent-soft); border: 1px solid var(--line);
}
.notice.bad { background: #fbeeea; border-color: #eccec6; color: var(--bad); }
.notice.ok { background: #eef4ee; border-color: #cfe0d2; color: var(--ok); }

.hidden { display: none !important; }

/* admin */
table.grid { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--card); }
table.grid th, table.grid td { border: 1px solid var(--line); padding: 7px 9px; text-align: left; vertical-align: top; }
table.grid th { background: var(--accent-soft); position: sticky; top: 0; z-index: 1; }
table.grid td input { padding: 5px 7px; font-size: .9rem; }
table.grid tr.no td:nth-child(1) { color: var(--ink-soft); text-decoration: line-through; }
table.grid tr.pending { background: #fffaf0; }
.tick { color: var(--ok); font-weight: 600; }
.cross { color: var(--ink-soft); }

.stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px; min-width: 104px;
}
.stat .n { font-size: 1.6rem; font-family: ui-serif, Georgia, serif; line-height: 1.1; }
.stat .k { font-size: .78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }

table.grid td.lang-cell { text-transform: uppercase; font-size: .8rem; color: var(--ink-soft); }
table.grid tr.foreign td.dietary-cell { background: #fdf6e8; }

@media (max-width: 560px) {
  .wrap { padding: 24px 16px 60px; }
  .card { padding: 18px; }
  .topbar { flex-direction: column; gap: 10px; }
}

/* ══ home page ═══════════════════════════════════════════════════════════ */

.topbar.floating {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  max-width: 1100px; margin: 0 auto;
}
.topbar.floating nav.site a { color: rgba(255,255,255,.88); }
.topbar.floating nav.site a:hover,
.topbar.floating nav.site a[aria-current] { color: #fff; }
.topbar.floating button.lang { color: rgba(255,255,255,.8); }
.topbar.floating button.lang:hover { background: rgba(255,255,255,.15); color: #fff; }
.topbar.floating button.lang.current {
  background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); color: #fff;
}

.hero {
  position: relative;
  min-height: min(78vh, 720px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 90px 20px 70px;
  background: #3a332b;
  overflow: hidden;
}
.hero img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,24,20,.55) 0%, rgba(28,24,20,.30) 45%, rgba(28,24,20,.65) 100%);
}
.hero.no-photo img, .hero.no-photo .hero-veil { display: none; }
.hero.no-photo { background: var(--bg); }
.hero.no-photo .hero-text, .hero.no-photo .hero-scroll { color: var(--ink); text-shadow: none; }
.hero.no-photo .eyebrow, .hero.no-photo .hero-sub, .hero.no-photo .hero-place { color: var(--soft, #6b6459); }

.hero-text { position: relative; z-index: 2; color: #fff; text-shadow: 0 1px 24px rgba(0,0,0,.35); }
.hero-text h1 {
  font-size: clamp(2.6rem, 8vw, 5rem); margin: .1em 0 .18em; color: inherit;
}
.eyebrow {
  margin: 0; font-size: .82rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.hero-sub { margin: 0; font-size: clamp(1.05rem, 2.4vw, 1.4rem); font-family: ui-serif, Georgia, serif; }
.hero-place { margin: .5em 0 0; font-size: .95rem; color: rgba(255,255,255,.82); }

.hero-scroll {
  position: absolute; bottom: 26px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: rgba(255,255,255,.85); text-decoration: none;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
}
.hero-scroll .chev { font-size: 1rem; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }
@media (prefers-reduced-motion: reduce) { .hero-scroll .chev { animation: none; } }

.section { padding: 56px 0 12px; }
.section > h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); text-align: center; }
.section > .lede { text-align: center; max-width: 46ch; margin: 0 auto 34px; }

/* schedule */
.days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.day {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 20px;
}
.day-head { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 14px; }
.day-head h3 { margin: 0; font-size: 1.2rem; }
.day-when { margin: 2px 0 0; font-size: .85rem; color: var(--ink-soft); }
.day-blurb { margin: 6px 0 0; font-size: .85rem; color: var(--accent); font-style: italic; }

ol.timeline { list-style: none; margin: 0; padding: 0; }
ol.timeline li { display: flex; gap: 12px; padding: 7px 0; align-items: baseline; }
ol.timeline .time {
  flex: 0 0 3.4em; font-variant-numeric: tabular-nums;
  font-size: .85rem; color: var(--accent); font-weight: 500;
}
ol.timeline .what { font-size: .95rem; }

/* venue */
.venue {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; margin-bottom: 16px;
}
.venue img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; display: block; }
.venue.no-photo { grid-template-columns: 1fr; }
.venue.no-photo img { display: none; }
.venue-info { padding: 26px 24px; display: flex; flex-direction: column; justify-content: center; }
.venue-info h3 { margin: 0 0 10px; font-size: 1.3rem; }
.venue-info address { font-style: normal; color: var(--ink-soft); display: grid; gap: 2px; margin-bottom: 14px; }
.venue-info a { font-size: .92rem; }

.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mode {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px;
}
.mode h3 { margin: 0 0 6px; font-size: 1rem; }
.mode p { margin: 0; font-size: .9rem; }

/* rsvp block */
.section.cta {
  text-align: center; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 44px 24px; margin-top: 46px;
}
.section.cta p { max-width: 44ch; margin-left: auto; margin-right: auto; }
.section.cta button { margin-top: 18px; padding: 13px 34px; }

.foot {
  text-align: center; padding: 40px 20px 60px;
  color: var(--ink-soft); font-family: ui-serif, Georgia, serif; letter-spacing: .1em;
}

@media (max-width: 860px) {
  .days, .modes { grid-template-columns: 1fr; }
  .venue { grid-template-columns: 1fr; }
  .venue img { min-height: 200px; }
}
.wrap.home { max-width: 980px; padding-top: 0; }

/* ── real photo: art direction ──────────────────────────────────────────
   The engagement photo is 2.17:1 with the two of you slightly right of
   centre. Centred text would sit on your faces, so on wide screens the
   words go left over the dark foliage and the scrim runs left-to-right.
   Phones get a separate 5:4 crop and the text underneath, because a
   2.17:1 photo in a tall hero keeps about a quarter of its width.        */

@media (min-width: 861px) {
  .hero { align-items: flex-start; text-align: left; padding-left: max(28px, calc((100vw - 1180px) / 2)); }
  .hero img { object-position: 44% 38%; }
  .hero-veil {
    background:
      linear-gradient(100deg, rgba(24,20,16,.86) 0%, rgba(24,20,16,.62) 26%, rgba(24,20,16,.14) 46%, rgba(24,20,16,.04) 100%),
      linear-gradient(0deg, rgba(24,20,16,.35) 0%, rgba(24,20,16,0) 30%);
  }
  .hero-text { max-width: 22ch; }
  .hero-text h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); }
  .hero-scroll { left: max(28px, calc((100vw - 1180px) / 2)); align-items: flex-start; }
}

@media (max-width: 860px) {
  .hero {
    min-height: 0; padding: 0 0 30px;
    display: block; background: var(--bg);
  }
  .hero picture { display: block; }
  .hero img {
    position: static; width: 100%; height: auto;
    aspect-ratio: 5 / 4; object-fit: cover; object-position: center 42%;
  }
  .hero-veil { display: none; }
  .hero-text {
    color: var(--ink); text-shadow: none;
    padding: 26px 20px 0; text-align: center;
  }
  .hero-text .eyebrow, .hero-text .hero-place { color: var(--ink-soft); }
  .hero-text .hero-sub { color: var(--accent); }
  .hero-scroll { display: none; }
  .topbar.floating { position: static; }
  .topbar.floating nav.site a { color: var(--ink-soft); }
  .topbar.floating nav.site a[aria-current] { color: var(--accent); }
  .topbar.floating button.lang { color: var(--ink-soft); }
  .topbar.floating button.lang.current {
    background: var(--accent-soft); border-color: var(--line); color: var(--accent);
  }
}

/* The castle is a tall subject on a cliff — give it a portrait frame
   instead of squashing it into a landscape one. */
/* The castle photo is 3:2 landscape and only 545 px wide, so the frame is
   kept modest — blowing it up any larger just makes the softness obvious. */
@media (min-width: 861px) {
  .venue { grid-template-columns: minmax(0, 420px) 1fr; align-items: stretch; }
  .venue img { aspect-ratio: 3 / 2; height: 100%; min-height: 0; }
}
@media (max-width: 860px) {
  .venue img { aspect-ratio: 3 / 2; min-height: 0; }
}