/* Wildlife: the field-guide sheet. Habitat key, atlas plates, the gulf by month, gazetteer. Scoped to body.page-wildlife. */

/* ---------- Legend symbols (habitat key and zone headings) ---------- */
.page-wildlife .sym {
  display: inline-block;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.page-wildlife .sym__box { stroke: var(--neat); stroke-width: 1; }
.page-wildlife .sym--dots path { stroke-width: 2.75; }
.page-wildlife .sym--depth path { stroke-dasharray: 3 2.5; stroke-linecap: butt; }
.page-wildlife h2 > .sym { width: .5em; height: .5em; margin-right: .4em; vertical-align: .06em; stroke-width: 1.25; }

/* place names inside a lede stay a step quieter than in running text */
.page-wildlife .sec-head > p .t-place { font-size: .72em; }

/* ---------- Sheet title: macaw plate and habitat key ---------- */
.page-wildlife .sheet-title__inset { gap: .875rem; }
/* the gulf's name always takes its own line, so the italic face arriving late cannot rewrap the title */
.page-wildlife .sheet-title h1 em { display: block; }
.page-wildlife .zones ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.page-wildlife .zones a {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: center;
  gap: .25rem var(--s-2);
  min-height: 3rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--fg);
  text-decoration: none;
}
.page-wildlife .zones .sym { grid-row: span 2; }
.page-wildlife .zones__name {
  font: 500 .75rem/1.3 var(--sans);
  font-stretch: 125%;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: underline 1px transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color var(--t-hover) var(--ease-out);
}
.page-wildlife .zones__who {
  grid-column: 2;
  color: var(--fg-2);
  font: italic 400 var(--fs-small)/1.4 var(--serif);
  transition: color var(--t-hover) var(--ease-out);
}
@media (min-width: 768px) {
  .page-wildlife .zones a { grid-template-columns: 1.5rem 14rem minmax(0, 1fr); }
  .page-wildlife .zones .sym { grid-row: auto; }
  .page-wildlife .zones__who { grid-column: auto; }
}
@media (min-width: 1024px) {
  .page-wildlife .sheet-title__grid > .zones { grid-column: 1 / span 7; grid-row: 3; margin-top: var(--s-3); }
}
@media (hover: hover) and (pointer: fine) {
  .page-wildlife .zones a:hover .zones__name { text-decoration-color: currentColor; }
  .page-wildlife .zones a:hover .zones__who { color: var(--fg); }
}

/* ---------- Atlas: justified rows, every photo at its own ratio (no crop) ---------- */
.page-wildlife .r-2x3 { --r: .6676; }
.page-wildlife .r-4x5 { --r: .8; }
.page-wildlife .r-1x1 { --r: 1; }
.page-wildlife .r-5x4 { --r: 1.25; }
.page-wildlife .r-3x2 { --r: 1.5; }

.page-wildlife .atlas { display: grid; gap: var(--s-6); }
.page-wildlife .atlas__row {
  --rh: 8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-3) var(--col-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* grow by ratio from a zero-extra basis, so every picture in a line shares one height */
.page-wildlife .atlas__row > li { flex: var(--r) 1 calc(var(--r) * var(--rh)); min-width: 0; }
.page-wildlife .atlas__row .inset__pic { aspect-ratio: var(--r); }
@media (min-width: 1024px) {
  .page-wildlife .atlas__row { --rh: 5rem; gap: var(--s-4) var(--col-gap); }
}
@media (max-width: 479px) {
  .page-wildlife .atlas__row--solo > li { flex-basis: 100%; }
}

/* ---------- River mouths and mangroves ---------- */
.page-wildlife .edge { display: grid; gap: var(--s-6) var(--col-gap); }
.page-wildlife .edge__text { display: grid; gap: var(--s-3); align-content: start; justify-items: start; }
.page-wildlife .edge__text p:not(.lede) { max-width: 34em; }
@media (min-width: 1024px) {
  .page-wildlife .edge { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .page-wildlife .edge__text { grid-column: 1 / span 5; }
  .page-wildlife .edge__plates { grid-column: 7 / -1; }
}

/* ---------- The gulf: dolphins, humpbacks, months ---------- */
.page-wildlife .gulf { display: grid; gap: var(--s-6) var(--col-gap); }
.page-wildlife .gulf__photo { position: relative; margin: var(--s-4) 0; }
.page-wildlife .gulf__facts { display: grid; gap: var(--s-3); align-content: start; justify-items: start; }
.page-wildlife .gulf__fact { display: grid; gap: var(--s-1); padding-top: var(--s-2); border-top: 1px solid var(--rule); }
.page-wildlife .gulf__fact p { max-width: 30em; }
@media (min-width: 1024px) {
  .page-wildlife .gulf { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .page-wildlife .gulf__photo { grid-column: 1 / span 7; }
  .page-wildlife .gulf__facts { grid-column: 9 / -1; align-self: center; }
  .page-wildlife .gulf__months { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
}

/* months table: present months filled, months without as ghost cells */
.page-wildlife .season { width: calc(100% + 6px); margin: 0 -3px; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.page-wildlife .season caption { caption-side: top; text-align: left; padding: 0 3px var(--s-2); }
.page-wildlife .season tr > :first-child { width: 8.5rem; }
@media (min-width: 1024px) { .page-wildlife .season tr > :first-child { width: 14rem; } }
.page-wildlife .season thead th {
  padding: 0 0 .25rem;
  color: var(--fg-2);
  font: 600 .6875rem/1 var(--sans);
  font-stretch: 125%;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}
.page-wildlife .season abbr { text-decoration: none; }
@media (max-width: 1023px) { .page-wildlife .m-rest { display: none; } }
.page-wildlife .season tbody th { padding: 0 var(--s-1) 0 0; text-align: left; font: italic 400 1rem/1.15 var(--serif); }
.page-wildlife .season tbody th span { display: block; color: var(--fg-2); font: 400 .8125rem/1.3 var(--serif); }
.page-wildlife .season td { height: 2.5rem; padding: 0; }
.page-wildlife .season .on { background: var(--land-600); }
.page-wildlife .season .off { border: 1px dashed var(--neat); }
.page-wildlife .season__key { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: var(--s-2); color: var(--fg-2); font: 500 .75rem/1.4 var(--sans); font-stretch: 125%; letter-spacing: .04em; }
.page-wildlife .season__key .key { display: inline-block; width: .75rem; height: .75rem; }
.page-wildlife .season__key .key--on { background: var(--land-600); }
.page-wildlife .season__key .key--off { margin-left: var(--s-2); border: 1px dashed var(--neat); }
@media (max-width: 479px) {
  .page-wildlife .season tr > :first-child { width: 6.5rem; }
  .page-wildlife .season td { height: 2rem; }
}

/* ---------- Around the gulf: aerial plate and gazetteer ---------- */
.page-wildlife .around { display: grid; gap: var(--s-6) var(--col-gap); }
.page-wildlife .around__head { margin-bottom: 0; }
.page-wildlife .around__photo .inset__pic { aspect-ratio: 4 / 5; }
.page-wildlife .around__photo img { object-position: center 30%; }
.page-wildlife .gaz { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.page-wildlife .gaz li { display: grid; gap: var(--s-1) var(--col-gap); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.page-wildlife .gaz__h { font-size: var(--fs-h3); }
.page-wildlife .gaz__h.t-place { font-size: 1rem; line-height: 1.5; letter-spacing: .16em; }
.page-wildlife .gaz p { max-width: 36em; }
@media (min-width: 768px) {
  .page-wildlife .gaz li { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: baseline; }
}
@media (min-width: 1024px) {
  .page-wildlife .around { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .page-wildlife .around__head { grid-column: 6 / -1; grid-row: 1; }
  .page-wildlife .around__photo { grid-column: 1 / span 4; grid-row: 1 / span 2; display: flex; flex-direction: column; }
  .page-wildlife .around__photo .inset__pic { flex: 1; aspect-ratio: auto; }
  .page-wildlife .around__photo img { position: absolute; inset: 0; }
  .page-wildlife .gaz { grid-column: 6 / -1; grid-row: 2; align-self: start; }
}