/* Park Details — closing call to action ("Your place by the sea is waiting."), v2.
   Copies the 1624 × 640 mockup (assets/img/cta-sea/reference-mockup-v2.png).
   Words and buttons are live text, placed in mockup px × --c from the origin (153, 138) = the top of the
   "YOUR PLACE BY THE SEA" capitals. Alignment: that text column's left edge sits on the hero's left rail
   (170/1900) and the photo runs to the right edge of the page (mockup x 1624 → 1900): --c = 1730/1471 frame px.
   Padding: 150px above the eyebrow and 150px below the buttons (block = 385 mockup px tall).
   Plate: cta-sea-v2-*.webp = the mockup with words and buttons cleared (LaMa); it covers the section and its
   top and bottom edges melt into the sections above and below, so no line shows. */
@font-face{font-family:"CTX Serif";src:url("../fonts/hero/newsreader-var.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"CTX Serif";src:url("../fonts/hero/newsreader-italic-var.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"CTX Grotesk";src:url("../fonts/library/neue-haas-grotesk-text/neue-haas-grotesk-text-400.woff2") format("woff2");font-weight:400;font-display:swap}

.ctx{
  --ink:#173e3b;
  --gold:#9c774a;
  --body:#4f5b59;
  --eyebrow:#5c5e55;
  --pine:#22413e;
  --above:#fdfaf4;                           /* the colour "Choose your site" ends on */
  --below:#faf6ef;                           /* the colour the footer starts on */
  --u:calc(100cqw / 1900);
  --c:calc(var(--u) * 1.176071);             /* 1730 / 1471 */
  --pad:150px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  container-type:inline-size;
  background:var(--above);
  color:var(--ink);
  /* 150px above the eyebrow capitals (its line box starts ~3px higher) and 150px below the buttons */
  padding:calc(var(--pad) - 3px) 0 var(--pad);
}
/* top and bottom edges dissolve into the neighbouring sections */
.ctx::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:
    linear-gradient(to bottom, var(--above) 0, rgba(253,250,244,.86) 22%, rgba(253,250,244,.55) 48%, rgba(253,250,244,.2) 76%, rgba(253,250,244,0) 100%) top / 100% 96px no-repeat,
    linear-gradient(to top, var(--below) 0, rgba(250,246,239,.86) 22%, rgba(250,246,239,.55) 48%, rgba(250,246,239,.2) 76%, rgba(250,246,239,0) 100%) bottom / 100% 84px no-repeat;
  pointer-events:none;
}
.ctx__plate{
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:0 50%;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.ctx__stage{
  /* the words flow, so the block keeps its rhythm whichever type system is applied on top
     (park-details-home-type.css re-faces and re-sizes these with the homepage fonts) */
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  margin-left:calc(170 * var(--u));
  width:calc(760 * var(--c));
}

.ctx__k{
  display:flex;
  align-items:center;
  gap:calc(23 * var(--c));
  margin:0;
  font:400 max(11px, calc(15.5 * var(--c)))/1 "CTX Grotesk",Arial,sans-serif;
  letter-spacing:.31em;
  text-transform:uppercase;
  color:var(--eyebrow);
  white-space:nowrap;
}
.ctx__k::before{
  content:"";
  flex:none;
  width:calc(40 * var(--c));
  height:max(1px, calc(1.2 * var(--c)));
  background:#b3b6ab;
}
.ctx__title{
  margin:calc(var(--gap-title, 34) * var(--u)) 0 0;
  max-width:none;
  font:400 calc(87.3 * var(--c))/calc(78.5 * var(--c)) "CTX Serif",Georgia,serif;
  font-variation-settings:"opsz" 72;
  letter-spacing:-.051em;
  color:var(--ink);
  white-space:nowrap;
}
.ctx__title em{
  font-style:italic;
  letter-spacing:-.01em;
  color:var(--gold);
}
.ctx__lead{
  margin:calc(var(--gap-lead, 30) * var(--u)) 0 0;
  max-width:none;
  font:400 max(14px, calc(22 * var(--c)))/calc(32.5 * var(--c)) "CTX Grotesk",Arial,sans-serif;
  letter-spacing:.03em;
  color:var(--body);
  white-space:nowrap;
}
.ctx__actions{
  display:flex;
  gap:calc(37 * var(--c));
  margin-top:calc(var(--gap-actions, 33) * var(--u));
}
.ctx__btn{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:calc(68 * var(--c));
  border-radius:999px;
  font:400 max(13px, calc(22 * var(--c)))/1 "CTX Grotesk",Arial,sans-serif;
  letter-spacing:.03em;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ctx__btn--primary{
  width:calc(328.5 * var(--c));
  justify-content:space-between;
  padding:0 calc(23 * var(--c)) 0 calc(38 * var(--c));
  background:var(--pine);
  color:#f6f2ea;
  box-shadow:0 calc(6 * var(--c)) calc(18 * var(--c)) rgba(22,48,46,.18);
}
.ctx__chip{
  display:grid;
  place-items:center;
  flex:none;
  width:calc(42 * var(--c));
  height:calc(42 * var(--c));
  border-radius:50%;
  background:#f6f2ea;
  color:var(--pine);
}
.ctx__chip svg{width:calc(23 * var(--c));height:calc(23 * var(--c))}
.ctx__btn--ghost{
  width:calc(283 * var(--c));
  border:max(1px, calc(1.5 * var(--c))) solid #8f9b94;
  background:rgba(250,247,241,.6);
  color:#2f4b47;
}
.ctx__btn--primary:hover,.ctx__btn--primary:focus-visible{background:#1b3533;transform:translateY(-1px)}
.ctx__btn--ghost:hover,.ctx__btn--ghost:focus-visible{background:#fbf8f3;color:var(--ink);transform:translateY(-1px)}
.ctx__btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* every word is live text; the buttons are links, so their own drag is switched off to let the label be selected */
.ctx__k,.ctx__title,.ctx__lead,.ctx__btn{-webkit-user-select:text;user-select:text}
.ctx__btn{-webkit-user-drag:none}

/* ---------- below 1100px: the words flow on paper, the photo sits below ---------- */
@media (max-width:1099px){
  .ctx::after{display:none}
  .ctx{display:flex;flex-direction:column;padding:72px clamp(20px,5vw,56px) 0}
  .ctx__stage{display:block;width:100%;max-width:720px;margin:0 auto}
  .ctx__k{font-size:12px;gap:14px;letter-spacing:.2em}
  .ctx__k::before{width:32px;height:1px}
  .ctx__title{margin-top:18px;font-size:clamp(44px,8.6vw,72px);line-height:1;white-space:normal}
  .ctx__lead{margin-top:20px;font-size:17px;line-height:1.5;letter-spacing:.01em;white-space:normal}
  .ctx__lead br{display:none}
  .ctx__actions{flex-wrap:wrap;gap:12px;margin-top:28px}
  .ctx__btn{height:56px;font-size:16px;letter-spacing:.01em}
  .ctx__btn--primary{width:auto;gap:22px;padding:0 8px 0 26px}
  .ctx__chip{width:38px;height:38px}
  .ctx__chip svg{width:18px;height:18px}
  .ctx__btn--ghost{width:auto;padding:0 28px;border-width:1px}
  .ctx__plate{order:2;position:relative;inset:auto;display:block;width:calc(100% + 2 * clamp(20px,5vw,56px));height:auto;
    margin:40px calc(-1 * clamp(20px,5vw,56px)) 0;aspect-ratio:16 / 10;object-fit:cover;object-position:100% 50%;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 24%, #000 86%, transparent);mask-image:linear-gradient(to bottom, transparent 0, #000 24%, #000 86%, transparent)}
}
@media (max-width:600px){
  .ctx__plate{aspect-ratio:380 / 338}
}