/* Heritage Lodge, Marquette: the stylesheet every page shares (built on Villa Perdido's system, 23 Oct 2026).

   The home page's own passages live in pages/home.css, and every other page keeps its own rules in pages/<name>.css.
   Colours come from the lodge's own sign: pine (the board the name is painted on) is every word on white, the header
   and the footer; moss is quiet words on white; lichen is quiet words on pine; birch (the sign's cream lettering,
   softened) is the one pale ground; ember (the copper rim round the sign) is the booking button and nothing else. The
   --lv-* names are the platform's: its pieces (the calendar, the forms, the newsletter) take their colours and type
   from them. */

/* ---------- tokens ----------
   --pad is the side gutter; --gap the gap between the 12 columns; --edge where words on a full-width band start, so
   they line up with the 1,320px column from 900px up; --hh the header's height; --bar the phone ask bar's. */
:root{
  --pine:#1E3A2C; --white:#FFFFFF; --ground:#FFFFFF; --ember:#E0965A; --moss:#5C6A5F; --lichen:#C8D3C2; --birch:#F5F0E6; --line:#E2DCCF;
  --display:"EB Garamond", Georgia, serif;
  --body:"DM Sans", system-ui, sans-serif;
  --pad:clamp(20px, 4.4vw, 64px);
  --gap:clamp(16px, 2vw, 28px);
  --edge:var(--pad);
  --hh:60px;
  --bar:64px;
  --lv-ink:#1E3A2C; --lv-ink-soft:#5C6A5F; --lv-ground:#FFFFFF; --lv-field:#FFFFFF; --lv-line:#E2DCCF;
  --lv-accent:#E0965A; --lv-accent-ink:#1E3A2C; --lv-radius:6px; --lv-font-body:"DM Sans", system-ui, sans-serif;
  --lv-font-display:"EB Garamond", Georgia, serif; --lv-focus:#B4642C; --ember-hover:#E8A874; --lv-sticky-offset:60px;
}
@media (min-width:900px){ :root{ --hh:76px; --lv-sticky-offset:76px; --edge:max(var(--pad), (100vw - 1320px)/2); } }

/* ---------- the page and its text ----------
   White ground, pine words. DM Sans body, 16px on a phone to 19px at 2560. EB Garamond headings at a modest size: h2 is
   34px on a phone and 56px at most. The body's bottom padding clears the phone ask bar. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--pine);font-family:var(--body);font-size:clamp(16px, 15px + .16vw, 19px);line-height:1.6;overflow-x:clip;padding-bottom:var(--bar)}
@media (min-width:900px){ body{padding-bottom:0} }
img{display:block;max-width:100%}
figure{margin:0}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;letter-spacing:-.005em;line-height:1.1;text-wrap:balance}
p{margin:0}
blockquote{margin:0}
cite{font-style:normal}
h2{font-size:clamp(30px, 7.4vw, 37px)}
h3{font-size:clamp(23px, 20px + .5vw, 28px);line-height:1.2}
@media (min-width:900px){ h2{font-size:clamp(38px, 20px + 1.9vw, 58px)} }

/* ---------- layout: .wrap is the 1,320px column, .grid its 12 columns ---------- */
.wrap{width:min(100% - 2*var(--pad), 1320px);margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap)}

/* ---------- photographs: .photo is the frame; its box sets the crop, the img fills it ---------- */
.photo{position:relative;overflow:hidden;margin:0}
.photo img{width:100%;height:100%;object-fit:cover}
figcaption{font-size:15px;line-height:1.4;color:var(--moss);margin-top:10px}

/* A place from the record (its photograph and its credit) is one list item: the wrapper carries data-each and steps
   out of the layout, so the figure inside sits in the page's own grid exactly as if it were the grid item. */
.place-wrap{display:contents}

/* ---------- words ---------- */
.lede{font-size:clamp(17px, 16px + .25vw, 21px);line-height:1.55;max-width:34em}
.more{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.more:hover{text-decoration-thickness:2px}
.small-line{font-size:15px;line-height:1.5;color:var(--moss)}
.nb{white-space:nowrap}

/* ---------- the button: ember with pine words, booking only ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:999px;background:var(--ember);color:var(--pine);font-weight:600;font-size:16px;text-decoration:none;white-space:nowrap;border:0;cursor:pointer}
.btn:hover{background:var(--ember-hover);filter:none;transform:none;box-shadow:none}

/* ---------- a review card: stars, the guest's own words at body size, the name and where it was written ----------
   Used on every page that shows a guest's words. Nothing else goes inside a card: no photographs, no icons. */
.review{display:flex;flex-direction:column;gap:12px;padding:clamp(22px, 2vw, 30px);border:1px solid var(--line);border-radius:8px;background:var(--ground);color:var(--pine)}
.stars{display:flex;gap:3px;color:var(--pine);line-height:1}
.stars svg{width:16px;height:16px;fill:currentColor}
.review blockquote p{font-size:inherit;line-height:1.6}
.review cite{display:block;font-weight:600;font-size:16px;margin-top:auto}
.review cite span{font-weight:400;color:var(--moss)}
.review .trans{display:block;font-size:14px;font-weight:400;color:var(--moss);margin-top:2px}

/* ---------- header: logo, the bar's links with their dropdowns, price and Check dates ----------
   Sticky, solid pine. Under 1024px: the short logo, the Menu and (from 900px) Check dates. From 1024px every page is
   in the bar: the 3 groups open a white panel on hover and on keyboard focus, each group's own name is a link to its
   main page (so a touch screen always lands somewhere real), and the Menu button is gone. The price joins from 1300px.
   The header declares data-menu-switch="design": these widths are ours. */
.site-head{position:sticky;top:0;z-index:20;height:var(--hh);background:var(--pine);color:var(--white)}
.site-head .wrap{height:100%;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;min-height:44px;margin-right:auto}
.brand img{width:auto}
.brand-short{height:40px}
.brand-long{display:none;height:54px}
.head-nav{display:none}
.head-ask{display:none}
.head-nav ul{list-style:none;margin:0;padding:0}

/* The Menu button (the platform writes it) and its panel (a copy of the bar's nav). The groups show flat in the panel:
   each group's name a small label, its pages under it. */
.site-menu{position:static;margin:0;border:0}
.site-menu>summary{display:flex;align-items:center;gap:10px;min-width:44px;min-height:44px;padding:0 4px;list-style:none;cursor:pointer;color:var(--white);font-weight:600;font-size:16px}
.site-menu>summary::-webkit-details-marker{display:none}
.site-menu>summary::marker{content:""}
.menu-icon{width:20px;height:14px;flex:none;display:inline-grid;gap:4px;align-content:space-between}
.menu-icon i{display:block;height:2px;background:currentColor;border-radius:0;transition:transform .25s ease,opacity .2s ease}
.site-menu[open]>summary .menu-icon i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-menu[open]>summary .menu-icon i:nth-child(2){opacity:0}
.site-menu[open]>summary .menu-icon i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-label{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:nowrap}
.site-menu-panel{position:absolute;left:0;right:0;top:100%;z-index:1;display:block;max-width:min(100% - 2*var(--pad), 360px);max-height:calc(100dvh - var(--hh) - var(--bar) - 8px);overflow-y:auto;margin:0 var(--edge) 0 auto;padding:6px 22px 22px;border-radius:0 0 8px 8px;background:var(--pine);color:var(--white);box-shadow:0 18px 40px rgba(10,26,18,.3)}
.site-menu-panel ul{list-style:none;margin:0;padding:0}
.site-menu-panel a{display:flex;align-items:center;min-height:44px;font-size:17px;text-decoration:none;color:var(--white);border-bottom:1px solid rgba(200,211,194,.2)}
.site-menu-panel a:hover{text-decoration:underline;text-underline-offset:6px}
.site-menu-panel a[aria-current="page"]{font-weight:600;text-decoration:none}
.site-menu-panel .has-sub>.top{min-height:48px;align-items:flex-end;padding:0 0 6px;border:0;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--lichen)}
.site-menu-panel .menu-only a.btn{display:inline-flex;margin-top:18px;padding:0 22px;border:0;color:var(--pine);font-size:16px}
.site-menu .site-menu-panel a{padding:4px 0}
.site-menu .site-menu-panel .sub a{padding-left:18px}
.site-menu .site-menu-panel .nav-top>li:not(.has-sub):not(.menu-only)>.top{margin-top:6px;font-weight:600}
@media (prefers-reduced-motion:reduce){ .menu-icon i{transition:none} }

@media (min-width:900px){
  .head-ask{display:flex;align-items:center;gap:18px}
  .head-price{display:none;font-size:15px;font-weight:600;color:var(--white);white-space:nowrap;line-height:1.25}
  .head-price>span{display:inline-block}
  .head-price>span::first-letter{text-transform:uppercase}
  .head-price .lv-price-detail{display:inline-block;max-width:15em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
}
@media (min-width:1024px){
  .brand-short{display:none}
  .brand-long{display:block}
  .site-menu{display:none}
  .head-nav{display:block;height:100%}
  .nav-top{display:flex;height:100%;align-items:stretch}
  .nav-top>li{position:relative;display:flex;align-items:center}
  .nav-top>li.menu-only{display:none}
  .nav-top .top{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;text-decoration:none;font-size:16px;white-space:nowrap}
  .nav-top .top:hover,.nav-top .top[aria-current="page"]{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
  .has-sub>.top::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.8}
  .sub{position:absolute;top:100%;left:0;min-width:250px;padding:10px 0;background:var(--ground);color:var(--pine);border-radius:0 0 8px 8px;box-shadow:0 16px 36px rgba(10,26,18,.18);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
  .has-sub:hover>.sub,.has-sub:focus-within>.sub{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .16s ease,visibility 0s}
  .sub a{display:flex;align-items:center;min-height:44px;padding:0 22px;text-decoration:none;font-size:16px;white-space:nowrap}
  .sub a:hover,.sub a:focus-visible{background:var(--birch);text-decoration:underline;text-underline-offset:5px}
  .sub a[aria-current="page"]{font-weight:600}
}
@media (min-width:1024px) and (max-width:1199px){ .nav-top .top{padding:0 9px;font-size:15px} .brand-long{height:48px} }
@media (min-width:1300px){ .head-price{display:inline} }
@media (prefers-reduced-motion:reduce){ .sub{transition:none} }

/* ---------- phone ask bar: the price and Check dates at the foot of every phone screen (hidden from 900px) ---------- */
.ask-bar{position:fixed;left:0;right:0;bottom:0;z-index:19;height:var(--bar);background:var(--pine);color:var(--white);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px 0 20px;border-top:1px solid rgba(200,211,194,.22)}
.ask-price{min-width:0;margin:0;line-height:1.3}
.ask-price>span{display:block;color:var(--white);font-size:16px;font-weight:600}
.ask-price>span::first-letter{text-transform:uppercase}
@media (max-width:359px){ .ask-price>span{font-size:15px} }
/* The live price's parts (the stay-price island): before dates "From $1,535" over "for 3 nights"; once a guest has
   chosen dates, the total over the platform's short words for a narrow bar ("3 nights, fees included"). The bar is 64px
   tall: the figure on its own line, the words on ONE quiet line (an ellipsis if ever long), and the share each left to
   the calendar (without these rules the bar ran "$1,535 3 nights, fees included $383.75 each for 4 guests" on 3 lines at
   390: the live re-walk, 23 Oct 11:1x). */
.ask-price .lv-price-figure{display:block;font-size:16px;font-weight:600;line-height:1.25}
.ask-price .lv-price-detail{display:block;font-size:14px;font-weight:400;line-height:1.3;color:var(--lichen);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ask-price .lv-price-split,.head-price .lv-price-split{display:none}
.ask-bar .btn{margin-left:auto}
@media (min-width:900px){ .ask-bar{display:none} }

/* ---------- footer: logo, every page, the sign-up, the address line (pine) ---------- */
.site-foot{background:var(--pine);color:var(--white);padding-block:clamp(56px, 6vw, 100px) 36px}
.foot-grid{display:grid;gap:36px}
.foot-logo img{width:clamp(150px, 14vw, 200px);height:auto}
.foot-nav{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
.foot-nav a{display:flex;align-items:center;min-height:44px;text-decoration:none;font-size:16px}
.foot-nav a:hover{text-decoration:underline;text-underline-offset:5px}
.news{--lv-ink:#FFFFFF; --lv-ink-soft:var(--lichen); --lv-ground:transparent; --lv-field:transparent; --lv-line:rgba(200,211,194,.45); --lv-accent:var(--ember); --lv-accent-ink:var(--pine); --lv-focus:var(--ember); padding:0;border:0;background:none}
.news .island-heading{font-family:var(--display);font-weight:400;font-size:clamp(24px, 19px + .8vw, 31px);margin-bottom:16px}
.foot-small{margin-top:48px;padding-top:20px;border-top:1px solid rgba(200,211,194,.22);display:flex;flex-wrap:wrap;gap:4px 24px;color:var(--lichen);font-size:15px}
.foot-small a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:900px){
  .foot-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap)}
  .foot-logo{grid-column:1 / 4}
  .foot-nav{grid-column:4 / 9}
  .news{grid-column:9 / 13}
  .foot-grid:not(:has(.news)) .foot-nav{grid-column:5 / 13;grid-template-columns:repeat(3,1fr)}
}

/* The platform's calendars (the booking calendar, and the enquiry form's) colour their days with the brand's
   accent; here they are pine, so ember stays on the buttons alone and every date reads clearly (accent numbers
   on an accent tint read poorly). Days gone by (and days that cannot be chosen) are struck through in moss rather than
   pale grey (1.5:1 and 2.6:1), and the
   calendar's small labels (the weekdays, the key, the minimum stay) are 14px. */
main [data-island="booking-calendar"] [data-lv-mounted],main [data-island="enquiry-form"] [data-lv-mounted]{--color-accent:var(--pine)}
main [data-island="booking-calendar"] [data-lv-mounted] .text-gray-300,main [data-island="enquiry-form"] [data-lv-mounted] .text-gray-300,main [data-island="booking-calendar"] [data-lv-mounted] .text-gray-400,main [data-island="enquiry-form"] [data-lv-mounted] .text-gray-400{color:var(--moss);text-decoration:line-through}
main [data-island="booking-calendar"] [data-lv-mounted] .text-xs,main [data-island="enquiry-form"] [data-lv-mounted] .text-xs{font-size:14px}
/* The calendars' month arrows sit on the month names' own row (they had a row of their own above, an empty band on a
   phone); the row lets clicks through to everything but its two arrows. */
main [data-island="booking-calendar"] [data-lv-mounted] .flex.items-center.justify-between.mb-6,main [data-island="enquiry-form"] [data-lv-mounted] .flex.items-center.justify-between.mb-6{position:relative;z-index:2;margin-bottom:-32px;pointer-events:none}
main [data-island="booking-calendar"] [data-lv-mounted] .flex.items-center.justify-between.mb-6>button,main [data-island="enquiry-form"] [data-lv-mounted] .flex.items-center.justify-between.mb-6>button{pointer-events:auto}
/* On a phone the calendars give their days the room: the booking calendar reaches to 8px from the screen's edges and
   the enquiry form's loses its own card frame (it was a card inside a card), and the days sit 2px apart, so every day is
   a full 44px tap at 390 wide. */
@media (max-width:599px){
  main [data-island="booking-calendar"]{margin-inline:calc(8px - var(--pad))}
  main [data-island="enquiry-form"] [data-lv-mounted] .ring-1.p-4{padding:0;box-shadow:none;border-radius:0}
  main [data-island="booking-calendar"] [data-lv-mounted] .grid-cols-7,main [data-island="enquiry-form"] [data-lv-mounted] .grid-cols-7{gap:2px}
}


/* ---------- the Gallery page (the platform writes it inside this header and footer) ---------- */
.lv-gallery{width:min(100% - 2*var(--pad), 1320px);margin-inline:auto;padding-block:clamp(28px, 5vw, 80px) clamp(48px, 6vw, 96px)}
.lv-gallery h1{font-size:clamp(34px, 9vw, 42px)}
.lv-gallery>p{margin-top:14px;max-width:34em;font-size:clamp(17px, 16px + .25vw, 21px)}
.lv-gallery-grid{--lv-gallery-row-h:190px;margin-top:clamp(20px, 3vw, 40px);display:flex;flex-wrap:wrap;gap:8px}
.lv-g{flex:var(--r) 1 calc(var(--lv-gallery-row-h) * var(--r));height:var(--lv-gallery-row-h)}
.lv-g img{width:100%;height:100%;object-fit:cover}
@media (min-width:900px){ .lv-gallery h1{font-size:clamp(46px, 20px + 2.8vw, 72px)} .lv-gallery-grid{--lv-gallery-row-h:260px} }

/* ---------- the dates (data-section="dates"), on every page that ends with the ask ----------
   The words at the left and the booking calendar beside them from 900px, in the page's one frame (the island's own
   border is off); full width under the words on a phone. Markup: .dates-sec > .wrap > .dates-grid > .dates-head (h2,
   .lede, .dates-links) + .cal-live > [data-island="booking-calendar"]. */
.dates-sec{padding-block:clamp(56px, 7vw, 120px) clamp(72px, 9vw, 150px);border-top:1px solid var(--line)}
.dates-grid{display:grid;gap:26px}
.dates-head .lede{margin-top:14px}
.dates-links{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:8px}
.cal-live .island{border:0;padding:0;border-radius:0;background:transparent}
@media (min-width:900px){
  .dates-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
  .dates-head{grid-column:1 / 5}
  .dates-head .lede{margin-top:16px;max-width:24em}
  .cal-live{grid-column:5 / 13;padding:clamp(20px, 2vw, 32px);border:1px solid var(--line);border-radius:8px}
}

/* ---------- facts as a list (Good to know, Book) ----------
   A heading at the left, then each fact as a short name and its line; the name above its line on a phone. */
.gk-grid{display:grid;gap:22px}
.gk-list{margin:0;display:grid}
.gk-list>div{display:grid;gap:4px;padding:16px 0;border-top:1px solid var(--line)}
.gk-list dt{font-weight:600}
.gk-list dd{margin:0;color:var(--moss);line-height:1.55;max-width:40em}
.gk-more{margin-top:6px}
@media (min-width:900px){
  .gk-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:0}
  .gk-grid>h2{grid-column:1 / 5}
  .gk-list,.gk-more{grid-column:5 / 13}
  .gk-list>div{grid-template-columns:repeat(8,1fr);column-gap:var(--gap);padding:20px 0}
  .gk-list dt{grid-column:1 / 3}
  .gk-list dd{grid-column:3 / 9;font-size:17px}
  .gk-more{margin-top:16px}
}

/* ---------- passages that wait for the record (.ref) ----------
   Each holds something the manager can add from the dashboard (the house's story, the team, a film, questions guests
   ask, extras, places nearby ...). Empty today, so the platform leaves each one out; the day its first item is added
   it shows on the page where a guest looks for it, in the same heading-left, words-right shape as Good to know. */
.ref{padding-block:clamp(48px, 6vw, 104px);border-top:1px solid var(--line)}
.ref-body{display:grid;gap:14px;margin-top:20px;font-size:clamp(16px, 15px + .2vw, 18px);line-height:1.6;color:var(--moss)}
.ref-body p{margin:0;max-width:40em}
.ref-body b{color:var(--pine);font-weight:600}
.ref-list{list-style:none;padding:0;gap:0}
.ref-list li{display:grid;gap:4px;padding:16px 0;border-top:1px solid var(--line)}
.ref-cards,.ref-people{display:grid;gap:22px 16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ref-cards .photo,.ref-people .photo{aspect-ratio:4/3;margin-bottom:10px;background:var(--birch)}
.ref-people .photo{aspect-ratio:4/5}
.ref-cards h3{font-size:clamp(19px, 17px + .4vw, 22px)}
.ref-cards h3 a{text-decoration:none}
.ref-cards figcaption,.ref-people figcaption{display:grid;gap:2px;font-size:15px}
.ref-plan img{object-fit:contain}
.ref-film,.map-frame{width:100%;border-radius:8px;overflow:hidden}
.ref-faq{gap:0}
.ref-faq details{border-top:1px solid var(--line);padding:14px 0}
.ref-faq summary{cursor:pointer;color:var(--pine);font-weight:600}
.ref-faq details p{margin-top:8px}
.ref-voices blockquote{margin:0;padding:16px 0;border-top:1px solid var(--line)}
.ref-voices cite{display:block;margin-top:6px;font-style:normal;font-size:15px}
.places{display:grid;gap:26px 16px;grid-template-columns:minmax(0,1fr)}
.place .photo{aspect-ratio:4/3;margin-bottom:10px;background:var(--birch)}
.place h3{font-size:clamp(19px, 17px + .4vw, 22px)}
.place p{margin-top:4px;font-size:15px}
.place-links{display:flex;flex-wrap:wrap;gap:4px 18px}
.place-credit{font-size:14px}
.foot-social{display:flex;flex-wrap:wrap;gap:0 16px}
@media (min-width:600px){ .places{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:900px){
  .ref-body{grid-column:5 / 13;margin-top:0}
  .ref-cards,.ref-people{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ref-list li{grid-template-columns:repeat(8,1fr);column-gap:var(--gap)}
  .ref-list li>b{grid-column:1 / 3}
  .ref-list li>span{grid-column:3 / 9}
}