:root {
  --green: #073b30;
  --green-deep: #032a22;
  --green-mid: #155b49;
  --gold: #c8a45d;
  --yellow: #ffdc00;
  --cream: #f4efe3;
  --ink: #17211e;
  --white: #fff;
  --muted-white: rgba(255, 255, 255, 0.73);
  --max: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--green);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

.skip-link {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  color: var(--ink);
  background: var(--yellow);
  border-radius: 10px;
  font-weight: 800;
}

.skip-link:focus { top: 12px; }

.link-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: start center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
  color: var(--white);
  background:
    radial-gradient(circle at 50% 5%, rgba(33, 112, 88, 0.42), transparent 35%),
    radial-gradient(circle at 15% 100%, rgba(247, 200, 80, 0.12), transparent 32%),
    linear-gradient(160deg, #0a4436 0%, var(--green) 54%, var(--green-deep) 100%);
  overflow: hidden;
}

.link-hero::before,
.link-hero::after {
  content: "";
  position: absolute;
  z-index: -2;
  width: 330px;
  height: 170px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 100% 0 100% 0;
  transform: rotate(-36deg);
}

.link-hero::before { left: -180px; bottom: 80px; }
.link-hero::after { right: -170px; top: 120px; transform: rotate(144deg); }

.leaf {
  position: absolute;
  z-index: -1;
  width: 190px;
  height: 390px;
  opacity: 0.16;
  background:
    radial-gradient(ellipse at 30% 20%, #b8d5b9 0 15%, transparent 16%),
    radial-gradient(ellipse at 70% 38%, #b8d5b9 0 18%, transparent 19%),
    radial-gradient(ellipse at 28% 58%, #b8d5b9 0 19%, transparent 20%),
    radial-gradient(ellipse at 70% 77%, #b8d5b9 0 17%, transparent 18%),
    linear-gradient(90deg, transparent 48%, #b8d5b9 49% 51%, transparent 52%);
}

.leaf-one { left: -70px; bottom: -70px; transform: rotate(20deg); }
.leaf-two { right: -84px; top: -76px; transform: rotate(205deg); }
.bird-mark { position: absolute; z-index: -1; color: var(--yellow); opacity: 0.55; font-size: 2.3rem; }
.bird-one { left: 9%; top: 22%; }
.bird-two { right: 8%; bottom: 15%; font-size: 1.3rem; }

.profile-card {
  width: min(100%, 520px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.profile-logo {
  width: 84px;
  height: 84px;
  margin-top: 2px;
  border-radius: 2px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.24);
}

h1 {
  margin: 15px 0 2px;
  font-size: clamp(1.45rem, 6vw, 1.9rem);
  font-weight: 780;
  line-height: 1.15;
}

.profile-subtitle {
  margin: 5px 0 0;
  color: var(--muted-white);
  font-size: 0.98rem;
}

.primary-links {
  width: 100%;
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.primary-links a {
  min-height: 56px;
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  align-items: center;
  padding: 8px 14px;
  color: #a1834e;
  background: var(--white);
  border: 2px solid var(--gold);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.17);
  font-size: 1.03rem;
  font-weight: 760;
  text-decoration: none;
  transition: transform 150ms ease, background 150ms ease;
}

.primary-links a span:first-child { grid-column: 2; }
.primary-links a span:last-child { grid-column: 3; justify-self: end; font-size: 1rem; opacity: 0; transition: opacity 150ms ease; }
.primary-links a:hover { transform: translateY(-2px); background: #fffdf6; }
.primary-links a:hover span:last-child { opacity: 1; }

.social-links {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.social-links a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--green);
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.social-links svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.social-links .fill { fill: currentColor; stroke: none; }
.social-links a:nth-child(1) { color: #d83b75; }
.social-links a:nth-child(2) { color: #18a65b; }
.social-links a:nth-child(3) { color: #2563b8; }

.profile-location {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.8rem;
}

a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }

.content-wrap {
  width: min(var(--max), calc(100% - 32px));
  margin-inline: auto;
}

.gallery-section {
  padding: 74px 0 84px;
  background: var(--cream);
}

.eyebrow {
  margin: 0 0 13px;
  color: var(--green-mid);
  font-size: 0.73rem;
  font-weight: 850;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.eyebrow.light { color: var(--yellow); }

h2 {
  max-width: 760px;
  margin: 0;
  font: 500 clamp(2.35rem, 9.5vw, 4.8rem)/0.98 Georgia, "Times New Roman", serif;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 38px;
}

.photo-grid figure {
  aspect-ratio: 1;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
}

.photo-grid .photo-wide { grid-row: span 2; aspect-ratio: auto; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; }

.info-section {
  padding: 80px 0 88px;
  color: var(--white);
  background: var(--green);
}

.info-grid {
  display: grid;
  gap: 12px;
  margin-top: 42px;
}

.info-card {
  padding: 28px 24px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.08);
}

.card-label {
  margin: 0 0 24px;
  color: var(--yellow);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.info-card h3 { margin: 0; font: 500 1.9rem/1.05 Georgia, serif; }
.info-card > p:not(.card-label):not(.fine-print) { color: var(--muted-white); }
.info-card > a:not(.contact-row) { display: inline-block; margin-top: 18px; color: var(--yellow); font-weight: 800; text-underline-offset: 5px; }

.hours-list { margin: 0; }
.hours-list div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.hours-list dt { color: var(--muted-white); }
.hours-list dd { margin: 0; font-weight: 750; text-align: right; }
.fine-print { margin: 14px 0 0; color: rgba(255, 255, 255, 0.48); font-size: 0.74rem; }

.contact-row { display: block; padding: 14px 0; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.13); }
.contact-row span { display: block; color: var(--muted-white); }
.contact-row strong { display: block; margin-top: 3px; color: var(--white); word-break: break-word; }

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 30px 18px calc(30px + env(safe-area-inset-bottom));
  color: rgba(255, 255, 255, 0.62);
  background: var(--green-deep);
  text-align: left;
  font-size: 0.78rem;
}

footer img { border-radius: 3px; }
footer p { max-width: 250px; margin: 0; }

@media (max-width: 600px) and (max-height: 740px) {
  .link-hero { padding-top: max(10px, env(safe-area-inset-top)); }
  .profile-logo { width: 72px; height: 72px; }
  h1 { margin-top: 10px; font-size: 1.3rem; }
  .profile-subtitle { font-size: 0.88rem; }
  .primary-links { gap: 9px; margin-top: 16px; }
  .primary-links a { min-height: 50px; }
  .social-links { margin-top: 15px; }
  .social-links a { width: 40px; height: 40px; }
  .profile-location { margin-top: 12px; }
}

@media (min-width: 720px) {
  .link-hero { min-height: 820px; padding-top: 42px; }
  .profile-logo { width: 100px; height: 100px; }
  .primary-links { margin-top: 30px; }
  .primary-links a { min-height: 62px; font-size: 1.08rem; }
  .gallery-section { padding: 110px 0 120px; }
  .photo-grid { gap: 14px; margin-top: 58px; }
  .photo-grid figure { border-radius: 18px; }
  .info-section { padding: 110px 0 120px; }
  .info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}