/* Hartwell — structure stylesheet. Colors come ONLY from var(--m-*) set in seasoning.css. */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--m-bg);
  color: var(--m-text);
  font-family: var(--m-font-body), system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--m-font-display), Georgia, serif; font-weight: 500; }

a { color: inherit; text-decoration: none; transition: color 0.18s ease; }

.wrap { max-width: 1020px; margin: 0 auto; padding: 0 28px; }

/* ---- Navigation ---- */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 0;
}
.logo {
  font-family: var(--m-font-display), Georgia, serif;
  font-size: 1.3rem; font-weight: 600; color: var(--m-heading);
  letter-spacing: 0.02em;
}
.logo:hover { color: var(--m-accent); }
.links { display: flex; gap: 26px; }
.links a { font-size: 0.88rem; color: var(--m-soft); letter-spacing: 0.04em; }
.links a:hover { color: var(--m-accent); }
.links a[aria-current="page"] { color: var(--m-heading); font-weight: 600; }

/* ---- Hero ---- */
.hero { padding: 40px 0 72px; }
.hero-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.hero-photo img { display: block; width: 100%; height: 520px; object-fit: cover; }
.hero-copy h1 {
  font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1.08; color: var(--m-heading);
  font-weight: 500;
}
.fact-line {
  margin-top: 20px; font-family: var(--m-font-display), Georgia, serif;
  font-size: 1.2rem; font-style: italic; line-height: 1.55; color: var(--m-soft);
}
.hero-copy .intro { margin-top: 18px; font-size: 0.97rem; color: var(--m-text); max-width: 480px; }
.quiet-link { color: var(--m-accent); text-decoration: underline; text-underline-offset: 4px; }
.hero-copy .quiet-link { display: inline-block; margin-top: 20px; font-size: 0.92rem; }

/* ---- String lights divider ---- */
.lights-divider { display: block; width: 100%; height: 70px; color: var(--m-faint); overflow: visible; }
.lights-divider .wire { stroke: currentColor; opacity: 0.6; }
.lights-divider .bulb { fill: var(--m-accent); filter: drop-shadow(0 0 4px var(--m-accent)); }
.lights-divider .cap { fill: currentColor; }
.lights-divider .bulb.tw1 { animation: twinkle 3.2s ease-in-out infinite; }
.lights-divider .bulb.tw2 { animation: twinkle 4.1s ease-in-out 1.1s infinite; }
.lights-divider .bulb.tw3 { animation: twinkle 3.7s ease-in-out 2s infinite; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .lights-divider .bulb { animation: none !important; }
}

/* ---- The year in the garden ---- */
.year { padding: 56px 0 64px; }
.sec-title { font-size: 1.9rem; color: var(--m-heading); font-weight: 500; }
.sec-note { margin-top: 8px; color: var(--m-soft); font-size: 0.95rem; max-width: 560px; }
.seasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 40px; }
.season .sprig { display: block; height: 26px; color: var(--m-accent); }
.season h3 {
  margin-top: 12px; font-size: 1.15rem; color: var(--m-heading);
  font-style: italic; font-weight: 500;
}
.season p { margin-top: 8px; font-size: 0.88rem; line-height: 1.65; color: var(--m-soft); }
.season .book-note { display: block; margin-top: 10px; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--m-accent); font-weight: 600; }

/* ---- Rooms & floor plan ---- */
.rooms { background: var(--m-surface); padding: 64px 0 72px; }
.rooms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 12px; }
.plan { display: block; width: 100%; height: auto; color: var(--m-soft); }
.plan .wall { stroke: var(--m-heading); fill: none; }
.plan .soft-line { stroke: var(--m-faint); fill: none; }
.plan .lawn { fill: var(--m-bg); stroke: var(--m-faint); }
.plan text { font-family: var(--m-font-body), sans-serif; font-size: 9px; letter-spacing: 0.12em; fill: var(--m-soft); }

.placecards { display: flex; flex-direction: column; gap: 18px; }
.placecard {
  position: relative; background: var(--m-bg); padding: 18px 22px 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.07);
  border-top: 1px solid var(--m-line);
}
.placecard::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px;
  background: var(--m-surface);
  border-bottom: 1px solid var(--m-line);
}
.placecard .room { font-family: var(--m-font-display), Georgia, serif; font-size: 1.25rem; color: var(--m-heading); }
.placecard .cap { display: block; font-size: 0.85rem; color: var(--m-soft); margin-top: 2px; }
.rooms .aside-note { margin-top: 26px; font-size: 0.9rem; color: var(--m-soft); font-style: italic; }

/* ---- Guest book ---- */
.guestbook { padding: 68px 0 60px; }
.gb-entries { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 30px; }
.gb-entry {
  font-family: "Homemade Apple", cursive;
  font-size: 1.02rem; line-height: 2.1; color: var(--m-text);
  transform: rotate(-0.8deg);
}
.gb-entry + .gb-entry { transform: rotate(0.6deg); }
.gb-entry .who { display: block; margin-top: 10px; font-family: var(--m-font-body), sans-serif; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-faint); }

/* ---- Inner pages ---- */
.page { padding: 40px 0 80px; }
.wrap.page { padding-left: 28px; padding-right: 28px; }
.page-title { font-size: clamp(2rem, 4.5vw, 2.8rem); color: var(--m-heading); line-height: 1.15; font-weight: 500; }
.page-lede { margin-top: 14px; color: var(--m-soft); max-width: 580px; }

/* ---- The day timeline ---- */
.day { margin-top: 44px; max-width: 640px; }
.moment { display: grid; grid-template-columns: 96px 1fr; gap: 24px; padding: 16px 0; border-top: 1px solid var(--m-line); }
.moment .when { font-family: var(--m-font-display), Georgia, serif; font-size: 1.1rem; color: var(--m-accent); font-style: italic; }
.moment p { font-size: 0.94rem; color: var(--m-text); }
.moment p strong { color: var(--m-heading); font-weight: 600; }

/* ---- Pricing ---- */
.costs { margin-top: 56px; padding: 30px 34px; background: var(--m-surface); max-width: 640px; }
.costs h2 { font-size: 1.4rem; color: var(--m-heading); }
.price-line { display: block; margin-top: 14px; font-family: var(--m-font-display), Georgia, serif; font-size: 1.15rem; color: var(--m-heading); }
.costs .included { margin-top: 16px; font-size: 0.9rem; color: var(--m-soft); }

.wide-photo { margin: 64px 0 0; }
.wide-photo img { display: block; width: 100%; height: 380px; object-fit: cover; }
.photo-caption { margin-top: 10px; font-size: 0.82rem; font-style: italic; color: var(--m-faint); }

.prose-block { margin-top: 48px; max-width: 640px; }
.prose-block h2 { font-size: 1.4rem; color: var(--m-heading); margin-bottom: 10px; }
.prose-block p { margin-top: 12px; font-size: 0.96rem; color: var(--m-text); }

/* ---- Visit ---- */
.visit-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; margin-top: 44px; align-items: start; }
.visit-photo img { display: block; width: 100%; height: 460px; object-fit: cover; }
.v-item { padding: 20px 0; border-top: 1px solid var(--m-line); }
.v-item h3 { font-size: 1.1rem; color: var(--m-heading); margin-bottom: 4px; }
.v-item p { font-size: 0.94rem; color: var(--m-soft); }
.v-item .big-line { font-family: var(--m-font-display), Georgia, serif; font-size: 1.5rem; color: var(--m-accent); }
.fine-note { margin-top: 30px; font-size: 0.85rem; font-style: italic; color: var(--m-faint); }

/* ---- Footer ---- */
footer { border-top: 1px solid var(--m-line); padding: 34px 0 42px; }
.foot-row { display: flex; justify-content: space-between; gap: 20px; font-size: 0.85rem; color: var(--m-soft); flex-wrap: wrap; }
.foot-tag { font-family: var(--m-font-display), Georgia, serif; font-style: italic; }

@media (max-width: 820px) {
  .hero { padding: 20px 0 52px; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-photo img { height: 320px; }
  .seasons { grid-template-columns: 1fr 1fr; gap: 30px; }
  .rooms-grid { grid-template-columns: 1fr; gap: 40px; }
  .gb-entries { grid-template-columns: 1fr; gap: 30px; }
  .visit-grid { grid-template-columns: 1fr; }
  .visit-photo img { height: 300px; }
  .moment { grid-template-columns: 72px 1fr; gap: 14px; }
  .links { gap: 14px; }
  .links a { font-size: 0.78rem; }
  .foot-row { flex-direction: column; gap: 6px; }
}