/* About Us "Same corner. A new chapter." (2026-10-01): concept 1 "Then and now prints" from /sandpiper/about-story-concepts/.
   The entrance today as a large photo with an original Sandpiper Motel print laid over its corner; the story beside it.
   Homepage type (HP Display / HP Accent / HP Text / HP Label from park-details-home-type.css), lengths in frame px × --u
   (100vw / 1900), content on the 170 / 1730 rails. Below 1000px it stacks. */
.abs{
  --u:calc(100vw / 1900);
  --rail:calc(170 * var(--u));
  --navy:#073b57;--sand:#917658;--kick:#9c8268;--lead:#0b4b69;
  --ease:cubic-bezier(.4,.1,.2,1);
  position:relative;
  padding:calc(150 * var(--u)) var(--rail);
  background:#faf7ef;
  color:var(--navy);
}
.abs :where(h2,p,figure){margin:0}
.abs img{display:block;max-width:none}
.abs__g{display:grid;grid-template-columns:1.12fr 1fr;gap:calc(130 * var(--u));align-items:center}

/* photos */
.abs__ph{position:relative;padding:0 0 calc(110 * var(--u)) 0}
.abs__now{position:relative;aspect-ratio:1.28;border-radius:calc(22 * var(--u));overflow:hidden;box-shadow:0 calc(30 * var(--u)) calc(70 * var(--u)) rgba(60,44,20,.16)}
.abs__now img{width:100%;height:100%;object-fit:cover}
.abs__now figcaption{position:absolute;right:calc(24 * var(--u));top:calc(24 * var(--u));padding:calc(10 * var(--u)) calc(18 * var(--u));border-radius:999px;background:rgba(250,247,239,.92);font:500 max(10px,calc(12.5 * var(--u)))/1 "HP Label",Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--navy)}
.abs__then{position:absolute;left:calc(-12 * var(--u));bottom:0;width:48%;padding:calc(12 * var(--u)) calc(12 * var(--u)) 0;background:#fffdf8;box-shadow:0 calc(26 * var(--u)) calc(50 * var(--u)) rgba(60,44,20,.26);transform:rotate(-4deg);transition:transform .7s var(--ease)}
.abs__then:hover{transform:rotate(-1deg) translateY(calc(-8 * var(--u)))}
.abs__then img{width:100%;aspect-ratio:1.5;object-fit:cover;filter:sepia(.18)}
.abs__then figcaption{padding:calc(14 * var(--u)) 0 calc(16 * var(--u));text-align:center;font:400 max(18px,calc(30 * var(--u)))/1 "HP Accent",cursive;color:var(--sand)}

/* copy: the homepage section voice */
.abs__k{display:flex;align-items:center;gap:calc(20 * var(--u));font:400 max(11px,calc(14.26 * var(--u)))/1 "HP Label",Arial,sans-serif;letter-spacing:.39em;text-transform:uppercase;color:var(--kick);white-space:nowrap}
.abs__k::before{content:"";width:calc(40 * var(--u));min-width:24px;height:1px;background:#b0977f}
.abs__t{margin-top:calc(32 * var(--u))!important;font:400 calc(85.8 * var(--u))/.99 "HP Display",Georgia,serif;letter-spacing:-.01em;color:var(--navy)}
.abs__t em{display:inline-block;font:400 1.1em/.72 "HP Accent",cursive;font-style:normal;color:var(--sand);white-space:nowrap}
.abs__p{max-width:calc(640 * var(--u));margin-top:calc(26 * var(--u))!important;font:500 max(15px,calc(22 * var(--u)))/1.5 "HP Text",Arial,sans-serif;letter-spacing:-.01em;color:var(--lead)}
.abs__p + .abs__p{margin-top:calc(18 * var(--u))!important}

@media (prefers-reduced-motion:reduce){.abs__then{transition:none}}

@media (max-width:999px){
  .abs{padding:72px 20px}
  .abs__g{grid-template-columns:1fr;gap:40px}
  .abs__then{left:-6px;width:56%}
  .abs__t{font-size:clamp(36px,9vw,58px)}
  .abs__p{max-width:none;font-size:16px;margin-top:16px!important}
}