/* Magpie nesting (/magpie-nesting/). Loaded after guide.css. Pieces the magpie template doesn't
   have: the nest-height scale, the season line (sourced bands, one nest's stages, today's line,
   marked by magpie-nesting.js), the nest field-notes label, the egg-to-independence ladder and
   body paragraphs. Page colour: magpie black and white; tongue blue marks today. */

/* Body text beside the lede */
.mn-body p:not(.lede):not(.law-note) { font-size: 17px; line-height: 1.55; max-width: 36em; margin: 0 0 14px; }
.mn-body b { font-weight: 750; }
.mn-body a.tel, .dd a.tel, .faq-a a.tel { font-weight: 700; white-space: nowrap; }
.mn-body .law-note { margin: 0 0 16px; max-width: 36em; }
.mn-wide { margin-top: 26px; }
.mn-list-h { font-stretch: 112%; font-weight: 820; font-size: 20px; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 10px; }
.mn-after { margin-top: 24px !important; }
@media (min-width: 1024px) {
  .mn-body p:not(.lede):not(.law-note) { font-size: 18px; }
  .mn-list-h { font-size: 22px; }
}

/* Quick facts: nest height on a 0 to 30 m scale; the law line spans the row on phones */
@media (max-width: 759px) { .mn-qf-wide { grid-column: 1 / -1; } }
.mn-hr { margin-top: 16px; }
.mn-hr-trk { position: relative; height: 28px; }
.mn-hr-trk b { position: absolute; top: 0; bottom: 0; left: calc(var(--a) / 30 * 100%); width: calc((var(--b) - var(--a)) / 30 * 100%); display: flex; align-items: center; justify-content: center; font-stretch: 75%; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.mn-hr-trk .lo, .mn-hr-trk .hi { background: var(--lime); box-shadow: inset 0 0 0 1px var(--hair2); color: var(--ink); }
.mn-hr-trk .hi { justify-content: flex-start; padding-left: 10px; -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent); }
.mn-hr-trk .mid { background: var(--c); color: #fff; }
.mn-hr-axis { position: relative; height: 26px; border-top: 1px solid var(--ink); font-stretch: 75%; font-size: 12px; font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; }
.mn-hr-axis i { position: absolute; top: 0; width: 1px; height: 5px; background: var(--ink); }
.mn-hr-axis i.maj { height: 9px; }
.mn-hr-axis i:last-of-type { margin-left: -1px; }
.mn-hr-axis span { position: absolute; top: 10px; transform: translateX(-50%); white-space: nowrap; }
.mn-hr-axis span:first-of-type { transform: translateX(-2px); }
.mn-hr-axis span:last-of-type { transform: translateX(-100%); }

/* The season line: July (day 0) to the end of January (day 215) */
.mn-now { margin: 0 0 6px; font-size: 17px; line-height: 1.45; max-width: 40em; min-height: 2.9em; }
.mn-now b { font-weight: 750; }
.mn-tl { position: relative; margin: 0; max-width: 1100px; --days: 215; }
.mn-plot { position: relative; padding-top: 32px; }
.mn-axis, .mn-grid { display: grid; grid-template-columns: 31fr 31fr 30fr 31fr 30fr 31fr 31fr; }
.mn-axis { border-bottom: 1px solid var(--ink); padding-bottom: 6px; font-stretch: 75%; font-weight: 700; font-size: 13px; text-align: center; color: var(--ink2); }
.mn-axis span.is-now { color: var(--blue); font-weight: 820; }
.mn-grid { position: absolute; left: 0; right: 0; top: 56px; bottom: 0; pointer-events: none; }
.mn-grid i { border-left: 1px solid var(--hair); }
.mn-grid i:last-child { border-right: 1px solid var(--hair); }
.mn-row { position: relative; padding: 10px 0 12px; border-bottom: 1px solid var(--hair2); }
.mn-lab { position: relative; z-index: 3; margin: 0 0 6px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 14px; line-height: 1.25; }
.mn-lab b { font-stretch: 112%; font-weight: 800; background: var(--white); padding-right: 4px; }
.mn-lab span { font-stretch: 75%; font-weight: 600; color: var(--ink2); background: var(--white); padding-left: 4px; }
.mn-trk { position: relative; height: 24px; }
.mn-trk b, .mn-trk i { position: absolute; top: 0; bottom: 0; left: calc(var(--a) / var(--days) * 100%); width: calc((var(--b) - var(--a)) / var(--days) * 100%); transform-origin: 0 50%; transition: transform .8s var(--ease), left .45s var(--ease), width .45s var(--ease); }
.mn-trk .win, .mn-key .win { background: #7D8380; }
.mn-trk .pk, .mn-key .pk { background: var(--c); }
.mn-trk .p2, .mn-key .p2 { background: radial-gradient(circle, var(--c) 1.2px, transparent 1.7px) 0 0 / 5px 5px, #fff; box-shadow: inset 0 0 0 1.5px var(--c); }
.mn-row:nth-child(4) .mn-trk > * { transition-delay: .1s; }
.mn-row:nth-child(5) .mn-trk > * { transition-delay: .2s; }
.mn-row-st .mn-trk > * { transition-delay: .3s; }
/* One nest: eggs (white, like the egg), chicks in the nest (black), fed out of the nest (hatched), and swooping risk (red) */
.mn-row-st { border-bottom: 0; padding-bottom: 6px; }
.mn-st { height: 30px; margin-top: 14px; }
.mn-trk .egg, .mn-key .egg { background: #fff; box-shadow: inset 0 0 0 2px var(--c); }
.mn-trk .nst, .mn-key .nst { background: var(--c); }
.mn-trk .fl, .mn-key .fl { background: repeating-linear-gradient(135deg, var(--c) 0 2px, #fff 2px 6px); box-shadow: inset 0 0 0 1.5px var(--c); }
.mn-trk .fl.cut { -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
.mn-trk .sw { top: -10px; bottom: auto; height: 4px; background: linear-gradient(90deg, var(--red) 69.5%, rgba(204, 41, 54, 0)); }
.mn-tl.is-hidden .mn-trk > * { transform: scaleX(0); }
/* Today */
.mn-today { position: absolute; z-index: 2; top: 28px; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--blue); pointer-events: none; }
.mn-today[hidden] { display: none; }
.mn-today span { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); background: var(--blue); color: #fff; font-stretch: 75%; font-weight: 750; font-size: 13px; line-height: 22px; padding: 0 7px; border-radius: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mn-today.is-l span { transform: translateX(-12px); }
.mn-today.is-r span { transform: translateX(calc(-100% + 12px)); }
/* Pick a nest */
.mn-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 0 0; max-width: 560px; border: 1.5px solid var(--ink); border-radius: 2px; }
.mn-pick[hidden] { display: none; }
.mn-pick button {
  font: inherit; font-stretch: 88%; font-weight: 750; font-size: 14.5px; line-height: 1.15; color: var(--ink);
  background: var(--white); border: 0; border-left: 1.5px solid var(--ink); border-radius: 0; padding: 7px 6px; min-height: 50px;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s var(--ease), color .15s var(--ease);
}
.mn-pick button:first-child { border-left: 0; }
.mn-pick button span { display: block; margin-top: 2px; font-stretch: 75%; font-weight: 600; font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums; transition: color .15s var(--ease); }
.mn-pick button:hover { background: var(--lime); }
.mn-pick button:active { background: #D4D7D2; }
.mn-pick button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.mn-pick button[aria-pressed="true"] span { color: var(--paper-n); }
.mn-pick button:focus-visible { outline-offset: -5px; outline-color: var(--blue); }
.mn-pick button[aria-pressed="true"]:focus-visible { outline-color: var(--blue-n); }
.mn-nest { margin: 12px 0 0; font-size: 15.5px; line-height: 1.45; max-width: 44em; min-height: 4.35em; }
.mn-key { margin-top: 14px; font-stretch: 75%; font-weight: 650; font-size: 13.5px; color: var(--ink2); }
.mn-key p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 8px; }
.mn-key b { flex: 0 0 100%; font-weight: 800; color: var(--ink); }
.mn-key span { display: inline-flex; align-items: center; gap: 6px; }
.mn-key i { display: inline-block; flex: none; width: 18px; height: 12px; border-radius: 1px; }
.mn-key i.sw { height: 4px; background: var(--red); }
.mn-cap { font-stretch: 75%; font-size: 13.5px; color: var(--ink2); margin-top: 10px; max-width: 48em; }
@media (min-width: 760px) {
  .mn-axis { font-size: 15px; }
  .mn-grid { top: 59px; }
  .mn-trk { height: 30px; }
  .mn-st { height: 36px; }
  .mn-nest { min-height: 2.9em; }
  .mn-key b { flex: 0 0 76px; }
}

/* In-page photos (nest, adult feeding a chick, juvenile) */
.mn-ph { margin: 0 0 22px; max-width: 560px; }
.mn-ph-wide { max-width: 900px; margin: 30px 0 0; }
.mn-ph figcaption { font-stretch: 75%; font-size: 13.5px; color: var(--ink2); padding-top: 8px; }
.mn-ph figcaption a { color: var(--ink2); }

/* Nest field notes */
.mn-label { border: 1.5px solid var(--ink); background: var(--white); max-width: 560px; }
.mn-label-h { margin: 0; padding: 10px 14px; border-bottom: 1.5px solid var(--ink); font-stretch: 112%; font-weight: 820; font-size: 18px; line-height: 1.15; letter-spacing: -.01em; }
.mn-label dl { margin: 0; }
.mn-label dl div { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; padding: 10px 14px 11px; border-bottom: 1px solid var(--hair2); }
.mn-label dl div:last-child { border-bottom: 0; }
.mn-label dt { font-stretch: 75%; font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--ink2); padding-top: 1px; }
.mn-label dd { margin: 0; font-size: 15.5px; line-height: 1.4; }
@media (min-width: 1024px) { .mn-label dl div { grid-template-columns: 110px minmax(0, 1fr); } .mn-label dd { font-size: 16.5px; } }

/* Egg to independence: a spine on phones, a line across on wide screens */
.mn-lad { list-style: none; margin: 30px 0 0; padding: 0; display: grid; max-width: 1180px; }
.mn-lad li { position: relative; margin-left: 7px; padding: 0 0 24px 24px; border-left: 2px solid var(--c); min-width: 0; }
.mn-lad li:last-child { padding-bottom: 4px; }
.mn-lad li::before { content: ""; position: absolute; left: -9px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2.5px var(--c); }
.mn-lad li:nth-child(2)::before { background: var(--c); }
.mn-lad li:nth-child(3)::before { background: repeating-linear-gradient(135deg, var(--c) 0 2px, #fff 2px 5px); }
.mn-lad li:nth-child(4)::before { background: var(--c); box-shadow: inset 0 0 0 2.5px var(--c), inset 0 0 0 5px #fff; }
.mn-day { margin: 0; font-stretch: 75%; font-weight: 650; font-size: 14px; line-height: 1.2; color: var(--ink2); font-variant-numeric: tabular-nums; }
.mn-day b { display: block; font-weight: 820; font-size: 26px; line-height: 1; color: var(--ink); letter-spacing: -.01em; margin-bottom: 2px; }
.mn-lad h3 { font-stretch: 112%; font-weight: 820; font-size: 22px; line-height: 1.1; letter-spacing: -.015em; margin: 10px 0 6px; }
.mn-lad p:not(.mn-day) { margin: 0; font-size: 16.5px; line-height: 1.5; max-width: 34em; }
.mn-lad-note { margin: 10px 0 0; font-stretch: 75%; font-size: 13.5px; color: var(--ink2); }
@media (min-width: 900px) {
  .mn-lad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mn-lad li { margin: 0; padding: 28px 28px 0 0; border-left: 0; border-top: 2px solid var(--c); }
  .mn-lad li:last-child { padding-bottom: 0; }
  .mn-lad li::before { left: 0; top: -9px; }
  .mn-day b { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .mn-trk b, .mn-trk i, .mn-pick button, .mn-pick button span { transition: none !important; }
}