/* Engraved diagrams, the house style for research chapters.
   Markup is generated by BondBase/Marketing for Bonds/varsity-module/diagrams
   (engraved.js + one file per chapter); this sheet only styles it.
   Each plate carries two artboards, wide and narrow, so no label is ever
   shrunk to fit a phone. */

figure.dg{
  --dg-ink:#16191d; --dg-ink2:#3d434a; --dg-mute:#6b727b; --dg-paper:#ffffff;
  --dg-hatch:#16191d; --dg-pos:#15803d; --dg-neg:#c0392b;
  margin:40px 0 44px; padding:0;
}
body.cardboard figure.dg{
  --dg-ink:#ececed; --dg-ink2:#b4b4bb; --dg-mute:#8a8a93; --dg-paper:#111214; --dg-hatch:#d4d4d8;
}

.dg-plate{background:var(--dg-paper); color:var(--dg-ink); padding:22px 28px 20px;
  border:1px solid var(--dg-ink); outline:1px solid var(--dg-ink); outline-offset:-7px}
.dg-head{text-align:center; margin:0 0 12px}
.dg-plate .dg-kicker{font:800 10px/1 'Manrope',sans-serif; letter-spacing:.24em; text-transform:uppercase;
  color:var(--dg-mute); margin:0 0 9px}
.dg-plate .dg-title{font:800 18px/1.3 'Manrope',sans-serif; letter-spacing:-.01em; color:var(--dg-ink);
  margin:0 auto; max-width:540px; text-wrap:balance}
.dg-plate .dg-sub{font:600 13px/1.55 'Manrope',sans-serif; color:var(--dg-mute);
  margin:6px auto 0; max-width:520px; text-wrap:balance}

.dg-band{display:block; width:100%; height:14px; margin:12px 0 18px; fill:none;
  stroke:var(--dg-ink); stroke-width:.6; opacity:.55}
.dg-band.b{margin:18px 0 0}

figure.dg svg.dg-art{display:block; width:100%; height:auto; overflow:visible}
figure.dg svg.dg-narrow{display:none}
figure.dg figcaption.dg-cap{font:600 15px/1.6 'Manrope',sans-serif; color:var(--dg-ink2);
  text-align:center; max-width:580px; margin:16px auto 0; text-wrap:balance}

@media (max-width:660px){
  figure.dg svg.dg-wide{display:none}
  figure.dg svg.dg-narrow{display:block; max-width:400px; margin:0 auto}
  .dg-plate{padding:18px 14px 16px; outline-offset:-5px}
  .dg-plate .dg-title{font-size:17px}
  figure.dg figcaption.dg-cap{font-size:14.5px}
}

/* type: one style per job */
figure.dg text{font-family:'Manrope',sans-serif}
figure.dg .t-lab{font-size:13.5px; font-weight:600; fill:var(--dg-ink)}
figure.dg .t-val{font-size:13.5px; font-weight:800; fill:var(--dg-ink)}
figure.dg .t-big{font-size:15px; font-weight:800; fill:var(--dg-ink)}
figure.dg .t-note{font-size:12.5px; font-weight:600; fill:var(--dg-mute)}
figure.dg .t-tag{font-size:10px; font-weight:800; letter-spacing:.16em; fill:var(--dg-mute)}
figure.dg .t-axis{font-size:11px; font-weight:600; fill:var(--dg-mute)}
figure.dg .t-inv{fill:var(--dg-paper)}

/* marks */
figure.dg .l-main{fill:none; stroke:var(--dg-ink); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round}
figure.dg .l-thin{fill:none; stroke:var(--dg-ink); stroke-width:1.3; stroke-linejoin:round}
figure.dg .l-hair{fill:none; stroke:var(--dg-ink); stroke-width:.6; opacity:.7; stroke-linejoin:round}
figure.dg .l-bill{fill:none; stroke:var(--dg-ink); stroke-width:1.2; stroke-linejoin:round}
figure.dg .l-rule{stroke:var(--dg-ink); stroke-width:.7; opacity:.75}
figure.dg .l-rule2{stroke:var(--dg-ink); stroke-width:.9}
figure.dg .l-grid{stroke:var(--dg-ink); stroke-width:.6; stroke-dasharray:1 3; opacity:.4}
figure.dg .l-tick{stroke:var(--dg-ink); stroke-width:.8; opacity:.5}
figure.dg .l-hike{stroke:var(--dg-ink); stroke-width:.9; stroke-dasharray:4 3}
figure.dg .l-lead{fill:none; stroke:var(--dg-ink); stroke-width:.7; stroke-dasharray:1.5 2.5; opacity:.65}
figure.dg .l-dim{stroke:var(--dg-ink); stroke-width:.9}
figure.dg .l-ghost{fill:none; stroke:var(--dg-ink); stroke-width:.7; opacity:.35}
figure.dg .bar{stroke:var(--dg-ink); stroke-width:.9}
figure.dg .a-fill{stroke:none}
figure.dg .hatch{stroke:var(--dg-hatch); stroke-width:.8}
figure.dg .hatch-d{stroke:var(--dg-hatch); stroke-width:1.1}
figure.dg .pt{fill:var(--dg-paper); stroke:var(--dg-ink); stroke-width:1.5}
figure.dg .p-paper{fill:var(--dg-paper); stroke:var(--dg-ink); stroke-width:.8}
figure.dg .p-inner{fill:none; stroke:var(--dg-ink); stroke-width:.4}
figure.dg .p-ink{fill:var(--dg-ink)}
figure.dg .ros{fill:none; stroke:var(--dg-ink); stroke-width:.6}
figure.dg .ros-c{fill:var(--dg-ink)}
figure.dg .arw{fill:none; stroke:var(--dg-ink); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round}
figure.dg .n-ghost{fill:none; stroke:var(--dg-ink); stroke-width:.9; stroke-dasharray:4 4; opacity:.5}
figure.dg .t-ghost{fill:var(--dg-mute)}
figure.dg .t-pos{fill:var(--dg-pos)}
figure.dg .t-neg{fill:var(--dg-neg)}

/* the plate engraves itself as it scrolls in. Only armed when js/diagrams.js
   runs and the reader has not asked for reduced motion, so without either the
   finished plate simply shows. */
.dg-armed figure.dg .dg-draw{stroke-dasharray:1; stroke-dashoffset:1}
.dg-armed figure.dg .dg-fade{opacity:0}
.dg-armed figure.dg .dg-wipe{clip-path:inset(0 100% 0 0)}
.dg-armed figure.dg .dg-drop{clip-path:inset(0 0 100% 0)}
.dg-armed figure.dg.dg-in .dg-draw{stroke-dashoffset:0;
  transition:stroke-dashoffset 1.6s cubic-bezier(.45,0,.2,1) var(--d,0s)}
.dg-armed figure.dg.dg-in .dg-fade{opacity:1; transition:opacity .7s ease var(--d,0s)}
.dg-armed figure.dg.dg-in .l-ghost.dg-fade{opacity:.35}
.dg-armed figure.dg.dg-in .l-lead.dg-fade{opacity:.65}
.dg-armed figure.dg.dg-in .l-rule.dg-fade{opacity:.75}
.dg-armed figure.dg.dg-in .l-grid.dg-fade{opacity:.4}
.dg-armed figure.dg.dg-in .dg-wipe,
.dg-armed figure.dg.dg-in .dg-drop{clip-path:inset(0 0 0 0);
  transition:clip-path 1.2s cubic-bezier(.45,0,.2,1) var(--d,0s)}