/* Black swan guide (/feeding-swans/). Loaded after guide.css.
   Three pieces the magpie template doesn't have: the food-by-food check (.fc), the depth gauge
   (.dp) and the steps list on a dark band (.sw-steps). The breeding chart reuses .ych. */

/* Food by food */
.fc-wrap { display: grid; gap: 34px; margin-top: 28px; }
.fc { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.fc li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: baseline; padding: 14px 0 15px; border-bottom: 1px solid var(--hair2); }
.fc-f { font-stretch: 112%; font-weight: 800; font-size: 19px; line-height: 1.15; letter-spacing: -.01em; }
.fc-v {
  font-stretch: 75%; font-weight: 850; font-size: 26px; line-height: 1; color: var(--red);
  transition: transform .45s var(--ease), opacity .3s var(--ease);
}
.fc p { grid-column: 1 / -1; margin: 6px 0 0; font-size: 16px; line-height: 1.45; max-width: 40em; }
.fc a.tel, .fc-help a.tel { font-weight: 700; white-space: nowrap; }
/* The "No" stamps land one by one as the list scrolls into view (swans.js) */
.fc.is-hidden .fc-v { transform: scale(1.6) rotate(-6deg); opacity: 0; }
.fc li:nth-child(2) .fc-v { transition-delay: .09s; }
.fc li:nth-child(3) .fc-v { transition-delay: .18s; }
.fc li:nth-child(4) .fc-v { transition-delay: .27s; }
.fc li:nth-child(5) .fc-v { transition-delay: .36s; }
.fc-help { border-top: 3px solid var(--c); padding-top: 12px; }
.fc-help h3 { font-stretch: 125%; font-weight: 880; font-size: 26px; line-height: 1; letter-spacing: -.02em; margin: 0 0 10px; }
.fc-help ol { list-style: none; counter-reset: h; margin: 0; padding: 0; }
.fc-help li { counter-increment: h; position: relative; padding: 10px 0 11px 34px; border-bottom: 1px solid var(--hair2); font-size: 15.5px; line-height: 1.42; }
.fc-help li::before { content: counter(h); position: absolute; left: 0; top: 9px; font-stretch: 75%; font-weight: 800; font-size: 20px; line-height: 1; color: var(--c); font-variant-numeric: tabular-nums; }
.fc-help b { font-weight: 750; }
.fc-more { margin: 14px 0 0; font-size: 15.5px; }
@media (min-width: 760px) {
  .fc li { grid-template-columns: minmax(0, 15em) 64px minmax(0, 1fr); column-gap: 20px; }
  .fc p { grid-column: auto; margin: 0; }
  .fc-f { font-size: 20px; }
  .fc-v { font-size: 30px; }
}
@media (min-width: 1024px) {
  .fc-wrap { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 56px; align-items: start; }
  .fc-help { position: sticky; top: 100px; }
}

/* Depth gauge: drawn to scale, 0 to 1.5 m of water under a strip of bank */
.dp { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 18px; margin: 30px 0 0; max-width: 980px; }
.dp-gauge { display: flex; flex-direction: column; height: 320px; border: 1.5px solid var(--ink); }
.dp-bank { flex: 0 0 52px; background: var(--lime); position: relative; }
.dp-bank span { position: absolute; left: 6px; top: 6px; font-stretch: 75%; font-weight: 700; font-size: 12.5px; color: var(--ink2); }
.dp-water { position: relative; flex: 1; border-top: 2px solid var(--ink); background: linear-gradient(rgba(59, 61, 181, .07), rgba(59, 61, 181, .2)); }
/* Each depth label sits just above its tick, except 0, which sits just under the surface */
.dp-t { position: absolute; left: 0; top: calc(var(--d) / 150 * 100%); transform: translateY(calc(-100% - 4px)); padding-left: 6px; font-stretch: 75%; font-weight: 700; font-size: 12.5px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dp-t::after { content: ""; position: absolute; left: 0; top: calc(100% + 4px); width: 10px; height: 1.5px; background: var(--ink); }
.dp-t:first-child { transform: translateY(6px); }
.dp-t:first-child::after { display: none; }
/* 1 m line across the gauge */
.dp-water::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100 / 150 * 100%); border-top: 1.5px dashed var(--ink); }
.dp-reach { position: absolute; right: 12px; top: 0; width: 16px; height: calc(100 / 150 * 100%); background: var(--c); transform-origin: 50% 0; transition: transform 1s var(--ease); }
.dp.is-hidden .dp-reach { transform: scaleY(0); }
.dp-keys { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); align-self: start; }
.dp-keys li { position: relative; padding: 11px 0 12px 26px; border-bottom: 1px solid var(--hair2); font-size: 15.5px; line-height: 1.42; }
.dp-keys li b { display: block; font-stretch: 112%; font-weight: 800; font-size: 17px; line-height: 1.2; letter-spacing: -.01em; }
.dp-keys li::before { content: ""; position: absolute; left: 0; top: 15px; width: 14px; height: 14px; box-sizing: border-box; }
.dp-keys .k-bank::before { background: var(--lime); border: 1.5px solid var(--ink); }
.dp-keys .k-reach::before { background: var(--c); }
.dp-keys .k-bugs::before { background: repeating-linear-gradient(135deg, var(--c) 0 2px, transparent 2px 4.5px); box-shadow: inset 0 0 0 1.5px var(--c); }
.dp-keys .k-no::before { border: 1.5px solid var(--ink); background: linear-gradient(45deg, transparent calc(50% - 1px), var(--ink) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
.dp-cap { grid-column: 1 / -1; font-stretch: 75%; font-size: 13.5px; color: var(--ink2); margin-top: 12px; max-width: 44em; }
@media (min-width: 760px) {
  .dp { grid-template-columns: 170px minmax(0, 1fr); column-gap: 36px; }
  .dp-gauge { height: 380px; }
  .dp-reach { width: 22px; right: 22px; }
  .dp-t, .dp-bank span { font-size: 13.5px; }
  .dp-keys li { font-size: 16.5px; padding-left: 30px; }
  .dp-keys li b { font-size: 19px; }
}

/* Hurt, sick or tangled (dark band) */
.sw-steps { margin-top: 4px; }
.sw-steps a.tel, .dark .lede a.tel { font-weight: 700; white-space: nowrap; }
.sw-tackle { font-size: 15.5px; line-height: 1.5; color: var(--ink2-n); margin: 22px 0 0; max-width: 40em; }
.sw-tackle b { color: #fff; font-weight: 700; }
.dark .bignums { margin: 26px 0 0; }
@media (min-width: 760px) {
  .dark .bignums dt { font-size: 42px; }
}

/* Nesting: law notes sit inside list items */
.sw-nest { margin-top: 8px; max-width: 62em; }
.sw-nest .law-note { display: block; margin-top: 8px; }