/* Southern boobook guide (/southern-boobook-owl/). Loaded after guide.css.
   Three pieces the template doesn't have: the call labels (.calls), the poison food chain (.chain)
   and the dark band's photo split (.bb-split). Everything else is guide.css. */

/* ---------- Call labels: specimen-label rows, one per bird ---------- */
.calls { margin-top: 28px; border-top: 3px solid var(--ink); }
.call {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "name" "say" "trk" "note";
  row-gap: 6px; padding: 16px 0 18px; border-bottom: 1px solid var(--hair2);
}
.call-name { grid-area: name; margin: 0; font-size: 15px; }
.call-name b { font-stretch: 112%; font-weight: 800; font-size: 19px; letter-spacing: -.01em; }
.call-name i { font-stretch: 75%; font-weight: 500; color: var(--ink2); margin-left: 4px; }
.call-say {
  grid-area: say; margin: 0;
  font-stretch: 125%; font-weight: 880; font-size: clamp(32px, 9vw, 60px); line-height: 1; letter-spacing: -.025em;
  color: var(--k);
}
.call-note { grid-area: note; margin: 4px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--ink2); max-width: 40em; }

/* Each bird's colour: boobook brown, frogmouth grey, barn owl ink (hatched, a rough screech) */
.call { --k: var(--ink); }
.call.sp-boobook { --k: var(--c); }
.call.is-frog { --k: var(--ink3); }

/* The pattern: a time line with one mark per note. Shape only, not pitch or length to scale. */
.call-trk {
  grid-area: trk; position: relative; height: 46px; margin: 6px 0 0;
  border-left: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  background: linear-gradient(90deg, var(--hair) 1px, transparent 1px) 0 0 / 10% 100%;
  -webkit-tap-highlight-color: transparent;
}
.call-trk .n {
  position: absolute; bottom: 7px; height: 30px;
  left: calc(var(--x) * 1%); width: calc(var(--w) * 1%);
  background: var(--k); border-radius: 2px; transform-origin: 50% 100%;
}
.call.is-barn .n { background: repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1.5px var(--ink); }
/* The frogmouth's call is continuous: its marks fade out past the end of the line */
.call.is-frog .call-trk { -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
.call-trk.is-live { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .call-trk.is-live:hover { background-color: rgba(22, 25, 26, .04); }
}
.call-trk.is-live:active { background-color: rgba(22, 25, 26, .06); }

/* Replay: notes pop up one after another (boobook quick, frogmouth slow and even, barn owl one long drawn mark) */
@keyframes bbNote { 0% { transform: scaleY(.12); opacity: .25; } 60% { transform: scaleY(1.12); opacity: 1; } 100% { transform: scaleY(1); opacity: 1; } }
@keyframes bbLong { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.call-trk.is-play .n { animation: bbNote .42s var(--ease) both; animation-delay: calc(var(--i) * 170ms); }
.call.is-frog .call-trk.is-play .n { animation-duration: .6s; animation-delay: calc(var(--i) * 300ms); }
.call.is-barn .call-trk.is-play .n { animation: bbLong 1.1s cubic-bezier(.3, .1, .3, 1) both; }

.calls-cap { font-stretch: 75%; font-size: 13.5px; line-height: 1.4; color: var(--ink2); margin: 12px 0 0; max-width: 46em; }
.calls-tap { display: none; }
.calls.is-live + .calls-cap .calls-tap { display: inline; }
.calls-more { font-size: 16px; line-height: 1.45; margin: 22px 0 0; max-width: 40em; padding-left: 12px; border-left: 3px solid var(--c); }

@media (min-width: 760px) {
  .call {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px;
    grid-template-areas: "name trk" "say trk" "note trk";
    align-items: center; padding: 22px 0 24px;
  }
  .call-trk { margin: 0; height: 58px; }
  .call-trk .n { height: 40px; }
}

/* ---------- Food chain: four steps, joined by a line that draws in ---------- */
.chain { list-style: none; counter-reset: ch; margin: 30px 0 0; padding: 0; border-top: 3px solid var(--paper-n); }
.chain li {
  counter-increment: ch; position: relative;
  padding: 16px 0 18px 48px; border-bottom: 1px solid rgba(255, 255, 255, .2);
  font-size: 16px; line-height: 1.45; color: var(--ink2-n);
}
.chain li::before {
  content: counter(ch, decimal-leading-zero); position: absolute; left: 0; top: 15px;
  font-stretch: 75%; font-weight: 800; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--cn);
}
/* The line between numbers */
.chain li::after {
  content: ""; position: absolute; left: 13px; top: 46px; bottom: -14px; width: 2px; z-index: 1;
  background: var(--cn); transform-origin: 50% 0; transition: transform .5s var(--ease);
}
.chain li:last-child::after { display: none; }
.chain li:nth-child(2)::after { transition-delay: .25s; }
.chain li:nth-child(3)::after { transition-delay: .5s; }
.chain.is-hidden li::after { transform: scaleY(0); }
.chain b { display: block; margin-bottom: 4px; font-stretch: 112%; font-weight: 800; font-size: 19px; line-height: 1.15; letter-spacing: -.01em; color: #fff; }
@media (min-width: 1024px) {
  .chain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; border-bottom: 1px solid rgba(255, 255, 255, .2); }
  .chain li { padding: 64px 0 22px; border-bottom: 0; }
  .chain li::before { top: 20px; font-size: 30px; }
  .chain li::after { left: 46px; right: -24px; top: 34px; bottom: auto; width: auto; height: 2px; transform-origin: 0 50%; }
  .chain.is-hidden li::after { transform: scaleX(0); }
  .chain b { font-size: 21px; }
}

/* ---------- The dark band: numbers and notes, then the barn owl photo ---------- */
.bb-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.bb-split .bignums { margin-top: 30px; }
.bb-split .bignums div { grid-template-columns: 148px minmax(0, 1fr); }
@media (min-width: 760px) {
  .bb-split .bignums { grid-template-columns: 1fr; gap: 0; }
  .bb-split .bignums div { display: grid; grid-template-columns: 200px minmax(0, 1fr); padding: 14px 0; }
  .bb-split .bignums dt { font-size: 48px; white-space: nowrap; }
  .bb-split .bignums dd { margin-top: 0; }
}
.bb-note { font-size: 16px; line-height: 1.45; color: var(--ink2-n); max-width: 38em; margin: 0 0 14px; }
.bb-more { margin: 24px 0 8px; font-stretch: 112%; font-weight: 800; font-size: 19px; line-height: 1.25; letter-spacing: -.01em; max-width: 30em; }
.bb-more a { color: #fff; text-decoration: none; border-bottom: 2px solid var(--cn); padding-bottom: 2px; transition: border-color .2s var(--ease); }
.bb-arr { position: relative; left: 0; transition: left .25s var(--ease); }
.bb-more a:hover, .bb-more a:focus-visible { border-color: #fff; }
.bb-more a:hover .bb-arr, .bb-more a:focus-visible .bb-arr, .bb-more a:active .bb-arr { left: 5px; }
.bb-fig { margin: 22px calc(-1 * var(--gut)) 0; }
.bb-fig .ph { background: #050607; }
.bb-fig figcaption { font-stretch: 75%; font-size: 13.5px; line-height: 1.4; color: var(--ink2-n); padding: 9px var(--gut) 0; }
.bb-fig figcaption a:not(.src) { color: var(--ink2-n); }
@media (min-width: 600px) { .bb-fig { margin: 22px 0 0; } .bb-fig figcaption { padding: 9px 0 0; } }
@media (min-width: 1024px) {
  .bb-split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 64px; align-items: start; }
  .bb-fig { margin-top: 36px; }
  .bb-fig .ph { aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
  .call-trk .n, .call-trk.is-play .n { animation: none !important; }
  .chain li::after, .chain.is-hidden li::after { transition: none; transform: none; }
  .bb-arr { transition: none; }
}

/* The year chart sits on limestone here: its label chips match the band */
.lime .ych-lab b, .lime .ych-lab span { background: var(--lime); }

/* The magpie's size label sits inside its bar, on a white chip, so it never runs off a phone screen */
.ru-val.in { left: auto; right: calc(100% - var(--v) / var(--max) * 100%); margin: 0 4px 0 0; padding: 0 4px; background: var(--white); line-height: 16px; top: 1px; }