/* ===========================================================
   SKI RESORTS FOR KINGS — page components
   Resort template · Category/listing · Comparison tool
   Builds on styles.css tokens.
   =========================================================== */

/* inner pages start below the fixed solid nav */
body.inner{ padding-top:0; }

/* ====================================================================
   CROWN RATING
   ==================================================================== */
.crowns{ display:inline-flex; gap:3px; align-items:center; }
.crowns svg{ width:18px; height:13px; }
.crowns .on{ fill:var(--gold-bright); stroke:none; }
.crowns .off{ fill:none; stroke:var(--gold-deep); stroke-width:1.4; }
.rating-num{ font-family:var(--serif); font-size:18px; color:var(--gold-bright); margin-left:8px; }

/* ====================================================================
   RESORT HERO
   ==================================================================== */
.rhero{ position:relative; min-height:84svh; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:clamp(34px,5vh,64px); overflow:hidden; }
.rhero-media{ position:absolute; inset:0; z-index:0; }
.rhero-media image-slot{ width:100%; height:100%; }
.rhero::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, var(--ink) 4%, rgba(11,15,21,.35) 48%, rgba(11,15,21,.55) 100%); }
.rhero-inner{ position:relative; z-index:2; }
.breadcrumb{ display:flex; gap:9px; align-items:center; font-size:12px; letter-spacing:.08em; color:var(--cream-dim); margin-bottom:22px; flex-wrap:wrap; }
.breadcrumb a{ color:var(--cream-dim); transition:color .3s; }
.breadcrumb a:hover{ color:var(--gold-bright); }
.breadcrumb .sep{ color:var(--gold); opacity:.6; }
.rhero h1{ font-size:clamp(52px,8vw,104px); line-height:.96; }
.rhero .rh-top{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:10px; }
.rhero .rh-flag{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }
.rhero .rh-verdict{ font-family:var(--serif); font-style:italic; font-size:clamp(19px,2vw,26px); color:var(--cream); margin-top:18px; max-width:30ch; }
.rhero-cta{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.btn-gold{ background:var(--gold); color:var(--ink); white-space:nowrap; padding:15px 28px; border-radius:2px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; transition:background .3s; display:inline-flex; align-items:center; gap:9px; }
.btn-gold:hover{ background:var(--gold-bright); }
.btn-ghost{ border:1px solid var(--line-gold); color:var(--gold-bright); white-space:nowrap; padding:15px 26px; border-radius:2px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; transition:background .3s, color .3s; display:inline-flex; align-items:center; gap:9px; }
.btn-ghost:hover{ background:var(--gold); color:var(--ink); }

/* quick stat strip under hero */
.quickstrip{ border-block:1px solid var(--line-neutral); background:var(--ink-2); }
.quickstrip .wrap{ display:flex; flex-wrap:wrap; }
.qs{ flex:1; min-width:140px; padding:26px 18px; text-align:center; border-right:1px solid var(--line-neutral); }
.qs:last-child{ border-right:none; }
.qs .n{ font-family:var(--serif); font-size:clamp(26px,2.6vw,38px); color:var(--gold-bright); line-height:1; }
.qs .l{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-dim); margin-top:9px; }

/* sticky sub nav */
.subnav{ position:sticky; top:62px; z-index:40; background:rgba(11,15,21,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-neutral); }
.subnav .wrap{ display:flex; gap:30px; overflow-x:auto; }
.subnav a{ padding:18px 0; font-size:13px; letter-spacing:.08em; color:var(--cream-dim); white-space:nowrap; border-bottom:2px solid transparent; transition:color .3s, border-color .3s; }
.subnav a:hover, .subnav a.active{ color:var(--gold-bright); border-color:var(--gold); }

/* ====================================================================
   RESORT BODY LAYOUT
   ==================================================================== */
.rbody{ display:grid; grid-template-columns:1fr 360px; gap:clamp(40px,5vw,80px); align-items:start; }
.rmain > section{ padding-block:clamp(46px,6vh,72px); border-bottom:1px solid var(--line-neutral); }
.rmain > section:first-child{ padding-top:clamp(40px,6vh,64px); }
.rmain h2{ font-size:clamp(30px,3.4vw,46px); margin-bottom:24px; }
.rmain h3{ font-size:24px; }
.prose{ font-size:18px; line-height:1.72; color:var(--cream-dim); max-width:64ch; }
.prose p{ margin-bottom:20px; }
.prose p:first-of-type::first-letter{ font-family:var(--serif); font-size:74px; line-height:.7; float:left; color:var(--gold-bright); padding:8px 14px 0 0; }
.prose strong{ color:var(--cream); font-weight:600; }

/* sidebar */
.rside{ position:sticky; top:130px; display:flex; flex-direction:column; gap:22px; }
.card{ background:var(--ink-card); border:1px solid var(--line-neutral); border-radius:5px; padding:26px; }
.card.gold-edge{ border-color:var(--line-gold); }
.card h4{ font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; }
.glance{ display:flex; flex-direction:column; }
.glance .row{ display:flex; justify-content:space-between; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--line-neutral); }
.glance .row:last-child{ border-bottom:none; }
.glance .k{ font-size:13.5px; color:var(--cream-dim); }
.glance .v{ font-family:var(--serif); font-size:18px; color:var(--cream); white-space:nowrap; }
.glance .v.gold{ color:var(--gold-bright); }
.side-cta p{ font-size:14px; color:var(--cream-dim); margin-bottom:16px; line-height:1.5; }
.side-cta .btn-gold{ width:100%; justify-content:center; }
.side-cta .note{ font-size:11px; color:var(--slate); margin-top:12px; text-align:center; }

/* piste split bar */
.piste-bar{ display:flex; height:16px; border-radius:3px; overflow:hidden; margin:8px 0 18px; }
.piste-bar span{ display:block; }
.pb-green{ background:#5a9e63; } .pb-blue{ background:#3f7fc4; } .pb-red{ background:#c4543f; } .pb-black{ background:#2a3340; }
.piste-legend{ display:flex; gap:24px; flex-wrap:wrap; }
.piste-legend div{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--cream-dim); }
.piste-legend .sw{ width:13px; height:13px; border-radius:3px; }
.piste-legend b{ color:var(--cream); font-family:var(--serif); font-size:17px; margin-right:5px; }

/* best-for chips */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ border:1px solid var(--line-gold); color:var(--gold-bright); padding:9px 16px; border-radius:30px; font-size:13px; letter-spacing:.04em; transition:background .3s, color .3s; }
a.chip:hover{ background:var(--gold); color:var(--ink); }

/* gallery */
.gallery{ display:grid; grid-template-columns:2fr 1fr 1fr; grid-auto-rows:150px; gap:12px; }
.gallery image-slot{ width:100%; height:100%; }
.gallery .g0{ grid-row:span 2; }

/* stay cards (money) */
.stay-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.stay{ background:var(--ink-card); border:1px solid var(--line-neutral); border-radius:5px; overflow:hidden; transition:transform .5s var(--ease), border-color .5s; display:flex; flex-direction:column; }
.stay:hover{ transform:translateY(-5px); border-color:var(--line-gold); }
.stay .smedia{ aspect-ratio:3/2; position:relative; }
.stay image-slot{ width:100%; height:100%; }
.stay .stype{ position:absolute; top:12px; left:12px; background:rgba(11,15,21,.7); backdrop-filter:blur(4px); border:1px solid var(--line-gold); color:var(--gold-bright); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; padding:6px 11px; border-radius:2px; }
.stay .sbody{ padding:20px; display:flex; flex-direction:column; flex:1; }
.stay h3{ font-size:22px; }
.stay .smeta{ font-size:13px; color:var(--cream-dim); margin-top:5px; }
.stay .sfoot{ display:flex; align-items:flex-end; justify-content:space-between; margin-top:auto; padding-top:18px; }
.stay .price{ font-family:var(--serif); font-size:24px; color:var(--gold-bright); }
.stay .price small{ font-family:var(--sans); font-size:11px; color:var(--slate); display:block; letter-spacing:.04em; }
.stay .book{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-bright); border-bottom:1px solid var(--line-gold); padding-bottom:4px; transition:gap .3s; }

/* getting there */
.gt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.gt-rows{ display:flex; flex-direction:column; gap:0; }
.gt-row{ display:flex; align-items:center; gap:18px; padding:16px 0; border-bottom:1px solid var(--line-neutral); }
.gt-row .code{ font-family:var(--serif); font-size:24px; color:var(--gold-bright); min-width:58px; }
.gt-row .gt-info b{ display:block; font-size:15px; }
.gt-row .gt-info span{ font-size:13px; color:var(--cream-dim); }
.gt-row .gt-time{ margin-left:auto; font-size:14px; color:var(--cream-dim); }
.gt-map{ aspect-ratio:1/1; border:1px solid var(--line-gold); border-radius:5px; position:relative; overflow:hidden; }
.gt-map image-slot{ width:100%; height:100%; }
.gt-map .pin{ position:absolute; top:50%; left:50%; transform:translate(-50%,-100%); color:var(--gold-bright); }

/* snow chart */
.snowchart{ display:flex; align-items:flex-end; gap:clamp(12px,3vw,40px); height:200px; padding-top:20px; }
.sc-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:12px; height:100%; justify-content:flex-end; }
.sc-bar{ width:100%; max-width:64px; background:linear-gradient(to top, var(--gold-deep), var(--gold-bright)); border-radius:3px 3px 0 0; position:relative; transition:height 1s var(--ease); }
.sc-bar .pct{ position:absolute; top:-22px; left:0; right:0; text-align:center; font-family:var(--serif); font-size:15px; color:var(--gold-bright); }
.sc-month{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-dim); }

/* verdict pros/cons */
.verdict-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.vcol h3{ display:flex; align-items:center; gap:10px; margin-bottom:16px; font-family:var(--sans); font-size:13px; letter-spacing:.16em; text-transform:uppercase; }
.vcol.pro h3{ color:var(--gold-bright); }
.vcol.con h3{ color:var(--slate); }
.vlist{ display:flex; flex-direction:column; gap:12px; }
.vlist li{ list-style:none; display:flex; gap:12px; font-size:15.5px; color:var(--cream-dim); line-height:1.5; }
.vlist .mk{ color:var(--gold); flex-shrink:0; }
.vcol.con .mk{ color:var(--slate); }

/* related */
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

/* ====================================================================
   CATEGORY / LISTING PAGE
   ==================================================================== */
.cat-hero{ padding-top:130px; padding-bottom:46px; border-bottom:1px solid var(--line-neutral); position:relative; overflow:hidden; }
.cat-hero .eyebrow{ margin-bottom:18px; }
.cat-hero h1{ font-size:clamp(40px,6vw,80px); max-width:16ch; }
.cat-hero p{ color:var(--cream-dim); max-width:56ch; margin-top:22px; font-size:18px; line-height:1.6; }
.cat-hero .ghost-crown{ position:absolute; right:-40px; top:40px; width:340px; opacity:.05; color:var(--gold); pointer-events:none; }

.toolbar{ position:sticky; top:62px; z-index:40; background:rgba(11,15,21,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-neutral); }
.toolbar .wrap{ display:flex; align-items:center; gap:18px; padding-block:16px; flex-wrap:wrap; }
.toolbar .count{ font-size:14px; color:var(--cream-dim); }
.toolbar .count b{ color:var(--gold-bright); font-family:var(--serif); font-size:18px; }
.toolbar .spacer{ flex:1; }
.filters{ display:flex; gap:8px; flex-wrap:wrap; }
.fbtn{ border:1px solid var(--line-neutral); color:var(--cream-dim); padding:9px 15px; border-radius:30px; font-size:12.5px; letter-spacing:.03em; transition:all .3s; }
.fbtn:hover{ border-color:var(--line-gold); color:var(--cream); }
.fbtn.on{ background:var(--gold); color:var(--ink); border-color:var(--gold); font-weight:600; }
.sortsel{ background:var(--ink-2); border:1px solid var(--line-neutral); color:var(--cream); border-radius:2px; padding:10px 14px; font-family:var(--sans); font-size:13px; outline:none; cursor:pointer; -webkit-appearance:none; appearance:none; }
.sortsel option{ background:var(--ink-2); }

.cat-list{ display:flex; flex-direction:column; gap:18px; padding-block:46px; }
.lrow{ display:grid; grid-template-columns:auto 280px 1fr auto; gap:28px; align-items:stretch; background:var(--ink-card); border:1px solid var(--line-neutral); border-radius:6px; overflow:hidden; transition:border-color .4s, transform .4s; }
.lrow:hover{ border-color:var(--line-gold); transform:translateY(-3px); }
.lrank{ font-family:var(--serif); font-size:30px; color:var(--gold-bright); display:flex; align-items:center; justify-content:center; width:74px; border-right:1px solid var(--line-neutral); background:var(--ink-2); }
.lmedia{ position:relative; }
.lmedia image-slot{ width:100%; height:100%; min-height:160px; }
.lmedia .lcountry{ position:absolute; bottom:10px; left:10px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream); background:rgba(11,15,21,.65); padding:5px 10px; border-radius:2px; }
.linfo{ padding:22px 6px; display:flex; flex-direction:column; }
.linfo .ltop{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; row-gap:8px; }
.linfo h3{ font-size:28px; white-space:nowrap; }
.linfo .lregion{ font-size:13px; letter-spacing:.06em; color:var(--gold); text-transform:uppercase; }
.linfo .lverdict{ font-family:var(--serif); font-style:italic; font-size:17px; color:var(--cream-dim); margin-top:8px; }
.linfo .ltags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:16px; }
.ltag{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-dim); border:1px solid var(--line-neutral); padding:5px 10px; border-radius:20px; }
.lstats{ padding:22px 26px 22px 0; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:14px; min-width:190px; border-left:1px solid var(--line-neutral); padding-left:26px; }
.lstats .lnums{ display:flex; gap:20px; text-align:right; }
.lstats .lnums .n{ font-family:var(--serif); font-size:20px; color:var(--cream); }
.lstats .lnums .l{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); margin-top:3px; }
.lstats .lactions{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.lcompare{ display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.06em; color:var(--cream-dim); cursor:pointer; user-select:none; }
.lcompare input{ accent-color:var(--gold); width:16px; height:16px; cursor:pointer; }
.cat-empty{ text-align:center; padding:80px 0; color:var(--cream-dim); }
.cat-empty .h2{ margin-bottom:14px; }

/* compare tray (sticky bottom) */
.tray{ position:fixed; left:0; right:0; bottom:0; z-index:80; background:rgba(15,21,29,.96); backdrop-filter:blur(16px); border-top:1px solid var(--line-gold); transform:translateY(110%); transition:transform .5s var(--ease); }
.tray.show{ transform:none; }
.tray .wrap{ display:flex; align-items:center; gap:20px; padding-block:16px; }
.tray .tlabel{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.tray .tchips{ display:flex; gap:10px; flex:1; flex-wrap:wrap; }
.tchip{ display:flex; align-items:center; gap:9px; background:var(--ink-3); border:1px solid var(--line-neutral); border-radius:30px; padding:8px 8px 8px 16px; font-size:14px; }
.tchip button{ width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.08); color:var(--cream-dim); font-size:14px; line-height:1; }
.tchip button:hover{ background:var(--gold); color:var(--ink); }

/* FAQ */
.faq{ max-width:820px; }
.faq-item{ border-bottom:1px solid var(--line-neutral); }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0; cursor:pointer; font-family:var(--serif); font-size:23px; color:var(--cream); }
.faq-q .pl{ color:var(--gold); font-size:24px; transition:transform .3s; flex-shrink:0; }
.faq-item.open .faq-q .pl{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a p{ color:var(--cream-dim); font-size:16px; line-height:1.65; padding-bottom:24px; max-width:70ch; }

/* ====================================================================
   COMPARE PAGE
   ==================================================================== */
.cmp-hero{ padding-top:130px; padding-bottom:40px; }
.cmp-hero h1{ font-size:clamp(40px,6vw,76px); }
.cmp-hero p{ color:var(--cream-dim); max-width:52ch; margin-top:18px; font-size:18px; }
.cmp-wrap{ padding-bottom:90px; overflow-x:auto; }
.cmp-table{ width:100%; border-collapse:collapse; min-width:680px; }
.cmp-table th, .cmp-table td{ text-align:left; padding:18px 22px; border-bottom:1px solid var(--line-neutral); vertical-align:middle; }
.cmp-table .rowlabel{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); width:170px; white-space:nowrap; }
.cmp-table td.best{ position:relative; }
.cmp-table td.best .val{ color:var(--gold-bright); }
.cmp-table td.best::after{ content:"BEST"; position:absolute; top:8px; right:14px; font-size:9px; letter-spacing:.12em; color:var(--gold); opacity:.7; }
.cmp-val{ font-family:var(--serif); font-size:21px; color:var(--cream); }
.cmp-sub{ font-size:12px; color:var(--slate); }

/* picker column header */
.cmp-pick{ position:relative; }
.cmp-picked{ display:flex; flex-direction:column; gap:6px; }
.cmp-picked .pname{ font-family:var(--serif); font-size:26px; color:var(--cream); line-height:1.05; }
.cmp-picked .pmeta{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); }
.cmp-picked .premove{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); margin-top:8px; cursor:pointer; align-self:flex-start; }
.cmp-picked .premove:hover{ color:var(--gold-bright); }
.cmp-pickbtn{ border:1px dashed var(--line-gold); border-radius:5px; color:var(--gold-bright); padding:20px 16px; width:100%; min-height:90px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer; transition:background .3s; font-size:13px; letter-spacing:.06em; }
.cmp-pickbtn:hover{ background:rgba(200,162,83,.08); }
.cmp-pickbtn .plus{ font-size:26px; font-family:var(--serif); }
.cmp-thead th{ vertical-align:top; min-width:200px; }
.cmp-mini{ display:flex; height:10px; border-radius:2px; overflow:hidden; width:140px; }

/* picker dropdown */
.pickmenu{ position:absolute; top:calc(100% + 6px); left:0; z-index:50; background:var(--ink-2); border:1px solid var(--line-gold); border-radius:5px; width:260px; max-height:320px; overflow-y:auto; display:none; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.pickmenu.show{ display:block; }
.pickmenu button{ display:block; width:100%; text-align:left; padding:13px 18px; border-bottom:1px solid var(--line-neutral); color:var(--cream); transition:background .2s; }
.pickmenu button:hover{ background:rgba(200,162,83,.1); }
.pickmenu button .pm-name{ font-family:var(--serif); font-size:18px; }
.pickmenu button .pm-meta{ font-size:11px; color:var(--slate); letter-spacing:.05em; }
.pickmenu button:disabled{ opacity:.35; cursor:not-allowed; }

/* short-viewport guard: keep tall heroes clear of the fixed nav */
@media (max-height:780px){
  .art-hero, .rhero{ min-height:0; padding-top:104px; justify-content:flex-end; }
  .art-hero h1{ font-size:clamp(34px,5vw,60px); }
}

/* ====================================================================
   OPERATORS — directory + profile (the supply side)
   ==================================================================== */
.op-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.opcard{ display:flex; flex-direction:column; background:var(--ink-card); border:1px solid var(--line-neutral); border-radius:8px; padding:28px; transition:transform .45s var(--ease), border-color .45s; }
.opcard:hover{ transform:translateY(-5px); border-color:var(--line-gold); }
.op-head{ display:flex; align-items:flex-start; gap:18px; }
.op-mono{ width:60px; height:60px; border-radius:50%; border:1px solid var(--line-gold); display:grid; place-items:center; font-family:var(--serif); font-size:24px; color:var(--gold-bright); flex-shrink:0; background:rgba(200,162,83,.06); }
.op-head .op-h{ flex:1; min-width:0; }
.op-head h3{ font-size:25px; line-height:1.05; }
.op-type{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-top:6px; display:inline-block; }
.op-rate{ display:flex; align-items:center; gap:8px; margin-top:4px; font-size:13px; color:var(--cream-dim); }
.op-rate b{ font-family:var(--serif); font-size:17px; color:var(--gold-bright); }
.op-tagline{ font-family:var(--serif); font-style:italic; font-size:17px; color:var(--cream-dim); margin-top:18px; line-height:1.45; }
.op-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.op-chip{ font-size:11px; letter-spacing:.06em; color:var(--cream-dim); border:1px solid var(--line-neutral); padding:5px 11px; border-radius:20px; }
.op-badges{ display:flex; flex-wrap:wrap; gap:14px; margin-top:18px; }
.op-badge{ display:flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-bright); }
.op-badge svg{ width:14px; height:14px; }
.op-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-top:auto; padding-top:22px; }
.op-from{ font-family:var(--serif); font-size:22px; color:var(--gold-bright); }
.op-from small{ display:block; font-family:var(--sans); font-size:11px; color:var(--slate); letter-spacing:.04em; }
.op-foot .op-actions{ display:flex; gap:10px; align-items:center; }
.op-view{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-bright); border-bottom:1px solid var(--line-gold); padding-bottom:4px; white-space:nowrap; }

/* operator profile */
.op-stats{ display:flex; gap:clamp(28px,5vw,64px); flex-wrap:wrap; }
.op-stats .n{ font-family:var(--serif); font-size:clamp(30px,4vw,46px); color:var(--gold-bright); line-height:1; }
.op-stats .l{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-dim); margin-top:10px; }
.op-services{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 30px; }
.op-services li{ list-style:none; display:flex; gap:12px; align-items:center; font-size:16px; color:var(--cream-dim); padding:8px 0; border-bottom:1px solid var(--line-neutral); }
.op-services .mk{ color:var(--gold); }

@media (max-width:1000px){ .op-grid{ grid-template-columns:1fr; } }
@media (max-width:680px){ .op-services{ grid-template-columns:1fr; } .op-foot{ flex-direction:column; align-items:flex-start; } }

/* ====================================================================
   EDITORIAL — guides index + article template
   ==================================================================== */
.art-hero{ position:relative; min-height:64svh; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:clamp(34px,5vh,60px); overflow:hidden; }
.art-hero-media{ position:absolute; inset:0; z-index:0; }
.art-hero-media image-slot{ width:100%; height:100%; }
.art-hero::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, var(--ink) 6%, rgba(11,15,21,.4) 50%, rgba(11,15,21,.55)); }
.art-hero-inner{ position:relative; z-index:2; max-width:920px; }
.art-cat{ display:inline-flex; gap:14px; align-items:center; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.art-cat .rt{ color:var(--cream-dim); }
.art-hero h1{ font-size:clamp(38px,5.5vw,76px); line-height:1.02; }
.art-dek{ font-family:var(--serif); font-style:italic; font-size:clamp(19px,2vw,27px); color:var(--cream); margin-top:22px; max-width:46ch; line-height:1.4; }
.art-byline{ display:flex; gap:18px; align-items:center; margin-top:26px; font-size:13px; color:var(--cream-dim); letter-spacing:.04em; }
.art-byline .dot{ width:4px; height:4px; border-radius:50%; background:var(--gold); }

.article{ max-width:740px; margin-inline:auto; padding-block:clamp(50px,7vh,80px); }
.article > p{ font-size:19px; line-height:1.75; color:var(--cream); margin-bottom:26px; }
.article > p:first-of-type::first-letter{ font-family:var(--serif); font-size:78px; line-height:.7; float:left; color:var(--gold-bright); padding:8px 14px 0 0; }
.article h2{ font-size:clamp(26px,3vw,38px); margin:46px 0 18px; }
.article em{ color:var(--cream); }
.article strong{ color:var(--cream); font-weight:600; }
.article .a-quote{ font-family:var(--serif); font-size:clamp(24px,3vw,34px); line-height:1.3; color:var(--gold-bright); border-left:2px solid var(--gold); padding:6px 0 6px 28px; margin:40px 0; font-style:italic; }
.article .a-list{ margin:8px 0 26px; display:flex; flex-direction:column; gap:14px; }
.article .a-list li{ list-style:none; display:flex; gap:14px; font-size:17.5px; line-height:1.55; color:var(--cream-dim); }
.article .a-list .mk{ color:var(--gold); flex-shrink:0; }
.article .a-tip{ background:var(--ink-card); border:1px solid var(--line-gold); border-radius:6px; padding:24px 26px; margin:34px 0; font-size:16.5px; line-height:1.6; color:var(--cream-dim); }
.article .a-tip strong{ color:var(--gold-bright); }
.a-resorts{ margin:40px 0; }
.a-resorts h4{ font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; }
.a-resorts .ar-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.a-rcard{ display:block; background:var(--ink-card); border:1px solid var(--line-neutral); border-radius:5px; overflow:hidden; transition:transform .4s var(--ease), border-color .4s; }
.a-rcard:hover{ transform:translateY(-4px); border-color:var(--line-gold); }
.a-rcard .arm{ aspect-ratio:4/3; }
.a-rcard image-slot{ width:100%; height:100%; }
.a-rcard .arb{ padding:14px 16px; }
.a-rcard .arb h5{ font-family:var(--serif); font-size:20px; font-weight:500; }
.a-rcard .arb span{ font-size:11.5px; letter-spacing:.06em; color:var(--gold); text-transform:uppercase; }

/* guides index */
.guide-feature{ display:grid; grid-template-columns:1.2fr 1fr; gap:0; border:1px solid var(--line-gold); border-radius:8px; overflow:hidden; margin-bottom:40px; }
.guide-feature .gf-media{ position:relative; min-height:360px; }
.guide-feature image-slot{ width:100%; height:100%; }
.guide-feature .gf-body{ padding:clamp(30px,4vw,56px); display:flex; flex-direction:column; justify-content:center; }
.guide-feature .gf-cat{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.guide-feature h2{ font-size:clamp(30px,3.6vw,48px); margin:16px 0; }
.guide-feature p{ color:var(--cream-dim); font-size:17px; line-height:1.6; }
.guide-feature .gf-read{ margin-top:24px; }
.guide-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.gcard{ display:flex; flex-direction:column; background:var(--ink-card); border:1px solid var(--line-neutral); border-radius:6px; overflow:hidden; transition:transform .45s var(--ease), border-color .45s; }
.gcard:hover{ transform:translateY(-5px); border-color:var(--line-gold); }
.gcard .gc-media{ aspect-ratio:16/10; }
.gcard image-slot{ width:100%; height:100%; }
.gcard .gc-body{ padding:24px; display:flex; flex-direction:column; flex:1; }
.gcard .gc-cat{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.gcard h3{ font-size:25px; margin:12px 0; line-height:1.1; }
.gcard p{ font-size:14.5px; color:var(--cream-dim); line-height:1.5; }
.gcard .gc-foot{ margin-top:auto; padding-top:18px; font-size:12px; letter-spacing:.06em; color:var(--slate); }
@media (max-width:1000px){ .a-resorts .ar-grid{ grid-template-columns:repeat(3,1fr); } .guide-feature{ grid-template-columns:1fr; } .guide-feature .gf-media{ min-height:240px; } .guide-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .a-resorts .ar-grid{ grid-template-columns:1fr; } .guide-grid{ grid-template-columns:1fr; } }

/* ====================================================================
   RESORT MAP VIEW
   ==================================================================== */
.maplayout{ display:grid; grid-template-columns:1fr 360px; gap:30px; align-items:start; }
.mappanel{ position:relative; border:1px solid var(--line-gold); border-radius:8px; overflow:hidden; aspect-ratio:16/11;
  background:
    radial-gradient(80% 90% at 30% 30%, rgba(63,127,196,.05), transparent 60%),
    radial-gradient(70% 80% at 75% 65%, rgba(90,158,99,.04), transparent 60%),
    linear-gradient(160deg, var(--ink-3), var(--ink-2)); }
.mapgrat{ position:absolute; inset:0; pointer-events:none; opacity:.5; }
.mapterritory{ position:absolute; width:230px; height:230px; border-radius:50%; transform:translate(-50%,-50%); filter:blur(50px); pointer-events:none; }
.maplabel{ position:absolute; transform:translate(-50%,-50%); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:rgba(241,236,225,.28); font-weight:600; pointer-events:none; }
.mpin{ position:absolute; transform:translate(-50%,-50%); z-index:3; width:14px; height:14px; cursor:pointer; }
.mpin::before{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(200,162,83,.16); transition:transform .25s, box-shadow .25s; }
.mpin:hover::before, .mpin.active::before{ transform:scale(1.4); box-shadow:0 0 0 7px rgba(200,162,83,.32); }
.mpin .mtip{ position:absolute; bottom:150%; left:50%; transform:translateX(-50%) translateY(6px); background:rgba(11,15,21,.95); backdrop-filter:blur(8px); border:1px solid var(--line-gold); border-radius:5px; padding:10px 14px; width:max-content; max-width:210px; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:10; }
.mpin:hover .mtip, .mpin.active .mtip{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.mtip .mt-name{ font-family:var(--serif); font-size:19px; color:var(--gold-bright); }
.mtip .mt-meta{ font-size:11.5px; color:var(--cream-dim); letter-spacing:.04em; margin-top:2px; }
.mtip .mt-go{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-top:8px; display:inline-block; }

.maplist{ position:sticky; top:120px; max-height:calc(100vh - 150px); overflow-y:auto; border:1px solid var(--line-neutral); border-radius:8px; }
.maplist .mlfilter{ display:flex; gap:6px; padding:14px; border-bottom:1px solid var(--line-neutral); flex-wrap:wrap; position:sticky; top:0; background:var(--ink-2); z-index:2; }
.mlf{ font-size:11.5px; letter-spacing:.04em; padding:7px 12px; border-radius:20px; border:1px solid var(--line-neutral); color:var(--cream-dim); transition:all .3s; }
.mlf.on{ background:var(--gold); color:var(--ink); border-color:var(--gold); font-weight:600; }
.mlrow{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid var(--line-neutral); cursor:pointer; transition:background .25s; }
.mlrow:last-child{ border-bottom:none; }
.mlrow:hover, .mlrow.active{ background:rgba(200,162,83,.08); }
.mlrow .mlrank{ font-family:var(--serif); color:var(--gold-bright); font-size:15px; width:20px; text-align:center; flex-shrink:0; }
.mlrow .mlname{ font-family:var(--serif); font-size:18px; color:var(--cream); line-height:1.1; }
.mlrow .mlmeta{ font-size:11px; letter-spacing:.05em; color:var(--slate); text-transform:uppercase; margin-top:2px; }
.mlrow .mlrate{ margin-left:auto; font-family:var(--serif); color:var(--gold-bright); font-size:15px; flex-shrink:0; }

.mapworld{ margin-top:40px; }
.mapworld .ww-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

@media (max-width:1000px){
  .maplayout{ grid-template-columns:1fr; }
  .maplist{ position:static; max-height:none; }
  .mapworld .ww-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){ .mapworld .ww-grid{ grid-template-columns:1fr; } .mappanel{ aspect-ratio:1/1; } }

/* ====================================================================
   REGIONS INDEX — the "Alpine arc" atlas
   ==================================================================== */
.atlas{ position:relative; border:1px solid var(--line-gold); border-radius:6px; overflow:hidden; aspect-ratio:5/2; min-height:300px;
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(200,162,83,.10), transparent 60%),
    radial-gradient(60% 70% at 20% 30%, rgba(63,127,196,.06), transparent 70%),
    var(--ink-2); }
.atlas .topo{ position:absolute; inset:0; opacity:.5; }
.atlas .arc{ position:absolute; left:0; right:0; bottom:0; width:100%; height:auto; color:var(--gold); }
.atlas .pin{ position:absolute; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; z-index:2; transition:z-index 0s; }
.atlas .pin:hover{ z-index:9; }
.atlas .plabel{ background:rgba(11,15,21,.82); backdrop-filter:blur(6px); border:1px solid var(--line-neutral); border-radius:4px; padding:8px 13px; transition:border-color .3s, transform .3s, background .3s; white-space:nowrap; }
.atlas .pin:hover .plabel{ border-color:var(--gold); transform:translateY(-3px); background:rgba(15,21,29,.95); }
.atlas .plabel .pn{ font-family:var(--serif); font-size:16px; color:var(--cream); line-height:1.1; }
.atlas .pin:hover .plabel .pn{ color:var(--gold-bright); }
.atlas .plabel .pc{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); margin-top:2px; }
.atlas .dot{ width:11px; height:11px; border-radius:50%; background:var(--gold); position:relative; box-shadow:0 0 0 4px rgba(200,162,83,.18); }
.atlas .pin:hover .dot{ box-shadow:0 0 0 6px rgba(200,162,83,.3); }
.atlas-cap{ display:flex; justify-content:space-between; gap:16px; margin-top:16px; flex-wrap:wrap; }
.atlas-cap small{ color:var(--slate); font-size:12px; letter-spacing:.04em; }

.atlas-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.acard{ display:block; background:var(--ink-card); border:1px solid var(--line-neutral); border-radius:6px; padding:28px; transition:transform .45s var(--ease), border-color .45s; }
.acard:hover{ transform:translateY(-5px); border-color:var(--line-gold); }
.acard .atype{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.acard h3{ font-size:30px; margin:12px 0 0; transition:color .3s; }
.acard:hover h3{ color:var(--gold-bright); }
.acard .acountry{ font-size:12px; letter-spacing:.08em; color:var(--cream-dim); text-transform:uppercase; margin-top:4px; }
.acard .atag{ font-family:var(--serif); font-style:italic; font-size:17px; color:var(--cream-dim); margin-top:14px; line-height:1.4; }
.acard .astats{ display:flex; gap:22px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line-neutral); }
.acard .astats .n{ font-family:var(--serif); font-size:20px; color:var(--cream); }
.acard .astats .l{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); margin-top:2px; }
.country-strip{ display:flex; gap:14px; flex-wrap:wrap; }
.cstrip{ flex:1; min-width:180px; border:1px solid var(--line-neutral); border-radius:5px; padding:22px 24px; transition:border-color .4s, background .4s; }
.cstrip:hover{ border-color:var(--line-gold); background:var(--ink-3); }
.cstrip h3{ font-size:24px; }
.cstrip p{ font-size:13.5px; color:var(--cream-dim); margin-top:6px; line-height:1.45; }
@media (max-width:1000px){ .atlas-grid{ grid-template-columns:repeat(2,1fr); } .atlas{ aspect-ratio:3/2; } }
@media (max-width:680px){ .atlas-grid{ grid-template-columns:1fr; } .atlas .plabel .pn{ font-size:13px; } }

/* ====================================================================
   VILLAGE CARDS (used on region hub) + VILLAGE PAGE
   ==================================================================== */
.village-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
.vcard{ display:flex; flex-direction:column; background:var(--ink-card); border:1px solid var(--line-neutral); border-radius:5px; overflow:hidden; transition:transform .5s var(--ease), border-color .5s; }
.vcard:hover{ transform:translateY(-5px); border-color:var(--line-gold); }
.vc-media{ aspect-ratio:16/10; overflow:hidden; }
.vc-media image-slot{ width:100%; height:100%; transition:transform 1s var(--ease); }
.vcard:hover .vc-media image-slot{ transform:scale(1.05); }
.vc-body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.vc-body h3{ font-size:26px; }
.vc-char{ font-family:var(--serif); font-style:italic; font-size:16px; color:var(--cream-dim); margin-top:6px; line-height:1.4; }
.vc-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:18px; }
.vc-tag{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); }
.vc-from{ font-family:var(--serif); font-size:18px; color:var(--gold-bright); white-space:nowrap; }

/* village page — sits at the area */
.vbadge{ display:inline-flex; align-items:center; gap:9px; border:1px solid var(--line-gold); border-radius:30px; padding:8px 16px; font-size:12px; letter-spacing:.06em; color:var(--gold-bright); }
.vbadge .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); }

/* "where it sits" connection diagram */
.connect{ display:flex; align-items:stretch; gap:0; flex-wrap:wrap; row-gap:12px; }
.connect .node{ border:1px solid var(--line-neutral); border-radius:4px; padding:14px 20px; background:var(--ink-card); text-align:center; display:flex; flex-direction:column; justify-content:center; }
.connect .node.here{ border-color:var(--gold); background:rgba(200,162,83,.08); }
.connect .node .nn{ font-family:var(--serif); font-size:18px; color:var(--cream); white-space:nowrap; line-height:1.15; }
.connect .node.here .nn{ color:var(--gold-bright); }
.connect .node .na{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); margin-top:5px; white-space:nowrap; }
.connect .wire{ flex:1; min-width:24px; align-self:center; height:1px; background:repeating-linear-gradient(90deg,var(--gold-deep) 0 6px,transparent 6px 12px); opacity:.6; }

@media (max-width:1000px){ .village-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .village-grid{ grid-template-columns:1fr; } }

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width:1000px){
  .rbody{ grid-template-columns:1fr; }
  .rside{ position:static; flex-direction:row; flex-wrap:wrap; }
  .rside .card{ flex:1; min-width:240px; }
  .stay-grid, .related-grid{ grid-template-columns:repeat(2,1fr); }
  .gt-grid{ grid-template-columns:1fr; }
  .lrow{ grid-template-columns:auto 200px 1fr; }
  .lstats{ grid-column:2 / -1; flex-direction:row; align-items:center; border-left:none; padding-left:6px; border-top:1px solid var(--line-neutral); }
}
@media (max-width:680px){
  .quickstrip .wrap{ }
  .qs{ min-width:50%; border-bottom:1px solid var(--line-neutral); }
  .gallery{ grid-template-columns:1fr 1fr; }
  .stay-grid, .related-grid, .verdict-grid{ grid-template-columns:1fr; }
  .lrow{ grid-template-columns:auto 1fr; }
  .lmedia{ display:none; }
  .lstats{ grid-column:1 / -1; }
  .rhero h1{ font-size:48px; }
}