@layer farmfinder-legacy {
/* ---------------------------------------------------------------------------
   Farm directory.

   Radii come from the shared scale in site.css: --r-control for the filter
   controls, --r-surface for the filter panel and the tiles, --r-tag for the
   active filter chips. Nothing here is a lozenge.
--------------------------------------------------------------------------- */

.farm-directory {
  padding-top: 1rem;
}

/* The filter bar reads as one instrument rather than five loose controls, so
   it sits on its own surface directly above the results it governs. */
.farm-filters {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow-1);
  display: grid;
  gap: .9rem;
  margin: 0 0 1.4rem;
  padding: 1rem;
}

.farm-filter-drawer > summary {
  align-items: center;
  cursor: pointer;
  display: none;
  font-weight: 800;
  justify-content: space-between;
  list-style: none;
  min-height: 44px;
}

.farm-filter-drawer > summary::-webkit-details-marker { display: none; }
.farm-filter-drawer > summary::after {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  height: .48rem;
  margin-left: .7rem;
  transform: rotate(45deg) translateY(-.15rem);
  transition: transform .24s ease;
  width: .48rem;
}
.farm-filter-drawer[open] > summary::after { transform: rotate(225deg) translate(-.1rem, -.1rem); }
.farm-filter-drawer > summary:focus-visible {
  border-radius: var(--r-control);
  outline: 3px solid rgba(36, 88, 71, .28);
  outline-offset: 3px;
}
.farm-filter-summary-open { display: none; }
.farm-filter-drawer[open] .farm-filter-summary-closed { display: none; }
.farm-filter-drawer[open] .farm-filter-summary-open { display: inline; }
.farm-filter-drawer > summary strong { color: var(--muted); font-size: .78rem; margin-left: auto; }
.farm-filter-content { display: grid; grid-template-rows: 1fr; }
.farm-filter-inner {
  display: grid;
  gap: .9rem;
  min-height: 0;
  overflow: hidden;
}

.farm-filter-search-group {
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
}

.farm-filter-search-control {
  align-items: stretch;
  display: flex;
  gap: .55rem;
}

.farm-filter-search-control input {
  min-width: 0;
}

.farm-filter-search-button {
  align-items: center;
  background: var(--forest);
  border: 1px solid var(--forest);
  border-radius: var(--r-control);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font: 750 .9rem/1 var(--sans);
  gap: .4rem;
  justify-content: center;
  min-height: 2.6rem;
  padding: .55rem .9rem;
}

.farm-filter-search-button:hover {
  background: #123c36;
  border-color: #123c36;
  color: #fff;
}

.farm-filter-search-button:focus-visible {
  outline: 3px solid rgba(36, 88, 71, .28);
  outline-offset: 2px;
}

.farm-filter-search-button .ff-icon {
  height: 1.05rem;
  width: 1.05rem;
}

.farm-filter-groups {
  display: grid;
  gap: .8rem;
  grid-template-columns: minmax(15rem, .85fr) minmax(22rem, 1.15fr);
}

.farm-filter-group {
  background: color-mix(in srgb, var(--cream) 55%, #fff);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  margin: 0;
  min-width: 0;
  padding: .8rem;
}

.farm-filter-group legend {
  color: var(--ink);
  font-size: .82rem;
  font-weight: 800;
  padding: 0 .35rem;
}

.farm-filter-group-grid {
  align-items: end;
  display: grid;
  gap: .65rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}

.farm-filter {
  display: grid;
  gap: .3rem;
  min-width: 0;
}

.farm-filter > span {
  color: var(--muted);
  font-size:.875rem;
  font-weight: 700;
}

.farm-filter input,
.farm-filter select {
  background: #fff;
  border: 1px solid #bdb8ad;
  border-radius: var(--r-control);
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
  min-height: 2.6rem;
  padding: .5rem .65rem;
  width: 100%;
}

.farm-filter select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.2 1.6 6 6.4l4.8-4.8' fill='none' stroke='%23245847' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right .6rem center;
  background-repeat: no-repeat;
  background-size: .7rem;
  padding-right: 1.9rem;
  text-overflow: ellipsis;
}

.farm-filter input:hover,
.farm-filter select:hover {
  border-color: var(--forest);
}

.farm-filters-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.farm-filters-actions > .button:not(.button--secondary) {
  color: #fff;
}

/* Each active filter states itself and carries its own removal, so a visitor
   can undo one choice without rebuilding the whole query. */
.farm-filters-active {
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding-top: .8rem;
}

.farm-filter-chip {
  align-items: center;
  background: rgba(36, 88, 71, .06);
  border: 1px solid rgba(36, 88, 71, .2);
  border-radius: var(--r-tag);
  color: var(--ink);
  display: inline-flex;
  font-size:.875rem;
  font-weight: 650;
  gap: .45rem;
  padding: .25rem .5rem;
  text-decoration: none;
}

.farm-filter-chip:hover {
  background: rgba(36, 88, 71, .13);
  border-color: var(--forest);
}

.farm-filter-chip-clear {
  color: var(--muted);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   Farm tiles.
--------------------------------------------------------------------------- */

/* A directory of several thousand farms wants density, so the tiles size
   themselves instead of sitting in the three fixed tracks a content page
   uses. The 16rem floor is what puts four tiles across the 1098px the
   section leaves at a 1280px viewport. */
.card-grid.farm-grid {
  gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

.card-grid.farm-grid > .card {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  min-height: 12.5rem;
  padding: 1.05rem;
  position: relative;
}

.card-grid.farm-grid > .card:hover {
  border-color: #c3bdb0;
  box-shadow: var(--shadow-2);
}

.farm-tile-head {
  align-items: center;
  display: flex;
  gap: .7rem;
}

.farm-tile-identity {
  min-width: 0;
}

.card-grid.farm-grid > .card h2 {
  font: 1.1rem/1.25 var(--serif);
  letter-spacing: -.01em;
  margin: 0;
}

.farm-tile-place {
  font-size:.875rem;
  margin: .15rem 0 0;
}

.farm-tile-programs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.farm-tile-program {
  align-items: center;
  background: #f3ead2;
  border: 1px solid #d6bd7d;
  border-radius: var(--r-tag);
  color: #63470f;
  display: inline-flex;
  font-size: .76rem;
  font-weight: 800;
  gap: .3rem;
  min-height: 1.85rem;
  padding: .22rem .48rem;
  text-decoration: none;
}

.farm-tile-program--quest {
  background: #f7e6ba;
  border-color: #c89a3a;
  color: #563c08;
}

.farm-tile-program:hover,
.farm-tile-program:focus-visible {
  background: #fff4d7;
  border-color: #9d7120;
  color: #3f2b05;
}

.farm-tile-program:focus-visible {
  outline: 3px solid rgba(157, 113, 32, .25);
  outline-offset: 2px;
}

.farm-tile-program .ff-icon {
  height: .95rem;
  width: .95rem;
}

.farm-tile-facts {
  display: grid;
  gap: .38rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.farm-tile-facts li {
  align-items: flex-start;
  color: var(--muted);
  display: flex;
  font-size: .84rem;
  gap: .45rem;
  line-height: 1.4;
  min-width: 0;
}

.farm-tile-facts .ff-icon {
  color: var(--forest);
  flex: 0 0 auto;
  height: 1rem;
  margin-top: .08rem;
  width: 1rem;
}

/* The one line of prose a tile carries. It only exists when the farm really
   published something, so it never needs to reserve height. */
.card-grid.farm-grid > .card > p {
  font-size: .89rem;
  margin: 0;
}

.farm-tile-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  margin-top: auto;
}

.farm-tile-action { align-self: flex-start; }

.farm-tile-external {
  align-items: center;
  color: var(--forest);
  display: inline-flex;
  font-size: .84rem;
  font-weight: 750;
  gap: .3rem;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

.farm-tile-external .ff-icon { height: 1rem; width: 1rem; }

.directory-pagination {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr auto 1fr;
  margin-top: 2rem;
}

.directory-pagination > *:last-child { justify-self: end; }

/* ---------------------------------------------------------------------------
   Farm profile.
--------------------------------------------------------------------------- */

.farm-profile-media {
  margin: auto;
  max-width: 1100px;
  padding: 0 clamp(1rem, 4vw, 4rem) 1rem;
}

.farm-profile-media img {
  border-radius: var(--r-surface);
  display: block;
  max-height: 560px;
  object-fit: cover;
  width: 100%;
}

.farm-profile-media--empty {
  padding-top: 2rem;
}

/* Standing in for a photo, not pretending to be one. The illustration keeps
   the media band at a consistent height so profiles with and without a photo
   read as the same page. */
.farm-photo-placeholder {
  align-items: center;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--r-surface);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  justify-content: center;
  padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
  text-align: center;
}

.farm-photo-placeholder svg {
  height: auto;
  margin-bottom: .75rem;
  width: min(180px, 45%);
}

.farm-photo-sky { fill: #e6ecdf; }
.farm-photo-sun { fill: #f0dfa8; }
.farm-photo-land { fill: #cfd9c6; }
.farm-photo-barn { fill: #9aa894; }
.farm-photo-door { fill: #e6ecdf; }

.farm-photo-rows {
  fill: none;
  stroke: #b4c0aa;
  stroke-linecap: round;
  stroke-width: 1.6;
}

.farm-photo-placeholder p { margin: 0; }
.farm-photo-placeholder p.muted { max-width: 44ch; }
.farm-photo-action { margin-top: .9rem; }

/* The animated header paints a dark field behind its content, so a badge row
   placed there needs the light treatment. Measured before this rule: forest
   green text on a .06 alpha forest fill over the dark field, which was not
   readable. The static fallback header sits on the cream page and keeps the
   shared colours, so the switch is scoped to the animated one. */
.primordial-farm-header .hero-actions .farm-badges {
  gap: .4rem;
}

.primordial-farm-header .hero-actions .ff-badge {
  background: rgba(255, 255, 255, .17);
  border-color: rgba(255, 255, 255, .4);
  color: #fdfbf4;
}

.primordial-farm-header .hero-actions .ff-badge--season {
  background: rgba(240, 223, 168, .24);
  border-color: rgba(240, 223, 168, .58);
  color: #f8eed6;
}

/* Badge rows inside the profile body carry the same facts as the tiles, with
   room to breathe between the sections they belong to. */
.prose .ff-badge-row {
  margin: .2rem 0 1.5rem;
}

.prose .ff-badge {
  font-size:.875rem;
  padding: .26rem .5rem;
}

.farm-facts h3 {
  border-top: 1px solid var(--line);
  font-size: 1rem;
  margin: 1.5rem 0 .5rem;
  padding-top: 1.2rem;
}

.fact-list {
  display: grid;
  gap: .85rem;
  margin: 0 0 1.2rem;
}

.fact dt {
  color: var(--muted);
  font-size:.875rem;
  font-weight: 700;
}

.fact dd {
  margin: .15rem 0 0;
}

.farm-facts p { margin: .5rem 0; }

.farm-table-wrap {
  margin: 1rem 0 1.5rem;
  overflow-x: auto;
}

.farm-table {
  border-collapse: collapse;
  min-width: 30rem;
  width: 100%;
}

.farm-table th,
.farm-table td {
  border-bottom: 1px solid var(--line);
  padding: .7rem .8rem .7rem 0;
  text-align: left;
  vertical-align: top;
}

.farm-table thead th {
  font-size:.875rem;
  font-weight: 700;
}

.farm-table-note {
  display: block;
  font-weight: 400;
}

.farm-cards {
  padding-top: 0;
}

/* A single card should not stretch the artwork across the whole page, so the
   tracks have an upper bound rather than sharing the row equally. */
.farm-card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 33rem));
}

.farm-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  display: grid;
  gap: 1.1rem;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  padding: 1.2rem;
}

.farm-card-art img,
.farm-card-art-empty {
  aspect-ratio: 5 / 7;
  border-radius: var(--r-control);
  display: block;
  object-fit: cover;
  width: 100%;
}

.farm-card-art-empty {
  align-items: center;
  background: var(--cream);
  border: 1px dashed var(--line);
  color: var(--muted);
  display: flex;
  font-size: 2rem;
  justify-content: center;
}

.farm-card-body {
  display: flex;
  flex-direction: column;
}

.farm-card-body h3 {
  font: 1.35rem/1.15 var(--serif);
  margin: .2rem 0 .5rem;
}

.farm-card-body p { margin: 0 0 .5rem; }

.farm-card-meta {
  color: var(--muted);
  font-size: .84rem;
}

.farm-card-action {
  align-self: flex-start;
  margin-top: auto;
}

/* ---------------------------------------------------------------------------
   Farm ownership claim and invitation acceptance.
--------------------------------------------------------------------------- */

.farm-profile-claim {
  background: #f7e6ba;
  border-color: #d5ae58;
  color: #3f2b05;
}

.farm-profile-claim:hover,
.farm-profile-claim:focus-visible {
  background: #fff1cd;
  border-color: #b98525;
  color: #2d1e03;
}

.ownership-flow {
  max-width: 1100px;
}

.ownership-flow-grid {
  align-items: start;
  display: grid;
  gap: 1.2rem;
  grid-template-columns: minmax(0, 1.45fr) minmax(17rem, .75fr);
}

.ownership-form {
  display: grid;
  gap: 1.1rem;
}

.ownership-form-grid {
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ownership-form label {
  display: grid;
  font-weight: 750;
  gap: .38rem;
}

.ownership-form input,
.ownership-form select,
.ownership-form textarea {
  background: #fff;
  border: 1px solid #bdb8ad;
  border-radius: var(--r-control);
  color: var(--ink);
  font: inherit;
  min-height: 2.85rem;
  padding: .65rem .75rem;
  width: 100%;
}

.ownership-form textarea {
  min-height: 8rem;
  resize: vertical;
}

.ownership-form input:hover,
.ownership-form select:hover,
.ownership-form textarea:hover {
  border-color: var(--forest);
}

.ownership-form input:focus-visible,
.ownership-form select:focus-visible,
.ownership-form textarea:focus-visible {
  border-color: var(--forest);
  outline: 3px solid rgba(36, 88, 71, .2);
  outline-offset: 1px;
}

.ownership-form label > small {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.45;
}

.ownership-form > .button {
  color: #fff;
  justify-self: start;
}

.ownership-selected-farm {
  align-items: center;
  background: color-mix(in srgb, var(--cream) 68%, #fff);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  display: flex;
  gap: .8rem;
  padding: .85rem;
}

.ownership-selected-farm > .ff-icon {
  color: var(--forest);
  flex: 0 0 auto;
  height: 1.55rem;
  width: 1.55rem;
}

.ownership-selected-farm div {
  display: grid;
  min-width: 0;
}

.ownership-selected-farm span,
.ownership-selected-farm small {
  color: var(--muted);
  font-size: .8rem;
}

.ownership-selected-farm strong {
  font: 600 1.15rem/1.3 var(--serif);
}

.ownership-consent {
  align-items: flex-start;
  display: flex !important;
  font-weight: 600 !important;
  gap: .65rem !important;
}

.ownership-consent input {
  flex: 0 0 auto;
  margin-top: .22rem;
  min-height: 1.15rem;
  width: 1.15rem;
}

.ownership-help {
  position: sticky;
  top: 6.5rem;
}

.ownership-help .icon-heading {
  margin-top: 0;
}

.ownership-help ol,
.ownership-help ul {
  display: grid;
  gap: .7rem;
  margin: 1rem 0 1.25rem;
  padding-left: 1.25rem;
}

.ownership-honeypot {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.ownership-result {
  max-width: 760px;
}

.ownership-result-card {
  text-align: center;
}

.ownership-result-card > .ff-icon {
  color: var(--forest);
  height: 2.6rem;
  width: 2.6rem;
}

.ownership-result-card--error > .ff-icon {
  color: #8d2f2f;
}

.ownership-result-card p {
  margin-inline: auto;
  max-width: 58ch;
}

.ownership-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  justify-content: center;
  margin-top: 1.3rem;
}

@media (max-width: 1080px) {
  .farm-filter-groups { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .farm-filters { gap: 0; padding: .25rem 1rem; }
  .farm-filter-drawer > summary { display: flex; }
  .farm-filter-content {
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .28s ease, opacity .2s ease, visibility 0s linear .28s;
    visibility: hidden;
  }
  .farm-filter-drawer[open] > .farm-filter-content {
    grid-template-rows: 1fr;
    opacity: 1;
    transition-delay: 0s;
    visibility: visible;
  }
  .farm-filter-inner { gap: .9rem; }
  .farm-filter-search-group { border-top: 1px solid var(--line); padding-top: 1rem; }
  .farm-filter-search-control { align-items: stretch; }
  .farm-filter-search-button { padding-inline: .75rem; }
  .farm-filter-group-grid { grid-template-columns: 1fr; }
  .farm-filters-actions .button { flex: 1 1 10rem; text-align: center; }
  .card-grid.farm-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
  .directory-pagination { grid-template-columns: 1fr; text-align: center; }
  .directory-pagination > * { justify-self: center !important; }
  .farm-card { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); }
  .ownership-flow-grid,
  .ownership-form-grid { grid-template-columns: 1fr; }
  .ownership-help { position: static; }
  .ownership-form > .button { justify-self: stretch; text-align: center; }
  .ownership-result-actions .button { flex: 1 1 13rem; }
}

@media (prefers-reduced-motion: reduce) {
  .farm-filter-content,
  .farm-filter-drawer > summary::after {
    transition: none !important;
  }
}

}