/* Atlantic Road Seaside Housing — experiences overview AND detail pages
   Loads after css/main.css (tokens, base, header, footer).

   One file for all six pages: experiences.html plus the five
   experience-*.html detail pages. They share the hero, the card grid and the
   featured band; the two halves that are NOT shared are marked below.
   (Until 2026-07-29 this was two ~90 % identical files, experiences.css and
   experience-detail.css, each carrying the other's rules as dead weight.)

   Note: the detail-page photo grid is .exp-gallery-grid, NOT .gallery-grid —
   the latter belongs to css/unit.css and takes .img-slot children directly,
   while this one wraps them in <figure>. Same idea, different markup. */

/* ==========================================================================
   Shared — all six pages
   ========================================================================== */
img{max-width:100%;display:block}
h1 em,h2 em{font-style:italic;font-weight:400}

/* Hero */
.exp-hero{position:relative;height:88vh;min-height:560px;display:flex;align-items:flex-end;color:var(--mist)}
.exp-hero .img-slot{position:absolute;inset:0}
.hero-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(19,43,58,.75),rgba(19,43,58,.15) 55%)}
.exp-hero-content{position:relative;z-index:2;padding-bottom:clamp(56px,10vh,110px)}
.exp-hero h1{font-size:clamp(2.6rem,6.4vw,4.6rem);max-width:16ch}
.crumb a{text-decoration:none;color:rgba(246,245,241,.8)}
.exp-meta{font-family:var(--accent);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--brass);margin-bottom:12px}

/* Card grid — the overview's main grid and the detail pages' "others" band */
.exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px)}
.exp-card{text-decoration:none;display:flex;flex-direction:column;transition:opacity .35s}
.exp-card.hidden{display:none}
.exp-card figure{overflow:hidden;margin:0}
.exp-card .img-slot{aspect-ratio:4/5;min-height:0;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.exp-card:hover .img-slot{transform:scale(1.045)}
.card-cat{font-family:var(--accent);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--brass-ink);margin:20px 0 8px}
.exp-card h3{font-size:1.45rem;margin-bottom:.55rem;transition:color .3s}
.exp-card:hover h3{color:var(--petrol)}
.exp-card p{font-size:.94rem;color:var(--slate)}
.card-more{font-family:var(--accent);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fjord);margin-top:14px;display:inline-flex;align-items:center;gap:10px}
.card-more::after{content:"→";color:var(--brass);transition:transform .3s}
.exp-card:hover .card-more::after{transform:translateX(5px)}

/* Featured / CTA */
.exp-hero-content .eyebrow,.featured .eyebrow{color:var(--brass)} /* dark bg — brass over brass-ink */
.featured{background:var(--fjord);color:var(--sand);padding:clamp(80px,12vh,150px) 0}
.featured-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.featured-imgs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.featured-imgs figure{margin:0}
.featured-imgs figure:first-child{aspect-ratio:3/4}
.featured-imgs figure:last-child{aspect-ratio:3/4;margin-top:48px}
.featured .score{font-family:var(--display);font-size:clamp(3.4rem,7vw,5.5rem);color:var(--brass);line-height:1}
.featured .score small{font-size:.35em;color:rgba(237,231,220,.7)}
.featured h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:1rem 0 1.2rem}
.featured p{color:rgba(237,231,220,.8);margin-bottom:2rem;max-width:50ch}
.featured .btn--solid:hover{color:var(--sand)}

/* ==========================================================================
   Overview only — experiences.html
   ========================================================================== */

/* Manifesto */
.manifesto{background:var(--sand);padding:clamp(72px,11vh,130px) 0;text-align:center}
.manifesto h2{font-size:clamp(1.7rem,3.4vw,2.6rem);max-width:24ch;margin:0 auto 1.4rem}
.manifesto p{max-width:62ch;margin:0 auto;color:var(--slate)}

/* Category filters (js/experiences.js toggles .exp-card.hidden) */
.exp-grid-section{padding:clamp(64px,9vh,110px) 0}
.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:clamp(40px,6vh,64px)}
.filter-btn{font-family:var(--accent);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;background:none;border:1px solid rgba(19,43,58,.25);color:var(--slate);padding:10px 20px;cursor:pointer;transition:all .3s}
.filter-btn:hover{border-color:var(--brass);color:var(--brass-ink)}
.filter-btn.active{background:var(--fjord);border-color:var(--fjord);color:var(--mist)}

/* Map container — the marker/popup skin is shared and lives in css/main.css.
   Fixed height so the deferred Leaflet load (ARSH.whenNear) costs no shift. */
.map-section{background:var(--sand);padding:clamp(64px,9vh,110px) 0}
.map-head{text-align:center;margin-bottom:clamp(32px,5vh,48px)}
.map-head h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.map-head p{max-width:56ch;margin:1rem auto 0;color:var(--slate)}
#expMap{height:clamp(420px,62vh,600px);width:100%;background:var(--mist);border:1px solid rgba(19,43,58,.15)}
.map-legend{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin-top:22px;font-family:var(--accent);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--slate)}
.map-legend span{display:inline-flex;align-items:center;gap:10px}
.legend-dot{width:13px;height:13px;border-radius:50%;flex:none}
.legend-dot--home{background:var(--fjord);box-shadow:0 0 0 2px var(--brass)}
.legend-dot--exp{background:var(--brass)}
.legend-dot--tip{background:var(--mist);border:2px solid var(--petrol)}

/* ==========================================================================
   Detail pages only — experience-*.html
   ========================================================================== */

/* Intro + facts card */
.exp-intro{padding:clamp(64px,9vh,110px) 0}
.intro-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.lede{font-family:var(--display);font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.5;margin-bottom:1.6rem}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-family:var(--accent);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;border:1px solid rgba(19,43,58,.25);color:var(--slate);padding:8px 16px}
.facts-card{background:var(--sand);padding:clamp(24px,3vw,36px)}
.facts-card h2{font-size:1.2rem;margin-bottom:6px}
.facts-card>p{font-size:.88rem;color:var(--slate);margin-bottom:14px}
.facts-list{list-style:none;border-top:1px solid rgba(19,43,58,.15)}
.facts-list li{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid rgba(19,43,58,.15);font-size:.88rem}
.facts-list span:first-child{font-family:var(--accent);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-ink);padding-top:3px;white-space:nowrap}
.facts-list span:last-child{text-align:right;color:var(--slate)}

/* Photo grid — <figure> wrappers, first three wide, the rest wider still.
   Distinct from .gallery-grid in css/unit.css (see the note at the top). */
.gallery{padding-bottom:clamp(64px,9vh,110px)}
.exp-gallery-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.exp-gallery-grid figure{margin:0;aspect-ratio:4/3;display:flex;flex-direction:column}
.exp-gallery-grid figure:nth-child(-n+3){grid-column:span 2}
.exp-gallery-grid figure:nth-child(n+4){grid-column:span 3}
.exp-gallery-grid .img-slot{flex:1;min-height:0}

/* Story */
.exp-story{background:var(--sand);padding:clamp(72px,10vh,130px) 0}
.exp-story .story-inner{max-width:720px;margin:0 auto}
.exp-story h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:1.6rem}
.exp-story p{color:var(--slate);margin-bottom:1.2rem}
/* Inline prose link — same treatment as .pp-body a / .faq answer a. Sand is a
   light background, so brass-ink, never plain brass (see the contrast rule). */
.exp-story p a{color:var(--brass-ink);text-decoration:underline;text-underline-offset:3px}
.exp-story p a:hover{color:var(--petrol)}

/* Other experiences */
.others{padding:clamp(64px,9vh,110px) 0}
.others h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:clamp(32px,5vh,48px);text-align:center}
.others .exp-grid{grid-template-columns:repeat(3,1fr)}

/* ==========================================================================
   Museum only — experience-museum.html: animated rune rails flanking a section
   ========================================================================== */
@keyframes rune-shine {
  from { background-position: 0 -100%; }
  to   { background-position: 0  200%; }
}
.rune-flank {
  position: relative;
}
.rune-rail {
  position: absolute;
  top: 24px;
  bottom: 24px;
  width: 32px;
  z-index: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%20420%22%3E%3Cg%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%3E%3C!--%20Fehu%20%E1%9A%A0%20--%3E%3Cline%20x1%3D%2212%22%20y1%3D%2210%22%20x2%3D%2212%22%20y2%3D%2244%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2216%22%20x2%3D%2222%22%20y2%3D%2222%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2227%22%20x2%3D%2222%22%20y2%3D%2233%22%2F%3E%3C!--%20dot%20sep%20--%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2253%22%20r%3D%222%22%20fill%3D%22%23000%22%2F%3E%3C!--%20Uruz%20%E1%9A%A2%20--%3E%3Cline%20x1%3D%2210%22%20y1%3D%2263%22%20x2%3D%2210%22%20y2%3D%2297%22%2F%3E%3Cline%20x1%3D%2210%22%20y1%3D%2263%22%20x2%3D%2222%22%20y2%3D%2280%22%2F%3E%3Cline%20x1%3D%2222%22%20y1%3D%2280%22%20x2%3D%2222%22%20y2%3D%2297%22%2F%3E%3C!--%20dot%20sep%20--%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%22106%22%20r%3D%222%22%20fill%3D%22%23000%22%2F%3E%3C!--%20Raidho%20%E1%9A%B1%20--%3E%3Cline%20x1%3D%2210%22%20y1%3D%22116%22%20x2%3D%2210%22%20y2%3D%22150%22%2F%3E%3Cline%20x1%3D%2210%22%20y1%3D%22116%22%20x2%3D%2221%22%20y2%3D%22124%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%22124%22%20x2%3D%2221%22%20y2%3D%22132%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%22132%22%20x2%3D%2210%22%20y2%3D%22133%22%2F%3E%3Cline%20x1%3D%2210%22%20y1%3D%22133%22%20x2%3D%2222%22%20y2%3D%22150%22%2F%3E%3C!--%20dot%20sep%20--%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%22159%22%20r%3D%222%22%20fill%3D%22%23000%22%2F%3E%3C!--%20Laguz%20%E1%9B%9A%20--%3E%3Cline%20x1%3D%2212%22%20y1%3D%22169%22%20x2%3D%2212%22%20y2%3D%22203%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%22169%22%20x2%3D%2222%22%20y2%3D%22183%22%2F%3E%3Cline%20x1%3D%2222%22%20y1%3D%22183%22%20x2%3D%2212%22%20y2%3D%22196%22%2F%3E%3C!--%20dot%20sep%20--%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%22212%22%20r%3D%222%22%20fill%3D%22%23000%22%2F%3E%3C!--%20Sowilo%20%E1%9B%8A%20--%3E%3Cline%20x1%3D%2220%22%20y1%3D%22222%22%20x2%3D%2213%22%20y2%3D%22237%22%2F%3E%3Cline%20x1%3D%2213%22%20y1%3D%22237%22%20x2%3D%2220%22%20y2%3D%22237%22%2F%3E%3Cline%20x1%3D%2220%22%20y1%3D%22237%22%20x2%3D%2213%22%20y2%3D%22252%22%2F%3E%3C!--%20dot%20sep%20--%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%22261%22%20r%3D%222%22%20fill%3D%22%23000%22%2F%3E%3C!--%20Mannaz%20%E1%9B%97%20--%3E%3Cline%20x1%3D%228%22%20y1%3D%22271%22%20x2%3D%228%22%20y2%3D%22305%22%2F%3E%3Cline%20x1%3D%2224%22%20y1%3D%22271%22%20x2%3D%2224%22%20y2%3D%22305%22%2F%3E%3Cline%20x1%3D%228%22%20y1%3D%22271%22%20x2%3D%2216%22%20y2%3D%22285%22%2F%3E%3Cline%20x1%3D%2224%22%20y1%3D%22271%22%20x2%3D%2216%22%20y2%3D%22285%22%2F%3E%3Cline%20x1%3D%228%22%20y1%3D%22289%22%20x2%3D%2224%22%20y2%3D%22289%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  -webkit-mask-repeat: repeat-y;
  -webkit-mask-position: top center;
  -webkit-mask-size: 32px auto;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%20420%22%3E%3Cg%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%3E%3C!--%20Fehu%20%E1%9A%A0%20--%3E%3Cline%20x1%3D%2212%22%20y1%3D%2210%22%20x2%3D%2212%22%20y2%3D%2244%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2216%22%20x2%3D%2222%22%20y2%3D%2222%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2227%22%20x2%3D%2222%22%20y2%3D%2233%22%2F%3E%3C!--%20dot%20sep%20--%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2253%22%20r%3D%222%22%20fill%3D%22%23000%22%2F%3E%3C!--%20Uruz%20%E1%9A%A2%20--%3E%3Cline%20x1%3D%2210%22%20y1%3D%2263%22%20x2%3D%2210%22%20y2%3D%2297%22%2F%3E%3Cline%20x1%3D%2210%22%20y1%3D%2263%22%20x2%3D%2222%22%20y2%3D%2280%22%2F%3E%3Cline%20x1%3D%2222%22%20y1%3D%2280%22%20x2%3D%2222%22%20y2%3D%2297%22%2F%3E%3C!--%20dot%20sep%20--%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%22106%22%20r%3D%222%22%20fill%3D%22%23000%22%2F%3E%3C!--%20Raidho%20%E1%9A%B1%20--%3E%3Cline%20x1%3D%2210%22%20y1%3D%22116%22%20x2%3D%2210%22%20y2%3D%22150%22%2F%3E%3Cline%20x1%3D%2210%22%20y1%3D%22116%22%20x2%3D%2221%22%20y2%3D%22124%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%22124%22%20x2%3D%2221%22%20y2%3D%22132%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%22132%22%20x2%3D%2210%22%20y2%3D%22133%22%2F%3E%3Cline%20x1%3D%2210%22%20y1%3D%22133%22%20x2%3D%2222%22%20y2%3D%22150%22%2F%3E%3C!--%20dot%20sep%20--%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%22159%22%20r%3D%222%22%20fill%3D%22%23000%22%2F%3E%3C!--%20Laguz%20%E1%9B%9A%20--%3E%3Cline%20x1%3D%2212%22%20y1%3D%22169%22%20x2%3D%2212%22%20y2%3D%22203%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%22169%22%20x2%3D%2222%22%20y2%3D%22183%22%2F%3E%3Cline%20x1%3D%2222%22%20y1%3D%22183%22%20x2%3D%2212%22%20y2%3D%22196%22%2F%3E%3C!--%20dot%20sep%20--%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%22212%22%20r%3D%222%22%20fill%3D%22%23000%22%2F%3E%3C!--%20Sowilo%20%E1%9B%8A%20--%3E%3Cline%20x1%3D%2220%22%20y1%3D%22222%22%20x2%3D%2213%22%20y2%3D%22237%22%2F%3E%3Cline%20x1%3D%2213%22%20y1%3D%22237%22%20x2%3D%2220%22%20y2%3D%22237%22%2F%3E%3Cline%20x1%3D%2220%22%20y1%3D%22237%22%20x2%3D%2213%22%20y2%3D%22252%22%2F%3E%3C!--%20dot%20sep%20--%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%22261%22%20r%3D%222%22%20fill%3D%22%23000%22%2F%3E%3C!--%20Mannaz%20%E1%9B%97%20--%3E%3Cline%20x1%3D%228%22%20y1%3D%22271%22%20x2%3D%228%22%20y2%3D%22305%22%2F%3E%3Cline%20x1%3D%2224%22%20y1%3D%22271%22%20x2%3D%2224%22%20y2%3D%22305%22%2F%3E%3Cline%20x1%3D%228%22%20y1%3D%22271%22%20x2%3D%2216%22%20y2%3D%22285%22%2F%3E%3Cline%20x1%3D%2224%22%20y1%3D%22271%22%20x2%3D%2216%22%20y2%3D%22285%22%2F%3E%3Cline%20x1%3D%228%22%20y1%3D%22289%22%20x2%3D%2224%22%20y2%3D%22289%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  mask-repeat: repeat-y;
  mask-position: top center;
  mask-size: 32px auto;
  background: linear-gradient(
    180deg,
    rgba(177,138,84,.30) 0%,
    rgba(177,138,84,.30) 38%,
    rgba(201,168,118,.95) 50%,
    rgba(177,138,84,.30) 62%,
    rgba(177,138,84,.30) 100%
  );
  background-size: 100% 300%;
  animation: rune-shine 9s linear infinite;
}
.rune-rail--left  { left:  clamp(14px, 2.5vw, 44px); }
.rune-rail--right { right: clamp(14px, 2.5vw, 44px); }
@media (max-width:1280px) { .rune-rail { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .rune-rail { animation: none; background: rgba(177,138,84,.30); background-size: 100% 100%; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:820px){
  .exp-grid,.others .exp-grid{grid-template-columns:repeat(2,1fr)}
  .intro-layout,.featured-layout{grid-template-columns:1fr}
  .exp-gallery-grid{grid-template-columns:repeat(2,1fr)}
  .exp-gallery-grid figure:nth-child(-n+3){grid-column:span 1}
  .exp-gallery-grid figure:nth-child(n+4){grid-column:span 1}
}
@media (max-width:640px){
  .exp-grid,.others .exp-grid{grid-template-columns:1fr}
  .exp-hero{height:76vh}
  .exp-gallery-grid{grid-template-columns:1fr}
  .exp-gallery-grid figure:nth-child(-n+3),.exp-gallery-grid figure:nth-child(n+4){grid-column:span 1}
  .featured-imgs figure:last-child{margin-top:24px}
}