/* Home Rentals by Katie
   Palette supplied by Katie. Type: EB Garamond + Parisienne.
   Section rhythm is deliberately looser than the mockup — Katie asked for
   more breathing room between sections. */

:root {
  --sage:        #646E5E;  /* primary sage — buttons, accents, footer */
  --sage-light:  #777F71;  /* secondary sage */
  --sage-dark:   #556052;  /* hover only */
  --cream:       #F8F4F0;  /* warm cream, main soft background */
  --ivory:       #FEFDFC;  /* soft ivory, main page background */
  --beige:       #EFECE4;  /* warm beige, section / card background */
  --taupe:       #B2A18E;  /* warm taupe, house + logo neutral */
  --terracotta:  #C47B5D;  /* script accent */
  --charcoal:    #2D2E2D;  /* main text and headlines */
  --rule:        #DBD9D4;  /* borders, subtle lines */
  --muted:       #5E635C;  /* body copy at lower emphasis */
  --on-sage:     #DDE0D9;  /* muted text on the sage footer */

  --serif:  'EB Garamond', Georgia, 'Times New Roman', serif;
  --script: 'Parisienne', 'Snell Roundhand', cursive;
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* generous vertical rhythm */
  --section:  clamp(76px, 9vw, 132px);
  --gutter:   clamp(24px, 5vw, 60px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--sage); text-decoration: none; transition: color 200ms ease; }
a:hover { color: var(--terracotta); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--sage); color: var(--ivory);
  padding: 14px 22px; font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
}
.skip:focus { left: 0; color: var(--ivory); }

.wrap { max-width: 1120px; margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- type scale ---------- */

.eyebrow {
  font: 500 13px var(--serif);
  letter-spacing: .30em; text-transform: uppercase;
  color: var(--sage);
  margin: 0;
}

.rule { width: 64px; height: 1px; background: var(--taupe); margin: 18px 0; border: 0; }
.rule--center { margin-inline: auto; }

h1, h2, h3 { margin: 0; font-weight: 400; color: var(--charcoal); }
h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.06; letter-spacing: -.015em; text-wrap: balance; }
h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.15; text-wrap: balance; }
h3 { font-size: clamp(22px, 2.2vw, 27px); line-height: 1.25; text-wrap: balance; }

p { margin: 0; text-wrap: pretty; }
.lede { font-size: 21px; line-height: 1.7; }
.muted { color: var(--muted); font-size: 18px; }
.script { font-family: var(--script); color: var(--sage); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 14px;
  font: 500 14px var(--serif);
  letter-spacing: .20em; text-transform: uppercase;
  color: var(--ivory); background: var(--sage);
  border: 0; padding: 18px 34px; cursor: pointer;
  transition: background 200ms ease, transform 200ms var(--ease);
}
.btn:hover { background: var(--sage-dark); color: var(--ivory); transform: translateY(-1px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 14px;
  font: 500 13px var(--serif);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--charcoal); background: transparent;
  border: 1px solid var(--taupe); padding: 15px 28px;
  transition: background 200ms ease, border-color 200ms ease;
}
.btn-ghost:hover { background: var(--beige); border-color: var(--sage); color: var(--charcoal); }

/* ---------- masthead ---------- */

.masthead { border-bottom: 1px solid var(--rule); background: var(--ivory); }
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-block: 26px;
}

.wordmark { display: block; line-height: 1; color: var(--charcoal); }
.wordmark:hover { color: var(--charcoal); }
.wordmark__main { display: block; font: 400 clamp(28px, 4vw, 34px)/1 var(--serif); }
.wordmark__script {
  display: block;
  font: 400 clamp(21px, 3vw, 26px)/1 var(--script);
  color: var(--sage); margin-top: 2px; margin-left: 44px;
}

.nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 34px); flex-wrap: wrap; }
.nav a { font: 400 18px var(--serif); color: var(--charcoal); padding-bottom: 4px; }
.nav a:hover { color: var(--sage); }
.nav a[aria-current="page"] { border-bottom: 1px solid var(--sage); }

@media (max-width: 720px) {
  .masthead__inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .nav { gap: 16px 20px; }
  .nav a { font-size: 17px; }
}

/* ---------- home hero ---------- */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: clamp(48px, 7vw, 88px);
  align-items: center;
  padding-block: var(--section);
}
.hero__lede { margin-top: 34px; max-width: 430px; }
.hero__cta { margin-top: 42px; }

.hero__art { text-align: center; }
.hero__art img { width: 100%; max-width: 400px; margin-inline: auto; }
.hero__tag {
  font: 400 clamp(28px, 4vw, 40px)/1 var(--script);
  color: var(--terracotta);
  margin-top: 10px;
}

/* ---------- band ---------- */

.band { background: var(--cream); border-block: 1px solid var(--rule); }
.band--beige { background: var(--beige); }

.section { padding-block: var(--section); }
.section--center { text-align: center; }

/* ---------- stats ---------- */

.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: clamp(56px, 7vw, 84px) 0 0;
}
.stats > div { padding-inline: 30px; }
.stats > div + div { border-left: 1px solid var(--rule); }
.stats dt { font: 400 clamp(42px, 5vw, 58px)/1 var(--serif); color: var(--charcoal); }
.stats .stats__label {
  font: 500 12px var(--serif);
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--sage); margin-top: 16px;
}
.stats dd { margin: 8px 0 0; color: var(--muted); font-size: 18px; }

@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr; gap: 40px; }
  .stats > div + div { border-left: 0; border-top: 1px solid var(--rule); padding-top: 40px; }
}

/* ---------- region cards ---------- */

.regions {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(24px, 3vw, 36px);
  align-items: stretch;
  margin-top: clamp(44px, 5vw, 60px);
}
.region {
  background: var(--beige);
  padding: clamp(44px, 5vw, 60px) clamp(28px, 4vw, 48px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.region--tx { background: var(--cream); }
.region__map { width: 78px; height: 78px; margin-bottom: 22px; }
.region__map svg { width: 100%; height: 100%; display: block; }
.region__name { font: 400 clamp(34px, 4vw, 44px)/1 var(--serif); }
.region__copy { margin: 0 0 34px; flex: 1; color: var(--muted); font-size: 18px; }

/* ---------- area pages ---------- */

.areahero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  align-items: stretch;
  background: var(--cream);
}
.areahero__copy { display: flex; align-items: center; padding-block: clamp(56px, 7vw, 88px); }
.areahero__sub { font-size: clamp(22px, 2.4vw, 27px); line-height: 1.3; margin-top: 12px; }
.areahero__body { margin-top: 26px; max-width: 520px; color: var(--muted); font-size: 18px; }
.areahero__photo { min-height: 440px; }

.areagrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(56px, 6vw, 80px) clamp(40px, 4vw, 64px);
  padding-block: var(--section);
}

.spot { display: grid; grid-template-columns: 210px 1fr; gap: 28px; align-items: start; }
.spot__photo { height: 240px; }
.spot__body h3 { margin-bottom: 0; }
.spot__text { margin: 0; color: var(--muted); font-size: 17px; }

/* the closing note has no photo */
.spot--note { grid-template-columns: 1fr; padding-left: clamp(0px, 4vw, 56px); border-left: 1px solid var(--rule); }

@media (max-width: 620px) {
  .spot { grid-template-columns: 1fr; gap: 20px; }
  .spot__photo { height: 220px; }
  .spot--note { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); padding-top: 32px; }
}

/* ---------- photo placeholders ----------
   Katie is supplying real photography. Until then these read as an
   intentional part of the design rather than a broken image. */

.photo {
  position: relative; overflow: hidden;
  background: var(--beige);
  border: 1px solid var(--rule);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 22px; text-align: center;
}
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo__glyph { width: 30px; height: 30px; opacity: .55; }
.photo__glyph svg { width: 100%; height: 100%; display: block; }
.photo__label {
  font: 500 10px var(--serif);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--sage);
}
.photo__caption { font: italic 400 15px/1.45 var(--serif); color: var(--muted); max-width: 30ch; }

.zoom img { transition: transform 900ms var(--ease); }
.zoom:hover img { transform: scale(1.05); }

/* ---------- tenant resource cards ---------- */

.resources {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: clamp(32px, 4vw, 48px);
  padding-bottom: var(--section);
}
.rcard {
  border: 1px solid var(--rule); background: var(--ivory);
  padding: clamp(40px, 5vw, 60px) clamp(28px, 4vw, 48px);
  display: flex; flex-direction: column;
}
.rcard h2 { font-size: clamp(28px, 3vw, 38px); }
.rcard__intro { margin-top: 30px; color: var(--muted); font-size: 18px; }

.checks { list-style: none; margin: 38px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.checks li { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 18px; }
.checks svg { flex: none; width: 28px; height: 28px; }

.rcard__cta {
  margin-top: auto; padding-top: 44px;
}
.rcard__link {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--sage); color: var(--ivory);
  font: 400 22px var(--serif); padding: 20px 24px;
  transition: background 200ms ease;
}
.rcard__link:hover { background: var(--sage-dark); color: var(--ivory); }

/* ---------- contact ---------- */

.contactblock { padding-block: clamp(88px, 11vw, 150px); }
.contactline { display: flex; align-items: center; gap: 26px; margin-top: clamp(44px, 6vw, 64px); flex-wrap: wrap; }
.contactline__icon {
  flex: none; width: 66px; height: 66px; border-radius: 50%;
  background: var(--sage); color: var(--ivory);
  display: flex; align-items: center; justify-content: center;
}
.contactline__icon svg { width: 27px; height: 27px; }
.contactline__label { font: 400 19px var(--serif); color: var(--sage); }
.contactline__value { font: 400 clamp(22px, 3vw, 30px) var(--serif); color: var(--charcoal); word-break: break-word; }
.contactline__value:hover { color: var(--terracotta); }

.signoff { margin-top: clamp(48px, 6vw, 64px); padding-top: 34px; border-top: 1px solid var(--rule); max-width: 760px; }
.signoff__name { font: 400 26px var(--serif); }
.signoff__role { font: 400 18px var(--serif); color: var(--sage); margin-top: 6px; }

/* ---------- footer ---------- */

.footer { background: var(--sage); color: var(--ivory); }
.footer__inner {
  padding-top: 56px; padding-bottom: 40px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 36px clamp(28px, 4vw, 56px);
}
.footer .wordmark__main { color: var(--ivory); font-size: 30px; }
.footer .wordmark__script { color: var(--ivory); font-size: 24px; margin-left: 38px; }

.footer__res {
  flex: 0 1 auto;
  padding-left: clamp(0px, 3vw, 40px);
  border-left: 1px solid rgba(254, 253, 252, .32);
}
.footer__restitle {
  font: 500 11px var(--serif);
  letter-spacing: .24em; text-transform: uppercase; color: var(--on-sage);
}
.footer__links { font: 400 17px/1.9 var(--serif); color: var(--ivory); margin-top: 10px; }
.footer__links a { color: var(--ivory); border-bottom: 1px solid rgba(254, 253, 252, .4); }
.footer__links a:hover { color: var(--ivory); border-bottom-color: var(--ivory); }

.footer__sprig { flex: 0 1 auto; width: 150px; opacity: .85; }
.footer__sprig svg { width: 100%; height: auto; display: block; }

.footer__tag {
  flex: 0 1 auto;
  font: 500 11px/2 var(--serif);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--on-sage); text-align: right;
}

.footer__base { padding-bottom: 30px; }
.footer__hr { height: 1px; background: rgba(254, 253, 252, .26); margin-bottom: 22px; border: 0; }
.footer__copy { font: 400 15px var(--serif); color: var(--on-sage); }

@media (max-width: 860px) {
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .footer__res { padding-left: 0; border-left: 0; }
  .footer__tag { text-align: left; }
  .footer__sprig { display: none; }
}

/* ---------- reveal ---------- */

@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-shown { animation: riseIn 700ms var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; }
  .zoom:hover img { transform: none; }
}

/* ---------- photo credits ---------- */

.tablewrap { margin-top: 44px; overflow-x: auto; }
.credits { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 16px; }
.credits th, .credits td {
  text-align: left; vertical-align: top;
  padding: 14px 18px 14px 0;
  border-bottom: 1px solid var(--rule);
}
.credits th {
  font: 500 11px var(--serif);
  letter-spacing: .20em; text-transform: uppercase;
  color: var(--sage); white-space: nowrap;
}
.credits td { color: var(--muted); }
.credits em { color: var(--terracotta); font-style: italic; }

.footer__credit { color: var(--on-sage); border-bottom: 1px solid rgba(254,253,252,.4); }
.footer__credit:hover { color: var(--ivory); }