/* ==========================================================================
   SHARED COMPONENTS
   Used by more than one page: page hero, breadcrumbs, search field, host
   band, FAQ, closing CTA, the facts grid, the data table, the editorial
   opening and the NAP card.
   ========================================================================== */

.phero,.cta{--focus-ring:#FFFFFF}
/* ==========================================================================
   AVAILABILITY BAR
   ========================================================================== */
.availability{
  position:relative;
  margin-inline:var(--gutter);
  display:grid;
  grid-template-columns:1fr 1fr 1fr minmax(15rem,21.25rem);
  align-items:stretch;
  gap:0;
  padding:clamp(.5rem,.95vw,1rem);
  background:var(--panel-bg);
  border:1px solid var(--panel-brd);
  border-radius:var(--radius);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.85);
}
.field{
  position:relative;
  display:flex;align-items:center;gap:clamp(.7rem,1.1vw,1.1rem);
  padding:clamp(.75rem,1.1vw,1.15rem) clamp(1rem,1.7vw,1.85rem);
  min-width:0;
}
.field + .field::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;
  width:1px;background:var(--panel-div);
}
.field__icon{flex:0 0 auto;color:rgba(255,255,255,.9)}
.field__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.3rem}
.field__label{
  color:var(--label);
  font-size:var(--fs-label);
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;
}
/* Real, keyboard-operable controls styled to match the design. */
.field__control{
  appearance:none;-webkit-appearance:none;
  width:100%;
  background:transparent;border:0;padding:0;margin:0;
  color:#fff;
  font-size:clamp(1rem,1.05vw,1.125rem);
  font-weight:400;
  line-height:1.25;
  cursor:pointer;
}
.field__control:focus{outline:none}
.field:focus-within{border-radius:6px;box-shadow:0 0 0 2px rgba(255,255,255,.85) inset}
/* Native date inputs render their own text in the BROWSER's locale, which is
   how a visitor on a UK or Indian browser ends up reading 30/09/2026. The
   control keeps all of its native behaviour — the picker, the mobile wheel,
   the keyboard — but its own text is painted transparent and .field__display
   shows the value formatted as US MM/DD/YYYY by the script instead.
   While the field HAS focus the native text comes back, so a keyboard user
   typing into the segments can still see what they are typing. */
.field__control[type="date"]{position:relative}
.field__control[type="date"]::-webkit-calendar-picker-indicator{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
}
.field__control[type="date"]:not(:focus){color:transparent}
.field__control[type="date"]:not(:focus)::-webkit-datetime-edit{color:transparent}
.field__display{
  position:absolute;left:0;top:0;
  color:#fff;font-size:clamp(1rem,1.05vw,1.125rem);line-height:1.25;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.field__control[type="date"].is-empty + .field__display{color:rgba(255,255,255,.92)}
.field__control[type="date"]:focus + .field__display{opacity:0}
.field__value-wrap{position:relative}
.field__chevron{flex:0 0 auto;color:rgba(255,255,255,.72);pointer-events:none}
.availability__submit{width:100%;height:100%}
@media (prefers-reduced-motion:no-preference){
.host__leaves{animation:a-drift 15s ease-in-out infinite}
.faq__waves{animation:a-drift 19s ease-in-out infinite -7s}
/* --- FAQ answers slide open rather than snapping ------------------------ */
.faq__item[open] .faq__a{animation:a-answer .42s var(--ease) both}
@supports selector(::details-content){
.faq__item::details-content{
      block-size:0;overflow:clip;
      transition:block-size .4s var(--ease),content-visibility .4s;
      transition-behavior:allow-discrete;
    }
.faq__item[open]::details-content{block-size:auto}
}
}
@media (min-width:701px) and (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
/* The closing photograph eases out of a slight zoom as the section rises. */
.cta__media{
      animation:ctaSettle linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 55%;
      will-change:transform;
    }
}
}
@media (max-width:1180px){
.availability{grid-template-columns:1fr 1fr 1fr;grid-auto-rows:auto}
.availability__cta{grid-column:1 / -1;padding:.6rem .5rem 0}
.availability__cta::before{display:none}
.availability__submit{padding-block:1.25em}
}
@media (max-width:760px){
.availability{grid-template-columns:1fr 1fr;padding:.5rem}
.availability .field{padding:.85rem 1rem}
.availability .field--guests{grid-column:1 / -1}
.availability .field--guests::before{display:none}
.availability .field--checkout::before{top:10%;bottom:10%}
.availability .field--guests{border-top:1px solid var(--panel-div)}
.availability__cta{grid-column:1 / -1;padding:.55rem 0 0}
.availability__submit{padding-block:1.15em;font-size:.8125rem}
}
@media (max-width:420px){
.availability{grid-template-columns:1fr}
.availability .field::before{display:none}
.availability .field + .field{border-top:1px solid var(--panel-div)}
}
/* ==========================================================================
   SECTION 7 — MEET YOUR HOST
   ========================================================================== */
.host{
  position:relative;isolation:isolate;
  /* --sand-lite, not --sand: the section moved below the FAQ, and the two
     creams were four levels apart — enough to read as a band edge where
     they now touch. */
  background:var(--sand-lite);
  color:var(--ink);
  padding-block:clamp(3.25rem,5.9vw,6.125rem) clamp(3.25rem,6.3vw,6.5rem);
  scroll-margin-top:var(--header-h);
  overflow:clip;
}
/* Soft botanical shadow, bottom-left — purely decorative */
.host__leaves{
  position:absolute;left:-6%;bottom:-8%;z-index:-1;
  width:min(46rem,52%);aspect-ratio:1;
  color:#8E8778;opacity:.13;pointer-events:none;
}
.host__inner{
  display:grid;
  grid-template-columns:34.7% 1fr;
  gap:clamp(1.75rem,3.65vw,3.8125rem);
  align-items:start;
  padding-inline:var(--gutter);
}
/* --- Portrait card ------------------------------------------------------ */
.host-card{
  position:relative;margin:0;
  aspect-ratio:525/711;
  border-radius:clamp(16px,1.7vw,28px);
  overflow:hidden;
  background:#2A241F;
  box-shadow:0 34px 60px -38px rgba(42,33,24,.55);
}
.host-card img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.host-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(14,10,8,.62) 0%,rgba(14,10,8,.26) 30%,transparent 58%);
}
.host-card__caption{
  position:absolute;left:0;bottom:0;z-index:1;
  padding:0 clamp(1.25rem,2.75vw,2.875rem) clamp(1.25rem,2.1vw,2rem);
  color:#fff;
}
.host-card__script{
  display:block;
  font-family:var(--font-script-alt);
  font-size:clamp(3.5rem,7.1vw,7.4375rem);
  line-height:.72;
  text-shadow:0 2px 16px rgba(0,0,0,.3);
}
.host-card__rule{
  display:block;width:clamp(72px,8vw,135px);height:1px;
  background:rgba(255,255,255,.9);
  margin:clamp(.5rem,1vw,1rem) 0 clamp(.75rem,1.3vw,1.25rem);
}
.host-card__meta{
  display:block;
  font-size:clamp(.6875rem,.84vw,.875rem);
  font-weight:500;letter-spacing:.19em;text-transform:uppercase;
  line-height:1.85;
  color:rgba(255,255,255,.94);
}
/* --- Copy column -------------------------------------------------------- */
.host__eyebrow{
  display:flex;align-items:center;gap:clamp(.75rem,1.15vw,1.2rem);
  margin:0 0 clamp(1.25rem,2.7vw,2.8125rem);
  color:var(--text-body);
  font-size:clamp(.6875rem,.76vw,.78125rem);
  font-weight:500;letter-spacing:.22em;text-transform:uppercase;
}
.host__eyebrow::after{
  content:"";flex:0 0 auto;width:clamp(26px,2.4vw,40px);height:1px;
  background:rgba(60,52,40,.42);
}
.host__title{
  margin:0;
  font-weight:400;
  font-size:clamp(1.9375rem,4.7vw,4.9rem);
  line-height:1.02;
  letter-spacing:-.022em;
  color:var(--ink-strong);
  text-wrap:balance;
}
.host__bio{
  margin:clamp(1.25rem,2.7vw,2.8125rem) 0 0;
  max-width:50rem;
  font-size:clamp(1rem,1.26vw,1.3125rem);
  font-weight:400;
  line-height:1.72;
  color:#4C4C50;
}
.stat__value{
  display:flex;align-items:baseline;gap:.1em;
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(2.125rem,4.4vw,4.5625rem);
  line-height:1;
  letter-spacing:-.005em;
  color:var(--ink-strong);
}
.stat__star{width:.42em;height:.42em;flex:0 0 auto;color:var(--tan);align-self:center}
.stat__label{
  display:block;
  margin-top:clamp(.45rem,.75vw,.8125rem);
  font-size:var(--fs-eyebrow);
  font-weight:500;letter-spacing:.17em;text-transform:uppercase;
  color:#3E3E42;
}
.host__divider{
  height:1px;border:0;margin:clamp(1.75rem,3.1vw,3.25rem) 0 0;
  background:rgba(120,105,85,.28);
}
/* --- Trust markers ------------------------------------------------------ */
.trust{
  display:flex;flex-wrap:wrap;align-items:center;
  margin:clamp(1.25rem,1.9vw,2rem) 0 0;padding:0;list-style:none;
}
.trust li{
  display:flex;align-items:center;gap:clamp(.6rem,.95vw,1rem);
  padding-inline:clamp(1rem,3.4vw,3.5rem);
  font-size:clamp(.9375rem,1.04vw,1.0625rem);
  color:#1B1D21;
}
.trust li:first-child{padding-left:0}
.trust li + li{border-left:1px solid rgba(150,122,86,.34)}
.trust svg{flex:0 0 auto;width:clamp(21px,1.6vw,27px);height:auto}
/* --- Foot line ---------------------------------------------------------- */
.host__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1.5rem,4vw,4rem);
  margin-top:clamp(1.25rem,1.85vw,1.9375rem);
}
.host__motto{
  display:flex;align-items:center;gap:clamp(.75rem,1.2vw,1.25rem);
  margin:0;flex:1 1 auto;white-space:nowrap;
  color:#3E3E42;
  font-size:var(--fs-eyebrow);
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;
}
.host__motto .dot{opacity:.55}
.host__motto::after{
  content:"";flex:0 1 clamp(60px,12.4vw,13rem);height:1px;
  background:rgba(120,105,85,.45);
}
.host__sign{
  margin:0;flex:0 0 auto;text-align:right;
  font-family:var(--font-script-alt);
  font-size:clamp(2.25rem,4.4vw,4.5625rem);
  line-height:.62;
  color:var(--tan);
}
@media (max-width:1024px){
.host__inner{grid-template-columns:1fr;gap:clamp(2rem,5vw,3rem)}
.host-card{max-width:26rem}
.host__foot{flex-direction:column;align-items:flex-start;gap:1.75rem}
.host__sign{text-align:left}
}
@media (max-width:640px){
.stat__value{font-size:2.625rem}
.trust{flex-direction:column;align-items:flex-start;gap:.9rem}
.trust li{padding-inline:0}
.trust li + li{border-left:0}
.host__motto::after{display:none}
}
/* ==========================================================================
   SECTION 6 — FAQ
   Native <details>/<summary> accordions: keyboard accessible, no JavaScript,
   and every answer stays in the DOM so search and answer engines can read it.
   ========================================================================== */
.faq{
  --fq-ink:#0A2B47;
  --fq-muted:#46586B;
  --fq-line:rgba(10,43,71,.16);
  --fq-panel:#F0ECE7;

  position:relative;isolation:isolate;
  background:var(--sand-lite);
  color:var(--fq-ink);
  padding:clamp(3.25rem,5.5vw,5.75rem) var(--gutter) clamp(3.5rem,8vw,8.25rem);
  scroll-margin-top:var(--header-h);
  overflow:clip;
}
.faq__waves{
  position:absolute;left:0;bottom:0;z-index:-1;
  width:min(30rem,34%);height:auto;
  color:rgba(10,43,71,.09);pointer-events:none;
}
.faq__inner{
  display:grid;grid-template-columns:482fr 838fr;
  column-gap:clamp(2rem,5.2vw,5rem);
  align-items:start;
}
/* --- Left rail ---------------------------------------------------------- */
.faq__eyebrow{
  display:flex;align-items:center;gap:clamp(.75rem,1.4vw,1.4rem);
  margin:0 0 clamp(1rem,2.1vw,2rem);
  color:var(--fq-muted);
  font-size:clamp(.6875rem,.85vw,.875rem);
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;
}
.faq__eyebrow::after{
  content:"";flex:0 0 auto;width:clamp(28px,3.6vw,3.4rem);height:1px;
  background:var(--fq-line);
}
.faq__title{
  margin:0;
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(1.9375rem,4.17vw,4.375rem);
  line-height:1.12;letter-spacing:-.012em;
  color:var(--fq-ink);
}
.faq__lede{
  margin:clamp(1rem,1.9vw,1.875rem) 0 0;
  max-width:30rem;
  font-size:clamp(.9375rem,1.24vw,1.3125rem);
  line-height:1.58;
  color:var(--fq-muted);
}
.faq__cta{
  margin-top:clamp(1.5rem,2.9vw,2.875rem);
  padding:1.55em 2.4em;
  background:var(--brand);color:#fff;border-color:var(--brand);
}
.faq__cta:hover,.faq__cta:focus-visible{background:var(--brand-deep);border-color:var(--brand-deep)}
.faq__script{
  margin:clamp(2.25rem,5vw,5rem) 0 0;
  font-family:var(--font-script-alt);
  font-size:clamp(2.75rem,5.6vw,5.875rem);
  line-height:.82;
  color:rgba(90,82,68,.5);
}
.faq__sign{
  display:flex;align-items:center;gap:clamp(.9rem,1.5vw,1.5rem);
  margin:clamp(1.5rem,3.1vw,3.125rem) 0 0;
  font-size:clamp(.625rem,.82vw,.8125rem);
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fq-muted);
}
.faq__sign::before{
  content:"";flex:0 0 auto;width:clamp(34px,4vw,3.875rem);height:1px;
  background:var(--fq-line);
}
/* --- Question groups ---------------------------------------------------- */
.faq__group + .faq__group{margin-top:clamp(2rem,4.2vw,4.25rem)}
.faq__label{
  display:flex;align-items:center;gap:clamp(.9rem,1.7vw,1.7rem);
  margin:0 0 clamp(.5rem,1vw,1rem);
  color:var(--fq-muted);
  font-size:clamp(.625rem,.82vw,.8125rem);
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;
}
.faq__label::after{content:"";flex:1 1 auto;height:1px;background:var(--fq-line)}
.faq__list{margin:0;padding:0;list-style:none}
.faq__item + .faq__item{border-top:1px solid var(--fq-line)}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1rem,2vw,2rem);
  padding-block:clamp(.85rem,1.45vw,1.4375rem);
  cursor:pointer;list-style:none;
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(1.0625rem,1.43vw,1.5rem);
  line-height:1.3;
  color:var(--fq-ink);
  transition:color .25s var(--ease);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--brand)}
.faq__q:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
/* the + that becomes a − */
.faq__mark{
  position:relative;flex:0 0 auto;
  width:clamp(15px,1.15vw,1.1875rem);height:clamp(15px,1.15vw,1.1875rem);
}
.faq__mark::before,.faq__mark::after{
  content:"";position:absolute;inset:50% 0 auto;
  height:1.5px;background:currentColor;transform:translateY(-50%);
  transition:transform .32s var(--ease),opacity .32s var(--ease);
}
.faq__mark::after{transform:translateY(-50%) rotate(90deg)}
.faq__item[open] .faq__mark::after{transform:translateY(-50%) rotate(0deg);opacity:0}
.faq__a{
  margin:0;
  padding:0 clamp(2rem,4vw,4rem) clamp(1.1rem,1.9vw,1.875rem) 0;
  max-width:52rem;
  font-size:clamp(.875rem,1.05vw,1.0625rem);
  line-height:1.62;
  color:var(--fq-muted);
}
/* --- "Still have a question?" ------------------------------------------- */
.faq__more{
  display:flex;align-items:center;gap:clamp(1rem,1.9vw,1.9rem);
  margin-top:clamp(2rem,3.9vw,3.9375rem);
  padding:clamp(1rem,1.65vw,1.6875rem) clamp(1.1rem,1.85vw,1.875rem);
  background:var(--fq-panel);
  border-radius:10px;
}
.faq__mail{
  flex:0 0 auto;display:grid;place-items:center;
  width:clamp(44px,3.5vw,3.5rem);aspect-ratio:1;
  border-radius:50%;
  background:rgba(10,43,71,.06);
  color:var(--fq-ink);
}
.faq__mail svg{width:46%;height:auto}
.faq__moreBody{flex:1 1 auto;min-width:0}
.faq__moreTitle{
  margin:0;
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(1rem,1.37vw,1.4375rem);
  line-height:1.3;color:var(--fq-ink);
}
.faq__moreNote{
  margin:.35em 0 0;
  font-size:clamp(.8125rem,.98vw,1rem);
  line-height:1.5;color:var(--fq-muted);
}
.faq__moreLink{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:clamp(.6rem,1vw,1rem);
  padding-left:clamp(1rem,1.9vw,1.9rem);
  border-left:1px solid var(--fq-line);
  font-size:clamp(.625rem,.78vw,.8125rem);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fq-ink);
  transition:color .25s var(--ease);
}
.faq__moreLink svg{transition:transform .25s var(--ease)}
.faq__moreLink:hover{color:var(--brand)}
.faq__moreLink:hover svg{transform:translateX(4px)}
@media (max-width:1000px){
.faq__inner{grid-template-columns:1fr;row-gap:clamp(2rem,5vw,3rem)}
.faq__lede{max-width:44rem}
.faq__script{margin-top:clamp(1.5rem,4vw,2.5rem)}
.faq__waves{display:none}
}
@media (max-width:620px){
.faq__more{flex-wrap:wrap;gap:1rem}
.faq__mail{order:-1}
.faq__moreLink{
    width:100%;padding-left:0;padding-top:1rem;
    border-left:0;border-top:1px solid var(--fq-line);
  }
.faq__cta{width:100%}
}
@media (prefers-reduced-motion:reduce){
.faq__mark::before,.faq__mark::after{transition:none}
}
/* ==========================================================================
   SECTION 8 — CLOSING CTA
   ========================================================================== */
.cta{
  position:relative;isolation:isolate;
  display:flex;align-items:center;
  min-height:clamp(26rem,56.3vw,60rem);
  padding:clamp(3rem,6vw,6rem) clamp(1.5rem,8.13vw,8.5rem);
  color:var(--cream);
  background:#16222F;
  overflow:clip;
  scroll-margin-top:var(--header-h);
}
.cta__media{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;
  object-fit:cover;object-position:60% 50%;
}
.cta__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(8,16,26,.34) 0%,rgba(8,16,26,.16) 42%,transparent 68%),
    linear-gradient(0deg,rgba(8,16,26,.3) 0%,transparent 34%);
}
.cta__inner{position:relative;width:100%}
.cta__eyebrow{
  display:flex;align-items:center;gap:clamp(.9rem,1.7vw,1.75rem);
  margin:0 0 clamp(1rem,1.9vw,1.9375rem);
  color:rgba(247,244,239,.82);
  font-size:clamp(.6875rem,.84vw,.875rem);
  font-weight:500;letter-spacing:.22em;text-transform:uppercase;
}
.cta__eyebrow::after{
  content:"";flex:0 0 auto;width:clamp(34px,4.7vw,4.875rem);height:1px;
  background:rgba(247,244,239,.55);
}
.cta__title{
  margin:0;
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(2.125rem,4.43vw,4.625rem);
  line-height:1.15;letter-spacing:-.012em;
  color:var(--cream);
  text-shadow:0 2px 26px rgba(6,12,20,.35);
}
.cta__lede{
  margin:clamp(1rem,1.9vw,1.9375rem) 0 0;
  max-width:41rem;
  font-size:clamp(.9375rem,1.26vw,1.3125rem);
  font-weight:300;
  line-height:1.75;
  color:rgba(247,244,239,.88);
  text-shadow:0 1px 18px rgba(6,12,20,.35);
}
.cta__actions{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(1rem,3.2vw,3.375rem);
  margin-top:clamp(1.75rem,3.4vw,3.5rem);
}
.cta__primary{
  padding:1.7em 5.55em;
  background:var(--cream);color:var(--ink);border-color:var(--cream);
  border-radius:0;                       /* square, as in the comp */
}
.cta__primary:hover,.cta__primary:focus-visible{background:#fff;border-color:#fff}
.cta__link{
  display:inline-flex;align-items:center;gap:clamp(.7rem,1.1vw,1.1rem);
  padding-bottom:.85em;
  border-bottom:1px solid rgba(247,244,239,.7);
  font-size:clamp(.6875rem,.82vw,.8125rem);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);
  transition:border-color .3s var(--ease),opacity .3s var(--ease);
}
.cta__link svg{transition:transform .3s var(--ease)}
.cta__link:hover{border-color:var(--cream)}
.cta__link:hover svg{transform:translateX(4px)}
.cta__script{
  display:flex;align-items:center;gap:clamp(1rem,2.1vw,2.125rem);
  margin:clamp(2rem,4.8vw,5rem) 0 0;
  font-family:var(--font-script-alt);
  font-size:clamp(2.125rem,4.25vw,4.4375rem);
  line-height:.82;
  color:var(--cream);
}
.cta__script::after{
  content:"";flex:0 0 auto;width:clamp(26px,2.5vw,2.5rem);height:1px;
  background:rgba(247,244,239,.65);
}
@media (max-width:760px){
.cta{min-height:auto;padding-block:clamp(3rem,11vw,4.5rem)}
.cta__media{object-position:66% 50%}
.cta__scrim{
    background:linear-gradient(0deg,rgba(8,16,26,.5) 0%,rgba(8,16,26,.22) 46%,rgba(8,16,26,.4) 100%);
  }
.cta__br{display:none}
.cta__actions{gap:1.25rem}
.cta__primary{width:100%}
}

/* ==========================================================================
   THINGS TO DO — page-specific CSS
   Everything else on this page (header, tiles, FAQ accordion, closing CTA,
   footer, the whole motion system) comes from the shared stylesheet. Only the
   components that exist nowhere else are defined here.
     [CSS] this block -> assets/css/things-to-do.css
   ========================================================================== */
/* --- Compact page hero --------------------------------------------------- */
.phero{
  position:relative;isolation:isolate;overflow:clip;
  display:flex;align-items:flex-end;
  min-height:clamp(21rem,40vw,31rem);
  padding:calc(var(--header-h) + clamp(1.75rem,3.4vw,3.25rem))
          var(--gutter) clamp(2.25rem,4.2vw,4.25rem);
  color:var(--cream);
  background:#16222F;          /* holds the header's light-on-dark state if the
                                  photograph is slow or missing */
  scroll-margin-top:var(--header-h);
}
.phero__media{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:58% 52%;
}
.phero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(8,16,26,.56) 0%,rgba(8,16,26,.12) 42%,rgba(8,16,26,0) 62%),
    linear-gradient(0deg,rgba(8,16,26,.74) 0%,rgba(8,16,26,.22) 48%,rgba(8,16,26,0) 78%),
    linear-gradient(90deg,rgba(8,16,26,.34) 0%,rgba(8,16,26,0) 58%);
}
.phero__inner{position:relative;width:100%;max-width:62rem}
/* --- Breadcrumb ---------------------------------------------------------- */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(.5rem,.9vw,.75rem);
  margin:0 0 clamp(1rem,2.1vw,2rem);padding:0;
  list-style:none;
  font-size:var(--fs-eyebrow);
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,244,239,.74);
}
.crumbs a{
  color:rgba(247,244,239,.74);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--cream);border-bottom-color:rgba(247,244,239,.55)}
.crumbs li[aria-current="page"]{color:var(--cream)}
.crumbs svg{width:8px;height:auto;opacity:.6;flex:0 0 auto}
.phero__title{
  margin:0;
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(2.125rem,5.1vw,4.75rem);
  line-height:1.03;letter-spacing:-.015em;
  color:var(--cream);
}
.phero__lede{
  margin:clamp(.9rem,1.8vw,1.6rem) 0 0;
  max-width:58ch;
  font-size:clamp(.9375rem,1.22vw,1.25rem);
  line-height:1.55;
  color:rgba(247,244,239,.9);
}
/* Quick orientation facts. Deliberately the first thing under the H1 — these
   are the figures an answer engine lifts when asked "how far is Huron from
   Cedar Point", and a human scanning the page wants them in the same place. */
.phero__chips{
  display:flex;flex-wrap:wrap;gap:clamp(.5rem,1vw,.8125rem);
  margin:var(--card-gap) 0 0;padding:0;list-style:none;
}
.phero__chips li{
  display:flex;align-items:center;gap:.5rem;
  padding:clamp(.45rem,.8vw,.6rem) clamp(.75rem,1.3vw,1.0625rem);
  border:1px solid rgba(247,244,239,.3);
  border-radius:999px;
  background:rgba(8,16,26,.28);
  font-size:clamp(.6875rem,.85vw,.875rem);
  color:rgba(247,244,239,.94);
  backdrop-filter:blur(2px);
}
.phero__chips b{font-weight:500;color:var(--cream)}
.phero__chips svg{width:clamp(13px,1vw,15px);height:auto;color:var(--tan);flex:0 0 auto}
.guide__more{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-top:clamp(1.1rem,2vw,1.875rem);
  padding-bottom:.35rem;
  border-bottom:1px solid rgba(17,110,156,.4);
  color:var(--brand);text-decoration:none;
  font-size:clamp(.6875rem,.8vw,.84375rem);
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.guide__more svg{transition:transform .3s var(--ease)}
.guide__more:hover,.guide__more:focus-visible{color:var(--brand-deep);border-color:var(--brand-deep)}
.guide__more:hover svg{transform:translateX(4px)}
/* --- Drive times --------------------------------------------------------- */
.dist{
  background:var(--sand);
  padding:var(--section-y) var(--gutter);
  scroll-margin-top:var(--header-h);
}
.dist__head{max-width:62rem;margin-bottom:var(--block-gap)}
.dist__title{
  margin:clamp(.75rem,1.4vw,1.4rem) 0 0;
  font-weight:400;
  font-size:clamp(1.625rem,3.2vw,3.25rem);
  line-height:1.06;letter-spacing:-.015em;color:var(--ink);
}
.dist__lede{
  margin:clamp(.75rem,1.3vw,1.125rem) 0 0;max-width:62ch;
  font-size:clamp(.9375rem,1.13vw,1.125rem);line-height:1.55;color:var(--text-body);
}
.dist__wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dist table{
  width:100%;border-collapse:collapse;
  font-size:clamp(.8125rem,1vw,1rem);
  min-width:30rem;
}
.dist caption{
  caption-side:bottom;
  padding-top:clamp(.85rem,1.5vw,1.25rem);
  text-align:left;
  font-size:clamp(.75rem,.88vw,.875rem);line-height:1.5;color:var(--text-muted);
}
.dist th,.dist td{
  padding:clamp(.6rem,1.1vw,1rem) clamp(.5rem,1vw,1rem);
  text-align:left;border-bottom:1px solid var(--line);
}
.dist thead th{
  font-size:var(--fs-eyebrow);
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-muted);border-bottom-color:rgba(120,105,85,.45);
}
.dist tbody th{font-weight:400;color:var(--ink)}
.dist td{color:var(--text-body);font-variant-numeric:tabular-nums;white-space:nowrap}
.dist tbody tr:last-child th,.dist tbody tr:last-child td{border-bottom:0}
.dist tbody tr:hover th,.dist tbody tr:hover td{background:rgba(255,255,255,.5)}
@media (max-width:620px){
.dist table{min-width:0;font-size:.8125rem}
.dist th,.dist td{padding:.6rem .35rem}
.dist tbody th{white-space:normal;line-height:1.35}
.dist thead th:nth-child(2),.dist td:first-of-type{width:1%}
}
@media (max-width:560px){
.phero__chips li{font-size:.75rem}
}
/* --- Child page: wide image band ---------------------------------------- */
.band{
  position:relative;overflow:clip;
  aspect-ratio:20/7;min-height:clamp(10rem,22vw,20rem);
  background:#0B2238;
}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(6,16,26,.3),rgba(9,38,60,.18));
}
/* --- Child page: know before you go -------------------------------------- */
.know{
  background:var(--sand);
  padding:var(--section-y) var(--gutter);
}
.know__head{max-width:62rem;margin-bottom:var(--block-gap)}
.know__title{
  margin:clamp(.75rem,1.4vw,1.4rem) 0 0;font-weight:400;
  font-size:clamp(1.625rem,3.2vw,3.25rem);line-height:1.06;
  letter-spacing:-.015em;color:var(--ink);
}
.know__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:0 clamp(1.5rem,4vw,4rem);
}
.know__list li{padding:clamp(1rem,1.9vw,1.6rem) 0;border-top:1px solid var(--line)}
.know__list li:nth-child(-n+2){border-top:0;padding-top:0}
.know__list h3{
  margin:0;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(1.0625rem,1.4vw,1.375rem);line-height:1.2;color:var(--ink);
}
.know__list p{
  margin:clamp(.4rem,.8vw,.6rem) 0 0;
  font-size:clamp(.875rem,1.02vw,1rem);line-height:1.56;color:var(--text-body);
}
/* --- Child page: the other categories ------------------------------------ */
.more{
  background:var(--sand-lite);
  padding:var(--section-y) var(--gutter) var(--section-y-lg);
}
.more__head{max-width:62rem;margin-bottom:var(--block-gap)}
.more__title{
  margin:clamp(.75rem,1.4vw,1.4rem) 0 0;font-weight:400;
  font-size:clamp(1.5rem,2.9vw,3rem);line-height:1.06;
  letter-spacing:-.015em;color:var(--ink);
}
.more__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(.7rem,1.25vw,1.125rem);
}
.more__card{position:relative;min-width:0}
.more__link{
  position:relative;display:block;height:100%;
  aspect-ratio:3/4;
  border-radius:10px;overflow:clip;background:#0B2238;
  color:var(--cream);text-decoration:none;
}
.more__link img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease);
}
.more__link::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(0deg,rgba(6,16,26,.9) 0%,rgba(6,16,26,.5) 38%,rgba(6,16,26,0) 76%),
    linear-gradient(0deg,rgba(9,38,60,.34),rgba(9,38,60,.34));
}
.more__link:hover img,.more__link:focus-visible img{transform:scale(1.055)}
.more__link span{
  position:absolute;inset:auto 0 0 0;z-index:1;
  padding:clamp(.75rem,1.3vw,1.0625rem);
  font-family:var(--font-serif);
  font-size:clamp(.9375rem,1.1vw,1.125rem);line-height:1.18;
}
.more__link:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
@media (max-width:1000px){
.more__grid{grid-template-columns:repeat(3,1fr)}
.more__link{aspect-ratio:1/1}
.know__list{grid-template-columns:1fr}
.know__list li:nth-child(2){border-top:1px solid var(--line);padding-top:clamp(1rem,1.9vw,1.6rem)}
}
@media (max-width:760px){
.band{aspect-ratio:16/9}
}
@media (max-width:560px){
.more__grid{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
.more__link img{transition:none}
}

/* ==========================================================================
   NAP CARD — name, address, phone. Shared by /about/ and /contact/.
   The one block on the site that has to match the footer and the
   LodgingBusiness schema character for character, so it lives in one file and
   is included by both pages rather than copied into each.
     [CSS] this block -> assets/css/nap.css
   ========================================================================== */
/* --- Where we are --------------------------------------------------------- */
.nap{
  background:var(--sand-lite);
  padding:var(--section-y) var(--gutter) var(--section-y-lg);
  scroll-margin-top:var(--header-h);
}
.nap__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,24rem);
  gap:clamp(1.75rem,4vw,4.5rem);
  align-items:start;
}
.nap__body p{
  margin:0 0 clamp(.85rem,1.5vw,1.25rem);
  max-width:62ch;
  font-size:clamp(.9375rem,1.08vw,1.0625rem);
  line-height:1.68;
  color:var(--text-body);
}
.nap__body p:last-child{margin-bottom:0}
.nap__body a{
  color:var(--brand);text-decoration:none;
  border-bottom:1px solid var(--link-line);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.nap__body a:hover,.nap__body a:focus-visible{color:var(--brand-deep);border-bottom-color:var(--brand-deep)}
/* The contact card. This is the page's NAP block — name, address, phone — and
   it has to match the footer and the LodgingBusiness schema character for
   character, or the local signal splits three ways. */
.nap__card{
  margin:0;padding:clamp(1.25rem,2.4vw,2rem);
  border:1px solid var(--line-strong);
  border-radius:14px;
  background:rgba(255,255,255,.62);
}
.nap__row{display:flex;gap:clamp(.7rem,1.1vw,1rem);align-items:flex-start}
.nap__row + .nap__row{
  margin-top:clamp(.9rem,1.5vw,1.2rem);
  padding-top:clamp(.9rem,1.5vw,1.2rem);
  border-top:1px solid rgba(120,105,85,.24);
}
.nap__row > svg{
  flex:0 0 auto;width:clamp(17px,1.3vw,20px);height:auto;
  color:#8A6E49;margin-top:.25em;
}
.nap__key{
  display:block;margin:0 0 .18rem;
  font-size:clamp(.8125rem,.95vw,.9375rem);
  line-height:1.4;
  color:var(--text-soft);
}
.nap__val{
  display:block;margin:0;
  font-size:clamp(.9375rem,1.08vw,1.0625rem);
  line-height:1.5;
  color:var(--ink);
}
.nap__val a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(17,110,156,.42);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.nap__val a:hover,.nap__val a:focus-visible{color:var(--brand-deep);border-bottom-color:var(--brand-deep)}
@media (max-width:900px){
.nap__inner{grid-template-columns:1fr}
}

/* ==========================================================================
   ANSWER-FIRST OPENING — the editorial variant.
   Used by /about/ and /contact/ only. The guide pages and the blog keep the
   copy-beside-photograph band (.lead in things-to-do.css), which suits a
   destination page; these two pages are about the business rather than a
   place, so the opening is set as a statement instead of a picture.
     [CSS] this block -> assets/css/opening.css
   ========================================================================== */
.open{
  background:var(--sand-lite);
  padding:clamp(2.75rem,5vw,5.5rem) var(--gutter) clamp(2.75rem,5.2vw,5.5rem);
  scroll-margin-top:var(--header-h);
}
.open__inner{max-width:76rem}
/* The one paragraph an answer engine lifts, so it is the first thing set and
   the only thing at display size. text-wrap:balance evens the two or three
   lines rather than leaving a single orphaned word. */
.open__answer{
  margin:0;
  max-width:44ch;
  font-size:clamp(1.3125rem,2.45vw,2.3125rem);
  line-height:1.27;
  letter-spacing:-.016em;
  color:var(--ink);
  text-wrap:balance;
}
.open__answer a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(17,110,156,.42);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.open__answer a:hover,.open__answer a:focus-visible{color:var(--brand);border-bottom-color:var(--brand)}
.open__rule{
  height:1px;border:0;background:var(--line-strong);
  margin:clamp(1.5rem,2.7vw,2.625rem) 0 0;
}
.open__cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2.5vw,3.25rem);
  margin-top:clamp(1.25rem,2.3vw,2.125rem);
}
/* A single supporting paragraph in a two-column grid leaves a conspicuous
   hole where the second column should be, so one paragraph takes a reading
   measure instead of half a row. */
.open__cols--single{grid-template-columns:minmax(0,64ch)}
.open__cols p{
  margin:0;
  font-size:clamp(.9375rem,1.08vw,1.0625rem);
  line-height:1.72;
  color:var(--text-mid);
}
.open__cols a{
  color:var(--brand);text-decoration:none;
  border-bottom:1px solid var(--link-line);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.open__cols a:hover,.open__cols a:focus-visible{color:var(--brand-deep);border-bottom-color:var(--brand-deep)}
@media (max-width:760px){
.open__cols{grid-template-columns:1fr;gap:clamp(.9rem,2.4vw,1.25rem)}
}

/* --- Secondary link beside the closing button ----------------------------- */
.cta__alt{
  color:var(--cream);text-decoration:none;
  font-size:clamp(.9375rem,1.05vw,1.0625rem);
  padding-bottom:.2em;
  border-bottom:1px solid rgba(247,244,239,.45);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.cta__alt:hover,.cta__alt:focus-visible{border-bottom-color:var(--cream)}