/* Visual layer for the text-heavy pages, added 2026-10-09 after Daniel asked for more photographs
   and less text, and for the copy to stop leaning on the left edge of the screen.
   Everything is prefixed v- and sits on top of /css/site.css: same tokens, same type, same
   buttons. Loaded only by the pages that use it. Every photograph used here is recorded in
   PHOTOS.md, including the outside ones and their licences. */

/* Photo hero: the picture fills the band, the words sit centred over a soft shade. */
.lodge .v-hero { position:relative; isolation:isolate; color:#fff; min-height:clamp(340px,56vh,560px);
  display:flex; align-items:flex-end; overflow:hidden; background:var(--forest, #1a1a1a); }
.lodge .v-hero > picture, .lodge .v-hero > picture img { position:absolute; inset:0; width:100%; height:100%; }
.lodge .v-hero > picture img { object-fit:cover; }
.lodge .v-hero::after { content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 60% 55% at 50% 62%, rgba(20,20,18,.42), rgba(20,20,18,0) 75%), linear-gradient(180deg, rgba(20,20,18,.22) 0%, rgba(20,20,18,.36) 45%, rgba(20,20,18,.74) 100%); }
.lodge .v-hero .wrap { position:relative; z-index:1; text-align:center; padding-block:64px 52px; }
.lodge .v-hero h1 { font-size:clamp(2.2rem,4.6vw,3.8rem); margin:10px auto 12px; max-width:18ch; color:#fff; text-shadow:0 1px 18px rgba(0,0,0,.25); }
.lodge .v-hero .lede { font-size:clamp(1.08rem,1.6vw,1.3rem); max-width:44ch; margin-inline:auto; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.45); }
.lodge .v-hero .eyebrow { color:rgba(255,255,255,.85); }
.lodge .v-hero .v-crumbs { font-size:.8rem; margin-bottom:14px; color:rgba(255,255,255,.8); }
.lodge .v-hero .v-crumbs a { color:rgba(255,255,255,.85); text-decoration:none; }
.lodge .v-hero .v-crumbs a:hover { color:#fff; text-decoration:underline; }
.lodge .v-hero .v-crumbs em { font-style:normal; padding:0 8px; opacity:.6; }
.lodge .v-hero .v-hero-credit { position:absolute; right:14px; bottom:10px; z-index:1; font-size:.68rem; color:rgba(255,255,255,.72); max-width:60%; text-align:right; }
.lodge .v-hero .v-hero-credit a { color:inherit; }
.lodge .v-hero .hero-actions { justify-content:center; }

/* Centred section heads and a centred reading column. */
.lodge .v-head { text-align:center; max-width:720px; margin:0 auto 34px; }
.lodge .v-head h2 { font-size:clamp(1.8rem,3vw,2.5rem); margin:8px 0 10px; }
.lodge .v-head p { color:var(--ink-muted); font-size:1.04rem; }
.lodge .v-head .eyebrow { color:var(--ink-muted); }
.lodge .v-col { max-width:760px; margin-inline:auto; }
.lodge .v-col > p, .lodge .v-col > ul { margin-bottom:14px; font-size:1.02rem; }
.lodge .v-center { text-align:center; }
.lodge .v-center .btn { margin-inline:auto; }

/* Image-led cards. */
.lodge .v-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.lodge .v-cards.v-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.lodge .v-cards.v-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.lodge .v-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; }
.lodge .v-card picture, .lodge .v-card > img { display:block; aspect-ratio:3/2; overflow:hidden; background:var(--sunken); }
.lodge .v-card picture img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.lodge .v-card:hover picture img { transform:scale(1.03); }
.lodge .v-card-body { padding:20px 22px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.lodge .v-card h3 { font-size:1.36rem; }
.lodge .v-card p { color:var(--ink-muted); font-size:.95rem; }
.lodge .v-card .v-tag { font-family:var(--font-sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--ink-muted); }
.lodge .v-card a.v-more { margin-top:auto; padding-top:6px; font-weight:600; text-decoration:underline; }
.lodge .v-card figcaption, .lodge .v-cap { font-size:.78rem; color:var(--ink-faint, #8a8579); }

/* Alternating photo and text rows. */
.lodge .v-rows { display:grid; gap:64px; }
.lodge .v-row { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:56px; align-items:center; }
.lodge .v-row:nth-child(even) > figure { order:2; }
.lodge .v-row figure { margin:0; }
.lodge .v-row figure picture { display:block; aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden; background:var(--sunken); }
.lodge .v-row figure img { width:100%; height:100%; object-fit:cover; }
.lodge .v-row figcaption { margin-top:10px; font-size:.8rem; color:var(--ink-faint, #8a8579); }
.lodge .v-row h2 { font-size:clamp(1.6rem,2.6vw,2.2rem); margin-bottom:12px; }
.lodge .v-row h3 { font-size:1.22rem; margin:18px 0 6px; }
.lodge .v-row h3:first-child { margin-top:0; }
.lodge .v-row p { color:var(--ink-muted); font-size:1.02rem; margin-bottom:12px; max-width:52ch; }
.lodge .v-row p:last-child { margin-bottom:0; }

/* Small fact tiles (times, policies). */
.lodge .v-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.lodge .v-fact { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px 22px 20px; text-align:center; }
.lodge .v-fact .v-big { font-family:var(--font-display); font-size:2.1rem; line-height:1; display:block; margin-bottom:6px; }
.lodge .v-fact h3 { font-size:1.15rem; margin-bottom:6px; }
.lodge .v-fact p { color:var(--ink-muted); font-size:.94rem; }

/* Photo strip of three captioned frames. */
.lodge .v-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.lodge .v-strip figure { margin:0; }
.lodge .v-strip picture { display:block; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; background:var(--sunken); }
.lodge .v-strip img { width:100%; height:100%; object-fit:cover; }
.lodge .v-strip figcaption { margin-top:8px; font-size:.82rem; color:var(--ink-muted); text-align:center; }

/* Centred call to action band. */
.lodge .v-cta { text-align:center; }
.lodge .v-cta h2 { font-size:clamp(1.7rem,2.8vw,2.3rem); margin-bottom:10px; }
.lodge .v-cta p { color:var(--ink-muted); max-width:56ch; margin:0 auto 20px; }
.lodge .v-cta .hero-actions { justify-content:center; }

/* Photo credits for the outside photographs. */
/* Small and quiet on purpose (Lawrence, 2026-10-09): the credit is there for licence compliance, not to draw the eye. Muted ink at reduced opacity stays legible in both themes. */
.lodge p.v-credits, .lodge .v-cta p.v-credits { margin-top:48px; margin-bottom:0; padding-top:16px; border-top:1px solid var(--border); font-size:.7rem; line-height:1.55; color:var(--ink-muted); opacity:.78; text-align:center; max-width:900px; margin-inline:auto; }
.lodge .v-credits a { color:inherit; }

@media (max-width:1024px) {
  .lodge .v-cards.v-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lodge .v-row { gap:34px; }
}
@media (max-width:760px) {
  .lodge .v-hero { min-height:clamp(300px,58vh,440px); }
  .lodge .v-hero .wrap { padding-block:48px 40px; }
  .lodge .v-hero .v-hero-credit { max-width:90%; }
  .lodge .v-cards, .lodge .v-cards.v-2, .lodge .v-cards.v-4, .lodge .v-facts, .lodge .v-strip { grid-template-columns:minmax(0,1fr); }
  .lodge .v-row { grid-template-columns:minmax(0,1fr); gap:18px; }
  .lodge .v-row:nth-child(even) > figure { order:0; }
  .lodge .v-rows { gap:44px; }
  .lodge .v-head { margin-bottom:24px; }
}

/* Guide and blog pages: the dark text hero becomes a photo hero, and the reading column plus its
   contents list are centred as one block instead of hugging the left of a 1180px frame. */
.lodge .gp-hero.v-photo { position:relative; isolation:isolate; overflow:hidden; min-height:clamp(320px,50vh,500px);
  display:flex; align-items:flex-end; padding:0; color:#fff; }
.lodge .gp-hero.v-photo > picture, .lodge .gp-hero.v-photo > picture img { position:absolute; inset:0; width:100%; height:100%; }
.lodge .gp-hero.v-photo > picture img { object-fit:cover; }
.lodge .gp-hero.v-photo::after { content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 60% 55% at 50% 62%, rgba(20,20,18,.42), rgba(20,20,18,0) 75%), linear-gradient(180deg, rgba(20,20,18,.22) 0%, rgba(20,20,18,.36) 45%, rgba(20,20,18,.76) 100%); }
.lodge .gp-hero.v-photo .wrap { position:relative; z-index:1; text-align:center; padding-block:60px 48px; }
.lodge .gp-hero.v-photo h1 { margin-inline:auto; color:#fff; text-shadow:0 1px 18px rgba(0,0,0,.25); }
.lodge .gp-hero.v-photo .lede, .lodge .gp-hero.v-photo .gp-hero-fine { margin-inline:auto; color:rgba(255,255,255,.9); }
.lodge .gp-hero.v-photo .eyebrow, .lodge .gp-hero.v-photo .gp-crumbs, .lodge .gp-hero.v-photo .gp-crumbs a { color:rgba(255,255,255,.85); }
.lodge .gp-hero.v-photo .v-hero-credit { position:absolute; right:14px; bottom:10px; z-index:1; font-size:.68rem; color:rgba(255,255,255,.72); max-width:60%; text-align:right; margin:0; }
.lodge .gp-hero.v-photo .v-hero-credit a { color:inherit; }
.lodge .wrap.gp-layout { max-width:1040px; }
.lodge .gp-body .v-credits { text-align:left; margin-inline:0; }

/* Legal and long document pages: same centring for the contents list and the text. */
.lodge .wrap#doc-grid { max-width:1040px; }
.lodge .doc-hero .wrap { max-width:1040px; }

/* Fact tiles wrap and centre, so an odd count still sits balanced. */
.lodge .v-facts { display:flex; flex-wrap:wrap; justify-content:center; }
.lodge .v-facts > .v-fact { flex:1 1 300px; max-width:370px; }
.lodge .v-facts.v-4f > .v-fact { flex-basis:230px; max-width:270px; }
.lodge .v-dist .v-big { font-size:1.9rem; }
.lodge .v-ticks { justify-content:center; display:flex; flex-wrap:wrap; gap:10px 36px; margin:28px auto 0; max-width:none; }
.lodge .v-stayhead { justify-content:center; text-align:center; }
.lodge .v-stayhead .head-block { margin-inline:auto; }
.lodge .note.v-col { max-width:640px; }
.lodge .v-row section h2 { font-size:clamp(1.6rem,2.6vw,2.2rem); margin-bottom:12px; }
.lodge .v-row .eyebrow { color:var(--ink-muted); margin-bottom:6px; }
@media (max-width:760px) {
  .lodge .v-facts > .v-fact, .lodge .v-facts.v-4f > .v-fact { flex-basis:100%; max-width:none; }
  .lodge .gp-hero.v-photo .v-hero-credit { max-width:90%; }
}

/* ---------- Polish pass, 2026-10-09 (second round) ---------- */
/* Pages that opt in with body.v-page (home, motel, house, rv, gallery) centre their plain
   section heads, so nothing hugs the left edge of the 1180px frame at 1440 or 1920. Heads that
   sit inside a two-column split (.split, .place) keep their left alignment beside their partner. */
.lodge.v-page .band > .wrap > .head-block { text-align:center; margin-inline:auto; }
.lodge.v-page .band > .wrap > .head-block p { margin-inline:auto; }
.lodge .v-center-line { text-align:center; max-width:none; }

/* Unit page photo header: the same v-hero, carrying the spec line, price note and two buttons. */
.lodge .v-hero-unit { min-height:clamp(480px,68vh,660px); }
.lodge .v-hero-unit .eyebrow { margin-bottom:4px; }
.lodge .v-hero-unit .spec-line { color:#fff; border-color:rgba(255,255,255,.32); max-width:760px; margin:18px auto 0; text-shadow:0 1px 8px rgba(0,0,0,.4); }
.lodge .v-hero-unit .spec-line span + span::before { background:rgba(255,255,255,.45); }
.lodge .v-hero-unit .price-sub, .lodge .v-hero-unit .hero-fine { color:rgba(255,255,255,.88); max-width:56ch; margin-inline:auto; text-shadow:0 1px 8px rgba(0,0,0,.45); }
.lodge .v-hero-unit .btn-quiet { color:#fff; border-color:rgba(255,255,255,.7); background:rgba(20,20,18,.18); }
.lodge .v-hero-unit .btn-quiet:hover { background:rgba(255,255,255,.14); border-color:#fff; }

/* Before you book: two equal panels side by side, centred as a pair. */
.lodge .v-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; max-width:900px; margin-inline:auto; }
.lodge .v-pair .panel h3 { margin-bottom:10px; }
.lodge .v-split-fig { margin-top:26px; }

/* Home: the gallery teaser, one large frame and four small, no captions. */
.lodge .v-mosaic { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:repeat(2, clamp(150px,15vw,230px)); gap:14px; }
.lodge .v-mosaic .v-mos-cell { display:block; border-radius:var(--radius); overflow:hidden; background:var(--sunken); }
.lodge .v-mosaic .v-mos-cell:first-child { grid-row:span 2; }
.lodge .v-mosaic picture, .lodge .v-mosaic img { display:block; width:100%; height:100%; }
.lodge .v-mosaic img { object-fit:cover; transition:transform .5s ease; }
.lodge .v-mosaic .v-mos-cell:hover img { transform:scale(1.03); }
.lodge .v-cards .v-card-body .btn { align-self:flex-start; margin-top:6px; }
.lodge #road .v-card-body p a:not(.btn) { text-decoration:underline; }

/* Emblems on /stay/: the policies-grid item, stacked icon over a short label. */
.lodge .policies-grid.v-emblems { list-style:none; padding:0; margin:34px auto 0; max-width:760px;
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.lodge .v-emblems .policy-item { flex-direction:column; align-items:center; text-align:center; gap:10px; }
.lodge .v-emblems .policy-icon { width:38px; height:38px; margin-top:0; }
.lodge .v-emblems .policy-item b { margin-bottom:0; }

/* Policies on /policies/: an even grid, not a centred wrap (Lawrence, 2026-10-09: "all over the
   place"). Eight items: four columns on desktop, two on tablet, one on a phone, so every row is
   full. Icon stacked above its heading so icons and headings line up down each column. */
.lodge .policies-grid.v-pol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:36px 32px; max-width:1180px; margin:0 auto; align-items:start; }
.lodge .v-pol .policy-item { flex-direction:column; align-items:flex-start; gap:12px; padding-top:20px; border-top:1px solid var(--border); }
.lodge .v-pol .policy-icon { width:30px; height:30px; margin-top:0; }
@media (max-width:1100px) { .lodge .policies-grid.v-pol { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .lodge .policies-grid.v-pol { grid-template-columns:minmax(0,1fr); gap:28px; } }
.lodge .policy-item span span, .lodge .policy-item span .num { display:inline; }

@media (max-width:760px) {
  .lodge .v-pair { grid-template-columns:minmax(0,1fr); }
  .lodge .v-mosaic { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .lodge .v-mosaic .v-mos-cell { aspect-ratio:4/3; }
  .lodge .v-mosaic .v-mos-cell:first-child { grid-column:span 2; grid-row:auto; aspect-ratio:16/10; }
    .lodge .policies-grid.v-emblems { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lodge .v-hero-unit { min-height:auto; }
  .lodge .v-hero-unit .wrap { padding-block:72px 40px; }
}

/* Rochelle 2026-10-09: the current page's tab is marked. A 3px terracotta bar under the label on the desktop
   nav (sub-pages mark their parent tab), and a bar on the left edge of the row in the mobile menu. */
.lodge .nav a[aria-current="page"] { color:var(--ink); font-weight:600; text-decoration:none; box-shadow:inset 0 -3px 0 var(--cl-accent, #C26B4A); padding-bottom:4px; }
.lodge .nav a[aria-current="page"]:hover { text-decoration:none; }
.lodge .nav-panel a[aria-current="page"] { font-weight:700; box-shadow:inset 4px 0 0 var(--cl-accent, #C26B4A); padding-left:14px; }

/* Things to do: season cards, short summary + Read more */
.lodge #year .v-cards { align-items:start; }
.lodge .v-season .v-short[hidden], .lodge .v-season .v-full[hidden] { display:none; }
.lodge .v-season .v-full { display:flex; flex-direction:column; gap:8px; }
.lodge .v-season .v-full h4 { font-size:1.05rem; margin:6px 0 0; }
.lodge .v-season .v-full ul { margin:0; padding-left:1.15em; display:flex; flex-direction:column; gap:6px; color:var(--ink-muted); font-size:.95rem; }
.lodge .v-season .v-full p { margin:0; }
.lodge .v-season .v-full a { text-decoration:underline; }
.lodge .v-toggle { align-self:flex-start; margin-top:6px; padding:0; background:none; border:0; font:inherit; font-weight:600; text-decoration:underline; color:inherit; cursor:pointer; }
.lodge .v-toggle:focus-visible { outline:2px solid currentColor; outline-offset:3px; }