@view-transition {
  navigation: auto;
}

.focused-site .computer-header {
  view-transition-name: still-habitat-header;
}

.focused-site .header-flock {
  view-transition-name: still-habitat-flock;
}

::view-transition-old(root) {
  animation: still-habitat-page-out 140ms ease-out both;
}

::view-transition-new(root) {
  animation: still-habitat-page-in 260ms 35ms cubic-bezier(.2, .75, .25, 1) both;
}

::view-transition-group(still-habitat-header),
::view-transition-group(still-habitat-flock) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(.2, .75, .25, 1);
}

::view-transition-old(still-habitat-header),
::view-transition-new(still-habitat-header),
::view-transition-old(still-habitat-flock),
::view-transition-new(still-habitat-flock) {
  mix-blend-mode: normal;
}

@keyframes still-habitat-page-out {
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes still-habitat-page-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
}

html.sh-transition-fallback body {
  animation: still-habitat-fallback-in 220ms cubic-bezier(.2, .75, .25, 1) both;
}

html.sh-transition-fallback.sh-transition-leaving body {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 125ms ease-out, transform 125ms ease-out;
  animation: none;
  pointer-events: none;
}

@keyframes still-habitat-fallback-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(still-habitat-header),
  ::view-transition-group(still-habitat-flock) {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }

  html.sh-transition-fallback body,
  html.sh-transition-fallback.sh-transition-leaving body {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}

.focused-site .computer-header nav a[aria-current="page"] {
  color: var(--yellow);
}

.custom-listening-projects {
  color: var(--paper-ink);
  background: #d9d2ed;
}

.custom-project-flow {
  display: grid;
  max-width: 1400px;
  margin: 0 auto;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #8f84c5;
  border: 1px solid #8f84c5;
}

.custom-project-flow article {
  padding: clamp(1.5rem, 3vw, 2.7rem);
  background: #eee9f7;
}

.custom-project-flow span {
  color: #55795f;
  font: 700 .7rem/1 var(--mono);
  letter-spacing: .08em;
}

.custom-project-flow h3 {
  margin: 1rem 0 .7rem;
}

.custom-project-flow p {
  margin: 0;
  line-height: 1.65;
}

.custom-project-note {
  display: grid;
  max-width: 1400px;
  margin: 2rem auto 0;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 2rem;
  align-items: center;
}

.custom-project-note p {
  max-width: 900px;
  margin: 0;
  line-height: 1.65;
}

.custom-project-note .computer-text-link {
  color: #3d315f;
  border-color: #3d315f;
}

.monitoring-listening-scope {
  margin-top: 2rem;
  padding: 1.4rem 1.6rem;
  color: #18231d;
  background: #d7e4d8;
  border-left: 6px solid #6e4e9f;
}

.monitoring-listening-scope p {
  margin: 0;
}

.monitoring-listening-scope p + p {
  margin-top: .65rem;
}

.page-photo-hero {
  position: relative;
  height: clamp(340px, calc(100svh - var(--site-chrome-height, 230px)), 860px);
  min-height: 0;
  overflow: hidden;
  background: var(--ground);
}

.page-photo-hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-photo-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 45%, rgb(9 20 14 / .82));
  pointer-events: none;
}

.page-photo-hero__title {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  padding: clamp(3.5rem, 10vh, 6rem) clamp(1.25rem, 5vw, 6rem) clamp(1.4rem, 4vh, 2.8rem);
  color: white;
}

.page-photo-hero__title .eyebrow {
  color: #eee;
}

.page-photo-hero__title h1 {
  max-width: 900px;
  margin: .35rem 0 0;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: .9;
}

.page-photo-hero--monitoring > img {
  object-position: 50% 58%;
}

.page-photo-hero--field-work > img {
  object-position: 50% 55%;
}

.page-photo-hero--about > img {
  object-position: 50% 58%;
}

.page-photo-hero--open-source > img {
  object-position: 50% 52%;
}

.home-travel-reel {
  display: grid;
  height: clamp(520px, 66vw, 920px);
  padding: 10px;
  grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(0, .65fr));
  gap: 10px;
  background: linear-gradient(90deg, #d9d2ed, #f0b58f, #7fc0c5);
}

.home-travel-reel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-travel-reel__wide {
  object-position: 50% 52%;
}

.field-reel {
  overflow: hidden;
  color: var(--paper-ink);
  background: #f0b58f;
}

.field-reel-grid {
  display: grid;
  max-width: 1500px;
  margin: clamp(2rem, 5vw, 5rem) auto 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(210px, 31vw));
  gap: clamp(.75rem, 1.6vw, 1.5rem);
}

.field-reel-photo {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: clamp(7px, 1vw, 13px) solid #f8f0e2;
  box-shadow: 10px 13px 0 rgb(67 46 80 / .26);
}

.field-reel-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.field-reel-photo--tree {
  grid-column: 1 / 8;
  grid-row: 1;
  transform: rotate(-1.2deg);
}

.field-reel-photo--branches {
  grid-column: 8 / 13;
  grid-row: 1;
  transform: rotate(1.7deg);
}

.field-reel-photo--equipment {
  grid-column: 1 / 5;
  grid-row: 2;
  transform: rotate(1.3deg);
}

.field-reel-photo--tripod {
  grid-column: 5 / 8;
  grid-row: 2;
  transform: rotate(-1.8deg);
}

.field-reel-photo--binoculars {
  grid-column: 8 / 13;
  grid-row: 2;
  transform: rotate(.8deg);
}

.field-reel-photo--equipment img {
  object-position: center 65%;
}

/* Focused page rhythm: keep the field-computer character, but give each idea one clear job. */
.focused-site .computer-section {
  padding: clamp(4rem, 7vw, 7rem) clamp(1.5rem, 6vw, 7rem);
}

.focused-site .computer-section-head {
  margin-bottom: clamp(2.25rem, 4vw, 3.75rem);
}

.focused-site .computer-section-head h2,
.focused-site .catbird-primer h2,
.focused-site .about-copy h2,
.focused-site .picnic-copy h2,
.focused-site .tomales-copy h2,
.focused-site .public-pilot-copy h2 {
  font-size: clamp(2.7rem, 4.8vw, 5rem);
  line-height: .98;
}

/* The public field page keeps the private pilot's visual weight while withholding identity. */
.public-pilot-terminal {
  display: grid;
  padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 6vw, 7rem);
  grid-template-columns: minmax(0, .8fr) minmax(450px, 1.2fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
  background-color: var(--panel);
  background-image: linear-gradient(rgb(24 33 28 / .94), rgb(24 33 28 / .94)), url("../../assets/owl-motif.jpg");
  background-size: auto, 128px 128px;
}

.public-pilot-copy h2 { max-width: 780px; }
.public-pilot-copy .lede { color: #c9d3cc; font-family: var(--sans); font-size: clamp(1.15rem, 2vw, 1.55rem); }
.public-pilot-copy > p:not(.eyebrow):not(.lede) { max-width: 680px; color: var(--muted); }
.public-pilot-photo { margin: 0; }
.public-pilot-photo img { width: 100%; max-height: 940px; object-fit: cover; border: 12px solid var(--paper-2); border-radius: 4px 35% 4px 4px / 4px 18% 4px 4px; }
.public-pilot-photo figcaption { padding-top: 1rem; color: var(--muted); font: 600 .7rem/1.6 var(--mono); }

.public-habitat-lens { margin: 0; padding: clamp(8px, 1.2vw, 15px); background: #18231d; border: 1px solid #63736a; box-shadow: 14px 14px 0 rgb(93 69 116 / .22); }
.public-habitat-lens svg { display: block; width: 100%; height: auto; background: #d8cf9d; }
.public-habitat-lens figcaption { display: flex; padding: 1rem .25rem .2rem; justify-content: space-between; gap: 1rem; color: #cbd4ce; font: 600 .68rem/1.5 var(--mono); }
.public-habitat-lens figcaption strong { color: var(--yellow); letter-spacing: .06em; text-transform: uppercase; }
.public-ear-nodes circle { fill: #18231d; stroke: #f4e9d4; stroke-width: 6; }
.public-ear-nodes text { fill: #f4e9d4; font: 700 20px var(--mono); text-anchor: middle; }
.public-perch-node rect { fill: #6e4e9f; stroke: #f4e9d4; stroke-width: 5; }
.public-perch-node text { fill: white; font: 700 17px var(--mono); text-anchor: middle; }
.public-mesh-link { fill: none; stroke: #6e4e9f; stroke-width: 7; stroke-dasharray: 13 14; }
.public-map-note { fill: #26352b; font: 700 17px var(--mono); letter-spacing: .07em; }

.screen-gallery--public { max-width: 1100px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.public-screen-frame { display: flex; height: 620px; align-items: center; padding: 8px; background: var(--ground); border: 1px solid #63736a; border-radius: 20px; }
.public-screen-frame img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }

.focused-site .computer-portal img,
.focused-site .page-photo-hero {
  height: clamp(340px, calc(100svh - var(--site-chrome-height, 230px)), 860px);
  min-height: 0;
}

.focused-site .hero-title-overlay {
  padding: clamp(3.5rem, 10vh, 6rem) clamp(1.25rem, 5vw, 6rem) clamp(1.4rem, 4vh, 2.8rem);
}

.hero-radio-benefit {
  max-width: 900px;
  margin: 1.35rem 0 0;
  padding: .9rem 1.15rem;
  color: #cbd4ce;
  border-left: 4px solid var(--cyan);
  font-size: .98rem;
  line-height: 1.65;
}

.hero-radio-benefit strong {
  color: var(--yellow);
}

.hero-secondary-slogan {
  display: inline-block;
  margin: 1.25rem 0 0;
  padding: 0 .1rem .4rem 0;
  color: #f4e9d4;
  background: linear-gradient(90deg, var(--clay), var(--yellow), var(--cyan), #a35b8f) bottom / 100% 3px no-repeat;
  font: 600 clamp(1.35rem, 2.1vw, 2rem)/1.2 var(--spectral);
  font-style: italic;
  letter-spacing: -.02em;
}

.home-services {
  color: var(--paper-ink);
  background: #e8e1f2;
}

.home-services .computer-section-head > p {
  color: #47443e;
}

.home-report-desk {
  padding-top: clamp(4rem, 7vw, 7rem);
}

/* The landscape reel separates the plain-language explanation from custom work. */
.home-travel-reel + .custom-listening-projects {
  padding-top: clamp(4rem, 6vw, 6rem);
}

.custom-project-flow {
  display: block;
  background: transparent;
  border-block: 1px solid #8f84c5;
  border-inline: 0;
}

.custom-project-flow article {
  display: grid;
  padding: 1.55rem 0;
  grid-template-columns: minmax(135px, .3fr) minmax(220px, .55fr) minmax(0, 1.15fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: start;
  background: transparent;
  border-bottom: 1px solid rgb(143 132 197 / .72);
}

.custom-project-flow article:last-child {
  border-bottom: 0;
}

.custom-project-flow h3,
.custom-project-flow p {
  margin: 0;
}

/* Make the free first week the visual entry point, with the two follow-ons as compact choices. */
#monitoring-options .service-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  grid-template-rows: repeat(2, auto);
}

#monitoring-options .service-card--starter {
  grid-row: 1 / span 2;
}

#monitoring-options .service-card--starter img {
  height: clamp(360px, 39vw, 630px);
  aspect-ratio: auto;
}

#monitoring-options .service-card:not(.service-card--starter) {
  display: grid;
  grid-template-columns: minmax(145px, .4fr) minmax(0, .6fr);
}

#monitoring-options .service-card:not(.service-card--starter) figure {
  border-right: 1px solid #a9a39a;
  border-bottom: 0;
}

#monitoring-options .service-card:not(.service-card--starter) img {
  height: 100%;
  min-height: 270px;
  aspect-ratio: auto;
}

#monitoring-options .service-card:not(.service-card--starter) .service-card-copy {
  padding: 1.35rem;
}

/* Keep the team introduction beside the field image, then let the mission breathe full width. */
.focused-site .about-section {
  align-items: start;
}

.about-mission-grid {
  display: grid;
  grid-column: 1 / -1;
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  border-top: 1px solid #a9a39a;
}

.about-mission-grid .mission-note,
.about-mission-grid .pro-bono-note {
  max-width: none;
  margin: 0;
}

.about-mission-grid .mission-note {
  padding-top: 0;
  border-top: 0;
}

.about-mission-grid .mission-note .computer-text-link {
  color: #3d315f;
  border-color: #3d315f;
}

.focused-site .about-location {
  grid-column: 1 / -1;
  margin: 0;
}

/* Open source: one introduction, two parallel goals, one release and collaboration row. */
.focused-site .picnic-section {
  display: block;
}

.picnic-intro-grid {
  display: grid;
  max-width: 1500px;
  margin: 0 auto;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}

.picnic-goals {
  display: grid;
  max-width: 1500px;
  margin: clamp(3rem, 6vw, 6rem) auto 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #8f84c5;
  border: 1px solid #8f84c5;
}

.picnic-goals .picnic-collaboration {
  margin: 0;
  box-shadow: none;
}

.picnic-release-row {
  display: grid;
  max-width: 1500px;
  margin: clamp(2.5rem, 5vw, 4.5rem) auto 0;
  padding-top: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  border-top: 1px solid rgb(33 30 24 / .35);
}

.picnic-release-row .picnic-status,
.picnic-release-row .picnic-collaboration {
  margin: 0;
}

.picnic-release-row .picnic-status {
  padding-top: 0;
  border-top: 0;
}

.picnic-release-row .picnic-collaboration {
  padding: 0 0 0 clamp(1.5rem, 3vw, 3rem);
  color: #211e18;
  background: transparent;
  border-left: 4px solid #6e4e9f;
  box-shadow: none;
}

.picnic-release-row .picnic-collaboration h3 {
  color: #211e18;
}

.picnic-release-row .picnic-collaboration .computer-text-link {
  color: #3d315f;
  border-color: #3d315f;
}

/* The map gets the full visual field; the layers become a compact legend below it. */
.focused-site .gis-stage {
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.focused-site .gis-layer-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid #928d84;
  border-top-width: 2px;
}

.focused-site .gis-layer-stack article {
  padding: 1.25rem clamp(1rem, 2.5vw, 2.25rem);
  border-bottom: 0;
}

.focused-site .gis-layer-stack article + article {
  border-left: 1px solid #928d84;
}

/* The generated public Field Work introduction and project list read as one chapter. */
.projects-section[aria-labelledby="field-practice-title"] {
  padding-bottom: clamp(1.5rem, 3vw, 2.75rem);
}

.projects-section[aria-labelledby="field-practice-title"] + .projects-section {
  padding-top: clamp(1.5rem, 3vw, 2.75rem);
}

@media (max-width: 1100px) {
  .focused-site .computer-header {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding-block: .6rem;
    gap: .35rem;
  }

  .focused-site .computer-header nav {
    display: flex;
    flex-wrap: wrap;
  }

  .custom-project-note {
    grid-template-columns: 1fr;
  }

  .custom-project-flow {
    grid-template-columns: 1fr;
  }

  .public-pilot-terminal { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .page-photo-hero__title h1 {
    font-size: clamp(2.8rem, 15vw, 4.6rem);
  }

  .home-travel-reel {
    height: auto;
    grid-template-columns: 1fr 1fr;
  }

  .home-travel-reel img {
    height: 68vw;
  }

  .home-travel-reel__wide {
    height: 82vw;
    grid-column: 1 / -1;
  }

  .field-reel-grid {
    display: flex;
    overflow-x: auto;
    padding: 0 .2rem 1.5rem;
    scroll-snap-type: x mandatory;
  }

  .field-reel-photo {
    min-width: 84vw;
    height: 66vw;
    transform: none;
    scroll-snap-align: center;
  }

  .public-habitat-lens figcaption { flex-direction: column; }
  .screen-gallery--public { grid-template-columns: 1fr; max-width: 390px; }
  .public-screen-frame { height: auto; }
  .public-screen-frame img { height: auto; max-height: 760px; }
}

@media (max-width: 1100px) {
  #monitoring-options .service-grid,
  .picnic-intro-grid,
  .picnic-release-row,
  .about-mission-grid {
    grid-template-columns: 1fr;
  }

  #monitoring-options .service-card--starter {
    grid-row: auto;
  }

  #monitoring-options .service-card:not(.service-card--starter) {
    display: flex;
  }

  #monitoring-options .service-card:not(.service-card--starter) figure {
    border-right: 0;
    border-bottom: 1px solid #a9a39a;
  }

  #monitoring-options .service-card:not(.service-card--starter) img,
  #monitoring-options .service-card--starter img {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .picnic-goals {
    grid-template-columns: 1fr;
  }

  .picnic-release-row .picnic-collaboration {
    padding: 1.5rem 0 0;
    border-top: 4px solid #6e4e9f;
    border-left: 0;
  }
}

@media (max-width: 800px) {
  .focused-site .gis-layer-stack {
    grid-template-columns: 1fr;
  }

  .focused-site .gis-layer-stack article + article {
    border-top: 1px solid #928d84;
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .focused-site .computer-portal img,
  .focused-site .page-photo-hero {
    height: clamp(320px, calc(100svh - var(--site-chrome-height, 220px)), 720px);
    min-height: 0;
  }

  .custom-project-flow article {
    grid-template-columns: 1fr;
    gap: .7rem;
  }

  .custom-project-flow h3 {
    margin-top: .15rem;
  }
}