.event-poster img {
  content: url("/assets/events/better-together-community-v1.png");
}

.city-paris {
  background-image: url("/assets/floq-guide-editorial-v1.jpg") !important;
  background-position: center 58% !important;
}

.journal-main {
  background-image: url("/assets/journal-slow-sunday-persona-v1.jpg") !important;
  background-position: center 56% !important;
}

.story-1 {
  background-image: url("/assets/journal-cafe-persona-v1.jpg") !important;
  background-position: center !important;
}

.story-4 {
  background-image: url("/assets/journal-curation-persona-v1.jpg") !important;
  background-position: center !important;
}

.newsletter-photo {
  background-image: url("/assets/floq-guide-editorial-v1.jpg") !important;
  background-position: 42% 58% !important;
}

/* The Circle: a deliberate final chapter rather than a narrow status strip. */
.newsletter {
  min-height: clamp(420px, 36vw, 570px);
  grid-template-columns: minmax(330px, .9fr) minmax(420px, 1.1fr) !important;
  gap: clamp(42px, 7vw, 110px) !important;
  padding: clamp(38px, 5vw, 76px) 5vw !important;
  overflow: hidden;
}

.newsletter-photo {
  height: 100% !important;
  min-height: 330px;
  filter: saturate(.72) contrast(.96);
}

.newsletter > div:nth-child(2) {
  max-width: 670px;
}

.newsletter > div:nth-child(2) h2 {
  margin: 0 0 22px !important;
  font: 400 clamp(48px, 6vw, 86px)/.96 var(--serif) !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
}

.newsletter > div:nth-child(2) > p:not(.eyebrow):not(.newsletter-status) {
  max-width: 590px;
  margin: 0 0 28px;
  color: #ddd4ca;
  font: 400 clamp(16px, 1.6vw, 22px)/1.55 var(--serif);
}

.newsletter .newsletter-status {
  display: inline-flex;
  align-items: center;
  min-height: 35px;
  width: auto;
  margin: 0 0 23px !important;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px;
  color: #f5eee6;
  font: 600 8px/1 var(--sans) !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.circle-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.2);
}

.circle-benefits span {
  color: #cfc3b7;
  font: 500 8px/1.4 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.circle-benefits span:before {
  content: "♡";
  margin-right: 7px;
  color: #d2a184;
}

.coco-1 {
  background-image: url("/assets/coco/coco-paris-cafe-v4.jpg") !important;
}

.coco-2 {
  background-image: url("/assets/coco/coco-paris-walk-v3.jpg") !important;
}

.coco-3 {
  background-image: url("/assets/coco/coco-paris-window-v3.jpg") !important;
}

.coco-text .outline-button,
.floq-objects-copy .outline-button {
  background: var(--dark) !important;
  border-color: var(--dark) !important;
  color: #fff !important;
}

.floq-objects-copy .outline-button {
  align-self: flex-start;
  width: auto !important;
  min-width: 0 !important;
  padding: 1rem 1.5rem !important;
}

.newsletter > div:nth-child(2) .eyebrow {
  margin: 0 0 16px;
  color: inherit;
  opacity: .72;
}

.newsletter > div:nth-child(2) h2 {
  margin-top: 0;
}

@media (max-width: 760px) {
  .hero > img {
    object-position: 64% center;
  }

  .newsletter {
    min-height: 0;
    display: block !important;
    padding: 0 0 52px !important;
  }

  .newsletter-photo {
    display: block !important;
    min-height: 360px;
    margin-bottom: 42px;
    background-position: 42% center !important;
  }

  .newsletter > div:nth-child(2) {
    padding: 0 20px;
  }
}

/* Compact newsletter expression for The Circle. */
.newsletter.circle-newsletter {
  min-height: 310px !important;
  grid-template-columns: minmax(240px, .7fr) minmax(440px, 1.3fr) !important;
  gap: clamp(34px, 5vw, 76px) !important;
  padding: 34px 5vw !important;
}

.circle-newsletter .newsletter-photo {
  min-height: 240px !important;
  height: 240px !important;
}

.circle-newsletter > div:nth-child(2) h2 {
  margin-bottom: 13px !important;
  font-size: clamp(38px, 4.4vw, 62px) !important;
}

.circle-newsletter > div:nth-child(2) > p:not(.eyebrow):not(.circle-signup-status) {
  max-width: 660px;
  margin-bottom: 20px;
  font-size: clamp(14px, 1.3vw, 18px);
}

.circle-signup {
  display: flex;
  max-width: 620px;
}

.circle-signup input,
.circle-signup button {
  min-height: 48px;
  border: 1px solid #6f685f;
  font: 500 9px/1 var(--sans);
}

.circle-signup input {
  min-width: 0;
  flex: 1;
  padding: 0 15px;
  background: #faf7f1;
  color: var(--ink);
}

.circle-signup button {
  padding: 0 20px;
  background: #faf7f1;
  color: var(--ink);
  letter-spacing: .11em;
  text-transform: uppercase;
  cursor: pointer;
}

.circle-signup-status {
  min-height: 18px;
  margin: 10px 0 0 !important;
  color: #d2a184 !important;
  font: 500 10px/1.4 var(--sans) !important;
}

.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Give the homepage photograph a little more room below its subjects. */
@media (min-width: 761px) {
  .hero {height: min(61vw, 728px); min-height: 598px}
}

@media (max-width: 760px) {
  .newsletter.circle-newsletter {display:block !important;padding:42px 20px !important}
  .circle-newsletter .newsletter-photo {display:none !important}
  .circle-signup {display:block}
  .circle-signup input,.circle-signup button {width:100%}
  .circle-signup button {margin-top:8px}
}