/* Sandpiper Attractions: five feature sections in "Arch and lens" (concept 5 of /attractions-features/) and the
   "Keep exploring." band. Generated markup: scratchpad atx.py. Everything is scoped under .atx.
   Desktop lengths are frame px × --u (100vw / 1900), content on the 170 rails; below 1000px each section stacks. */
@font-face{font-family:"HP 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:"HP Accent";src:url("../fonts/library/middleton/middleton-400.woff2") format("woff2");font-weight:400;font-display:swap;size-adjust:87%}
@font-face{font-family:"HP Text";src:url("../fonts/library/neue-frutiger/neue-frutiger-400.woff2") format("woff2");font-weight:200 800;font-display:swap;size-adjust:88%}

.atx{
  --u:calc(100vw / 1900); --rail:calc(170 * var(--u));
  --navy:#073b57; --sand:#917658; --paper:#faf7ef; --paper-2:#f4ecdf; --gold:#b89a6a; --hair:rgba(7,59,87,.14);
  --meta:#12695a; --body:#525d69;
  --display:"HP Display",Georgia,serif; --accent:"HP Accent",cursive; --text:"HP Text",Arial,sans-serif;
  --ease:cubic-bezier(.4,.1,.2,1);
  background:var(--paper);
}
.atx img{display:block;max-width:none}
.atx :where(h2,h3,p,ol,ul,li,figure){margin:0}
.atx :where(ol,ul){padding:0;list-style:none}
.atx section{position:relative;padding:calc(75 * var(--u)) var(--rail);overflow:hidden}
.atx section:first-child{padding-top:calc(150 * var(--u))}

/* shared type */
.atx .fs-t{font:400 calc(96 * var(--u))/.98 var(--display);letter-spacing:-.012em;color:var(--navy)}
.atx .fs-t em{display:inline-block;font:400 1.08em/.8 var(--accent);font-style:normal;color:var(--sand);white-space:nowrap}
.atx .fs-w{display:flex;align-items:center;gap:calc(16 * var(--u));margin-bottom:calc(16 * var(--u));font:400 calc(32 * var(--u))/1 var(--accent);color:var(--sand)}
.atx .fs-w::before{content:"";width:calc(44 * var(--u));min-width:24px;height:1px;background:#b0977f}
.atx .fs-m{margin-top:calc(22 * var(--u));font:500 max(13px,calc(16 * var(--u)))/1.3 var(--text);color:var(--meta)}
.atx .fs-d{margin-top:calc(18 * var(--u));max-width:calc(580 * var(--u));font:400 max(14.5px,calc(19 * var(--u)))/1.62 var(--text);color:var(--body)}

/* arch and lens */
.atx .fs5{display:grid;grid-template-columns:calc(720 * var(--u)) 1fr;gap:calc(120 * var(--u));align-items:center}
.atx .fs5--r{grid-template-columns:1fr calc(720 * var(--u))}.atx .fs5--r .fs5__art{order:2}
.atx .fs5__art{position:relative;height:calc(900 * var(--u))}
.atx .fs5__arch{position:absolute;left:calc(14 * var(--u));top:calc(14 * var(--u));width:calc(540 * var(--u));height:calc(840 * var(--u));overflow:hidden;border-radius:calc(270 * var(--u)) calc(270 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));box-shadow:0 0 0 calc(12 * var(--u)) var(--paper),0 0 0 calc(13 * var(--u)) rgba(184,154,106,.8)}
.atx .fs5__lens{position:absolute;right:0;bottom:0;width:calc(310 * var(--u));aspect-ratio:1;overflow:hidden;border-radius:50%;border:calc(12 * var(--u)) solid var(--paper);box-shadow:0 calc(20 * var(--u)) calc(44 * var(--u)) rgba(60,44,20,.22)}
.atx .fs5__arch img,.atx .fs5__lens img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.atx .fs5__art:hover .fs5__arch img{transform:scale(1.04)}
.atx .fs5__yr{position:absolute;right:calc(4 * var(--u));top:calc(40 * var(--u));writing-mode:vertical-rl;font:400 calc(118 * var(--u))/1 var(--display);color:transparent;-webkit-text-stroke:max(1px,calc(1.6 * var(--u))) var(--gold)}
.atx .fs5__yr small{display:block;margin-left:calc(8 * var(--u));font:400 calc(32 * var(--u))/1 var(--accent);color:var(--sand);-webkit-text-stroke:0}
.atx .fs5--r .fs5__arch{left:auto;right:calc(14 * var(--u))}.atx .fs5--r .fs5__lens{right:auto;left:0}.atx .fs5--r .fs5__yr{right:auto;left:calc(4 * var(--u))}
.atx .fs5__hl{margin-top:calc(40 * var(--u));border-top:1px solid var(--hair)}
.atx .fs5__hl li{display:grid;grid-template-columns:calc(76 * var(--u)) 1fr;padding:calc(24 * var(--u)) 0;border-bottom:1px solid var(--hair)}
.atx .fs5__hl b{font:400 calc(40 * var(--u))/1 var(--display);color:var(--sand)}
.atx .fs5__hl h3{font:400 calc(32 * var(--u))/1.1 var(--display);letter-spacing:0;color:var(--navy)}
.atx .fs5__hl p{margin-top:calc(8 * var(--u));font:400 max(13.5px,calc(17 * var(--u)))/1.5 var(--text);color:var(--body)}

/* keep exploring */
.atx .kx{margin-top:calc(75 * var(--u));padding-top:calc(150 * var(--u));padding-bottom:calc(150 * var(--u));background:var(--paper-2)}
.atx .kx__head{display:flex;flex-direction:column;align-items:center;text-align:center}
.atx .kx__head .fs-d{max-width:calc(760 * var(--u))}
.atx .kx__row{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(40 * var(--u));margin-top:calc(80 * var(--u))}
.atx .kx__ph{aspect-ratio:3 / 4;overflow:hidden;border-radius:999px 999px calc(14 * var(--u)) calc(14 * var(--u));box-shadow:0 0 0 calc(8 * var(--u)) var(--paper-2),0 0 0 calc(9 * var(--u)) rgba(184,154,106,.75)}
.atx .kx__ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.atx .kx__c:hover .kx__ph img{transform:scale(1.05)}
.atx .kx__c .fs-m{margin-top:calc(30 * var(--u))}
.atx .kx__c h3{margin-top:calc(8 * var(--u));font:400 calc(40 * var(--u))/1.05 var(--display);letter-spacing:-.005em;color:var(--navy)}
.atx .kx__d{margin-top:calc(12 * var(--u));font:400 max(13.5px,calc(17 * var(--u)))/1.55 var(--text);color:var(--body)}
.atx .kx__cr{margin-top:calc(70 * var(--u));text-align:center;font:400 max(12px,calc(13 * var(--u)))/1.6 var(--text);color:#7f8795}
.atx .kx__cr summary{display:inline-block;cursor:pointer;letter-spacing:.06em;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(127,135,149,.5)}
.atx .kx__cr summary::-webkit-details-marker{display:none}
.atx .kx__cr p{max-width:calc(1100 * var(--u));margin:12px auto 0;text-align:left}
.atx .kx__cr a{color:inherit}

/* below 1000px */
@media (max-width:999px){
  .atx{--rail:clamp(20px,5vw,48px)}
  .atx section{padding:40px var(--rail)}
  .atx section:first-child{padding-top:72px}
  .atx .fs5,.atx .fs5--r{display:block}
  .atx .fs-t{font-size:clamp(40px,10vw,64px)}
  .atx .fs-w{font-size:24px;margin-bottom:10px}
  .atx .fs-d{max-width:none;font-size:15.5px}
  .atx .fs5__art{height:118vw;margin-bottom:26px}
  .atx .fs5__arch{width:70vw;height:108vw}
  .atx .fs5__lens{width:40vw}
  .atx .fs5__yr{font-size:46px;top:10px}.atx .fs5__yr small{font-size:18px;margin-left:4px}
  .atx .fs5__hl{margin-top:24px}
  .atx .fs5__hl li{grid-template-columns:44px 1fr;padding:16px 0}
  .atx .fs5__hl h3{font-size:21px}.atx .fs5__hl b{font-size:24px}
  .atx .kx{margin-top:40px;padding-top:72px;padding-bottom:72px}
  .atx .kx__head{align-items:flex-start;text-align:left}
  .atx .kx__head .fs-d{max-width:none}
  .atx .kx__row{grid-template-columns:1fr 1fr;gap:34px 16px;margin-top:36px}
  .atx .kx__ph{box-shadow:0 0 0 5px var(--paper-2),0 0 0 6px rgba(184,154,106,.75)}
  .atx .kx__c .fs-m{margin-top:16px}
  .atx .kx__c h3{font-size:22px}
  .atx .kx__d{font-size:14px}
  .atx .kx__cr{margin-top:40px;text-align:left}
  .atx .kx__cr p{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.atx img{transition:none!important}}