/* Lisbon Value, brand kit rules.
   White page, black text. Atlantic Green is the only dark background (white text).
   The wordmark is green on white and white on green. Gold is used for buttons only (white label).
   Oswald for headlines, Lexend for everything else. No gradients, patterns or serifs. */

@font-face { font-family: "Oswald"; src: url("/fonts/oswald-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("/fonts/oswald-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("/fonts/lexend-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("/fonts/lexend-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --white: #FFFFFF;
  --black: #000000;
  --ink: #10282B;     /* text colour: Atlantic Green */
  --green: #10282B;   /* Atlantic Green */
  --gold: #B18D57;    /* Antique Gold */
  --line: #D9DEDD;    /* Soft Grey */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: "Lexend", Arial, Helvetica, sans-serif;
  font-size: 18px; line-height: 1.6;
}
a { color: inherit; }
h1, h2, h3 { font-family: "Oswald", Arial, Helvetica, sans-serif; font-weight: 500; line-height: 1.15; margin: 0 0 .5em; }

/* Wordmark (Optima placeholder logo) */
.wordmark {
  font-family: Optima, "Optima Nova", Candara, "Segoe UI", Arial, sans-serif;
  font-weight: 400; text-transform: uppercase;
  letter-spacing: .26em; padding-left: .26em;
  text-decoration: none; color: var(--green);
  font-size: 28px; white-space: nowrap;
}
.wordmark.on-green { color: var(--white); font-size: 24px; }

/* Header: white bar, wordmark left, menu right */
.top {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  min-height: 92px; padding: 12px 32px;
  background: var(--white); border-bottom: 1px solid var(--line);
}
.menu { display: flex; align-items: center; gap: 26px; }
.menu > a {
  text-decoration: none; color: var(--ink);
  font-size: 16px; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.menu > a:hover, .menu > a[aria-current="page"] { border-bottom-color: var(--ink); }
.lang { display: flex; border: 1px solid var(--ink); }
.lang a { display: block; padding: 6px 12px; text-decoration: none; font-weight: 600; font-size: 16px; letter-spacing: .06em; color: var(--ink); }
.lang a[aria-current="true"] { background: var(--ink); color: var(--white); }
.nav-toggle, .nav-burger { display: none; }

/* Carousel (Ritz style): full-width photos, headline that changes with the picture */
.carousel { position: relative; height: clamp(440px, 78vh, 820px); background: var(--green); overflow: hidden; }
.slides, .slide { position: absolute; inset: 0; }
.slide { opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s linear 1s; }
.slide.is-active { opacity: 1; visibility: visible; transition: opacity 1s ease; }
.slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); display: block; }
.slide::after { content: ""; position: absolute; inset: 0; background: rgba(16, 40, 43, .30); } /* flat tint, no gradient */
.caption { position: absolute; z-index: 2; left: 5vw; top: 12%; right: 5vw; max-width: 760px; }
.headline {
  margin: 0 0 30px; color: var(--white);
  font-family: "Oswald", Arial, sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(32px, 5.4vw, 76px); line-height: 1.06; letter-spacing: .01em;
}
.slide:not(.is-active) .btn { pointer-events: none; }

/* Progress bar: one segment per picture */
.progress { position: absolute; z-index: 3; left: 5vw; right: 5vw; bottom: 24px; display: flex; gap: 10px; }
.progress button { flex: 1; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.progress button span { display: block; width: 100%; height: 3px; background: rgba(255, 255, 255, .5); }
.progress button[aria-current="true"] span { background: var(--white); height: 4px; }
.progress button:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }

/* Intro and buttons */
.intro { text-align: center; padding: 56px 16px 72px; max-width: 760px; margin: 0 auto; }
.intro h1 { font-size: clamp(32px, 5vw, 52px); text-transform: uppercase; letter-spacing: .02em; }
.when { font-family: "Oswald", Arial, sans-serif; font-weight: 400; font-size: clamp(20px, 3vw, 26px); margin: 0 0 32px; line-height: 1.4; }
.actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin: 0; }

.btn {
  display: inline-block; background: var(--gold); color: var(--white);
  border: 0; border-radius: 0; padding: 18px 32px;
  font-family: "Lexend", Arial, sans-serif; font-weight: 600; font-size: 16px;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.btn:hover { text-decoration: underline; text-underline-offset: 4px; }
.btn:focus-visible, .lang a:focus-visible, .menu > a:focus-visible, input:focus-visible, .x:focus-visible, .nav-burger:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.slide .btn:focus-visible { outline-color: var(--white); }

/* Content pages */
.page { max-width: 760px; margin: 0 auto; padding: 56px 16px 72px; }
.page h1 { font-size: clamp(32px, 5vw, 48px); text-transform: uppercase; }
.page h2 { font-size: 26px; margin-top: 2em; }
.lead { font-size: 20px; }
.hosts { display: grid; gap: 28px; }
.hosts h3 { font-size: 22px; margin-bottom: .2em; }
.hosts p { margin: 0; }
.page .actions { justify-content: flex-start; margin-top: 40px; }
.page.center { text-align: center; }
.page.center .actions { justify-content: center; }

/* Big Event teaser on the first page: same margins as the collage */
.teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; max-width: 1160px; margin: 0 auto; padding: 64px 16px 0; }
.teaser:last-of-type { padding-bottom: 96px; }
.teaser-img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 55%; }
.teaser.flip .teaser-img { order: 2; }
.teaser-text h1 { font-size: clamp(30px, 4vw, 44px); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 .4em; }
.teaser-text .when { margin: 0 0 28px; font-size: 22px; }
.teaser-text h2 { font-size: clamp(30px, 4vw, 44px); text-transform: uppercase; letter-spacing: .02em; margin-top: 0; }
.teaser-text p { margin: 0 0 28px; font-size: 20px; }
.teaser-text .actions { justify-content: flex-start; margin: 0; }
@media (max-width: 760px) {
  .teaser { grid-template-columns: 1fr; gap: 28px; padding-top: 48px; }
  .teaser:last-of-type { padding-bottom: 72px; }
  .teaser.flip .teaser-img { order: 0; }
}

/* Collage: picture and text, alternating sides */
.rows { max-width: 1160px; margin: 0 auto; padding: 56px 16px 72px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 72px; }
.row:first-child { margin-top: 0; }
.row figure { margin: 0; }
.row img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.row.flip figure { order: 2; }
.row figure.full img { aspect-ratio: 3 / 4; }
.row figure.group img { aspect-ratio: 2 / 3; object-position: 50% 0%; }
.row figure.portrait img { aspect-ratio: 4 / 5; object-position: 50% 28%; }
.row.flip figure.portrait img { object-position: 50% 20%; }
.row.solo { margin-top: 40px; }
.row.solo .text { grid-column: 2; }
.row .text h3 { font-size: 24px; margin: 1.4em 0 .3em; }
.row .text h2 + h3 { margin-top: .4em; }
.row.solo .text h3 { margin-top: 0; }
@media (max-width: 640px) { .row.solo .text { grid-column: 1; } }
.row .text h1 { font-size: clamp(32px, 4.5vw, 48px); text-transform: uppercase; }
.row .text h2 { font-size: 30px; text-transform: uppercase; margin-top: 0; }
.row .text .actions { justify-content: flex-start; margin-top: 32px; }
@media (max-width: 640px) {
  .row { grid-template-columns: 1fr; gap: 24px; margin-top: 56px; }
  .row figure, .row.flip figure { order: 2; }
  .row img { aspect-ratio: 4 / 3; }
}

/* About: introduction above both pictures */
.about-intro { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.row.top { align-items: start; }
.row.compact { grid-template-columns: minmax(200px, 300px) 1fr; justify-content: start; }
.row.compact img { aspect-ratio: 4 / 5; }
@media (max-width: 640px) { .row.compact { grid-template-columns: 1fr; } .row.compact figure { max-width: 300px; } }
.row.top .text h3 { margin-top: 0; }
.about-intro h1 { font-size: clamp(32px, 4.5vw, 48px); text-transform: uppercase; }
.about-intro p { margin: 0 0 16px; }
.hosts-title { font-family: "Oswald", Arial, sans-serif; font-size: 30px; text-transform: uppercase; text-align: center; margin: 56px 0 40px; }
.about-intro + .hosts-title + .row { margin-top: 0; }

/* Dinner page: tall picture beside the text (older layout) */
.split { display: grid; grid-template-columns: minmax(200px, 5fr) 7fr; gap: 40px; max-width: 1160px; margin: 0 auto; padding: 56px 16px 72px; align-items: start; }
.split .tall { display: grid; gap: 16px; }
.split .tall img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 50%; }
.split .content h1 { font-size: clamp(32px, 4.5vw, 48px); text-transform: uppercase; }
.split .content h2 { font-size: 26px; margin-top: 2em; }
.split .content .actions { justify-content: flex-start; margin-top: 40px; }
@media (max-width: 640px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split .tall { order: 2; grid-template-columns: 1fr 1fr; gap: 12px; }
  .split .tall img { aspect-ratio: 3 / 4; }
}

/* Dinner page */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px 32px; margin: 32px 0 8px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts div { margin: 0; }
.facts dt { font-weight: 600; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }
.facts dd { margin: 4px 0 0; font-family: "Oswald", Arial, sans-serif; font-size: 22px; line-height: 1.3; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: flex; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--gold); }
.timeline .t { font-family: "Oswald", Arial, sans-serif; font-size: 22px; min-width: 96px; }
.bring { padding-left: 1.4em; margin: 0; }
.bring li { margin: 0 0 10px; }
.note { font-size: 16px; margin-top: 16px; }
.page .actions + .note { text-align: left; }
form.inline { margin-top: 28px; max-width: 520px; }
form.inline label { display: block; font-weight: 600; margin: 0 0 6px; }
form.inline input[type="email"] { width: 100%; padding: 14px 12px; font: inherit; font-size: 18px; border: 1px solid var(--ink); border-radius: 0; background: var(--white); color: var(--ink); }

/* Form helpers */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
label.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 16px; margin: 20px 0 24px; }
label.check input { width: 22px; height: 22px; margin: 3px 0 0; flex: none; accent-color: var(--ink); }
dialog input[type="text"], form.inline input[type="text"] { width: 100%; padding: 14px 12px; font: inherit; font-size: 18px; border: 1px solid var(--ink); border-radius: 0; background: var(--white); color: var(--ink); }

.names { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .names { grid-template-columns: 1fr; gap: 0; } }

/* Email dialog */
dialog { border: 0; padding: 0; max-width: 520px; width: calc(100% - 32px); color: var(--ink); background: var(--white); }
dialog::backdrop { background: rgba(16, 40, 43, .72); }
dialog form, dialog .ok { padding: 40px 32px 32px; margin: 0; position: relative; }
dialog h2 { font-size: 30px; text-transform: uppercase; }
dialog label { display: block; font-weight: 600; margin: 20px 0 6px; }
dialog input[type="email"] { width: 100%; padding: 14px 12px; font: inherit; font-size: 18px; border: 1px solid var(--ink); border-radius: 0; background: var(--white); color: var(--ink); }
.small { font-size: 16px; margin: 16px 0 24px; }
.x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; background: none; border: 0; font-size: 32px; line-height: 1; cursor: pointer; color: var(--ink); }

/* Footer: Atlantic Green with white text */
.foot { background: var(--green); color: var(--white); text-align: center; padding: 48px 16px; }
.foot p { margin: 14px 0 0; font-size: 16px; }
.foot a { color: var(--white); }

@media (max-width: 1220px) {
  .top { padding: 12px 16px; }
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 7px;
    width: 52px; height: 52px; padding: 0 12px; cursor: pointer;
  }
  .nav-burger span { display: block; height: 3px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
  .nav-toggle:checked + .nav-burger span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
  .nav-toggle:checked + .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked + .nav-burger span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line); z-index: 10;
  }
  .nav-toggle:checked ~ .menu { display: flex; }
  .menu > a { padding: 18px 16px; border-bottom: 1px solid var(--line); }
  .menu > a[aria-current="page"] { font-weight: 600; border-bottom-color: var(--line); }
  .lang { margin: 16px; align-self: flex-start; }
}
@media (max-width: 520px) {
  .wordmark { font-size: 18px; letter-spacing: .18em; padding-left: .18em; }
  .btn { width: 100%; text-align: center; }
  .caption { top: 9%; }
}
@media (prefers-reduced-motion: reduce) {
  .slide, .slide.is-active { transition: none; }
}


/* ===== Chessboard: pictures to the edge, touching, text tiles alternate white and warm ivory ===== */
:root { --ivory: #FBF8F2; --sand: #D8CCBA; }
.rows { max-width: none; margin: 0; padding: 0; }
.rows .row, .rows .teaser {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch;
  max-width: none; margin: 0; padding: 0;
  min-height: clamp(420px, 46vw, 700px);
}
.rows .teaser:last-of-type { padding-bottom: 0; }
.rows .row figure, .rows .teaser-img { margin: 0; position: relative; overflow: hidden; min-height: 320px; }
.rows .row figure img, .rows .teaser-img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  aspect-ratio: auto; object-fit: cover; object-position: 50% 50%;
}
.rows .row figure.portrait img { object-position: 50% 25%; }
.rows .row figure.group img { object-position: 50% 0%; }
.rows .row.flip figure, .rows .teaser.flip .teaser-img { order: 2; }
.rows .row .text, .rows .teaser-text {
  background: var(--white);
  padding: clamp(32px, 6vw, 96px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.rows .row.tint .text, .rows .teaser.tint .teaser-text { background: var(--sand); }
.rows .row.top .text { justify-content: flex-start; }
.rows .row .text .actions, .rows .teaser-text .actions { justify-content: flex-start; }
.rows .about-intro { padding: 56px 16px 64px; margin: 0 auto; }
@media (max-width: 760px) {
  .rows .row, .rows .teaser { grid-template-columns: 1fr; min-height: 0; }
  .rows .row figure, .rows .teaser-img { height: 320px; min-height: 0; order: 0; }
  .rows .row.flip figure, .rows .teaser.flip .teaser-img { order: 0; }
  .rows .row .text, .rows .teaser-text { padding: 40px 20px; }
}

/* Closing: one more large photo, a row of five, Cascais Sand footer (as the Ritz) */
.rows .wide { margin: 0; line-height: 0; }
.rows .wide img { width: 100%; height: 62vh; min-height: 320px; max-height: 720px; object-fit: cover; display: block; }
.rows .strip { background: var(--white); padding: 56px 16px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; line-height: 0; }
.rows .strip img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.foot { background: var(--sand); color: var(--green); padding: 56px 16px 48px; }
.foot a { color: var(--green); }
@media (max-width: 760px) {
  .rows .strip { grid-template-columns: repeat(2, 1fr); padding: 32px 16px; }
  .rows .strip figure:last-child { grid-column: 1 / -1; }
  .rows .strip figure:last-child img { aspect-ratio: 2 / 1; }
}

/* Where the last row is sand, the footer is Atlantic Green so sand never runs into sand */
.rows:has(> .tint:last-child) ~ .foot { background: var(--green); color: var(--white); }
.rows:has(> .tint:last-child) ~ .foot a { color: var(--white); }
.rows:has(> .tint:last-child) ~ .foot .wordmark { color: var(--white); }

/* Reserve banner: whole photo, flat Atlantic Green veil so the white text reads (no gradient) */
.rows .wide.reserve { position: relative; }
.rows .wide.reserve img { height: auto; min-height: 0; max-height: none; aspect-ratio: 3 / 2; }
.rows .wide.reserve::after { content: ""; position: absolute; inset: 0; background: rgba(16, 40, 43, .5); }
.rows .wide.reserve .reserve-text { position: absolute; z-index: 2; left: 5vw; right: 5vw; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: 760px; line-height: 1.6; color: var(--white); will-change: transform; }

/* Newsletter form: checkbox with space to its text, normal weight, air between fields */
form.inline label { margin-top: 18px; }
form.inline .names label { margin-top: 0; }
form.inline label.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 16px; margin: 20px 0 24px; }
.rows .wide.reserve .actions { justify-content: flex-start; margin: 0; }

/* Strip: text tile slides in over the picture on hover, focus or tap (as on the Ritz site) */
.rows .strip figure { position: relative; margin: 0; overflow: hidden; line-height: 0; }
.rows .strip figure img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.rows .strip figcaption {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start;
  padding: 24px; background: var(--ivory); color: var(--ink); line-height: 1.5; text-align: left;
  font-family: "Lexend", Arial, Helvetica, sans-serif; font-weight: 400; font-size: clamp(15px, 1.2vw, 18px);
  opacity: 0; transition: opacity .35s ease;
}
.rows .strip figure:hover figcaption, .rows .strip figure:focus figcaption, .rows .strip figure:focus-within figcaption { opacity: 1; }
.rows .strip figure:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
@media (hover: none) { .rows .strip figure:active figcaption { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rows .strip figcaption { transition: none; } }

.caption { will-change: transform; }

/* Links to the hosts' own organisations inside the About text */
.rows .text a.ext { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rows .text a.ext:hover { text-decoration-thickness: 2px; }

.foot .disclaimer { font-size: 14px; opacity: .85; margin: 14px 0 0; }

.page h2 { font-size: 24px; margin: 36px 0 8px; }
.page h2 + p { margin-top: 0; }