/* ============================================================
   Victoria and Alex — 15 May 2027
   SWAP POINTS: when Lorie's files arrive, change only :root below.
   ============================================================ */

:root {
  /* --- colour: green is the only colour on this site --- */
  --green:        #1E3930;   /* Colorplan Racing Green — Separation "Colorplan Racing Green", DeviceCMYK 85/51/71/54 */
  --green-deep:   #16291F;   /* darker step of the same hue, for the password screen */
  --paper:        #F2EFE9;   /* warm cream, matched to the reference */
  --ink:          #111111;
  --ink-soft:     #4A4A4A;
  --hair:         rgba(17,17,17,.16);
  --hair-light:   rgba(255,255,255,.28);

  /* --- type: all three are stand-ins --- */
  --font-script:  "Olde European", Georgia, cursive;   /* names, page titles, event names */
  --font-serif:   'Cormorant Garamond', Georgia, serif;  /* body copy */
  /* Mrs Eaves, served by Adobe Fonts (use.typekit.net/mwk1ppk.css).
     --font-caps is the Petite Caps cut, used ONLY where text is set in
     capitals. --font-roman is the plain roman, for anything sentence-case,
     since feeding lowercase to a petite-caps face turns it into capitals.
     Each stack lists the likely Adobe CSS names; confirm on the Web Projects
     page and delete the ones that don't apply. */
  --font-caps:    "mrs-eaves-roman-petite-caps", "mrs-eaves-petite-caps",
                  Georgia, serif;
  --font-roman:   "mrs-eaves", "mrs-eaves-roman", Georgia, serif;
  --font-sans:    var(--font-caps);   /* alias: most uses are capitals */

  --measure: 62rem;
  --shell: 68rem;
  --gutter: clamp(1.25rem, 3.2vw, 3rem);
}

@font-face {
  font-family: "Olde European";
  src: url("olde-european.woff2") format("woff2"),
       url("olde-european.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  /* block, not swap: a brief blank is better than watching the names change
     face after the page has already painted */
  font-display: block;
}

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

/* Limewash ground. The plain url() comes first so the JPEG always loads;
   image-set() upgrades to WebP where supported. */
.lime {
  background-color: var(--green-deep);
  background-image: url("limewash.jpg");
  background-image: image-set(
    url("limewash.webp") type("image/webp"),
    url("limewash.jpg")  type("image/jpeg"));
  background-size: cover;
  background-position: center;
}

/* Sized so the default view matches what 80% browser zoom used to show. */
html { font-size: 80%; scroll-behavior: smooth; }
html { -webkit-text-size-adjust: 100%; }

/* a short page still pushes its footer to the bottom of the screen */
body.inner #site {
  min-height: calc(100vh - 5.4rem);   /* the body reserves that for the bar */
  display: flex;
  flex-direction: column;
}
/* an explicit width stops the flex item sizing itself to the tab bar's
   intrinsic width, which would push the page wider than the screen */
body.inner #site > main { flex: 1 0 auto; width: 100%; min-width: 0; }
body.inner #site > footer { flex: none; }

html { overflow-x: clip; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 0.42vw + 1.1rem, 1.36rem);
  font-weight: 400;
  line-height: 1.72;
}

img { max-width: 100%; height: auto; filter: grayscale(1); }

a { color: inherit; }

:focus-visible { outline: 1.5px solid currentColor; outline-offset: 3px; }

/* ---------- monogram (placeholder until the real mark arrives) ---------- */

.mono, .fmono, .gate-mono {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
  color: inherit;
}
.mono svg, .fmono svg, .gate-mono svg {
  display: block;
  height: 100%;
  width: auto;
}
/* sizes are set by height; the artwork keeps its own 428:562 ratio */
.mono   { height: 3.1rem; }
.fmono  { height: 4rem; }
.gate-mono { height: clamp(11rem, 26vw, 19rem); margin: 0 auto clamp(2rem, 4vh, 3rem); }

/* ============================================================
   HOME — the site opens as the invitation itself
   ============================================================ */

.homeground {
  /* single surface so the texture runs unbroken from the top of the page to
     the photographs; two elements each with background-size:cover restart and
     rescale the image, which read as two different washes */
  background-attachment: local;
}

.invite {
  min-height: 100svh;
  padding-block: clamp(1.5rem, 3.2vh, 2.5rem) 0;
  color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(2.5rem, 5.6vw, 5rem) var(--gutter) clamp(1.5rem, 3.2vw, 2.5rem);
  position: relative;
  text-align: center;
}

.invite::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 45%,
              rgba(16,32,24,.5), rgba(16,32,24,.12) 72%, transparent);
  pointer-events: none;
}
.invite > * { position: relative; z-index: 1; }

.invite-top {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: clamp(1.75rem, 4vh, 3rem);
}
.invite-top .invite-nav { grid-column: 2; }
.invite-top .lang { grid-column: 3; justify-self: end; }

.invite-names { margin-top: var(--mono-space); }

.invite-inner {
  /* equal space above and below the monogram, so it reads centred between the
     nav and the names rather than pinned to the top */
  --mono-space: clamp(2.5rem, 7vh, 5.5rem);
  width: 100%;
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: clamp(3rem, 8vh, 7rem);
}

/* Victoria's layout: an unframed vertical stack with the monogram set high,
   the names as the centre of gravity, and open air between each group. */
.invite-inner .rsvpline { margin-top: clamp(4.5rem, 12vh, 9rem); }
.invite-inner .countdown { margin-top: clamp(3rem, 8vh, 6rem); }

.mono.big { height: clamp(11rem, 26vw, 19rem); margin-top: var(--mono-space); }

.names {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(3.5rem, 9vw, 6.8rem);
  line-height: 1.18;
  margin: 0 0 clamp(1.5rem, 3.2vh, 2.4rem);
}

.invite .date, .invite .place {
  font-family: var(--font-sans);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: clamp(1.05rem, 1.4vw, 1.28rem);
  margin: .35rem 0;
  text-wrap: balance;
}
.invite .place { opacity: .8; }

.rsvpline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  opacity: .92;
  margin: 0;
}

.countdown { margin-top: 0; }
.cd-num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 4.8vw, 3.6rem);
  line-height: 1;
}
.cd-label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 1.133rem;
  margin-top: .7rem;
  opacity: .82;
}

.invite-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 2.4vw, 2.1rem);
}
#site .invite-nav a {
  font-family: var(--font-sans);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .17em;
  font-size: 1.172rem;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
.invite-nav a:hover { border-bottom-color: var(--hair-light); }

.lang {
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  font-family: var(--font-sans);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .17em;
  font-size: .78rem;
  text-decoration: none;
}


/* two black-and-white photographs, green beneath */
.solo {
  padding-block: clamp(1rem, 3.2vh, 2.5rem) clamp(4rem, 9.6vh, 8rem);
  padding-inline: max(var(--gutter), calc((100% - 74rem) / 2));
}
.ph {
  position: relative;
  margin: 0;
  overflow: hidden;
}
/* a hairline sitting just inside the photograph's edge */
.ph::after {
  content: "";
  position: absolute;
  inset: clamp(9px, 1.1vw, 15px);
  border: 1px solid rgba(255,255,255,.6);
  pointer-events: none;
}
.ph img, .ph picture { display: block; width: 100%; height: auto; }
.ph img { object-fit: cover; }
/* the home photograph keeps its own 3:2 proportions */
.solo .ph img { aspect-ratio: 3 / 2; }
.ph span {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 0.859rem;
  color: #9A9A96;
}
@media (max-width: 760px) {
  .invite-top { grid-template-columns: 1fr; justify-items: center; gap: 1rem; }
  .invite-top .invite-nav, .invite-top .lang { grid-column: 1; justify-self: center; }
  .invite-top .lang { order: -1; }
}
@media (max-width: 620px) {
}

/* ============================================================
   INTERIOR PAGES
   ============================================================ */

/* the page title sits in a limewash band */
.titleband {
  color: #fff;
  justify-content: center;
  /* full width across the top; the title is indented so it lines up with the
     body copy below */
  width: 100%;
  padding-block: clamp(2.75rem, 5.6vw, 5rem);
  margin-bottom: clamp(1rem, 2.4vw, 2rem);
  display: flex;
  align-items: center;
}
.titleband .ptitle {
  text-align: center;
  font-family: var(--font-script);
  font-weight: 400;
  /* never wraps: the size scales down before the line breaks */
  white-space: nowrap;
  font-size: clamp(1.9rem, 5.6vw, 5.6rem);
  line-height: 1.25;
  margin: 0;
  padding-inline: var(--gutter);
  width: 100%;
}

/* ---------- floating navigation bar ---------- */

.stickynav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: clamp(.6rem, 1.4vw, 1.5rem);
  padding: 1.6rem var(--gutter);
  color: #fff;
  background-color: var(--green-deep);
  background-image: url("limewash.jpg");
  background-size: cover;
  background-position: center;
  border-bottom: 0;
  /* a light rule along the bottom edge, so the bar reads as separate from
     the green below it. Measured off the design: white at about 35%. */
  box-shadow: inset 0 -1px 0 0 rgba(255,255,255,.35);
}
.stickynav { position: fixed; }

.stickynav .mono { height: 3.2rem; color: #fff; flex: none; }
.stickynav .barname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; color: #fff; }
.stickynav .navmore span { background: #fff; }
.stickynav .lang a { color: #fff; }
.stickynav .lang i { color: rgba(255,255,255,.55); }

.barleft { display: flex; align-items: center; gap: .85rem; }

/* hamburger, shown only when the links don't fit */
.navmore {
  flex: none;
  background: none;
  border: 0;
  padding: .45rem .2rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 1.6rem;
}
.navmore span {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--ink);
  transition: transform .22s ease, opacity .22s ease;
}
.navmore[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.navmore[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navmore[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
/* the bar names the page you're on; every link lives in the menu */
.barname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  /* the page name is the one place in the bar set in script; the links and
     the language toggle stay in the caps face */
  font-family: var(--font-script);
  text-transform: none;
  letter-spacing: .01em;
  font-size: clamp(1.75rem, 2.6vw, 2.4rem);
  /* the script has deep descenders; overflow is hidden for truncation, so
     the line box has to be tall enough or the tails of q and y are cut */
  line-height: 1.55;
  padding-block: .1rem;
  font-weight: 400;
  color: var(--ink);
  min-width: 0;
}

.navoverflow a {
  font-family: var(--font-caps);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 1.211rem;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

/* --- 19: EN / ES with the active side marked --- */
.lang { display: inline-flex; align-items: baseline; gap: .3rem; flex: none; }
.lang a {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: .12em;
  font-size: 1.055rem;
  text-decoration: none;
  color: var(--ink);
  opacity: .42;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.lang a.on { opacity: 1; border-bottom-color: currentColor; }
.lang a:hover { opacity: .8; }
.lang i { font-style: normal; opacity: .3; font-size: .78rem; }
.invite .lang a { color: #fff; }

/* --- 22: chevron revealing whatever didn't fit --- */
.navmore {
  flex: none;
  background: none;
  border: 0;
  padding: .3rem;
  cursor: pointer;
  color: var(--ink);
  line-height: 0;
}
.navoverflow[hidden] { display: none !important; }
.navoverflow {
  position: absolute;
  top: 100%;
  left: var(--gutter);
  min-width: 15rem;
  z-index: 41;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-top: 0;
  padding: .5rem 0;
  display: flex;
  flex-direction: column;
}
.navoverflow a {
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 1.12rem;
  text-decoration: none;
  color: var(--ink);
  padding: .6rem 1.25rem;
}
.navoverflow a:hover { background: rgba(0,0,0,.04); }
.navoverflow a.on { text-decoration: underline; text-underline-offset: 4px; }

/* the bar is fixed, so every page needs clearance beneath it */
body.inner { padding-top: 5.4rem; }
@media (max-width: 700px) {
  .stickynav .mono { height: 2.7rem; }
  .stickynav nav a, .navoverflow a { font-size: .84rem; }
  body.inner { padding-top: 4.6rem; }
}

.page {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(3rem, 5.6vw, 4.5rem) var(--gutter) clamp(4rem, 7.2vw, 6.5rem);
}
.page.narrow { max-width: var(--shell); }

.ptitle {
  text-align: center;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(3.2rem, 7.2vw, 5.4rem);
  line-height: 1.22;
  text-align: center;
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
}

.lede {
  text-align: left;
  font-style: italic;
  font-size: 1.15rem;
  max-width: 34rem;
  margin: 0 0 clamp(2.5rem, 5.6vw, 4rem);
}

.page > p,
.sect > p,
.foldbody p,
.getting p { text-align: justify; hyphens: auto; }
/* short blurbs sit in narrow columns where justification opens rivers */
.qa .foldbody p { text-align: left; hyphens: manual; }
.place p, .eatery p, .stay p { text-align: justify; hyphens: auto; }
.page .contact { text-align: left; hyphens: manual; }
.page .sig, .page .lab, .page .rate { text-align: left; hyphens: manual; }

.sect { margin-bottom: clamp(2.75rem, 5vw, 4.25rem); }
.sect:last-child { margin-bottom: 0; }

/* sub-groups within a section (day trips, dining, coffee, nightlife) */
.group { margin-top: clamp(2.25rem, 3.6vw, 3rem); }
.group:first-of-type { margin-top: clamp(2rem, 3.2vw, 2.5rem); }
.sect > p { max-width: none; }

.shead {
  /* section headings in the script face, as the design sets them: sentence
     case, no rule beneath */
  font-family: var(--font-script);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
  line-height: 1.22;
  color: var(--green);
  margin: 0 0 1rem;
  padding-bottom: 0;
  border-bottom: 0;
}

.subhead {
  font-family: var(--font-sans);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 1.45rem;
  margin: 0 0 1rem;
  color: var(--ink);
}

.page h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.65rem;
  line-height: 1.25;
  margin: 2rem 0 .5rem;
}
.page h3 + p { margin-top: 0; }



/* --- schedule: vertical timeline --- */

.timeline {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-left: clamp(1.75rem, 4vw, 3.25rem);
}
/* the connecting rule, drawn from the first marker to the last */
.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  bottom: 0;
  width: 1px;
  background: var(--hair);
}

.event {
  position: relative;
  padding-bottom: clamp(3rem, 6.4vw, 5rem);
}
.event:last-child { padding-bottom: 0; }

/* the marker sits on the rule, level with the event name */
.ename::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(1.75rem, 4vw, 3.25rem) - 5px);
  top: .52em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
}

.event > * { text-align: left; }

.eday {
  font-family: var(--font-sans);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 1.25rem;
  color: var(--ink-soft);
  margin: 0 0 .7rem;
}

.ename {
  position: relative;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.7rem, 5.4vw, 3.9rem);
  line-height: 1.22;
  margin: 0 0 1.1rem;
}


.event .note { margin-top: 1.25rem; }
.event .note p, .event > p:not(.eday):not(.venue):not(.time):not(.dress):not(.btnrow) {
  text-align: left;
  hyphens: manual;
  max-width: 40rem;
}
.event .note p { font-style: italic; color: var(--ink-soft); }

@media (max-width: 620px) {
  .timeline { padding-left: 1.5rem; }
  .ename::before { left: calc(-1.5rem - 4.5px); width: 9px; height: 9px; }
}

/* --- 27: event details as labelled rows --- */

.details {
  margin: 0 0 1.5rem;
  display: grid;
  gap: .55rem;
  max-width: 34rem;
}
.drow {
  display: grid;
  grid-template-columns: 11.5rem 1fr;
  gap: .5rem 1.25rem;
  align-items: baseline;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--hair);
}
.drow dt {
  font-family: var(--font-sans);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 1.211rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.drow dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.22rem;
  line-height: 1.45;
}
/* the detail guests check most often, so it carries the most weight */
.drow-dress {
  border-bottom: 0;
  margin-top: .35rem;
  padding: .8rem 1rem;
  background: rgba(30,57,48,.06);
  grid-template-columns: 10.5rem 1fr;
}
.drow-dress dt { color: var(--green); font-size: 1.211rem; }
.drow-dress dd {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 1.406rem;
  color: var(--green);
}

@media (max-width: 560px) {
  .drow, .drow-dress { grid-template-columns: 1fr; gap: .15rem; }
  .drow-dress { padding: .7rem .85rem; }
}

/* provisional detail, distinct from the [TBD] gap marker */
.drow-note { border-bottom: 0; padding-bottom: 0; margin-top: .1rem; }
.prov {
  font-family: var(--font-sans) !important;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 0.977rem !important;
  color: var(--ink-soft);
}
.prov::before { content: "\2022\00a0\00a0"; }

/* TEMPORARY — identifies the running build without opening developer tools.
   Delete this rule, the div in generate.py and the title suffix before the
   site goes live. */
.buildbadge {
  position: fixed;
  left: 0; bottom: 0;
  z-index: 9999;
  background: #B3261E;
  color: #fff;
  font-family: Menlo, monospace;
  font-size: 12px;
  letter-spacing: .08em;
  padding: 6px 12px;
  pointer-events: none;
}

/* --- RSVP form --- */

.step[hidden] { display: none !important; }
.step { animation: fadein .3s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* the counter is gone; the title now opens each step */
.step > .steptitle { margin-top: 2.25rem; }
.steptitle {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.7rem, 5.4vw, 3.9rem);
  line-height: 1.24;
  margin: 0 0 .3rem;
}
.step .evwhen { margin-bottom: 2rem; }
.steptitle + .field, .steptitle + p + .field { margin-top: 1.75rem; }

#partyblock[hidden], .ifyes[hidden] { display: none !important; }
#partyblock { margin-top: .5rem; }

.picks { display: grid; gap: .5rem; }
.choice.pick { margin-right: 0; }

.stepnav {
  display: flex;
  gap: .75rem;
  /* no rule above the buttons: the last field's own underline already closes
     the form, and a second line read as a stray mark */
  margin-top: 2.25rem;
  padding-top: 0;
  border-top: 0;
}
.stepnav [hidden] { display: none !important; }
.stepnav .btn { border: 0; font-family: var(--font-sans); }
.stepnav .btn-quiet { border: 1px solid var(--green); }

.revlist { margin: 1.5rem 0 2.5rem; }
.revlist > div {
  display: grid;
  grid-template-columns: minmax(0, 14rem) 1fr;
  gap: .5rem 1.5rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--hair);
}
.revlist dt {
  font-family: var(--font-serif);
  font-size: 1.05rem;
}
.revlist dd {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--ink-soft);
  font-size: 1.02rem;
}
.revlist dd em { font-style: italic; }
@media (max-width: 560px) {
  .revlist > div { grid-template-columns: 1fr; gap: .15rem; }
}

.field.count { max-width: 17rem; }
.rsvp select {
  display: block;
  width: 100%;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  padding: .5rem 0;
}
.rsvp select:focus { outline: none; border-bottom-color: var(--green); }

.names {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 2rem;
  margin-bottom: .4rem;
}
.namefield { margin-bottom: 1.3rem; line-height: 1.4; }
.namefield .q { font-size: .62rem; letter-spacing: .16em; }
.names { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.rsvp { margin-top: 2rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.field { display: block; margin: 0 0 1.6rem; }
.field .q {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 1.094rem;
  color: var(--ink-soft);
  margin-bottom: .55rem;
}
.field .q em { font-family: var(--font-roman); text-transform: none;
               letter-spacing: .02em; font-style: italic; opacity: .75; }

.rsvp input[type=text], .rsvp input[type=email], .rsvp textarea {
  display: block;          /* inline-block sat in an oversized line box */
  width: 100%;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair);
  padding: .5rem 0;
  border-radius: 0;
}
.rsvp textarea { resize: vertical; line-height: 1.6; }
.rsvp input:focus, .rsvp textarea:focus {
  outline: none;
  border-bottom-color: var(--green);
}

.choice {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  margin-right: 1.75rem;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  cursor: pointer;
}
.choice input { accent-color: var(--green); }

.evhead { margin-top: 3rem; }

.ev {
  border: 0;
  border-top: 1px solid var(--hair);
  margin: 0 0 2rem;
  padding: 1.75rem 0 0;
}
.ev legend {
  font-family: var(--font-script);
  font-size: clamp(2rem, 3.8vw, 2.7rem);
  padding: 0;
}
.evwhen {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 1.016rem;
  color: var(--ink-soft);
  margin: .2rem 0 1.4rem;
}
.ifyes[hidden] { display: none !important; }
.ifyes { margin-top: 1.4rem; }

.formerr[hidden] { display: none !important; }
.formerr {
  font-family: var(--font-serif);
  font-style: italic;
  color: #8A2B1F;
  margin: 0 0 1rem;
}

#rsvpwrap[hidden] { display: none !important; }
.thanks[hidden] { display: none !important; }
.thanks { padding: clamp(4rem, 12vw, 8rem) 0; text-align: center; }
.thanks h2 {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(3.2rem, 6.6vw, 4.6rem);
  line-height: 1.24;
  margin: 0 0 1rem;
}
.thanks p { text-align: center !important; }

.rsvp button[disabled] { opacity: .55; cursor: default; }

/* links that are still waiting on a URL look inert, not clickable */
.pending { opacity: .5; cursor: default; text-decoration: none !important; }
a.lab.linkish { text-decoration: underline; text-underline-offset: 4px; }
a.lab.linkish:hover { color: var(--green); }
.salonlink { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.salonlink:hover { color: var(--green); }
a.contactlink { color: inherit; text-decoration: underline; text-underline-offset: 4px; }

/* a button reads as a button; the underline belongs on inline links */
a.btn, .btn { text-decoration: none; }
a.btn:hover, a.btn:focus-visible { text-decoration: none; }

/* --- buttons --- */

.btnrow {
  margin: 1.6rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.btn {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 1.094rem;
  padding: .85rem 1.6rem;
  cursor: pointer;
}
.btn:hover { background: var(--green-deep); }

/* secondary action: outlined rather than solid, so the two buttons read as
   separate things instead of one block */
.btn-quiet {
  background: transparent;
  color: var(--green);
  border: 1px solid var(--green);
  padding: calc(.85rem - 1px) calc(1.6rem - 1px);
  text-decoration: none;
}
.btn-quiet:hover { background: var(--green); color: #fff; }

/* --- stays, places, eateries --- */

.places {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 2.5rem 3rem;
  margin: 1.75rem 0 0;
}

.stays { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); margin: 1.75rem 0 0; }
.stays:not(.compact) { grid-auto-rows: 1fr; }
.stay .thumb { align-self: start; }

.stay {
  display: grid;
  grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.2vw, 2.75rem);
  align-items: start;
}
.stay-body > *:first-child { margin-top: 0; }
.stay h3, .stay-compact h3 {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(1.95rem, 3vw, 2.45rem);
  line-height: 1.3;
  margin: 0 0 .75rem;
}

.thumb {
  margin: 0;
  /* square, so the photograph is always the tallest thing in the row —
     that makes the spacing between hotels even without leaving dead space */
  aspect-ratio: 1 / 1;
  background: #E9E9E6;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.thumb span {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 0.859rem;
  color: #9A9A96;
}
/* Black and white by default, like everything else on the site. Colour is
   revealed on hover — and only where a real pointer exists, so phones and
   tablets keep the black-and-white treatment rather than sticking in a
   half-triggered hover state. */
.thumb img, .thumb picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb img { filter: grayscale(1); transition: filter .45s ease, transform .45s ease; }
@media (hover: hover) and (pointer: fine) {
  .stay:hover .thumb img { filter: grayscale(0); transform: scale(1.02); }
}
/* secondary tier: outside Casco Viejo — no thumbnail, visually subordinate */
.tier {
  margin-top: clamp(3rem, 5.6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hair);
}
.stays.compact {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2rem 2.5rem;
}
.stay-compact { display: block; }
.stay-compact h3 { margin: 0 0 .5rem; font-size: clamp(1.6rem, 2.4vw, 2rem); }
.stay-compact .btnrow { margin-top: .9rem; }
.stay-compact .btn { padding: .8rem 1.45rem; font-size: .95rem; }

@media (max-width: 700px) {
  .stay { grid-template-columns: 1fr; gap: 1.1rem; }
  .thumb { aspect-ratio: 3 / 2; }
}
.eats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem 2.5rem;
  margin: 1.5rem 0 0;
}
.stays h3, .places h3, .eats h3 { margin-top: 0; }
.eatery h3 { margin: 0 0 .3rem; font-size: 1.42rem; line-height: 1.2; }
.eatery p {
  text-align: left;
  hyphens: manual;
  font-size: .95em;
  line-height: 1.5;
  margin: 0 0 .45rem;
  color: var(--ink-soft);
}
.eatery .pick { margin: 0 0 .5rem !important; font-size: .74rem; padding: .28em .6em .24em; }
.eatery .lab, .eatery a.lab { font-size: .76rem; }

.rate {
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 0.977rem;
  color: var(--green);
  margin-top: .6rem;
}

.hl { margin: .75rem 0 0; padding-left: 1.1rem; }
.hl li { margin: .2rem 0; }

.note .sig { font-style: italic; margin-top: 1.5rem; }
.sig { font-style: italic; }

/* --- the two notes, side by side --- */

.notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
/* 9 — a script drop cap opens each note, and the sign-off is in the hand.
   The cap is disabled on narrow screens, where the column is too short for
   the letter to sit beside enough text. */
.notes .note > p:first-of-type::first-letter {
  font-family: var(--font-script);
  font-size: 3.6em;
  line-height: .84;
  float: left;
  padding: .06em .34em .04em .02em;
  color: var(--green);
}
.notes .sig {
  font-family: var(--font-script);
  font-style: normal;
  font-size: 3rem;
  line-height: 1.25;
  color: var(--green);
  margin-top: 1.5rem;
}
@media (max-width: 560px) {
  .notes .note > p:first-of-type::first-letter {
    font-family: inherit; font-size: inherit; line-height: inherit;
    float: none; padding: 0; color: inherit;
  }
}

/* the section head rule sits under each note's own title, not across both */
.notes .shead { font-size: clamp(1.35rem, 1.9vw, 1.7rem); }
.notes .note p { text-align: justify; hyphens: auto; }
.notes .note .sig { text-align: left; hyphens: manual; }

@media (max-width: 860px) {
  .notes { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 3.5rem); }
}

/* group intros are captions, not body copy — full width of the section */
.group > p {
  font-size: .92em;
  color: var(--ink-soft);
  max-width: none;
}

/* whose pick it is — outlined, sitting under the name */
.pick {
  display: inline-block;
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .86rem;
  line-height: 1;
  color: var(--green);
  border: 1px solid var(--green);
  padding: .32em .7em .28em;
  margin: 0 0 .75rem !important;
  text-align: left !important;
}
.pick-both { color: #8A6A2F; border-color: #8A6A2F; }


/* --- 3: tabs on Discover --- */

.tabbar {
  position: sticky;
  top: var(--barh);
  z-index: 20;
  background: var(--paper);
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
  gap: 0;
  border-bottom: 1px solid var(--hair);
  /* the shadow closes the sliver between this bar and the one above */
  box-shadow: 0 -1.2rem 0 0 var(--paper);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding-top: .5rem;
}
.tabbar::-webkit-scrollbar { display: none; }
.tab {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  color: var(--ink-soft);
  padding: .95rem .85rem 1rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.tab {
  opacity: .55;
  transition: opacity .18s ease, color .18s ease;
}
.tab:hover { color: var(--ink); opacity: .85; }
/* the active tab is darker, heavier and sits on a thicker rule, so it is
   obvious both which one is open and that the others can be clicked */
.tab.on {
  color: var(--green);
  opacity: 1;
  border-bottom-width: 3px;
  border-bottom-color: var(--green);
  /* a soft tint behind the open tab, so the row reads as a set of controls
     with one of them selected */
  background: linear-gradient(180deg,
    rgba(30,57,48,0) 0%, rgba(30,57,48,.055) 100%);
}
.tabpane[hidden] { display: none !important; }
/* a short tab must not leave the footer sitting in view */
.tabpane {
  min-height: calc(100vh - var(--stickytop) - 4rem);
  padding-top: clamp(.9rem, 1.6vw, 1.25rem);
}
/* the first element's own margin was adding to the padding, so the text
   tabs sat lower than the ones that open with a map */
.tabpane > *:first-child { margin-top: 0; }
.tabpane > .shead:first-child { display: none; }
.tabpane { animation: fadein .28s ease; }
@media (max-width: 620px) {
  .tabbar {
    top: 4.6rem;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabbar::-webkit-scrollbar { display: none; }
  .tab { padding: .85rem .85rem .95rem; font-size: 1.05rem; letter-spacing: .05em; }
}

/* --- 7: small square beside a place heading --- */

.phead { display: flex; align-items: center; gap: .9rem; margin: 0 0 .7rem; }
.phead h3 { margin: 0; }
.sq {
  flex: none;
  width: 6.4rem; height: 6.4rem;
  margin: 0;
  overflow: hidden;
  background: #E4E2DC;
}
.sq img, .sq picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.sq-empty {
  border: 1px solid var(--hair);
  display: grid;
  place-items: center;
}
.sq-empty::after {
  content: "photo";
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .62rem;
  color: #A3A099;
}
@media (max-width: 560px) { .sq { width: 5rem; height: 5rem; }
  .sq-empty::after { font-size: .56rem; letter-spacing: .1em; } }

/* --- 4: the Where to Eat map --- */

.legend {
  /* three even columns above the map, so markers line up down the columns
     and across the rows; kinds on the first row, picks on the second */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem 1rem;
  margin: 0 0 .9rem !important;
  text-align: left !important;
}
@media (max-width: 560px) {
  .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lgd {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 1.02rem;
  color: var(--ink-soft);
}
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dot.pick-victoria { background: var(--green); }
.dot.pick-alex     { background: #5C7F6B; }
.dot.pick-both     { background: #C9A227; }
.dot.pick-other    { background: #A9ADA4; }

/* Markers: a circle whose COLOUR says whose pick it is, carrying a glyph
   that says what kind of place it is. One SVG each — nothing to break. */

.mk, .epin {
  --victoria: #1E3930;
  --alex: #5C7F6B;
  --both: #C9A227;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--victoria);
  border: 2px solid var(--paper);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  cursor: pointer;
  transition: transform .18s ease;
}
.mk-victoria, .epin.victoria { background: var(--victoria); }
.mk-alex,     .epin.alex     { background: var(--alex); }
.mk-both,     .epin.both     { background: var(--both); }

.mk svg, .epin svg {
  width: 14px; height: 14px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* places on the other two maps: a plain circle, no glyph, smaller */
.epin.on, .epin:hover { transform: scale(1.35); }

/* the same marker repeated beside a name in the list, acting as a button
   back to its pin on the map */
.chip {
  width: 24px; height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
  border: 0;
  padding: 0;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  vertical-align: -.22em;
  margin-right: .1rem;
  transition: transform .18s ease;
}
.chip svg {
  width: 13px; height: 13px;
  fill: none; stroke: #fff; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.chip:hover, .chip:focus-visible { transform: scale(1.14); outline: none; }
.chip.pick-victoria { background: #1E3930; }
.chip.pick-alex     { background: #5C7F6B; }
.chip.pick-both     { background: #C9A227; }

/* listings sit tight: name with its marker, one line beneath */
.eatery h3 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .25rem; }
.split-list .eatery { padding: .55rem 1rem; }
.split-list .eatery p { margin: 0 0 .3rem; }

/* a place name doubles as the control that finds it on the map */
.namelink {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.namelink:hover, .namelink:focus-visible {
  border-bottom-color: var(--green);
  outline: none;
}
.phead h3 { display: flex; align-items: center; gap: .55rem; }
/* a pin being pointed at from the text */
@keyframes pinpulse {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.75); }
  65%      { transform: scale(1.15); }
}
.epin.pulse { animation: pinpulse 1.1s ease 2; z-index: 3; }
/* hovering a marker names it, so the map can be read without clicking */
.epin::after {
  content: attr(data-name);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%);
  font-family: var(--font-caps);
  font-size: .8rem;
  letter-spacing: .05em;
  white-space: nowrap;
  background: rgba(242,239,233,.96);
  border: 1px solid var(--hair);
  padding: 2px 7px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.epin.on::after, .epin:hover::after { opacity: 1; }

.eatery.active, .place.active {
  background: rgba(30,57,48,.07);
  border-left-color: var(--green);
}
.eatery.target, .place.target {
  background: rgba(201,162,39,.18);
  border-left-color: #C9A227;
  transition: background .25s ease;
}
/* the place cards are a grid, so the tint has to reach the whole card */
.places .place.target { padding: .85rem 1rem; margin: 0 -1rem; }
.eatery, .place {
  padding: .85rem 1rem;
  margin: 0 -1rem;
  scroll-margin-top: 9rem;
  border-left: 3px solid transparent;
  transition: background .25s ease, border-color .25s ease;
}
/* legend swatches are the same markers, drawn inline */
.legend .mk { width: 22px; height: 22px; }
.legend .mk svg { width: 12px; height: 12px; }

/* ---- wide map above its list, on all three tabs ---- */
.mapwrap { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.widemap { height: clamp(19rem, 46vh, 27rem); }



/* --- the photograph the notes rise over (Discover Panama only) ---
   The title band above it is untouched, so the page still opens exactly like
   every other. The photograph pins behind, and the cream panel carrying the
   notes and About Panama slides up over it. Once that panel has passed, the
   page behaves normally again. */

/* the photograph and the panel share a wrapper, so the photograph stops
   being sticky the moment the panel has passed */
/* flow-root stops the panel's bottom margin escaping the wrapper, which
   is what keeps the photograph running on beneath the notes */
.herowrap {
  position: relative;
  display: flow-root;
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
}

.hero {
  position: sticky;
  top: var(--barh);
  z-index: 0;
  /* edge to edge, and flush beneath the floating navigation bar */
  width: 100vw;
  margin: calc(-1 * clamp(3rem, 5.6vw, 4.5rem) - 1.85rem) calc(50% - 50vw) 0;
  /* fills the screen below the bar, so the photograph stays behind the
     whole of the floating panel as it rises */
  height: calc(100vh - var(--barh));
  height: calc(100dvh - var(--barh));
  overflow: hidden;
  background: var(--green-deep);
}
.hero picture, .hero img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* a wash toward the cream, so the panel does not meet a hard edge */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(30,57,48,.20) 0%, rgba(30,57,48,.06) 45%, rgba(242,239,233,.55) 100%);
}

/* the panel that rises over the photograph. Opaque cream, so the notes are
   read on the site's normal ground rather than over an image. */
.overhero {
  position: relative;
  z-index: 1;
  max-width: 58rem;
  /* the notes begin halfway up the photograph, so the top of the panel is
     already in view on arrival. The bottom margin leaves a band of image
     showing after they end. */
  margin: calc((var(--barh) - 100vh) / 2) auto clamp(6rem, 14vh, 10rem);
  margin-top: calc((var(--barh) - 100dvh) / 2);
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3.5vw, 3rem);
  /* translucent cream over a blurred copy of the photograph beneath, so the
     image reads through at the edges while the text stays legible */
  background: rgba(244, 241, 234, .86);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  backdrop-filter: blur(16px) saturate(1.05);
  box-shadow: 0 1.5rem 3.5rem rgba(16,28,20,.26);
}
/* browsers without backdrop-filter get an opaque panel rather than mud */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .overhero { background: rgba(244, 241, 234, .97); }
}
.overhero .notes { padding: 0; }

/* --- 2: the tab bar stays with you --- */
/* --barh is the floating navigation bar; --stickytop is where content must
   begin so nothing can show through the gap between the two. */
:root { --barh: 6.5rem; --tabsh: 3.9rem; --stickytop: calc(var(--barh) + var(--tabsh)); }

@media (max-width: 700px) {
  :root { --barh: 5.7rem; --tabsh: 3.4rem; }
}

/* --- 4: map on one side, the listings scrolling on the other --- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.split-map {
  position: sticky;
  top: calc(var(--stickytop) + .75rem);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--stickytop) - 2.5rem);
}
.split-map .mapwrap { margin: 0; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* the map takes what is left after the legend, so the legend is always
   visible rather than waiting below the fold */
.split-map .widemap { flex: 1 1 auto; height: auto; min-height: 0; }
.split-map .legend { flex: none; order: -1; margin: 0 0 .7rem !important; }
.split-list .group:first-child { margin-top: 0; }
.split-list .eats,
.split-list .places { grid-template-columns: 1fr; gap: 1.1rem; }
.split-list .place { padding: .6rem 1rem; margin: 0 -1rem; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split-map { position: static; }
  .split-map .widemap { height: clamp(16rem, 38vh, 22rem); }
}

/* --- weather --- */

.waverages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1.25rem 2rem;
  margin: 1.75rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair);
}
.wcell dt {
  font-family: var(--font-sans);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 1.055rem;
  color: var(--ink-soft);
  margin-bottom: .35rem;
}
.wcell dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.3rem;
}

.forecast[hidden] { display: none !important; }
.forecast { margin-top: clamp(2rem, 4vw, 3rem); }
.forecast h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 1.133rem;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}
.fdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .5rem;
  border-top: 1px solid var(--hair);
  padding-top: 1.25rem;
}
.fday { text-align: center; }
.fday .d {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 0.977rem;
  color: var(--ink-soft);
}
.fday .i { font-size: 1.15rem; margin: .45rem 0 .3rem; }
.fday .t { font-family: var(--font-serif); font-size: .98rem; }
.fday .t span { color: var(--ink-soft); }
@media (max-width: 620px) {
  .fdays { grid-template-columns: repeat(4, 1fr); gap: 1rem .5rem; }
}

/* --- map beside the place list --- */





/* a place and its pin light up together */
.visit .place {
  padding: .9rem 1rem;
  margin: 0 -1rem;
  transition: background .25s ease;
  scroll-margin-top: 7rem;
}


.map {
  height: clamp(20rem, 48vh, 34rem);
  margin: 0;
  border: 1px solid var(--hair);
  background: #E9E9E6;
}
@media (max-width: 860px) { .map { height: clamp(16rem, 34vh, 22rem); } }
/* venues are gold stars; everything else is a green circle */
.pin {
  cursor: pointer;
  line-height: 0;
  transition: transform .18s ease;
}
.pin b {
  display: block;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--green);
  border: 1.5px solid var(--paper);
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.pin.venue {
  font-size: 1.45rem;
  line-height: 1;
  color: #C9A227;
  text-shadow: 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.45);
}
.pin.on, .pin:hover { transform: scale(1.35); }
.maplibregl-popup-content {
  font-family: var(--font-serif);
  font-size: .98rem;
  padding: .5rem .75rem;
  border-radius: 0;
}
.maplibregl-ctrl-attrib { font-family: var(--font-roman); font-size: 10px; }

/* --- folds and FAQ --- */

.fold, .qa { border-top: 1px solid var(--hair); }
.qas .qa:last-of-type { border-bottom: 1px solid var(--hair); }
.fold { margin-top: 2rem; border-bottom: 1px solid var(--hair); }

.fold summary, .qa summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2rem 1.15rem 0;
  font-family: var(--font-serif);
  font-size: 1.16rem;
  position: relative;
  transition: color .2s ease;
}
.qa[open] > summary {
  font-weight: 600;
  color: var(--green);
}
.qa[open] .foldbody {
  border-left: 2px solid var(--green);
  padding-left: 1.25rem;
  padding-bottom: 0;
  margin-bottom: 1.6rem;
}
.qa[open] .foldbody > *:last-child { margin-bottom: 0; }
.fold summary::-webkit-details-marker,
.qa summary::-webkit-details-marker { display: none; }
.fold summary::after, .qa summary::after {
  content: "+";
  font-family: var(--font-roman);
  position: absolute; right: .25rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--ink-soft);
}
.fold[open] summary::after, .qa[open] summary::after { content: "–"; }

.foldbody { padding: 0 0 1.6rem; }
.foldbody p:first-child { margin-top: 0; }

.contact {
  font-family: var(--font-sans);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 1.133rem;
  margin: .6rem 0;
}

/* --- unfilled content, visible in preview only --- */

.tbd {
  background: #FFF3C4;
  color: #7A5B00;
  font-family: var(--font-roman);
  font-size: .8em;
  letter-spacing: .06em;
  padding: 0 .3em;
}

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

footer {
  color: #fff;
  text-align: center;
  padding: clamp(2.25rem, 4.8vw, 3.25rem) var(--gutter);
}
.fmono { height: 5rem; margin-bottom: 0; opacity: .95; }
.credit {
  font-family: var(--font-sans);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 0.977rem;
  opacity: .62;
  margin: clamp(1rem, 2.4vw, 1.5rem) 0 0;
}


/* ---------- password gate ---------- */

#gate[hidden], #site[hidden] { display: none !important; }

#gate {
  position: fixed; inset: 0;
  /* Lorie's limewash. WebP with a JPEG fallback; the flat colour shows
     underneath until the image decodes, so there is no white flash. */
  background-color: var(--green-deep);
  background-image: url("limewash.jpg");
  background-image: image-set(
    url("limewash.webp") type("image/webp"),
    url("limewash.jpg")  type("image/jpeg"));
  background-size: cover;
  background-position: center;
  color: #fff;
  display: grid; place-items: center;
  padding: var(--gutter);
  z-index: 50;
}
.gate-box {
  position: relative;
  width: 100%;
  max-width: 22rem;
  text-align: center;
}
/* a soft pool of shade so the white type holds against the busiest patches */
#gate::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 50%,
              rgba(16,32,24,.55), rgba(16,32,24,.12) 70%, transparent);
  pointer-events: none;
}

.gate-box label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 1.094rem;
  margin-bottom: 1rem;
  opacity: .85;
}
#pw {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--hair-light);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  text-align: center;
  padding: .6rem 0;
}
#pwgo {
  margin-top: 1.75rem;
  background: transparent;
  border: 1px solid var(--hair-light);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 1.094rem;
  padding: .8rem 2.25rem;
  cursor: pointer;
}
#pwgo:hover { background: rgba(255,255,255,.08); }
#pwerr { font-size: .95rem; font-style: italic; opacity: .85; margin-top: 1.25rem; }

@media print { #gate { display: none; } }


/* (3) on a phone the panel was nearly the full width, so almost none of the
   photograph showed beside it and the floating effect was lost */
@media (max-width: 700px) {
  .overhero {
    width: 86vw;
    max-width: none;
    margin-inline: auto;
    padding: clamp(1.5rem, 5vw, 2rem) clamp(1.1rem, 4.5vw, 1.75rem);
  }
}

/* (4) five labels cannot fit one line on a phone; wrap rather than scroll,
   so none of them is hidden off the edge */
@media (max-width: 760px) {
  .tabbar {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
    row-gap: 0;
  }
  .tab {
    font-size: .95rem;
    letter-spacing: .04em;
    padding: .6rem .65rem .65rem;
  }
}

/* the home page has its own bar; it takes the same rule */
.invite-top {
  box-shadow: inset 0 -1px 0 0 rgba(255,255,255,.35);
  padding-bottom: .9rem;
}

/* (5) the RSVP entry is an anchor, so it takes the link styling of whichever
   navigation it sits in; it only needs its cursor restored */
.navrsvp { cursor: pointer; }

/* (1) the review step is the tallest; tighten its rows and shrink the
   optional note, which was claiming space it rarely needs */
#review .rrow { padding: .45rem 0; }
#review { margin-bottom: 1rem; }
.rsvp textarea { min-height: 0; }
.rsvp textarea[rows="3"] { height: 3.2rem; }
.step .field:last-of-type { margin-bottom: .75rem; }

/* (6) the short intro, and the step counter that replaces it */
.rsvpintro {
  font-size: .96em;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
  text-align: left;
}
.stepof {
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .78rem;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
  text-align: left;
}
.stepof[hidden], .rsvpintro[hidden] { display: none; }

/* the concierge window is small and fixed in height */
.modal-small { width: min(30rem, 100%); }
.clist { margin: 1.5rem 0 0; }
.crow {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: .75rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--hair);
}
.crow:last-child { border-bottom: 0; }
.crow dt {
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .76rem;
  color: var(--ink-soft);
  margin: 0;
}
.crow dd { margin: 0; }
.crow a { color: var(--green); text-underline-offset: 3px; }
@media (max-width: 560px) {
  .crow { grid-template-columns: 1fr; gap: .2rem; }
}

/* ---- the RSVP modal ---- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
}
.modal[hidden] { display: none; }
.modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(14, 24, 18, .62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.modal-box {
  position: relative;
  z-index: 1;
  width: min(46rem, 100%);
  max-height: min(88vh, 60rem);
  overflow-y: auto;
  background: var(--paper);
  box-shadow: 0 2rem 5rem rgba(10, 20, 14, .45);
}
.modal-inner { padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3.5vw, 3rem); }
.modal-x {
  position: absolute;
  top: .5rem; right: .75rem;
  z-index: 2;
  background: none;
  border: 0;
  font: 400 2rem/1 var(--font-serif);
  color: var(--ink-soft);
  cursor: pointer;
  padding: .25rem .5rem;
}
.modal-x:hover { color: var(--green); }

/* the warning shown if you try to close a part-filled form */
.modal-warn {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  background: rgba(14, 24, 18, .55);
  padding: 1.5rem;
}
.modal-warn[hidden] { display: none; }
.modal-warn-box {
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 30rem;
  box-shadow: 0 1.5rem 3rem rgba(10, 20, 14, .4);
}
.modal-warn-box p:last-child { margin-bottom: 0; }
.btn-quiet { background: none; color: var(--ink-soft); }

/* ---- the banners ---- */

.banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  background-color: var(--green-deep);
  background-image: url("limewash.jpg");
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.25rem);
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
}
.banner-h {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.2;
  margin: 0 0 .5rem;
  color: #fff;
}
.banner-text p {
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: .98em;
  max-width: 42rem;
  text-align: left;
}
.banner-btn {
  display: inline-block;
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 1.05rem;
  color: #fff;
  background: none;
  border: 1px solid rgba(255,255,255,.75);
  padding: 1.15rem 2.25rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease;
}
.banner-btn:hover, .banner-btn:focus-visible {
  background: rgba(255,255,255,.12);
  border-color: #fff;
  outline: none;
}
@media (max-width: 720px) {
  .banner { grid-template-columns: 1fr; gap: 1.5rem; }
  .banner-btn { width: 100%; text-align: center; }
}

/* the RSVP entry in the navigation behaves like the links beside it */
.navrsvp {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ---- the registry button ---- */
.registry-btn { margin-top: clamp(1.5rem, 3vw, 2.25rem); }


/* ---- home: the date aligns to the width of the names ---- */
/* Adriana's note: the names align with the date beneath them. The wrapper
   shrinks to the script line, and the date is justified across it, so both
   share a left and right edge. */
.invite-names {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}
/* a .names grid rule elsewhere is for the RSVP party list, not this heading */
.invite .names {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  white-space: nowrap;   /* it is sized to fit; wrapping would break the measure */
}
.invite .date {
  white-space: nowrap;
  text-align: justify;
  text-align-last: justify;
  -moz-text-align-last: justify;
}
@media (max-width: 760px) {
  /* too narrow to justify a single line without gaping word spaces */
  .invite .date {
    white-space: normal;
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
  }
}


/* (M1) on a phone the modal fills the screen and only its body scrolls, so
   the close control and the step buttons stay put */
@media (max-width: 700px) {
  .modal { padding: 0; }
  .modal-box {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    display: flex;
    flex-direction: column;
  }
  .modal-inner {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 3.25rem 1.25rem 1rem;
  }
  /* the step buttons sit on a fixed footer rather than scrolling away */
  .modal-inner .stepnav {
    position: sticky;
    bottom: 0;
    margin: 1rem -1.25rem 0;
    padding: .9rem 1.25rem;
    background: var(--paper);
    box-shadow: 0 -.75rem 1rem var(--paper);
  }
  .rsvp .steptitle { font-size: 2rem; margin-bottom: .5rem; }
  .rsvpintro { font-size: .92em; margin-bottom: 1rem; }
  .rsvp .field { margin-bottom: 1rem; }
  .modal-x { top: .35rem; right: .5rem; }
}


/* ---- list / map switch, phones only ----
   A split view does not work on a small screen: the map is too short to read
   and the list is squeezed beneath it. One or the other instead. */
.viewswitch { display: none; }

@media (max-width: 760px) {
  .viewswitch {
    display: flex;
    gap: 0;
    margin: 0 0 1.25rem;
    border: 1px solid var(--hair);
  }
  .vbtn {
    flex: 1 1 50%;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-caps);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .92rem;
    color: var(--ink-soft);
    padding: .75rem .5rem;
  }
  .vbtn.on {
    background: var(--green);
    color: #fff;
  }

  /* show whichever half the switch has chosen */
  .split[data-view="list"] .split-map { display: none; }
  .split[data-view="map"]  .split-list { display: none; }

  /* on the map view it takes the screen, rather than a strip of it */
  .split[data-view="map"] .split-map {
    position: static;
    height: auto;
  }
  .split[data-view="map"] .widemap {
    height: calc(100vh - var(--stickytop) - 9rem);
    height: calc(100dvh - var(--stickytop) - 9rem);
    min-height: 20rem;
  }
}


/* on a page that carries the green title band, the bar need not repeat the
   page name; Discover has no band, so it keeps it */
@media (min-width: 1200px) {
  /* on a wide screen the band carries the page name, so the bar need not */
  .hasband .barname { display: none; }
  .hasband .stickynav .lang { margin-left: auto; }
}
@media (max-width: 1199px) {
  /* below the breakpoint the band is dropped entirely and the page name
     lives in the navigation bar */
  .titleband { display: none; }
}


/* ---------- navigation: links on a wide screen, hamburger below ----------
   The threshold is set by the Spanish labels, which need 941px against the
   English 748. Below 1200 they would wrap, so the hamburger takes over. */

.barnav { display: none; }

@media (min-width: 1200px) {
  .barnav {
    display: flex;
    gap: 1.6rem;
    margin: 0 auto;
    white-space: nowrap;
  }
  .barnav a {
    font-family: var(--font-caps);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: .92rem;
    color: #fff;
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
  }
  .barnav a:hover { border-bottom-color: rgba(255,255,255,.55); }
  /* the page you are on is underlined */
  .barnav a.on { border-bottom-color: #fff; }

  /* the links carry the wayfinding, so the hamburger and the page name in
     the bar are both redundant at this width */
  .stickynav .navmore,
  .stickynav .barname,
  #navoverflow { display: none !important; }
}


/* ---- FAQ ---- */
.faq-h { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }


/* three columns in the map's half means about 125px each, and "RESTAURANT"
   does not fit at full size; the legend sets smaller inside that column */
.split-map .legend .lgd {
  font-size: .84rem;
  letter-spacing: .04em;
  gap: .4rem;
  align-items: flex-start;
  line-height: 1.25;
}
.split-map .legend .mk { flex: none; margin-top: -.1rem; }
.split-map .legend .mk { width: 20px; height: 20px; }
.split-map .legend .mk svg { width: 11px; height: 11px; }

/* ---------- guide layout: map across the top, list at full width ----------
   Where to Visit and Beyond the City carry photographs. A thumbnail beside
   the text needs the whole page width to be worth having, so on these two
   tabs the map runs above the list rather than beside it. */
@media (min-width: 761px) {
  .split.guide {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.25rem);
  }
  .split.guide .split-map {
    /* the map stays put below the tabs while the list scrolls under it */
    position: sticky;
    top: var(--stickytop);
    z-index: 10;
    height: auto;
    display: block;
    /* an opaque band, so cards scrolling beneath never show through the gap
       between the tab bar and the map */
    background: var(--paper);
    padding: .6rem 0 .85rem;
  }
  .split.guide .split-map .mapwrap { display: block; }
  .split.guide .split-map .widemap {
    height: clamp(16rem, 36vh, 24rem);
    min-height: 0;
  }
  /* the legend is back in a full-width row, so it can set at normal size */
  .split.guide .split-map .legend { max-width: 34rem; }
  .split.guide .split-map .legend .lgd { font-size: 1.02rem; letter-spacing: .1em; gap: .5rem; }
  .split.guide .split-map .legend .mk { width: 26px; height: 26px; }
  .split.guide .split-map .legend .mk svg { width: 14px; height: 14px; }

  /* one entry per row, thumbnail at a third of the page as drawn */
  .split.guide .places .place {
    /* 20rem at the site's 80% root is 256px, a third of the page, as drawn */
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.25rem);
  }
  .split.guide .places { display: grid; gap: clamp(2.25rem, 4vw, 3.25rem); }
  /* with a long measure the blurbs justify again, as elsewhere on the site */
  .split.guide .pbody p { text-align: justify; hyphens: auto; }
}

/* ---------- a square thumbnail beside each entry ----------
   The same pattern as the hotels, so the site stays consistent. The
   thumbnail is sized for the narrow list column beside the map. */
.places .place {
  display: grid;
  grid-template-columns: clamp(7.5rem, 11vw, 10.5rem) minmax(0, 1fr);
  gap: clamp(.9rem, 1.8vw, 1.35rem);
  align-items: start;
}
.pfig {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #E4E2DC;
}
.pfig img, .pfig picture { display: block; width: 100%; height: 100%; object-fit: cover; }

/* justified text needs a long line; beside a thumbnail in the narrow column
   the word gaps open up badly, so these blurbs set ragged right */
.split-list .pbody p { text-align: left; hyphens: none; }

/* an entry without a photograph spans the full width rather than leaving a gap */
.places .place:not(:has(.pfig)) { grid-template-columns: minmax(0, 1fr); }

.places .place h3 {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .4rem;
}
.pbody > p:last-child { margin-bottom: 0; }

@media (max-width: 460px) {
  .places .place { grid-template-columns: 5.5rem minmax(0, 1fr); gap: .85rem; }
}


/* ---------- weather, inside About Panama ---------- */

/* .page h3 outranks .shead, so the script face has to be restated here */
.page h3.shead.wx-head {
  font-family: var(--font-script);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
  line-height: 1.22;
  color: var(--green);
  margin: clamp(2.25rem, 4vw, 3.25rem) 0 1rem;
}

.wx {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.wcap {
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 1.18rem;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.wbody {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
}
.wicon { display: block; color: var(--green); }
.wicon svg {
  display: block;
  height: clamp(4.5rem, 7vw, 5.75rem);
  width: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .78;
}
.wrows { margin: 0; display: grid; gap: 1.1rem; }
.wrow dt {
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 1.02rem;
  color: var(--ink-soft);
  margin: 0 0 .15rem;
}
.wrow dd { margin: 0; font-size: 1.12em; }

@media (max-width: 620px) {
  .wx { grid-template-columns: 1fr; gap: 2.25rem; }
}


/* ---------- illustrated section headings ---------- */
.subhead.withicon {
  display: flex;
  align-items: center;
  gap: .85rem;
}
.sicon { flex: none; display: block; width: clamp(2.6rem, 4vw, 3.4rem); }
.sicon img, .sicon picture { display: block; width: 100%; height: auto; }

/* the weather illustrations replace the drawn glyphs */
.wicon { display: block; }
.wicon img, .wicon picture {
  display: block;
  height: clamp(6.5rem, 10vw, 8.5rem);
  width: auto;
}


/* ---------- venue illustrations, in the designer's layout ----------
   Her mockup runs the details and the drawing side by side and alternates
   the sides down the page. The timeline rule and its markers are dropped on
   this page, since a spine down the left cannot follow content that swaps
   sides. */
.timeline:has(.has-art) { padding-left: 0; }
.timeline:has(.has-art)::before { display: none; }
.timeline:has(.has-art) .ename::before { display: none; }

/* the itinerary runs wider than the other pages, as in the mockup */
/* wide enough that the longest event name stays on one line */
.page.wide { max-width: 92rem; }

@media (min-width: 861px) {
  .event.has-art {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }
  .event.has-art:nth-of-type(even) .etext { order: 2; }
  .event.has-art:nth-of-type(even) .eart  { order: 1; }
}

/* a rule between events, but not after the last */
.timeline:has(.has-art) .event.has-art {
  border-bottom: 1px solid var(--hair);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.timeline:has(.has-art) .event.has-art:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

/* the two actions sit side by side */
.has-art .btnrow { flex-wrap: nowrap; }
.has-art .btnrow .btn { white-space: nowrap; }

.eart { margin: 0; }
.eart img, .eart picture { display: block; width: 100%; height: auto; }

/* her detail rows: label left, value right, on a hairline.
   The table and the blurb both carried their own max-widths, so the title,
   the table and the blurb each ended at a different point; inside an event
   card they all take the full column and the blurb justifies to match. */
.has-art .drow { grid-template-columns: auto 1fr; }
.has-art .drow dd { text-align: right; }
.has-art .details { max-width: none; }
.has-art .note p,
.has-art .etext > p:not(.eday):not(.btnrow) {
  max-width: none;
  text-align: justify;
  hyphens: auto;
}

@media (max-width: 860px) {
  /* the drawing leads on a phone, above the details */
  .event.has-art { display: flex; flex-direction: column; }
  .eart { order: -1; margin: 0 0 1.25rem; }
  /* both actions on one row, sharing the width so they fit a phone */
  .has-art .btnrow { flex-wrap: nowrap; gap: .5rem; }
  .has-art .btnrow .btn {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: .8rem .5rem;
    font-size: .92rem;
    letter-spacing: .1em;
  }
}


/* the name shown when a pin is selected */
.pinlabel .maplibregl-popup-content {
  background: var(--green);
  color: #fff;
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .86rem;
  padding: .5rem .85rem;
  border-radius: 0;
  box-shadow: 0 .5rem 1.25rem rgba(12,22,16,.3);
}
.pinlabel .maplibregl-popup-tip { display: none; }


/* the save-the-date build: a quiet holding page */
.soon {
  text-align: center;
  padding: clamp(3rem, 8vh, 6rem) 0 clamp(4rem, 10vh, 8rem);
}
.soon .shead { margin-bottom: 1.25rem; }
.soon p {
  margin: 0 auto;
  max-width: 34rem;
  text-align: center;
  color: var(--ink-soft);
}