/* Quenda guide (/quenda-3/). Loaded after guide.css. Pieces the magpie template doesn't have:
   the tail on the size ruler, the two dig cross-sections (.dig), the to-scale mesh barrier (.fence)
   and the causes-of-death chart (.qd). */

/* Size ruler: body bar plus a hatched tail, with the body figure inside the bar */
.ru-bar.ru-tail {
  left: calc(var(--s) / var(--max) * 100%);
  background: repeating-linear-gradient(135deg, var(--c) 0 2px, transparent 2px 5px);
  box-shadow: inset 0 0 0 1px var(--c); transition-delay: .45s;
}
.ru-val.in { left: auto; right: calc(100% - var(--v) / var(--max) * 100%); margin: 0 6px 0 0; color: #fff; }

/* Dig cross-sections: quenda and rabbit, side by side from 600px */
.digs { display: grid; gap: 26px; margin-top: 30px; }
.dig { margin: 0; border-top: 3px solid var(--ink); padding-top: 14px; min-width: 0; }
.dig-svg { display: block; width: 100%; max-width: 420px; height: auto; }
.dig-soil { fill: #D3D6D0; }
.dig-line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.dig-pel { fill: var(--c); }
.dig figcaption { margin-top: 12px; }
.dig-name { font-stretch: 75%; font-weight: 700; font-size: 14px; color: var(--ink2); margin: 0 0 2px; }
.dig-shape { font-stretch: 112%; font-weight: 820; font-size: 24px; line-height: 1.1; letter-spacing: -.015em; margin: 0 0 6px; }
.dig-note { font-size: 16px; line-height: 1.45; margin: 0; max-width: 30em; }
.dig-cap { font-stretch: 75%; font-size: 13.5px; color: var(--ink2); margin: 14px 0 0; }
@media (min-width: 600px) { .digs { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
@media (min-width: 1024px) { .dig-shape { font-size: 28px; } }

/* The barrier, to scale: one --u per centimetre. Ground level sits 55 units from the top
   (5 cm of air above the 50 cm of mesh); the mesh runs down to 15 cm below ground. */
.stop-txt { font-size: 16.5px; line-height: 1.5; max-width: 34em; }
.fence { margin: 8px 0 0; }
.fn-draw { --u: 4px; --mx: 64px; --mw: 30%; position: relative; height: calc(75 * var(--u)); max-width: 460px; }
.fn-soil {
  position: absolute; z-index: 1; left: 0; right: 0; top: calc(55 * var(--u)); bottom: 0;
  border-top: 2px solid var(--ink);
  background: repeating-linear-gradient(135deg, rgba(22, 25, 26, .16) 0 1px, transparent 1px 7px), rgba(22, 25, 26, .07);
}
.fn-gl { position: absolute; z-index: 2; right: 0; top: calc(55 * var(--u) - 22px); font-stretch: 75%; font-weight: 700; font-size: 13px; color: var(--ink2); }
.fn-mesh {
  position: absolute; left: var(--mx); width: var(--mw); top: calc(5 * var(--u)); height: calc(65 * var(--u));
  border: 2px solid var(--c);
  background-image: linear-gradient(var(--c) 1px, transparent 1px), linear-gradient(90deg, var(--c) 1px, transparent 1px);
  background-size: calc(2 * var(--u)) calc(2 * var(--u));
  background-color: rgba(255, 255, 255, .55);
  transform-origin: 50% calc(50 * var(--u)); transition: transform .9s var(--ease);
}
.fn-hole {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-stretch: 75%; font-weight: 750; font-size: 13px; line-height: 20px;
  padding: 0 6px; border-radius: 2px; white-space: nowrap;
}
.fn-dim { position: absolute; z-index: 2; left: calc(var(--mx) + var(--mw) + 16px); border-left: 1.5px solid var(--ink); transition: opacity .4s .7s var(--ease); }
.fn-dim::before, .fn-dim::after { content: ""; position: absolute; left: -6px; width: 11px; height: 1.5px; background: var(--ink); }
.fn-dim::before { top: 0; }
.fn-dim::after { bottom: 0; }
.fn-up { top: calc(5 * var(--u)); height: calc(50 * var(--u)); }
.fn-dn { top: calc(55 * var(--u)); height: calc(15 * var(--u)); }
.fn-dim span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-stretch: 75%; font-weight: 800; font-size: 15px; line-height: 1.15; white-space: nowrap; }
.fn-scale { position: absolute; left: 0; top: calc(5 * var(--u)); width: 44px; height: calc(65 * var(--u)); border-right: 1.5px solid var(--ink); }
.fn-scale i { position: absolute; right: 0; width: 8px; height: 1.5px; background: var(--ink); top: calc((50 - var(--y)) * var(--u)); }
.fn-scale i span { font-style: normal; white-space: nowrap; position: absolute; right: 13px; top: -8px; font-stretch: 75%; font-weight: 650; font-size: 12.5px; line-height: 16px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.fn-cap { font-stretch: 75%; font-size: 13.5px; color: var(--ink2); margin-top: 12px; max-width: 34em; }
.fence.is-hidden .fn-mesh { transform: scaleY(0); }
.fence.is-hidden .fn-dim { opacity: 0; }
@media (min-width: 760px) { .fn-draw { --u: 5px; --mx: 72px; } }
@media (min-width: 1024px) { .fn-draw { --u: 6px; } .fence { margin-top: 0; } }

/* Causes of death: one bar per cause, 0 to 100%, on the dark band */
.qd { margin: 30px 0 0; max-width: 980px; }
.qd-row { padding: 10px 0 12px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.qd-row:first-child { border-top: 3px solid var(--paper-n); }
.qd-lab { margin: 0 0 6px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 14.5px; }
.qd-lab b { font-stretch: 112%; font-weight: 800; }
.qd-lab span { font-stretch: 75%; font-weight: 600; color: var(--ink2-n); }
.qd-trk {
  position: relative; height: 26px; border-left: 1px solid var(--paper-n);
  background: linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px) 0 0 / 25% 100%;
}
.qd-bar { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 1%); background: var(--cn); border-radius: 0 2px 2px 0; transform-origin: 0 50%; transition: transform .9s var(--ease); }
.qd-val { position: absolute; top: 0; left: calc(var(--v) * 1%); margin-left: 7px; font-stretch: 75%; font-weight: 800; font-size: 15px; line-height: 26px; font-variant-numeric: tabular-nums; white-space: nowrap; transition: opacity .3s .6s var(--ease); }
.qd-row:nth-child(2) .qd-bar { transition-delay: .1s; }
.qd-row:nth-child(3) .qd-bar { transition-delay: .2s; }
.qd.is-hidden .qd-bar { transform: scaleX(0); }
.qd.is-hidden .qd-val { opacity: 0; }
.qd-axis { position: relative; height: 24px; border-top: 1px solid var(--paper-n); margin-top: 10px; font-stretch: 75%; font-size: 12.5px; font-weight: 650; color: var(--ink2-n); font-variant-numeric: tabular-nums; }
.qd-axis span { position: absolute; top: 5px; transform: translateX(-50%); }
.qd-axis span:first-child { transform: none; }
.qd-axis span:last-child { transform: translateX(-100%); }
.qd-cap { font-stretch: 75%; font-size: 13.5px; color: var(--ink2-n); margin-top: 10px; max-width: 46em; }
.qd-more { font-size: 16.5px; line-height: 1.5; max-width: 40em; margin: 26px 0 0; }
@media (min-width: 760px) {
  .qd-trk { height: 32px; }
  .qd-val { line-height: 32px; font-size: 16px; }
  .qd-lab { font-size: 15.5px; }
}