/* Park Details — closing call to action, "sunset arch".
   Copy on the left rail, the sunset framed in the same tall outlined arch the amenities use, a slowly turning seal over its
   corner, and three real facts about where the park sits. Desktop lengths are frame px x --u (100vw / 1900); content runs
   rail to rail (170 -> 1730). The section above already ends with 150px of padding, so this one adds none on top
   (150px visible gap); 150px below. Paper matches the sections either side, so there is no seam. */
@font-face{font-family:"CSB Display";src:url("../fonts/library/wondar-quason/wondar-quason-400.woff2") format("woff2");font-weight:400;font-display:swap;size-adjust:96%}
@font-face{font-family:"CSB Accent";src:url("../fonts/library/middleton/middleton-400.woff2") format("woff2");font-weight:400;font-display:swap;size-adjust:87%}
@font-face{font-family:"CSB Text";src:url("../fonts/library/neue-frutiger/neue-frutiger-400.woff2") format("woff2");font-weight:200 800;font-display:swap;size-adjust:88%}
@font-face{font-family:"CSB Label";src:url("../fonts/library/neue-frutiger/neue-frutiger-400.woff2") format("woff2");font-weight:200 800;font-display:swap;size-adjust:102%}

.csb{
  --u:calc(100vw / 1900);
  --rail:calc(170 * var(--u));
  --navy:#073b57; --lead:#0b4b69; --sand:#917658; --kick:#9c8268; --cap:#5f6b78; --gold:#b89a6a; --pine:#22413e;
  --ease:cubic-bezier(.4,.1,.2,1);
  position:relative;
  isolation:isolate;
  overflow-x:clip;               /* clip the glow sideways only, so the arch outline above is never cut */
  display:grid;
  grid-template-columns:1fr calc(560 * var(--u));
  gap:calc(120 * var(--u));
  align-items:center;
  padding:150px var(--rail);                 /* 150px inside the section, top and bottom */
  background:#faf7ef;
  color:var(--navy);
  font-family:"CSB Text",Arial,sans-serif;
}
.csb *,.csb *::before,.csb *::after{box-sizing:border-box}
.csb :where(h2,p,ul){margin:0}
.csb ul{padding:0;list-style:none}
.csb img{display:block;max-width:100%}
/* a low sunset glow behind the arch, and the dunes wash along the foot, both fading into the paper */
.csb::before{content:"";position:absolute;z-index:-1;right:calc(-120 * var(--u));top:calc(40 * var(--u));width:calc(1000 * var(--u));height:calc(760 * var(--u));background:radial-gradient(closest-side,rgba(246,196,128,.30),rgba(246,196,128,0));pointer-events:none}
.csb__dunes{position:absolute;z-index:-1;left:0;right:0;bottom:0;width:100%;height:calc(470 * var(--u));max-width:none;object-fit:cover;object-position:50% 100%;opacity:.4;-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 22%,#000 46%,#000 62%,rgba(0,0,0,.45) 80%,transparent 100%),linear-gradient(to right,#000 0,rgba(0,0,0,.62) 18%,#000 34%,rgba(0,0,0,.5) 52%,#000 70%,rgba(0,0,0,.6) 86%,#000 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 22%,#000 46%,#000 62%,rgba(0,0,0,.45) 80%,transparent 100%),linear-gradient(to right,#000 0,rgba(0,0,0,.62) 18%,#000 34%,rgba(0,0,0,.5) 52%,#000 70%,rgba(0,0,0,.6) 86%,#000 100%);mask-composite:intersect;pointer-events:none}

/* ---------- copy ---------- */
.csb__k{display:flex;align-items:center;gap:calc(20 * var(--u));font:400 max(11px,calc(14.26 * var(--u)))/1 "CSB Label",Arial,sans-serif;letter-spacing:.39em;text-transform:uppercase;color:var(--kick);white-space:nowrap}
.csb__k::before{content:"";width:calc(40 * var(--u));min-width:24px;height:1px;background:#b0977f}
.csb__title{margin-top:calc(32 * var(--u));font:400 calc(96 * var(--u))/.98 "CSB Display",Georgia,serif;letter-spacing:-.012em;color:var(--navy)}
.csb__title em{display:inline-block;font:400 1.14em/.7 "CSB Accent",cursive;font-style:normal;color:var(--sand);white-space:nowrap}
.csb__lead{max-width:calc(560 * var(--u));margin-top:calc(30 * var(--u));font:500 max(15px,calc(23 * var(--u)))/1.42 "CSB Text",Arial,sans-serif;letter-spacing:-.01em;color:var(--lead)}
.csb__actions{display:flex;flex-wrap:wrap;gap:calc(16 * var(--u));margin-top:calc(40 * var(--u))}
.csb__btn{display:inline-flex;align-items:center;justify-content:center;height:max(48px,calc(66 * var(--u)));border-radius:999px;font:500 max(14.5px,calc(20 * var(--u)))/1 "CSB Text",Arial,sans-serif;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.csb__btn--primary{gap:calc(24 * var(--u));padding:0 max(7px,calc(10 * var(--u))) 0 max(22px,calc(34 * var(--u)));background:var(--pine);color:#f6f2ea;box-shadow:0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(22,48,46,.2)}
.csb__btn--primary span{display:grid;place-items:center;width:max(34px,calc(46 * var(--u)));height:max(34px,calc(46 * var(--u)));border-radius:50%;background:#f6f2ea;color:var(--pine);transition:transform .25s var(--ease)}
.csb__btn svg{width:45%;height:45%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.csb__btn--primary:hover{background:#17302e;transform:translateY(-2px)}
.csb__btn--primary:hover span{transform:translateX(3px)}
.csb__btn--ghost{gap:calc(12 * var(--u));padding:0 max(22px,calc(32 * var(--u)));border:1px solid rgba(7,59,87,.32);color:var(--navy)}
.csb__btn--ghost svg{width:max(16px,calc(20 * var(--u)));height:max(16px,calc(20 * var(--u)));stroke-width:1.5}
.csb__btn--ghost:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.csb :focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* facts */
.csb__facts{display:inline-grid;grid-template-columns:repeat(3,auto);margin-top:calc(64 * var(--u));padding-top:calc(34 * var(--u));border-top:1px solid rgba(184,154,106,.55)}
.csb__facts li{padding:0 calc(40 * var(--u));border-left:1px solid rgba(184,154,106,.55)}
.csb__facts li:first-child{padding-left:0;border-left:0}
.csb__facts b{display:block;padding-top:.32em;font:400 calc(44 * var(--u))/1 "CSB Display",Georgia,serif;font-weight:400;color:var(--navy)}
.csb__facts span{display:block;margin-top:calc(8 * var(--u));font:400 max(13px,calc(16 * var(--u)))/1.35 "CSB Text",Arial,sans-serif;color:var(--cap)}

/* ---------- the arch ---------- */
.csb__art{position:relative;justify-self:end;width:calc(560 * var(--u))}
.csb__arch{height:calc(700 * var(--u));overflow:hidden;border-radius:999px 999px calc(16 * var(--u)) calc(16 * var(--u));box-shadow:0 calc(34 * var(--u)) calc(70 * var(--u)) rgba(120,70,20,.24);outline:1px solid rgba(184,154,106,.85);outline-offset:calc(13 * var(--u))}
.csb__arch img{width:100%;height:100%;object-fit:cover;object-position:40% 50%;transform:scale(1.04);transition:transform 2.4s var(--ease)}
.csb__art:hover .csb__arch img{transform:scale(1.09)}
/* the seal: turning lettering around the park's own watercolour sandpiper */
.csb__seal{position:absolute;left:calc(-110 * var(--u));bottom:calc(60 * var(--u));width:calc(220 * var(--u));height:calc(220 * var(--u));border-radius:50%;background:#fdfaf4;box-shadow:0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(60,44,20,.18)}
.csb__seal svg{position:absolute;inset:0;width:100%;height:100%;animation:csb-turn 40s linear infinite}
.csb__seal text{font:500 11px/1 "CSB Label",Arial,sans-serif;letter-spacing:.18em;fill:var(--sand)}
.csb__seal img{position:absolute;left:50%;top:50%;width:58%;transform:translate(-50%,-50%)}
@keyframes csb-turn{to{transform:rotate(360deg)}}

/* ---------- below 1000px: copy, then the arch ---------- */
@media (max-width:999px){
  .csb{--rail:clamp(20px,5vw,48px);display:block;padding:72px var(--rail)}
  .csb::before{right:-30%;top:auto;bottom:0;width:120%;height:70%}
  .csb__dunes{height:260px;bottom:0;object-position:30% 100%}
  .csb__k{gap:14px;font-size:12px;letter-spacing:.3em}
  .csb__title{margin-top:18px;font-size:clamp(42px,10vw,68px);line-height:1.02}
  .csb__lead{max-width:none;margin-top:20px;font-size:17px}
  .csb__actions{gap:12px;margin-top:28px}
  .csb__btn--primary{gap:20px}
  .csb__facts{display:grid;grid-template-columns:1fr;margin-top:40px;padding-top:6px}
  .csb__facts li{display:flex;align-items:baseline;gap:12px;padding:14px 0;border-left:0;border-bottom:1px solid rgba(184,154,106,.4)}
  .csb__facts b{font-size:26px;flex:none}
  .csb__facts span{margin:0;font-size:14.5px}
  .csb__art{width:auto;max-width:400px;margin:56px 0 0 auto}
  .csb__arch{height:min(118vw,470px);outline-offset:8px}
  .csb__seal{left:-26px;bottom:34px;width:120px;height:120px}
  .csb__seal text{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.csb__seal svg{animation:none}}
/* The footer below already has 150px of padding above its content, so on desktop this section adds none at its foot:
   the space from the sunset arch to the footer's logo is exactly that 150px. This section is lifted above the footer's
   background (but below its text), so the arch's frame and shadow and the dune wash carry on over the footer's pale
   top instead of being cut at the seam. */
@media (min-width:1000px){
  .csb{padding-bottom:100px;z-index:2}     /* a clear 100px of paper between the arch and the footer's top edge */
  /* the wash sits wholly inside this section: smaller, raised, and fully faded out 20px above the footer */
  .csb__dunes{bottom:20px;height:calc(360 * var(--u));opacity:.36;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.4) 24%,#000 48%,#000 60%,rgba(0,0,0,.35) 82%,transparent 100%),linear-gradient(to right,#000 0,rgba(0,0,0,.62) 18%,#000 34%,rgba(0,0,0,.5) 52%,#000 70%,rgba(0,0,0,.6) 86%,#000 100%);
    mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.4) 24%,#000 48%,#000 60%,rgba(0,0,0,.35) 82%,transparent 100%),linear-gradient(to right,#000 0,rgba(0,0,0,.62) 18%,#000 34%,rgba(0,0,0,.5) 52%,#000 70%,rgba(0,0,0,.6) 86%,#000 100%)}
}