@charset "UTF-8";

/* Hybrid theme. Put .home on a masthead to reuse only its header styles. */
.home {
  --soil: #173b32;
  --soil-2: #214d42;
  --ink: #142e28;
  --gravel: #ede6d8;
  --salt: #fafaf7;
  --khulan: #c5a46d;
  --line: rgba(23, 59, 50, .18);
  --line-soft: rgba(23, 59, 50, .09);
  --wrap: 1320px;
  background: var(--salt);
  color: var(--soil);
  font-size: 16px;
}
.home .wrap { padding-inline: clamp(22px, 4vw, 64px); }
.home h2 { font-size: clamp(2rem, 3.5vw, 3.3rem); font-weight: 600; }
.home .eyebrow { color: #78613e; font-family: var(--body); font-size: 11px; letter-spacing: .16em; }
.home .eyebrow::after { max-width: 64px; }
.home .topbar { background: var(--soil); color: var(--gravel); font-family: var(--body); font-size: 11px; letter-spacing: .02em; }
.home .topbar .wrap { min-height: 34px; }
.home .masthead, .home.masthead { background: var(--salt); color: var(--soil); border-bottom: 1px solid var(--line); box-shadow: 0 4px 20px #173b3208; }
.home .masthead .wrap, .home.masthead .wrap { min-height: 94px; gap: 24px; }
.home .brand { flex-shrink: 0; }
.home .brand .sigil { width: 54px; filter: none; }
.home .brand-txt b { font-size: 25px; font-weight: 700; }
.home .brand-txt span { color: #50675e; font-family: var(--body); letter-spacing: .05em; font-size: 10px; }
.home .nav a, .home .nav .sub-btn { color: var(--soil); font-size: 12px; padding: 12px 9px; }
.home .nav a:hover, .home .nav .sub-btn:hover, .home .nav a[aria-current] { color: var(--soil); border-bottom-color: var(--khulan); }
.home .nav .sub { background: var(--salt); border-color: var(--line); border-top-color: var(--khulan); }
.home .nav .sub a { font-size: 13px; }
.home .navtoggle { color: var(--soil); border-color: var(--line); }
.home .hero { isolation: isolate; min-height: clamp(700px, 61.67vw, 1050px); display: flex; align-items: center; background: var(--soil); }
.home .hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 65%; opacity: 1; }
.home .hero .veil { background: linear-gradient(90deg, rgba(10,32,27,.08) 20%, rgba(10,32,27,.72) 50%, rgba(10,32,27,.96) 100%); }
.home .hero .inner { position: relative; inset: auto; width: 100%; padding: clamp(48px, 5vw, 80px) 0; }
.home .hero .inner > .wrap { padding-left: 52%; }
.home .hero h1 { font-size: clamp(40px, 4vw, 64px); font-weight: 500; line-height: 1.12; letter-spacing: -.025em; max-width: 18ch; margin-bottom: 25px; }
.home .hero .stamp { font-family: var(--body); font-size: 11px; letter-spacing: .18em; margin-bottom: 26px; }
.home .hero .sub { max-width: 53ch; font-size: clamp(14px, 1.2vw, 17px); line-height: 1.8; color: #fafaf7dc; }
.home .hero .sub p { margin: 0 0 1.1em; }
.home .hero .sub p:last-child { margin-bottom: 0; }
.home .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.home .btn { font-family: var(--body); font-size: 12px; letter-spacing: .025em; padding: 15px 23px; color: var(--soil); border-color: var(--soil); display: inline-flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 48px; }
.home .btn:hover { background: var(--soil); color: var(--salt); }
.home .hero .btn { border-color: #fafaf77a; color: var(--salt); }
.home .hero .btn:hover { background: var(--salt); color: var(--soil); }
.home .hero .btn.solid { background: var(--khulan); border-color: var(--khulan); color: #142e28; }
.home .hero .btn.solid:hover { background: var(--gravel); border-color: var(--gravel); }
.home .sectors { background: var(--soil); color: var(--gravel); padding-inline: max(0px, calc((100vw - 1192px) / 2)); font-family: var(--body); letter-spacing: .035em; }
.home .sectors > div { padding: 23px 24px; font-size: 11px; }
.home .sectors b { font-size: 27px; }
.home section.band { padding-block: clamp(58px, 7vw, 105px); }
.home .split.wide-left { grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 88px); }
.home .introduction .lede { font-size: 15px; line-height: 1.95; }
.home .intro-visuals { display: grid; gap: 30px; padding-top: 8px; }
.home .intro-landscape img { aspect-ratio: 4 / 3; object-fit: cover; }
.home figcaption { font-family: var(--body); letter-spacing: .01em; font-size: 11px; color: #51635a; }
.home .intro-visuals figure:last-child { padding: 20px; background: var(--gravel); }
.home .band.salt { background: var(--gravel); }
.home .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); border: 0; gap: 32px 0; }
.home .figures div { padding: 8px 30px; border: 0; border-left: 1px solid var(--line); }
.home .figures b { font-weight: 500; font-size: clamp(2.2rem, 3.7vw, 3.5rem); }
.home .figures span { font-family: var(--body); letter-spacing: .02em; font-size: 12px; color: #506158; }
.home .note { background: #fafaf780; font-size: 14px; }
.home .feature-band { background: var(--soil); color: var(--salt); }
.home .feature-band .eyebrow { color: var(--khulan); }
.home .feature-band .eyebrow::after { background: #c5a46d55; }
.home .feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 38px; }
.home .feature-card { position: relative; padding: 26px 23px 62px; color: var(--salt); text-decoration: none; border: 1px solid #fafaf72e; transition: background .25s, transform .25s; }
.home .feature-card:hover { background: #fafaf70b; transform: translateY(-4px); }
.home .feature-number { color: var(--khulan); font: 11px var(--mono); }
.home .feature-card h3 { font-size: 25px; font-weight: 500; margin-top: 30px; }
.home .feature-card p { font-size: 12px; color: #fafaf7b5; line-height: 1.8; }
.home .feature-arrow { position: absolute; right: 23px; bottom: 18px; color: var(--khulan); font-size: 24px; }
.home #biodiversity { scroll-margin-top: 110px; }
.home .species-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.home .species { border: 0; background: transparent; border-bottom: 1px solid var(--line); transition: background .25s; }
.home .species:hover { background: var(--gravel); }
.home .species > .shot { border: 0; aspect-ratio: 1; background: white; }
.home .species > .shot img { object-fit: contain; background: white; }
.home .species .body { padding: 24px 12px 26px; }
.home .species .name { font-size: 25px; font-weight: 600; }
.home .species .latin { font: 11px/1.7 var(--body); color: #78613e; margin-top: 0; }
.home .species .body > p:last-child { font-size: 13px !important; line-height: 1.8; }
.home .band.dark { background: var(--gravel); color: var(--soil); }
.home .band.dark h2 { color: var(--soil); }
.home .band.dark .eyebrow { color: #78613e; }
.home .band.dark .eyebrow::after { background: var(--line); }
.home .band.dark .split { align-items: center; }
.home .band.dark p { font-size: 14px; line-height: 1.9; }
.home .band.dark .btn { color: var(--soil); }
.home .band.dark .btn:hover { color: var(--salt); }
.home .band.dark figcaption { color: #51635a; border-top-color: var(--line); }
.home .nature-editorial { position: relative; isolation: isolate; min-height: 540px; display: grid; align-items: end; color: var(--salt); }
.home .nature-editorial > img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; z-index: -2; }
.home .nature-editorial::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #091d18dd, #091d1840), linear-gradient(0deg, #091d1866, transparent); z-index: -1; }
.home .nature-copy { max-width: 580px; padding-block: 90px; }
.home .nature-copy h2 { font-size: clamp(3.5rem, 6vw, 5.5rem); font-weight: 500; }
.home .nature-copy .eyebrow { color: var(--khulan); }
.home .nature-copy .eyebrow::after { background: #c5a46d55; }
.home .nature-copy .btn { color: var(--salt); border-color: #fafaf77a; margin-top: 20px; }
.home .nature-copy .btn:hover { background: var(--salt); color: var(--soil); }
.home .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.home .gallery figure img { aspect-ratio: 4 / 5; transition: filter .25s; }
.home .gallery figure img:hover { filter: brightness(1.08); }
.home footer.site { background: var(--soil); padding-top: 70px; }
.home footer.site h4 { font-family: var(--body); letter-spacing: .04em; font-size: 13px; color: var(--khulan); }
.home .footgrid { gap: 60px; }
.home .footgrid > div:first-child { max-width: 460px; }
.home .footgrid p, .home .footgrid li { font-size: 13px; line-height: 1.9; }
.home .footlogo { width: 65px; }
.home .colophon { font-family: var(--body); font-size: 10px; letter-spacing: .025em; }
@keyframes home-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .home .hero .stamp, .home .hero h1, .home .hero .sub, .home .hero-actions { animation: home-enter .8s both; }
  .home .hero h1 { animation-delay: .1s; }
  .home .hero .sub { animation-delay: .2s; }
  .home .hero-actions { animation-delay: .3s; }
}
@media (max-width: 1150px) {
  .home .navtoggle { display: block; }
  .home .nav { display: none; position: absolute; inset: 100% 0 auto; background: var(--salt); padding: 12px 20px 20px; border-top: 1px solid var(--line); max-height: 75vh; overflow-y: auto; }
  .home .nav.open { display: block; }
  .home .nav ul { flex-direction: column; }
  .home .nav a, .home .nav .sub-btn { font-size: 14px; padding: 13px 12px; width: 100%; text-align: left; }
  .home .nav .sub { position: static; display: none; margin-left: 12px; box-shadow: none; border: 0; border-left: 1px solid var(--khulan); }
  .home .nav li.open .sub { display: flex; }
  .home .species-grid, .home .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 859px) {
  .home .hero { min-height: 0; }
  .home .hero img.bg { height: auto; aspect-ratio: 3 / 2; object-position: center; }
  .home .hero .veil { background: linear-gradient(180deg, transparent 0, rgba(23,59,50,.1) 43vw, #173b32 66.6667vw); }
  .home .hero .inner { padding-block: calc(66.6667vw + 20px) 48px; }
  .home .hero .inner > .wrap { padding-inline: clamp(22px, 4vw, 64px); }
  .home .hero .sub { max-width: 62ch; font-size: 16px; }
  .home .split.wide-left { grid-template-columns: 1fr; }
  .home .intro-visuals { grid-template-columns: 1fr 1fr; align-items: start; }
  .home .intro-visuals figure:last-child { padding: 12px; }
  .home .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .sectors > div:last-child { margin-left: 0; }
  .home .footgrid { gap: 30px; }
}
@media (max-width: 540px) {
  .home .topbar .wrap { justify-content: flex-end; min-height: 28px; }
  .home .masthead .wrap, .home.masthead .wrap { min-height: 80px; gap: 12px; }
  .home .brand { gap: 10px; }
  .home .brand .sigil { width: 44px; }
  .home .brand-txt b { font-size: 22px; }
  .home .brand-txt span { font-size: 9px; }
  .home .hero h1 { font-size: clamp(36px, 9vw, 46px); }
  .home .hero .stamp { font-size: 9px; letter-spacing: .1em; }
  .home .hero-actions { gap: 10px; }
  .home .hero .btn { padding: 13px 15px; font-size: 11px; gap: 15px; }
  .home .sectors > div { padding: 14px 22px; border-bottom: 1px solid #fafaf71a; width: 100%; }
  .home .intro-visuals { grid-template-columns: 1fr; }
  .home .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; }
  .home .figures div { padding-inline: 16px; }
  .home .figures b { font-size: clamp(24px, 7vw, 35px); }
  .home .feature-grid, .home .species-grid { grid-template-columns: 1fr; }
  .home .feature-card h3 { margin-top: 20px; }
  .home .species > .shot { aspect-ratio: 4 / 3; }
  .home .nature-editorial { min-height: 460px; }
  .home .nature-copy { padding-block: 60px; }
  .home .gallery { gap: 18px 12px; }
  .home .gallery figcaption { font-size: 10px; }
}
