/* Maps "Your place by the sea is waiting." closing card (client mockup 2026-10-20).
   --u is one mockup pixel: the stage is the card itself (mockup x 60..1941), so its left edge lands on the hero's
   left rail and its right edge on the hero's right rail. The artwork plate carries the photograph, the watercolour
   washes, the gulls and the shells; every word and the button are live HTML. Title, lead and button take the
   exact type of the "At the east end of Seawall Boulevard." section (same faces, colours, sizes and breakpoints). */

.page-maps .mcb{
  --mcb-h:max(45.684px,calc(87.66 * var(--mcb-type-scale)));
  height:auto;overflow:visible;padding:150px 0 40px;
  background:linear-gradient(to bottom,#fcf8ef 0,#fcf8f0 150px,#fcf8f0 calc(100% - 90px),#faf6ef 100%);
}
.page-maps .mcb .mcb__frame{display:block;min-height:0;height:auto;container-type:inline-size}
.mcb .mcb__stage{
  --u:calc(100cqw / 1881);
  /* width of the "At the east end of" copy column, so the title steps down exactly as that title does */
  --mcb-col:calc((100cqw - clamp(42px,5.8vw,110px)) * 540 / 1296);
  position:relative;height:calc(511 * var(--u))
}

/* Artwork: card, photograph, washes, gulls and shells. Soft edges so it dissolves into the page paper. */
.mcb .mcb__plate{
  position:absolute;z-index:0;left:calc(-60 * var(--u));top:calc(-79 * var(--u));width:calc(1999 * var(--u));height:auto;max-width:none;display:block;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 calc(45 * var(--u)),#000 calc(100% - 22 * var(--u)),transparent 100%),linear-gradient(180deg,transparent 0,#000 calc(14 * var(--u)),#000 calc(100% - 48 * var(--u)),transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0,#000 calc(45 * var(--u)),#000 calc(100% - 22 * var(--u)),transparent 100%),linear-gradient(180deg,transparent 0,#000 calc(14 * var(--u)),#000 calc(100% - 48 * var(--u)),transparent 100%);
          mask-composite:intersect
}
.mcb .mcb__photo,.mcb .mcb__shells{display:none}

.page-maps .mcb .mcb__copy{
  position:absolute;z-index:1;left:calc(1040 * var(--u));right:calc(60 * var(--u));top:0;bottom:0;width:auto;min-width:0;margin:0;padding-left:0;padding-right:0;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-top:0;padding-bottom:calc(12 * var(--u))
}
.page-maps .mcb .mcb__title{
  max-width:none;margin:0;font-family:'Gulf Preview Bodoni',Georgia,serif;font-size:var(--mcb-h);font-weight:400;line-height:1;letter-spacing:-.012em;color:#073b57
}
.mcb .mcb__title>span{display:block;white-space:nowrap;font-size:min(1em,calc(.117 * var(--mcb-col)));font-style:normal;line-height:1.04}
.mcb .mcb__title em{
  font-family:'SP Accent Hand',Georgia,serif;font-size:min(calc(1.418 * var(--mcb-h)),calc(.1659 * var(--mcb-col)));
  font-style:normal;font-weight:400;line-height:0;letter-spacing:normal;color:#917658
}
.mcb .mcb__rule{display:block;width:calc(57 * var(--u));height:2px;margin:calc(16 * var(--u)) 0 0;background:#b99a72;opacity:.9}
.page-maps .mcb .mcb__lead{
  max-width:none;margin:25px 0 0;font-family:'Comfort Newsreader',Georgia,serif;font-size:max(16.92px,calc(25.2 * var(--mcb-type-scale)));
  font-weight:400;line-height:max(22.56px,calc(32.7 * var(--mcb-type-scale)));letter-spacing:normal;color:#2d6877
}
.mcb .mcb__ln{display:block;white-space:nowrap}
.mcb .cta-band__actions{margin-top:26px}

@media(max-width:1450px){.mcb .mcb__ln{white-space:normal;display:inline}}
@media(max-width:1250px) and (min-width:1101px){.mcb .mcb__stage{--mcb-col:calc((100cqw - 40px) * 540 / 1296)}.mcb .cta-band__actions{margin-top:20px}}
@media(max-width:1150px){.page-maps .mcb{--mcb-h:clamp(36.378px,7.0218vw,64.296px)}.page-maps .mcb .mcb__lead{font-size:22.56px;line-height:1.3}}

/* Tablet and phone (1150px and below, as the directions section switches its type): the card stacks, photograph first. The hero's rails are 24px at 900px and below. */
@media(max-width:1100px){.mcb .mcb__stage{--mcb-col:100cqw}}
@media(max-width:1150px){
  .page-maps .mcb{padding:90px 0 40px}
  .mcb .mcb__stage{height:auto;overflow:hidden;border-radius:22px;background:#fcf8f0;box-shadow:0 10px 28px #4d493522;padding-bottom:calc(48 * 1px)}
  .mcb .mcb__plate{display:none}
  .mcb .mcb__photo{
    display:block;position:relative;z-index:0;width:100%;height:auto;aspect-ratio:860 / 496;object-fit:cover;pointer-events:none;
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)
  }
  .mcb .mcb__shells{display:block;position:absolute;z-index:0;right:0;bottom:0;width:min(49%,336px);height:auto;pointer-events:none}
  .page-maps .mcb .mcb__copy{position:relative;left:auto;right:auto;top:auto;bottom:auto;display:block;width:auto;margin:0;padding:0 clamp(24px,5vw,56px) 0 clamp(24px,5vw,56px)}
  .mcb .mcb__rule{width:48px;margin-top:20px}
  .mcb .mcb__lead{max-width:34em}
  .mcb .cta-band__actions{margin-top:24px}
}
@media(max-width:900px){
  .mcb .mcb__title>span{font-weight:700;line-height:.96;letter-spacing:-.045em}
}
@media(max-width:700px){
  .mcb .mcb__stage{padding-bottom:84px;border-radius:20px}
  .mcb .mcb__shells{width:min(51%,224px)}
}
@media(max-width:540px){
  .page-maps .mcb{--mcb-h:clamp(29.61px,8.037vw,40.608px)}
  .page-maps .mcb .mcb__lead{font-size:19.74px;line-height:1.4;margin-top:24px}
  .mcb .cta-band__actions{margin-top:24px}
}