/* ==========================================================================
   layout — page shell, header, footer, section scaffolding, grids, forms
   ========================================================================== */

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Nav */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: var(--header-pad-y) 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
header .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Header responds to scroll (class toggled by js/modules/header.js) */
header.scrolled {
  background: rgba(27, 26, 22, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  padding: var(--header-pad-y-scrolled) 0;
}
.wordmark {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  letter-spacing: 0.04em;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.emblem {
  width: 20px;
  height: 22px;
  flex-shrink: 0;
}
.emblem polygon {
  fill: var(--gold);
}

/* Anchor landing offset.
   Without this the target's top edge aligns with the viewport top, which is
   underneath the sticky header. The headings still cleared the header on
   their own (section.block carries 130px of top padding), but the section's
   own top edge did not, so every jump landed tighter than the layout
   intends. See --anchor-offset in base.css. */
section.block,
#opening {
  scroll-margin-top: var(--anchor-offset);
}

/* Opening */
.intro {
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 100px 0;
  border-bottom: 1px solid var(--line);
}
.intro-topo {
  position: absolute;
  top: -10%;
  right: -8%;
  width: 62%;
  height: 130%;
  opacity: 0.28;
  pointer-events: none;
}
.intro-inner {
  position: relative;
  width: 100%;
  text-align: center;
}
.intro p.kicker {
  color: var(--rust-text);
  font-size: 15px;
  margin-bottom: 18px;
}
.intro h1 {
  font-size: clamp(34px, 5vw, 54px);
  max-width: 16ch;
  margin: 0 auto 16px;
}
/* Currently unused: the intro's one-line subhead ("Tap where you'd like to
   start.") was removed with the tile grid it instructed. The rule is kept so a
   replacement line, if the client supplies one, needs only the markup back. */
.intro .sub {
  font-size: 17px;
  color: var(--stone);
  margin-bottom: 56px;
}

/* Section shared — Expedition Journal treatment.
   The counter numbers each .label as 01, 02, 03... in document order. */
body { counter-reset: entry; }
section.block {
  position: relative;
  padding: 130px 0;
  border-bottom: none;
  overflow: hidden;
}
section.block::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  transform: rotate(-0.6deg) scaleX(1.02);
  transform-origin: left;
}
/* Was an inline style="padding-top: 0" on #stats. */
section.block#stats {
  padding-top: 0;
}
/* Was an inline style="border-bottom: none" on #contact. Redundant against
   section.block above, which already sets it — kept verbatim so the cascade
   is unchanged. */
section.block#contact {
  border-bottom: none;
}
.block .label {
  counter-increment: entry;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--rust-text);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.block .label::before {
  content: "0" counter(entry);
  counter-increment: none;
  font-family: 'Fraunces', serif;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* The 404 page's big "404" label is a plain label with no journal number.
   Was an inline <style> block in 404.html. */
.block .label.error-label::before {
  display: none !important;
}
.block h2 {
  font-size: clamp(52px, 8vw, 118px);
  line-height: 0.95;
  max-width: 14ch;
  margin-bottom: 34px;
  letter-spacing: -0.02em;
}
.block .body-text {
  max-width: 60ch;
  color: var(--stone);
  font-size: 18px;
}
/* Was an inline style on the closing note in #rentals. */
.block .body-text.body-text-note {
  margin-top: 18px;
  color: var(--rust-text);
}

/* Subheading within a section */
h3.subhead {
  font-size: 21px;
  margin: 52px 0 4px;
}
.subhead-note {
  color: var(--stone);
  font-size: 14px;
}

/* Team list */
.team-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;
  margin-top: 44px;
  max-width: 640px;
}
.team-list h3 {
  font-size: 19px;
  margin-bottom: 6px;
}
.team-list p {
  font-size: 14px;
  color: var(--stone);
  max-width: 32ch;
}

/* Two column layout for accommodation */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
}
form { display: flex; flex-direction: column; gap: 26px; max-width: 420px; }
.field { position: relative; }
.field label {
  position: absolute;
  left: 0;
  top: 10px;
  font-size: 16px;
  color: var(--stone);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.2s ease, color 0.2s ease;
}
input, textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--sand);
  font-family: 'Archivo', sans-serif;
  font-size: 16px;
  padding: 10px 0;
}
input:focus, textarea:focus {
  outline: none;
  border-bottom-color: var(--rust);
}
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label,
.field textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-20px) scale(0.8);
  color: var(--rust-text);
}
textarea { resize: vertical; min-height: 90px; }
.contact-info p { margin-bottom: 10px; color: var(--stone); }
.contact-info a:hover { color: var(--rust); }
/* Was an inline style on the enquiry button. */
form .btn.btn-submit {
  margin-top: 8px;
  text-align: center;
}

/* Footer */
footer {
  padding: 50px 0;
}
footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
footer .legal {
  display: flex;
  gap: 26px;
}
footer a, footer span {
  font-size: 13px;
  color: var(--stone);
}
footer a:hover { color: var(--sand); }

@media (max-width: 720px) {
  .wrap { padding: 0 22px; }
  .intro { min-height: auto; padding: 70px 0 60px; }
  .intro-topo { width: 90%; opacity: 0.16; }
  .team-list { grid-template-columns: 1fr; }
  .split, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}