/* Duck guide (/feeding-ducks/). Loaded after guide.css.
   Pieces the magpie template doesn't have: the bread ledger (.bl), the duckling timeline (.dl-tl),
   the field-guide list of ducks (.fg) and a wider label column on the size ruler. */

/* Size ruler: longer labels than the magpie's ("Black duck") */
.sp-duck .ruler { --max: 70; }
.sp-duck .ru-row { grid-template-columns: 82px minmax(0, 1fr); }
.sp-duck .ru-axis { margin-left: 82px; }

/* Reasons list on limestone: the numbers wear the duck green */
.why li::before { color: var(--c); }

/* Bread ledger: one square per slice, solid if eaten, hatched if not */
.bl { margin: 30px 0 0; }
.bl-sets { display: grid; gap: 28px; }
.bl-lab { margin: 0 0 8px; padding-bottom: 7px; border-bottom: 3px solid var(--ink); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: 14.5px; }
.bl-lab b { font-stretch: 112%; font-weight: 800; }
.bl-lab span { font-stretch: 75%; font-weight: 650; color: var(--ink2); font-variant-numeric: tabular-nums; }
.bl-grid { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; }
.bl-grid i { display: block; aspect-ratio: 1; background: var(--c); border-radius: 1px; transform-origin: 50% 100%; transition: transform .35s var(--ease); transition-delay: calc(var(--i) * 7ms); }
.bl-grid i.left { background: repeating-linear-gradient(135deg, var(--c) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1px var(--c); }
.bl.is-hidden .bl-grid i { transform: scale(0); }
.bl-sum { margin: 8px 0 0; font-size: 14.5px; line-height: 1.4; color: var(--ink2); }
.bl-sum b { color: var(--ink); font-weight: 750; }
.bl-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 20px 0 0; padding: 0; list-style: none; font-stretch: 75%; font-weight: 650; font-size: 14px; }
.bl-key li { display: flex; align-items: center; gap: 8px; }
.bl-key i { width: 14px; height: 14px; background: var(--c); border-radius: 1px; }
.bl-key i.left { background: repeating-linear-gradient(135deg, var(--c) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1px var(--c); }
.bl-cap { font-stretch: 75%; font-size: 13.5px; color: var(--ink2); margin-top: 10px; max-width: 46em; }
.honest { margin-top: 30px; max-width: 44em; border-left: 3px solid var(--c); padding-left: 14px; font-size: 16.5px; line-height: 1.5; }
.honest b { font-stretch: 112%; font-weight: 800; }
@media (min-width: 900px) {
  .bl-sets { grid-template-columns: 1fr 1fr; column-gap: 48px; }
}

/* Duckling season: one row of the year chart, then a dated timeline */
.dl-tl { list-style: none; margin: 34px 0 0; padding: 0; border-top: 3px solid var(--ink); max-width: 60em; }
.dl-tl li { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding: 14px 0 15px; border-bottom: 1px solid var(--hair2); font-size: 16.5px; line-height: 1.45; }
.dl-d { font-stretch: 75%; font-weight: 800; font-size: 16px; line-height: 1.3; color: var(--c); font-variant-numeric: tabular-nums; }
@media (min-width: 760px) {
  .dl-tl li { grid-template-columns: 170px minmax(0, 1fr); column-gap: 28px; }
  .dl-d { padding-top: 2px; }
}
.sit { margin-top: 44px; }
.sit-h { font-stretch: 112%; font-weight: 820; font-size: 24px; line-height: 1.1; letter-spacing: -.015em; margin: 0 0 12px; }
@media (min-width: 1024px) { .sit-h { font-size: 30px; } }

/* Field-guide list: specimen labels, ruled, no cards */
.fg { list-style: none; margin: 28px 0 0; padding: 0; display: grid; border-top: 3px solid var(--ink); }
.fg li { padding: 14px 0 16px; border-bottom: 1px solid var(--hair2); min-width: 0; }
.fg-n { margin: 0; font-stretch: 112%; font-weight: 820; font-size: 21px; line-height: 1.1; letter-spacing: -.015em; }
.fg-l { margin: 2px 0 8px; font-stretch: 75%; font-weight: 600; font-size: 14.5px; color: var(--ink2); }
.fg-l i { font-weight: 500; }
.fg-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1.5px solid var(--c); border-radius: 2px; color: var(--c); font-weight: 750; font-size: 13px; font-style: normal; }
.fg-tag.intro { border-color: var(--ink3); color: var(--ink2); border-style: dashed; }
.fg p:not(.fg-n):not(.fg-l) { font-size: 15.5px; line-height: 1.45; margin: 0 0 6px; }
.fg-share { display: block; margin-top: 10px; }
.fg-share .fg-trk { display: block; position: relative; height: 10px; background: rgba(22, 25, 26, .08); }
.fg-share .fg-trk b { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 1%); background: var(--c); transform-origin: 0 50%; transition: transform .8s var(--ease); }
.fg.is-hidden .fg-trk b { transform: scaleX(0); }
.fg-share small { display: block; margin-top: 4px; font-stretch: 75%; font-weight: 650; font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums; }
@media (min-width: 760px) {
  .fg { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
@media (min-width: 1200px) {
  .fg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fg li { border-bottom: 0; border-right: 1px solid var(--hair2); padding-right: 20px; }
  .fg li:last-child { border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bl-grid i, .fg-trk b { transition: none !important; }
}