/* ==========================================================================
   Dancing Leaf Lodge — public site
   Ported from mockups/public-site/styles.css (approved design).
   Design tokens live in tokens.css.
   ========================================================================== */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Alegreya", Palatino, "Palatino Linotype", Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}

h1, h2, h3, h4 {
  font-family: "Besley", "Clarendon", "Century Schoolbook", Georgia, serif;
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 800;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
h3 { font-size: 1.25rem; font-weight: 600; }

p { margin: 0 0 1em; }
a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-bright); }

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  border-radius: 2px;
}

.mono, .eyebrow, .route-step b, .dist {
  font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}

.eyebrow.clay { color: var(--clay); }

.wrap { max-width: 1080px; margin-inline: auto; padding-inline: clamp(18px, 4vw, 32px); }
.wrap-narrow { max-width: 760px; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 16px;
  z-index: 100;
}
.skip-link:focus { left: 8px; }

/* --- Header ----------------------------------------------------------- */

.site-head {
  border-bottom: 4px double var(--line);
  background: var(--paper);
}

.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-block: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: "Besley", Georgia, serif;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand em { font-style: normal; font-weight: 500; color: var(--gold); }
.brand svg { width: 22px; height: 26px; flex: none; }
.brand .leaf-fill { fill: var(--green); }
.brand .leaf-stem { stroke: var(--green); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem 1.3rem;
  flex-wrap: wrap;
  font-family: "Besley", Georgia, serif;
  font-size: 0.92rem;
  font-weight: 500;
}
.site-nav a { color: var(--ink-soft); text-decoration: none; padding-block: 4px; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom: 2px solid var(--gold);
}
.site-nav .btn { margin-left: 0.4rem; }
.site-nav a.btn, .site-nav a.btn:hover { color: var(--paper); border-bottom: none; }

/* --- Buttons ----------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--paper);
  font-family: "Besley", Georgia, serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  border-radius: 3px;
  padding: 10px 20px;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.btn:hover { background: var(--gold-bright); color: var(--paper); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
  box-shadow: none;
}
.btn-ghost:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink-soft); }

.btn-sm { padding: 7px 14px; font-size: 0.85rem; }

/* --- Hero (big sky over a low horizon) --------------------------------- */

.hero {
  position: relative;
  background: linear-gradient(to bottom, var(--sky-1), var(--sky-2) 78%);
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding: clamp(3.5rem, 9vw, 7.5rem) 0 clamp(4rem, 10vw, 8rem);
  max-width: 640px;
}

.hero .lede {
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 34em;
}

.hero-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.6rem; }

.hero-leaf {
  position: absolute;
  z-index: 1;
  top: clamp(1rem, 4vw, 3rem);
  right: clamp(-40px, 4vw, 9%);
  width: clamp(140px, 22vw, 260px);
  opacity: 0.5;
  transform-origin: 50% 0;
  animation: sway 7s ease-in-out infinite alternate;
}
.hero-leaf .leaf-fill { fill: var(--green); }
.hero-leaf .leaf-stem { stroke: var(--green); }
.hero-leaf .leaf-vein { stroke: var(--paper); }

@keyframes sway {
  from { transform: rotate(-5deg); }
  to   { transform: rotate(6deg); }
}

.horizon {
  display: block;
  width: 100%;
  height: clamp(50px, 8vw, 90px);
  margin-top: -1px;
}
.horizon .hill-back { fill: var(--green-soft); opacity: 0.45; }
.horizon .hill-front { fill: var(--green); opacity: 0.85; }

/* Small page heroes */
.hero-page .hero-inner { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 6vw, 4rem); }

/* --- Sections ----------------------------------------------------------- */

.section { padding-block: clamp(2.8rem, 7vw, 4.5rem); }
.section-tint { background: var(--paper-2); border-block: 1px solid var(--line); }

hr.leaf {
  border: 0;
  width: 22px;
  height: 26px;
  margin: clamp(2rem, 5vw, 3rem) auto;
  background: var(--gold);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 118"><path d="M50 2 L50 16"/><path d="M50 14 C26 16 10 30 12 46 C14 60 28 78 40 92 C45 98 48 105 50 112 C52 105 55 98 60 92 C72 78 86 60 88 46 C90 30 74 16 50 14 Z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 118"><path d="M50 2 L50 16"/><path d="M50 14 C26 16 10 30 12 46 C14 60 28 78 40 92 C45 98 48 105 50 112 C52 105 55 98 60 92 C72 78 86 60 88 46 C90 30 74 16 50 14 Z"/></svg>') center / contain no-repeat;
}

/* --- Cards & grids ------------------------------------------------------ */

.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 860px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.section-tint .card { background: var(--paper); }

.card-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin-bottom: 0.3rem; }
.card-body p { color: var(--ink-soft); font-size: 0.97rem; flex: 1; }

.price {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.82rem;
  color: var(--green);
  letter-spacing: 0.04em;
}

/* --- Placeholder images -------------------------------------------------- */

.ph {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 118"><path d="M50 14 C26 16 10 30 12 46 C14 60 28 78 40 92 C45 98 48 105 50 112 C52 105 55 98 60 92 C72 78 86 60 88 46 C90 30 74 16 50 14 Z" fill="%23808060" opacity="0.14"/></svg>') center / 24% no-repeat,
    var(--paper-3);
  border-bottom: 1px solid var(--line);
}
.ph > span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  padding: 0 1rem;
}
.ph-wide { aspect-ratio: 21 / 9; border: 1px solid var(--line); border-radius: 6px; }
.ph-tall { aspect-ratio: 4 / 5; }

/* A real uploaded photo fills the placeholder frame edge to edge. */
.ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* --- Photo carousel (PhotoCarousel island inside a .ph frame) ------------- */

.ph-carousel {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.ph-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0 0 3px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.ph-nav:hover { background: var(--paper); }
.ph-nav:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.ph-nav-prev { left: 10px; }
.ph-nav-next { right: 10px; }
.ph-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.ph-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ink-soft);
  background: color-mix(in srgb, var(--paper) 75%, transparent);
  cursor: pointer;
}
.ph-dot.on { background: var(--gold-bright); border-color: var(--gold-bright); }
.ph-dot:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* --- Notices ------------------------------------------------------------- */

.notice {
  border-left: 4px solid var(--clay);
  background: color-mix(in srgb, var(--clay) 9%, var(--paper));
  border-radius: 0 6px 6px 0;
  padding: 1rem 1.3rem;
  margin-block: 1.5rem;
}
.notice strong { color: var(--clay); }
.notice p:last-child { margin-bottom: 0; }

.notice-quiet {
  border-left-color: var(--green);
  background: color-mix(in srgb, var(--green) 8%, var(--paper));
}
.notice-quiet strong { color: var(--green); }

/* --- Split feature (home: two places in one) ----------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

.split-cell { border-top: 4px solid var(--green); padding-top: 1.2rem; }
.split-cell.clay-top { border-top-color: var(--clay); }
.split-cell .eyebrow { margin-bottom: 0.4rem; }

/* --- Detail tables (accommodations) --------------------------------------- */

.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin-block: 1rem 1.5rem;
}
.spec th, .spec td {
  text-align: left;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.spec th {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  width: 34%;
}

/* --- Directions ------------------------------------------------------------ */

.route-steps { list-style: none; counter-reset: step; margin: 1.5rem 0; padding: 0; }
.route-steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.4rem 3.2rem;
  border-left: 2px solid var(--line);
  margin-left: 1rem;
}
.route-steps li:last-child { border-left-color: transparent; padding-bottom: 0.2rem; }
.route-steps li::before {
  content: counter(step);
  position: absolute;
  left: -1.05rem;
  top: -0.15rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  background: var(--green);
  color: var(--paper);
  font-family: "Besley", Georgia, serif;
  font-weight: 800;
  border-radius: 50%;
}
.route-steps b { color: var(--ink); font-size: 0.92em; }

.route-map {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(0.5rem, 2vw, 1.5rem);
  margin-block: 2rem;
  overflow-x: auto;
}
.route-map svg { display: block; width: 100%; height: auto; min-width: 540px; }
.route-map .road { stroke: var(--ink-soft); stroke-width: 5; fill: none; stroke-linecap: round; }
.route-map .road-minor { stroke-width: 3.5; stroke-dasharray: 1 0; }
.route-map .rail { stroke: var(--ink-soft); stroke-width: 2; fill: none; }
.route-map .tie { stroke: var(--ink-soft); stroke-width: 2; }
.route-map text {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  fill: var(--ink);
}
.route-map .lbl-soft { fill: var(--ink-soft); font-size: 12px; }
.route-map .lbl-warn { fill: var(--clay); font-weight: 600; }
.route-map .lbl-lodge { fill: var(--gold); font-weight: 600; font-size: 15px; }
.route-map .dot { fill: var(--ink-soft); }
.route-map .dot-warn { fill: var(--clay); }
.route-map .lodge-mark { fill: var(--gold); }
.route-map .compass { stroke: var(--ink-soft); fill: var(--ink-soft); }

/* --- Policies --------------------------------------------------------------- */

.policy-list { display: grid; gap: 1.4rem; margin-block: 1.5rem; }
.policy {
  border-top: 3px solid var(--line);
  padding-top: 0.9rem;
}
.policy h3 { margin-bottom: 0.2rem; }
.policy p { color: var(--ink-soft); margin-bottom: 0.3em; }

/* --- Attractions -------------------------------------------------------------- */

.attraction {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1.2rem;
  padding-block: 1.2rem;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 560px) { .attraction { grid-template-columns: 1fr; gap: 0.2rem; } }
.attraction:last-child { border-bottom: none; }
.dist {
  font-size: 0.8rem;
  color: var(--green);
  letter-spacing: 0.03em;
  padding-top: 0.35rem;
}
.attraction h3 { margin-bottom: 0.15rem; }
.attraction p { color: var(--ink-soft); margin: 0; font-size: 0.98rem; }

/* --- Booking mock ---------------------------------------------------------------- */


.book-form {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(1.2rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: 1rem;
  align-items: end;
  margin-block: 1.5rem;
}
@media (max-width: 860px) { .book-form { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .book-form { grid-template-columns: 1fr; } }

.field label {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.field input, .field select {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 4px;
  padding: 9px 10px;
}
.field input:focus, .field select:focus { border-color: var(--gold); outline: none; }

.avail-row {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 1.2rem;
  align-items: center;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 640px) {
  .avail-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .avail-row .ph { max-width: 260px; }
}
.avail-row .ph { aspect-ratio: 3 / 2; border: 1px solid var(--line); border-radius: 4px; }
.avail-row h3 { margin-bottom: 0.1rem; }
.avail-row p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.avail-row .sold { color: var(--clay); font-family: "IBM Plex Mono", monospace; font-size: 0.8rem; letter-spacing: 0.06em; }

/* --- Footer -------------------------------------------------------------------------- */

.site-foot {
  margin-top: clamp(3rem, 8vw, 5rem);
  border-top: 4px double var(--line);
  background: var(--paper-2);
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
  padding-block: 2.5rem;
}
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; gap: 1.4rem; } }

.site-foot h4 {
  font-size: 0.78rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.site-foot a { color: var(--ink); }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: 0.45rem; }

.foot-note {
  border-top: 1px solid var(--line);
  padding-block: 1rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* --- Motion & print ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-leaf { animation: none; }
}

/* --- Not-yet-built nav destinations (Phase 0 only) ----------------------- */

.site-nav .soon {
  color: var(--ink-soft);
  opacity: 0.55;
  padding-block: 4px;
  cursor: default;
}
.site-nav .soon.btn { opacity: 0.55; color: var(--paper); cursor: default; box-shadow: none; }
.site-nav .soon.btn:hover { background: var(--gold); }

.soon { opacity: 0.55; cursor: default; }
.soon.btn:hover { background: var(--gold); }
.soon.btn-ghost:hover { background: transparent; border-color: var(--line); }