/* =====================================================================
   Nepali Ghar Hotel — Inner-page system
   Extends styles.css (design tokens, header, footer, components live there).
   Only inner-page-specific pieces here: page hero, breadcrumbs, spec lists,
   room index + detail, FAQ accordion, contact form, prose.
   ===================================================================== */

/* ---------- Page hero (compact banner under the fixed header) ---------- */
.page-hero{
  position:relative;min-height:clamp(440px,64svh,660px);
  display:flex;flex-direction:column;justify-content:flex-end;
  color:var(--paper);overflow:hidden;background:linear-gradient(160deg,var(--ink),var(--pine));
  /* The gradient above is only a fallback for a hero with no photo. Without a
     stacking context here, this element paints in the root context AFTER its own
     z-index:-2 image wrapper, so the fallback covered every hero photo on the site.
     isolate makes the negative-z layers paint above this background, where they belong. */
  isolation:isolate;
}
.page-hero-img{position:absolute;inset:0;z-index:-2}
.page-hero-img img{width:100%;height:100%;object-fit:cover;transform-origin:50% 42%}
.js .page-hero-img img{animation:kenburns 18s var(--e1) both}
/* Hero veil, in two layers.
   The old single 180deg ramp was thinnest (.2) at 42% height — which is exactly
   where the breadcrumb and eyebrow land, because the text block is bottom-aligned.
   Percentage stops also drift as the hero height flexes between 440px and 660px.
   Layer 1 is therefore anchored to the BOTTOM in px, so the dark band tracks the
   text block itself at any hero height; layer 2 only shades the top strip so the
   fixed header stays legible. Between them the middle of the photo stays open. */
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(0deg,
      rgba(18,13,9,.92) 0,
      rgba(18,13,9,.88) 200px,
      rgba(18,13,9,.80) 340px,
      rgba(18,13,9,.50) 450px,
      rgba(18,13,9,.18) 580px),
    linear-gradient(180deg,rgba(18,13,9,.58) 0%,rgba(18,13,9,0) 32%)}
.page-hero-inner{position:relative;max-width:var(--wrap);width:100%;margin:0 auto;
  padding:150px var(--pad) 7vh;
  text-shadow:0 1px 3px rgba(12,8,5,.62),0 2px 20px rgba(12,8,5,.7)}
/* The eyebrow is 11-12px mono. No gold light enough to clear 4.5:1 over photography
   still reads as gold at that size, so the small utility text in the banner goes to
   the warm parchment cream instead and the gold is kept for the display word below,
   where it only needs 3:1 and actually looks like gold. */
.page-hero .kicker{color:rgba(240,232,217,.94);margin-bottom:22px}
.page-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.5rem,5.6vw,4.8rem);line-height:1.0;letter-spacing:-.02em;
  color:rgba(236,229,215,.96);max-width:18ch}
.page-title em{font-style:italic;color:var(--ochre-hi)}
.page-sub{margin-top:26px;max-width:52ch;font-size:clamp(1rem,1.4vw,1.16rem);color:rgba(236,229,215,.9)}
.page-sub em{font-family:var(--serif);font-style:italic}

/* ---------- Eyebrow weight (inner pages) ----------
   Inner-page eyebrows shipped at mono-400. Paired with .16em tracking at
   ~11.8px, that renders as sparse grey-green texture rather than a label, so
   the eyebrow above each display heading read as part of the background.
   Space Mono is loaded at 400 and 700 only — 700 is the one real step up
   available; 500/600 would be synthesised and smear the tracking. The colour
   half of this fix rides on --seto, deepened in styles.css.
   Scoped by file: only inner pages load inner.css, and the homepage eyebrow is
   already --brick-deep on paper, which does not have this problem. */
.kicker{font-weight:700}

/* ---------- Breadcrumbs ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:26px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
/* 11px mono over photography — same reasoning as the eyebrow above: the current-page
   crumb was --ochre and measured 1.04:1 on the darker room heroes. Cream, not gold. */
.crumbs a{color:rgba(236,229,215,.86);transition:color .3s}
.crumbs a:hover{color:#fff}
.crumbs span{color:rgba(240,232,217,.94)}
.crumbs .sep{color:rgba(236,229,215,.55)}

/* ---------- Inner section rhythm ---------- */
.isec{padding:var(--section) 0}
.isec--tint{background:var(--paper-2)}
.isec--tint3{background:var(--paper-3)}
.isec--dark{background:var(--ink);color:rgba(236,229,215,.82)}
.isec--pine{background:var(--pine);color:rgba(236,229,215,.82)}
.isec--dark .display,.isec--pine .display{color:var(--paper)}
.isec--dark .display em,.isec--pine .display em{color:var(--ochre)}
.isec--dark .lede,.isec--pine .lede{color:rgba(236,229,215,.82)}
.isec--tight{padding:calc(var(--section) * .62) 0}
/* when a section is split purely for a background colour change, its own top
   padding would stack with the previous section's bottom padding into a double
   gap that isn't really wanted between two halves of the same content flow */
.isec--notop{padding-top:0}
.isec--nobottom{padding-bottom:0}
/* sitemap reuses the footer's .foot-grid link list, but that hover colour (paper) is
   made for the footer's dark background — on this plain light .isec it goes invisible */
.isec .foot-col a:hover{color:var(--ink)}

/* centred section heading block */
.ihead{text-align:center;max-width:820px;margin:0 auto var(--head-gap)}
/* colour restated here: the .ihead p rule below outranks .kicker and would grey it out.
   The eyebrow is a <p>, so it also picked up that rule's 22px top margin — which used
   to be its gap from the section ornament. With the ornament gone the eyebrow is the
   block's first child, so that margin is zeroed to match every other eyebrow block. */
.ihead .kicker{justify-content:center;width:fit-content;margin:0 auto;color:var(--seto)}
.ihead .display{margin-top:6px}
.ihead p{color:var(--muted);margin:22px auto 0}
.isec--dark .ihead p,.isec--pine .ihead p{color:rgba(236,229,215,.7)}

/* two-column intro (image + copy) — mirrors .welcome-grid but reusable */
.isplit{display:grid;grid-template-columns:1.02fr .98fr;gap:96px;align-items:center}
.isplit--rev .isplit-media{order:2}
.isplit-media .media{aspect-ratio:4/5;max-height:82svh}
/* for a square frame carrying a wordmark near its edge, the 4/5 crop above would
   clip the type — keep the image's own proportions instead (a square is bounded by
   the column width, so it never needs the svh cap the portrait crop does) */
.isplit-media--square .media{aspect-ratio:1/1;max-height:none}
.isplit-media figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin-top:16px}
.isec--dark .isplit-media figcaption,.isec--pine .isplit-media figcaption{color:rgba(236,229,215,.6)}
.isplit-body .display{margin-bottom:8px}

/* ---------- Facts / stats strip ---------- */
.factstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--line);background:var(--paper)}
.fact{padding:34px 26px;border-right:1px solid var(--line)}
.fact:last-child{border-right:none}
.fact-n{font-family:var(--serif);font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1;color:var(--brick)}
.fact-l{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:12px}

/* ---------- Value / detail cards ---------- */
.icards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.icard{background:var(--paper);border:1px solid var(--line-soft);border-radius:2px;padding:34px 30px;
  display:flex;flex-direction:column;gap:12px;transition:transform .4s var(--e1),box-shadow .4s var(--e1)}
.icard:hover{transform:translateY(-5px);box-shadow:0 20px 40px -24px rgba(27,23,20,.5)}
.icard-k{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brick)}
.icard h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.1;color:var(--ink)}
.icard p{color:var(--ink-2);font-size:.98rem;line-height:1.62}
.icard .ic-ic{width:34px;height:34px;color:var(--brick);margin-bottom:4px}
.icard .ic-ic svg{width:100%;height:100%;display:block}

/* ---------- People (founders / team) ---------- */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.person{border:1px solid var(--line);padding:28px 26px;background:var(--paper)}
.person-name{font-family:var(--serif);font-size:1.4rem;line-height:1.1}
.person-role{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brick);margin-top:8px}
.person p{color:var(--muted);font-size:.95rem;margin-top:12px}

/* ---------- Room index (summary → detail cards) ---------- */
.rindex{display:grid;grid-template-columns:repeat(2,1fr);gap:44px}
.rx{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line-soft);overflow:hidden}
.rx-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.rx-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--e1)}
.rx:hover .rx-media img{transform:scale(1.05)}
.rx-tag{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:var(--brick);padding:7px 12px}
.rx-body{padding:30px 30px 32px;display:flex;flex-direction:column;flex:1}
.rx-body h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1.05}
.rx-meta{font-family:var(--mono);font-size:.68rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin:12px 0 0}
.rx-body p{color:var(--ink-2);font-size:.96rem;margin:14px 0 0}
.rx-body .arrow-link{margin-top:auto;padding-top:22px;align-self:flex-start}

/* Seto Ghar — the Classical Block. It is a separate house from the Heritage
   Block, so its categories carry the identity green instead of the madder tag
   that marks the rest of the index: green wing tag, a hairline under the photo
   and a wash that fades out before the copy starts. Deliberately quiet — enough
   to group the two Classical categories at a glance without breaking the grid.
   Wing per each room's own spec list: Classic Deluxe + Classic Junior Suite. */
.rx--seto{border-color:rgba(44,70,43,.30)}
.rx--seto .rx-tag{background:var(--seto)}
.rx--seto .rx-body{
  box-shadow:inset 0 2px 0 var(--seto);
  background:linear-gradient(180deg,rgba(140,183,138,.22) 0%,rgba(140,183,138,0) 58%);
}
.rx--seto .rx-meta{color:var(--seto)}

/* ---------- Room detail ---------- */
.rd-split{display:grid;grid-template-columns:1.08fr .92fr;gap:80px;align-items:start}
.rd-gallery{position:relative}
.rd-gallery .media{aspect-ratio:4/3}
.rd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.rd-thumbs .media{aspect-ratio:1/1;cursor:pointer}
.rd-body .display{margin-bottom:6px}
.rd-lede{color:var(--ink-2);font-size:1.05rem;line-height:1.7;margin-top:22px}

/* spec definition list */
.spec{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin:30px 0 4px;
  border-top:1px solid var(--line)}
.spec div{display:flex;flex-direction:column;gap:4px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.spec dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brick)}
.spec dd{font-family:var(--serif);font-size:1.16rem;color:var(--ink)}

/* amenities checklist */
.amen{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 40px;margin-top:8px}
.amen li{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid var(--line-soft);
  color:var(--ink-2);font-size:.98rem}
.amen li::before{content:"";flex:0 0 auto;width:18px;height:18px;margin-top:2px;border-radius:50%;
  background:var(--brick);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4 4 10-10.5'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4 4 10-10.5'/%3E%3C/svg%3E") center/13px no-repeat}

/* sticky booking aside on room pages */
.rd-cta{border:1px solid var(--line);background:var(--paper-2);padding:30px 28px;margin-top:34px}
.rd-cta p{color:var(--muted);font-size:.92rem;margin:0 0 18px;text-align:center}
.rd-cta .btn{width:100%}
.rd-note{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--muted);margin-top:16px;text-align:center}

/* room nav (prev / all / next) */
.rnav{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding-top:44px;margin-top:60px;border-top:1px solid var(--line)}
.rnav a{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  display:inline-flex;align-items:center;gap:.6em;transition:color .3s,gap .3s var(--e1)}
.rnav a:hover{color:var(--brick);gap:.9em}
.rnav .rnav-all{border-bottom:1px solid var(--ink);padding-bottom:4px}

/* ---------- Dining outlets ---------- */
.outlet{--ogut:clamp(18px,2.4vw,40px);display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:var(--ink);color:var(--paper)}
.outlet + .outlet{border-top:1px solid rgba(236,229,215,.12)}
.outlet-media{position:relative;min-height:460px;overflow:hidden}
/* photo is matted inside the ink ground so stacked outlets don't butt edge-to-edge */
.outlet-media .media{position:absolute;inset:var(--ogut)}
.outlet-body{padding:calc(var(--section) * .8) 72px;display:flex;flex-direction:column;justify-content:center}
.outlet--rev .outlet-media{order:2}
.outlet-body .display{color:var(--paper);margin-bottom:16px}
.outlet-body .display em{color:var(--ochre)}
.outlet-hours{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ochre);margin-bottom:20px}
.outlet-body p{color:rgba(236,229,215,.82)}
.outlet-body p + p{margin-top:14px}
.outlet-logo{width:150px;height:auto;margin:2px 0 22px;border-radius:12px}
.outlet-logo--sm{width:38px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 4px}
.chips li{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid rgba(236,229,215,.3);padding:8px 13px;color:rgba(236,229,215,.9)}

/* ---------- FAQ accordion (native details) ---------- */
.faq{max-width:900px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:20px;
  padding:26px 0;font-family:var(--serif);font-size:clamp(1.15rem,1.8vw,1.42rem);line-height:1.3;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;flex:0 0 auto;font-family:var(--mono);font-size:1.5rem;
  line-height:1;color:var(--brick);transition:transform .3s var(--e1)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-a{padding:0 40px 28px 0;color:var(--ink-2);line-height:1.7;max-width:74ch}
.faq .faq-a p + p{margin-top:14px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.cinfo .kicker{margin-bottom:26px}
.cline{display:flex;align-items:flex-start;gap:16px;padding:20px 0;border-bottom:1px solid var(--line-soft)}
.cline-ic{flex:0 0 auto;width:22px;height:22px;color:var(--brick);margin-top:3px}
.cline-ic svg{width:100%;height:100%}
.cline-k{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px}
.cline-v{font-size:1rem;color:var(--ink);line-height:1.5}
.cline-v a:hover{color:var(--brick)}
/* minmax(0,…) not 1fr: date/number controls carry a wide intrinsic minimum that
   would otherwise push the columns past the viewport on narrow screens */
.cform{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.cform .cf-full{grid-column:1 / -1}
.cfield input,.cfield textarea,.cfield select{width:100%;min-width:0}
.enq-lede{color:var(--muted);margin:14px 0 10px;max-width:48ch}
.cfield{display:flex;flex-direction:column;gap:8px}
.cfield label{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cfield input,.cfield textarea,.cfield select{background:var(--paper);border:1px solid var(--line);
  padding:14px 16px;font-family:var(--sans);font-size:1rem;color:var(--ink);border-radius:0}
.cfield textarea{min-height:140px;resize:vertical}
.cfield input:focus,.cfield textarea:focus,.cfield select:focus{outline:none;border-color:var(--brick)}
.cform .cf-msg{grid-column:1 / -1;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--brick)}
.cform .cf-msg[hidden]{display:none}
.cform .cf-agree{display:flex;align-items:flex-start;gap:10px;font-family:var(--sans);font-size:.86rem;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--muted);line-height:1.5;cursor:pointer}
.cform .cf-agree input{flex:0 0 auto;width:auto;min-width:0;margin:3px 0 0;accent-color:var(--brick)}
.cform .cf-agree span{flex:1 1 auto;min-width:0}

/* ---------- "What's nearby" dial (replaces the contact-page tile map) ----------
   A plain distance diagram rather than a slippy map: the hotel at the centre,
   three bands (walk / short drive / day trip) and each landmark on its real
   compass bearing. A handful of bearings are nudged a few degrees where two
   landmarks sit on the same line out of Thamel — the airport, Pashupatinath and
   Bhaktapur all lie due east — so their labels don't stack. It is a diagram,
   not a survey; the Google Maps link in the key covers the literal case.
   Below 900px the same markup drops its coordinates and reads as a grouped
   list, which is far clearer on a phone than a shrunken dial. */
/* Labels fan out sideways, so the dial's real content box is only about 4:3 —
   capped and centred rather than stretched across the full 1300px wrap. */
.nmap{max-width:960px;margin-inline:auto;background:var(--paper);border:1px solid var(--line);overflow:hidden}
.nmap-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 22px;border-bottom:1px solid var(--line-soft)}
.nmap-ttl{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nmap-n{display:flex;align-items:center;gap:6px;font-size:.64rem;letter-spacing:.14em;color:var(--muted)}
.nmap-n span{color:var(--brick);font-size:.92rem;line-height:1}

/* matches the SVG's cropped viewBox (740 x 562); pin percentages are measured
   against that same box, so the two stay locked together */
.nmap-plot{position:relative;aspect-ratio:740/562}
.nmap-svg{position:absolute;inset:0;width:100%;height:100%}
.nm-band{fill:rgba(140,183,138,.11)}
.nm-ring{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 7}
.nm-ring--out{stroke:var(--line-soft)}
.nm-spoke path{stroke:var(--line-soft);stroke-width:1}

/* the hotel — dot and label are separate boxes so the label can sit up-and-left
   into the empty north-west quadrant without dragging the dot off centre */
.nmap-you-d{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;background:var(--brick);color:var(--paper);
  display:grid;place-items:center;box-shadow:0 0 0 6px rgba(166,67,43,.14)}
.nmap-you-d svg{width:17px;height:17px}
.nmap-you-t{position:absolute;left:var(--x);top:var(--y);transform:translate(-100%,-100%);
  padding-right:8px;text-align:right;font-family:var(--serif);font-size:1.02rem;
  line-height:1.24;color:var(--ink)}
.nmap-you-t em{display:block;margin-top:5px;font-style:normal;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* landmarks */
.nmap-pins{position:absolute;inset:0}
.npin{position:absolute;left:var(--x);top:var(--y);z-index:1;display:flex;align-items:center;gap:9px}
.npin:hover{z-index:3}
.npin-d{flex:0 0 auto;width:11px;height:11px;border-radius:50%;background:var(--seto);
  box-shadow:0 0 0 3px var(--paper)}
.npin--b1 .npin-d{background:var(--brick)}
.npin--b3 .npin-d{background:var(--paper);border:2px solid var(--seto)}
.npin-t{display:flex;align-items:baseline;gap:8px;white-space:nowrap;
  font-size:clamp(.76rem,.92vw,.9rem);color:var(--ink)}
.npin-t em{font-style:normal;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  color:var(--brick)}
.npin-nm{transition:color .3s}
.npin:hover .npin-nm{color:var(--brick)}
.npin-ld,.npin-grp{display:none}
/* 5.5px = half the dot, so the dot itself lands on the coordinate in every variant */
.npin--rt{transform:translate(-5.5px,-50%)}
.npin--lf{flex-direction:row-reverse;transform:translate(calc(-100% + 5.5px),-50%)}
.npin--dn{flex-direction:column;align-items:center;gap:7px;transform:translate(-50%,-5.5px)}

.nmap-key{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;
  padding:18px 22px;border-top:1px solid var(--line-soft)}
.nmap-key-i{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.05em;color:var(--muted)}
.nmap-key-i::before{content:"";flex:0 0 auto;width:10px;height:10px;border-radius:50%}
.nmap-key-i--b1::before{background:var(--brick)}
.nmap-key-i--b2::before{background:var(--seto)}
.nmap-key-i--b3::before{border:2px solid var(--seto)}
.nmap-key-map{margin-left:auto;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brick);white-space:nowrap;
  border-bottom:1px solid transparent;transition:border-color .3s}
.nmap-key-map:hover{border-color:var(--brick)}

/* ---------- Long-form prose (terms / privacy) ---------- */
.prose{max-width:820px;margin:0 auto}
.prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;
  color:var(--ink);margin:52px 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;color:var(--ink);margin:30px 0 10px}
.prose p{color:var(--ink-2);line-height:1.75;margin-bottom:14px;max-width:none}
.prose ul{margin:0 0 16px;padding-left:0}
.prose li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--ink-2);line-height:1.7}
.prose li::before{content:"";position:absolute;left:6px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--brick)}
.prose .policy-note{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--muted);
  border-left:2px solid var(--brick);padding:4px 0 4px 18px;margin:0 0 30px}

/* ---------- Attractions leaders (reuses .leaders visual) ---------- */
.att{max-width:760px}
/* Each nearby place links out to Google Maps, so a guest can locate any single one
   of them rather than only the hotel.
   The link is its own labelled control at the end of the row rather than the place
   name itself: a styled name reads as a heading no matter how it is coloured, where
   the words "View map" state outright what the row does. The dotted leader is
   dropped here (the Find Us list above keeps its own) — with a third element on the
   row it separated the name from its own distance instead of tying them together. */
.att li{gap:16px}
.att-name{font-family:var(--serif);font-size:1.2rem;color:var(--ink)}
/* Fixed width so the distances end on a common right edge and every View map below
   it starts at the same x — otherwise "50 m" and "17.5 km" leave the column ragged. */
.att-dist{margin-left:auto;min-width:66px;text-align:right;flex:0 0 auto}
.att-map{flex:0 0 auto;display:inline-flex;align-items:center;gap:.44em;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:3px;
  transition:color .3s var(--e1),border-color .3s var(--e1)}
.att-map:hover,.att-map:focus-visible{color:var(--brick);border-color:var(--brick)}
/* Pin drawn as a mask rather than an inline <svg> per row: it takes currentColor,
   so it follows the link's hover colour for free and keeps eleven copies out of the
   markup. */
.att-map::before{content:"";display:inline-block;width:1em;height:1em;flex:0 0 auto;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10.4c0 5.8-8 11.6-8 11.6s-8-5.8-8-11.6a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10.2' r='2.9'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10.4c0 5.8-8 11.6-8 11.6s-8-5.8-8-11.6a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10.2' r='2.9'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- News & events feed ---------- */
.nfeed{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
/* Three columns: date rail, story, one photograph. Entries used to run a strip of
   thumbnails under the copy — up to six on the Taekwondo entry — which left the
   right third of the row empty and turned each story into a contact sheet. One
   picture per entry, parked in that empty column, gives the feed a straight edge
   down the right and a single image doing the work. */
.nx{display:grid;grid-template-columns:190px minmax(0,1fr) 340px;gap:56px;
  padding:56px 0;border-bottom:1px solid var(--line)}
.nx-rail{display:flex;flex-direction:column;align-items:flex-start;gap:16px;position:sticky;top:120px;align-self:start}
.nx-date{display:flex;flex-direction:column;line-height:1;color:var(--ink)}
.nx-date .nx-d{font-family:var(--serif);font-size:2.6rem;line-height:.9;color:var(--brick)}
.nx-date .nx-m{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;margin-top:9px;color:var(--ink-2)}
.nx-date .nx-y{font-size:.66rem;letter-spacing:.16em;color:var(--muted);margin-top:5px}
/* Gold rather than the brand green: the chip needs to stay a highlight beside the
   brick date numeral, and --ochre carries ink text at ~4.8:1 at this size. */
.nx-tag{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  background:var(--ochre);padding:6px 11px}
.nx-body h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.45rem,2.4vw,2rem);
  line-height:1.12;color:var(--ink);max-width:24ch}
.nx-body h3 em{font-style:italic;color:var(--brick)}
.nx-body p{color:var(--ink-2);font-size:1rem;line-height:1.72;margin-top:16px;max-width:68ch}
.nx-body p em{font-family:var(--serif);font-style:italic}
/* Top-aligned with the headline rather than centred on the copy: entries run from
   two paragraphs to five, and centring made the photo drift down the row on the
   long ones. Full size is one click away in the lightbox. */
.nx-fig{align-self:start;margin:0}
.nshot{display:block;position:relative;overflow:hidden;background:var(--paper-3);width:100%;
  aspect-ratio:4/3;border:1px solid var(--line-soft);cursor:pointer;padding:0}
.nshot img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e1),opacity .4s}
.nshot:hover img{transform:scale(1.06)}
.nshot:focus-visible{outline:2px solid var(--brick);outline-offset:2px}
.nx-more{margin-top:22px}
.nfeed-note{color:var(--muted);text-align:center;max-width:60ch;margin:44px auto 0;
  font-size:.72rem;letter-spacing:.04em}
/* max-width:none matters here — this is a <p>, so the global p{max-width:62ch} caps
   its box well short of the column. text-align:center then centred the button inside
   that capped box rather than in the section, parking it left of the note above it.
   The auto inline margins are the same belt-and-braces the note above uses. */
.nfeed-cta{text-align:center;max-width:none;margin:22px auto 0}

/* ---------- Gallery lightbox (page-local) ---------- */
.lb{position:fixed;inset:0;z-index:2000;background:rgba(15,11,8,.96);display:none;align-items:center;justify-content:center;padding:40px}
.lb.open{display:flex}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:92vw}
/* image capped short of the viewport so the caption below it always has room */
.lb img{max-width:92vw;max-height:76vh;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-cap{text-align:center;max-width:56ch}
.lb-cap-k{display:block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ochre);margin-bottom:7px}
.lb-cap-t{font-family:var(--serif);font-size:1.16rem;line-height:1.25;color:rgba(236,229,215,.92)}
.lb-x{position:absolute;top:20px;right:26px;color:var(--paper);font-size:2.2rem;width:48px;height:48px}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);color:var(--paper);font-size:2.6rem;width:60px;height:60px;opacity:.7;transition:opacity .3s}
.lb-nav:hover{opacity:1}
.lb-prev{left:12px}.lb-next{right:12px}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .page-hero-inner{padding-top:128px}
  .isplit{grid-template-columns:1fr;gap:46px}
  .isplit--rev .isplit-media{order:-1}
  .isplit-media .media{max-height:64svh}
  .factstrip{grid-template-columns:1fr 1fr}
  .fact:nth-child(2){border-right:none}
  .fact:nth-child(1),.fact:nth-child(2){border-bottom:1px solid var(--line)}
  .icards,.people{grid-template-columns:1fr 1fr}
  .rindex{grid-template-columns:1fr;gap:28px}
  .rd-split{grid-template-columns:1fr;gap:44px}
  .outlet{grid-template-columns:1fr}
  .outlet-media{min-height:44vh}
  .outlet--rev .outlet-media{order:-1}
  .outlet-body,.outlet--rev .outlet-body{padding:calc(var(--section) * .8) var(--pad)}
  .contact-grid{grid-template-columns:1fr;gap:48px}
  /* the three columns still fit here, but only once the rail, the photo and the
     gutters give ground — at their full widths the story column drops to ~310px */
  .nx{grid-template-columns:150px minmax(0,1fr) 240px;gap:32px}
}
@media(max-width:860px){
  .icards,.people{grid-template-columns:1fr}
  .nx{grid-template-columns:1fr;gap:22px;padding:44px 0}
  .nx-rail{position:static;flex-direction:row;align-items:center;gap:16px}
  .nx-date{flex-direction:row;align-items:baseline;gap:8px}
  .nx-date .nx-d{font-size:1.8rem}
  .nx-date .nx-m,.nx-date .nx-y{margin-top:0}
  /* single column — the photo stacks under the story it belongs to */
  .nx-fig{max-width:420px}
  .rd-thumbs{grid-template-columns:repeat(4,1fr)}
}
/* The dial only reads well while the labels have room to sit beside their dots.
   Narrower than this the same <ul> becomes a grouped distance list instead. */
@media(max-width:900px){
  .nmap-head{padding:14px 18px}
  .nmap-n{display:none}
  .nmap-plot{aspect-ratio:auto;padding:2px 18px 12px}
  .nmap-svg,.nmap-you-d,.nmap-you-t{display:none}
  .nmap-pins{position:static}
  .npin,.npin--rt,.npin--lf,.npin--dn{position:static;transform:none;
    flex-direction:row;align-items:baseline;gap:11px;
    padding:13px 0;border-bottom:1px solid var(--line-soft)}
  .npin:last-child{border-bottom:none}
  .npin-d{align-self:center}
  .npin-t{flex:1;min-width:0;white-space:normal}
  .npin-ld{display:block;flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px)}
  .npin-grp{display:block;padding:24px 0 4px;font-family:var(--mono);font-size:.6rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--seto)}
  .npin-grp:first-child{padding-top:10px}
  .nmap-key{padding:16px 18px;gap:11px 22px}
  .nmap-key-map{margin-left:0}
}
@media(max-width:520px){
  .page-hero-inner{padding-top:112px;padding-bottom:8vh}
  .factstrip{grid-template-columns:1fr}
  .fact{border-right:none;border-bottom:1px solid var(--line)}
  .fact:last-child{border-bottom:none}
  .spec{grid-template-columns:1fr}
  .amen{grid-template-columns:1fr}
  .cform{grid-template-columns:1fr}
  .rd-thumbs{grid-template-columns:repeat(4,1fr);gap:8px}
}