/* Dragon CSS homepage drafts: quill-ink utilities. Every frame, rule and mark is a hand-drawn stroke with no fill,
   so the parchment always shows through. Strokes are data-URI SVGs used as masks over currentColor-style ink,
   sized to the box (the SVGs have no viewBox, so corners keep their radius at any size). Link after parchment.css. */
:root {
  --ink-line: rgba(60, 40, 22, .75);          /* brown iron-gall ink */
  --ink-line-strong: rgba(43, 28, 14, .95);   /* hover, pressed, focus */
  --ink-frame-a: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='5' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='5' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='9' result='g'/><feDisplacementMap in='d' in2='g' scale='1.6'/></filter><g filter='url(%23r)' fill='none' stroke='black' stroke-linecap='round'><rect x='5' y='5' rx='12' pathLength='1000' style='width:calc(100%25 - 10px);height:calc(100%25 - 10px)' stroke-width='1.5' stroke-dasharray='470 6 520 4' stroke-dashoffset='-30'/><rect x='5.6' y='4.5' rx='13' pathLength='1000' style='width:calc(100%25 - 11px);height:calc(100%25 - 9.4px)' stroke-width='1.08' stroke-dasharray='0 40 160 70 120 110 200 60 150 90' stroke-opacity='.8'/></g></svg>");
  --ink-frame-b: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='12' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='5' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='3' result='g'/><feDisplacementMap in='d' in2='g' scale='1.6'/></filter><g filter='url(%23r)' fill='none' stroke='black' stroke-linecap='round'><rect x='5' y='5' rx='12' pathLength='1000' style='width:calc(100%25 - 10px);height:calc(100%25 - 10px)' stroke-width='1.5' stroke-dasharray='300 5 690 5' stroke-dashoffset='-610'/><rect x='5.6' y='4.5' rx='13' pathLength='1000' style='width:calc(100%25 - 11px);height:calc(100%25 - 9.4px)' stroke-width='1.08' stroke-dasharray='0 90 210 40 170 130 140 80 120 20' stroke-opacity='.8'/></g></svg>");
  --ink-frame-c: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='21' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='5' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='17' result='g'/><feDisplacementMap in='d' in2='g' scale='1.6'/></filter><g filter='url(%23r)' fill='none' stroke='black' stroke-linecap='round'><rect x='5' y='5' rx='12' pathLength='1000' style='width:calc(100%25 - 10px);height:calc(100%25 - 10px)' stroke-width='1.5' stroke-dasharray='640 7 353' stroke-dashoffset='-150'/><rect x='5.6' y='4.5' rx='13' pathLength='1000' style='width:calc(100%25 - 11px);height:calc(100%25 - 9.4px)' stroke-width='1.08' stroke-dasharray='0 20 120 150 180 60 230 240' stroke-opacity='.8'/></g></svg>");
  --ink-frame-bold: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='5' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='5' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='9' result='g'/><feDisplacementMap in='d' in2='g' scale='1.6'/></filter><g filter='url(%23r)' fill='none' stroke='black' stroke-linecap='round'><rect x='5' y='5' rx='12' pathLength='1000' style='width:calc(100%25 - 10px);height:calc(100%25 - 10px)' stroke-width='2.3' stroke-dasharray='470 6 520 4' stroke-dashoffset='-30'/><rect x='5.6' y='4.5' rx='13' pathLength='1000' style='width:calc(100%25 - 11px);height:calc(100%25 - 9.4px)' stroke-width='1.66' stroke-dasharray='0 40 160 70 120 110 200 60 150 90' stroke-opacity='.8'/></g></svg>");
  --ink-rule-a: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='6' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='4' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='2' result='g'/><feDisplacementMap in='d' in2='g' scale='1.4'/></filter><g filter='url(%23r)' fill='none' stroke='black' stroke-linecap='round'><line x1='4' y1='5' x2='100%25' y2='5.4' stroke-width='1.5' pathLength='1000' stroke-dasharray='380 5 603 1000'/><line x1='40' y1='5.6' x2='100%25' y2='5.2' stroke-width='0.9' pathLength='1000' stroke-dasharray='0 60 220 90 300 330' stroke-opacity='.8'/></g></svg>");
  --ink-rule-b: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='14' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='4' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='8' result='g'/><feDisplacementMap in='d' in2='g' scale='1.4'/></filter><g filter='url(%23r)' fill='none' stroke='black' stroke-linecap='round'><line x1='4' y1='5' x2='100%25' y2='5.4' stroke-width='1.5' pathLength='1000' stroke-dasharray='380 5 603 1000'/><line x1='40' y1='5.6' x2='100%25' y2='5.2' stroke-width='0.9' pathLength='1000' stroke-dasharray='0 60 220 90 300 330' stroke-opacity='.8'/></g></svg>");
  /* Baked-colour versions for use as background images, when an element's pseudo-elements are taken. */
  --ink-rule-brown: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='6' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='4' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='2' result='g'/><feDisplacementMap in='d' in2='g' scale='1.4'/></filter><g filter='url(%23r)' fill='none' stroke='rgba(60,40,22,.72)' stroke-linecap='round'><line x1='4' y1='5' x2='100%25' y2='5.4' stroke-width='1.5' pathLength='1000' stroke-dasharray='380 5 603 1000'/><line x1='40' y1='5.6' x2='100%25' y2='5.2' stroke-width='0.9' pathLength='1000' stroke-dasharray='0 60 220 90 300 330' stroke-opacity='.8'/></g></svg>");
  --ink-rule-brown-b: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='14' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='4' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='8' result='g'/><feDisplacementMap in='d' in2='g' scale='1.4'/></filter><g filter='url(%23r)' fill='none' stroke='rgba(60,40,22,.72)' stroke-linecap='round'><line x1='4' y1='5' x2='100%25' y2='5.4' stroke-width='1.5' pathLength='1000' stroke-dasharray='380 5 603 1000'/><line x1='40' y1='5.6' x2='100%25' y2='5.2' stroke-width='0.9' pathLength='1000' stroke-dasharray='0 60 220 90 300 330' stroke-opacity='.8'/></g></svg>");
  --ink-rule-faint: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='6' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='4' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='2' result='g'/><feDisplacementMap in='d' in2='g' scale='1.4'/></filter><g filter='url(%23r)' fill='none' stroke='rgba(110,84,52,.55)' stroke-linecap='round'><line x1='4' y1='5' x2='100%25' y2='5.4' stroke-width='1.3' pathLength='1000' stroke-dasharray='380 5 603 1000'/><line x1='40' y1='5.6' x2='100%25' y2='5.2' stroke-width='0.78' pathLength='1000' stroke-dasharray='0 60 220 90 300 330' stroke-opacity='.8'/></g></svg>");
  --ink-rule-faint-b: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='14' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='4' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='8' result='g'/><feDisplacementMap in='d' in2='g' scale='1.4'/></filter><g filter='url(%23r)' fill='none' stroke='rgba(110,84,52,.55)' stroke-linecap='round'><line x1='4' y1='5' x2='100%25' y2='5.4' stroke-width='1.3' pathLength='1000' stroke-dasharray='380 5 603 1000'/><line x1='40' y1='5.6' x2='100%25' y2='5.2' stroke-width='0.78' pathLength='1000' stroke-dasharray='0 60 220 90 300 330' stroke-opacity='.8'/></g></svg>");
  --ink-rule-gold: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='6' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='4' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='2' result='g'/><feDisplacementMap in='d' in2='g' scale='1.4'/></filter><g filter='url(%23r)' fill='none' stroke='rgba(160,114,30,.85)' stroke-linecap='round'><line x1='4' y1='5' x2='100%25' y2='5.4' stroke-width='1.6' pathLength='1000' stroke-dasharray='380 5 603 1000'/><line x1='40' y1='5.6' x2='100%25' y2='5.2' stroke-width='0.96' pathLength='1000' stroke-dasharray='0 60 220 90 300 330' stroke-opacity='.8'/></g></svg>");
  --ink-rule-gold-b: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='14' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='4' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='8' result='g'/><feDisplacementMap in='d' in2='g' scale='1.4'/></filter><g filter='url(%23r)' fill='none' stroke='rgba(160,114,30,.85)' stroke-linecap='round'><line x1='4' y1='5' x2='100%25' y2='5.4' stroke-width='1.6' pathLength='1000' stroke-dasharray='380 5 603 1000'/><line x1='40' y1='5.6' x2='100%25' y2='5.2' stroke-width='0.96' pathLength='1000' stroke-dasharray='0 60 220 90 300 330' stroke-opacity='.8'/></g></svg>");
  --ink-frame-brown: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='5' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='5' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='9' result='g'/><feDisplacementMap in='d' in2='g' scale='1.6'/></filter><g filter='url(%23r)' fill='none' stroke='rgba(60,40,22,.75)' stroke-linecap='round'><rect x='5' y='5' rx='12' pathLength='1000' style='width:calc(100%25 - 10px);height:calc(100%25 - 10px)' stroke-width='1.5' stroke-dasharray='470 6 520 4' stroke-dashoffset='-30'/><rect x='5.6' y='4.5' rx='13' pathLength='1000' style='width:calc(100%25 - 11px);height:calc(100%25 - 9.4px)' stroke-width='1.08' stroke-dasharray='0 40 160 70 120 110 200 60 150 90' stroke-opacity='.8'/></g></svg>");
  --ink-frame-brown-b: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='12' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='5' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='3' result='g'/><feDisplacementMap in='d' in2='g' scale='1.6'/></filter><g filter='url(%23r)' fill='none' stroke='rgba(60,40,22,.75)' stroke-linecap='round'><rect x='5' y='5' rx='12' pathLength='1000' style='width:calc(100%25 - 10px);height:calc(100%25 - 10px)' stroke-width='1.5' stroke-dasharray='300 5 690 5' stroke-dashoffset='-610'/><rect x='5.6' y='4.5' rx='13' pathLength='1000' style='width:calc(100%25 - 11px);height:calc(100%25 - 9.4px)' stroke-width='1.08' stroke-dasharray='0 90 210 40 170 130 140 80 120 20' stroke-opacity='.8'/></g></svg>");
  --ink-frame-brown-bold: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='5' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='5' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='9' result='g'/><feDisplacementMap in='d' in2='g' scale='1.6'/></filter><g filter='url(%23r)' fill='none' stroke='rgba(43,28,14,.95)' stroke-linecap='round'><rect x='5' y='5' rx='12' pathLength='1000' style='width:calc(100%25 - 10px);height:calc(100%25 - 10px)' stroke-width='2.3' stroke-dasharray='470 6 520 4' stroke-dashoffset='-30'/><rect x='5.6' y='4.5' rx='13' pathLength='1000' style='width:calc(100%25 - 11px);height:calc(100%25 - 9.4px)' stroke-width='1.66' stroke-dasharray='0 40 160 70 120 110 200 60 150 90' stroke-opacity='.8'/></g></svg>");
  --ink-vrule-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='3' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='4' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='5' result='g'/><feDisplacementMap in='d' in2='g' scale='1.4'/></filter><g filter='url(%23r)' fill='none' stroke='rgba(48,38,27,.85)' stroke-linecap='round'><line x1='5' y1='2' x2='5.3' y2='100%25' stroke-width='1.8' pathLength='1000' stroke-dasharray='520 4 474 1000'/><line x1='5.6' y1='30' x2='5' y2='100%25' stroke-width='1.08' pathLength='1000' stroke-dasharray='0 40 260 120 330 250' stroke-opacity='.8'/></g></svg>");
  --ink-vrule-dark-b: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='19' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='4' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='11' result='g'/><feDisplacementMap in='d' in2='g' scale='1.4'/></filter><g filter='url(%23r)' fill='none' stroke='rgba(48,38,27,.85)' stroke-linecap='round'><line x1='5' y1='2' x2='5.3' y2='100%25' stroke-width='1.8' pathLength='1000' stroke-dasharray='520 4 474 1000'/><line x1='5.6' y1='30' x2='5' y2='100%25' stroke-width='1.08' pathLength='1000' stroke-dasharray='0 40 260 120 330 250' stroke-opacity='.8'/></g></svg>");
  --ink-vrule-brown: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='3' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='4' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='5' result='g'/><feDisplacementMap in='d' in2='g' scale='1.4'/></filter><g filter='url(%23r)' fill='none' stroke='rgba(60,40,22,.72)' stroke-linecap='round'><line x1='5' y1='2' x2='5.3' y2='100%25' stroke-width='1.5' pathLength='1000' stroke-dasharray='520 4 474 1000'/><line x1='5.6' y1='30' x2='5' y2='100%25' stroke-width='0.9' pathLength='1000' stroke-dasharray='0 40 260 120 330 250' stroke-opacity='.8'/></g></svg>");
  --ink-vrule-brown-b: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='19' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='4' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='11' result='g'/><feDisplacementMap in='d' in2='g' scale='1.4'/></filter><g filter='url(%23r)' fill='none' stroke='rgba(60,40,22,.72)' stroke-linecap='round'><line x1='5' y1='2' x2='5.3' y2='100%25' stroke-width='1.5' pathLength='1000' stroke-dasharray='520 4 474 1000'/><line x1='5.6' y1='30' x2='5' y2='100%25' stroke-width='0.9' pathLength='1000' stroke-dasharray='0 40 260 120 330 250' stroke-opacity='.8'/></g></svg>");
  --ink-vrule-gold: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='7' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='4' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='13' result='g'/><feDisplacementMap in='d' in2='g' scale='1.4'/></filter><g filter='url(%23r)' fill='none' stroke='rgba(160,114,30,.7)' stroke-linecap='round'><line x1='5' y1='2' x2='5.3' y2='100%25' stroke-width='1.3' pathLength='1000' stroke-dasharray='520 4 474 1000'/><line x1='5.6' y1='30' x2='5' y2='100%25' stroke-width='0.78' pathLength='1000' stroke-dasharray='0 40 260 120 330 250' stroke-opacity='.8'/></g></svg>");
  --ink-frame-round: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='8' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='5' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='4' result='g'/><feDisplacementMap in='d' in2='g' scale='1.6'/></filter><g filter='url(%23r)' fill='none' stroke='black' stroke-linecap='round'><rect x='5' y='5' rx='30' pathLength='1000' style='width:calc(100%25 - 10px);height:calc(100%25 - 10px)' stroke-width='1.5' stroke-dasharray='560 6 434' stroke-dashoffset='-80'/><rect x='5.6' y='4.5' rx='31' pathLength='1000' style='width:calc(100%25 - 11px);height:calc(100%25 - 9.4px)' stroke-width='1.08' stroke-dasharray='0 40 160 70 120 110 200 60 150 90' stroke-opacity='.8'/></g></svg>");
  --ink-frame-soft: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='16' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='5' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='6' result='g'/><feDisplacementMap in='d' in2='g' scale='1.6'/></filter><g filter='url(%23r)' fill='none' stroke='black' stroke-linecap='round'><rect x='5' y='5' rx='20' pathLength='1000' style='width:calc(100%25 - 10px);height:calc(100%25 - 10px)' stroke-width='1.5' stroke-dasharray='380 5 615' stroke-dashoffset='-200'/><rect x='5.6' y='4.5' rx='21' pathLength='1000' style='width:calc(100%25 - 11px);height:calc(100%25 - 9.4px)' stroke-width='1.08' stroke-dasharray='0 40 160 70 120 110 200 60 150 90' stroke-opacity='.8'/></g></svg>");
  --ink-vrule: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='3' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='4' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='5' result='g'/><feDisplacementMap in='d' in2='g' scale='1.4'/></filter><g filter='url(%23r)' fill='none' stroke='black' stroke-linecap='round'><line x1='5' y1='2' x2='5.3' y2='100%25' stroke-width='1.8' pathLength='1000' stroke-dasharray='520 4 474 1000'/><line x1='5.6' y1='30' x2='5' y2='100%25' stroke-width='1.08' pathLength='1000' stroke-dasharray='0 40 260 120 330 250' stroke-opacity='.8'/></g></svg>");
  /* Rings: quill circles that fill a square box, for round tables, roses and discs. */
  --ink-ring: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='9' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='6' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='2' result='g'/><feDisplacementMap in='d' in2='g' scale='1.6'/></filter><g filter='url(%23r)' fill='none' stroke='black' stroke-linecap='round'><circle cx='50%25' cy='50%25' r='47%25' stroke-width='1.8'/></g></svg>");
  --ink-ring-b: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='17' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='6' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='6' result='g'/><feDisplacementMap in='d' in2='g' scale='1.6'/></filter><g filter='url(%23r)' fill='none' stroke='black' stroke-linecap='round'><circle cx='50%25' cy='50%25' r='45.5%25' stroke-width='1.2'/></g></svg>");
  --ink-ring-parts: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='4' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='6' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='12' result='g'/><feDisplacementMap in='d' in2='g' scale='1.6'/></filter><g filter='url(%23r)' fill='none' stroke='black' stroke-linecap='round'><circle cx='50%25' cy='50%25' r='47%25' stroke-width='2.6' pathLength='1000' stroke-dasharray='192 8' stroke-dashoffset='-96'/></g></svg>");
  --ink-tick: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M6.3 11.6 C 7.6 12.6, 8.8 14, 9.7 15.6 C 11.4 11.6, 13.6 8.6, 16.6 6.2' fill='none' stroke='rgba(43,28,14,.95)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --ink-corner-tl: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='4' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='2.2' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='7' result='g'/><feDisplacementMap in='d' in2='g' scale='1.2'/></filter><g filter='url(%23r)' transform='rotate(0 17 17)' fill='none' stroke='black' stroke-linecap='round'><path d='M3 31 C 3 18, 5 7, 12 4.5 S 26 3, 31 3.2' stroke-width='1.6'/><path d='M8 24 C 8.5 15, 11 10, 17 9' stroke-width='.9' stroke-opacity='.75'/><circle cx='3.2' cy='31.5' r='1.1' fill='black' stroke='none'/><circle cx='31.5' cy='3.2' r='1.1' fill='black' stroke='none'/></g></svg>");
  --ink-corner-tr: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='4' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='2.2' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='7' result='g'/><feDisplacementMap in='d' in2='g' scale='1.2'/></filter><g filter='url(%23r)' transform='rotate(90 17 17)' fill='none' stroke='black' stroke-linecap='round'><path d='M3 31 C 3 18, 5 7, 12 4.5 S 26 3, 31 3.2' stroke-width='1.6'/><path d='M8 24 C 8.5 15, 11 10, 17 9' stroke-width='.9' stroke-opacity='.75'/><circle cx='3.2' cy='31.5' r='1.1' fill='black' stroke='none'/><circle cx='31.5' cy='3.2' r='1.1' fill='black' stroke='none'/></g></svg>");
  --ink-corner-br: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='4' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='2.2' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='7' result='g'/><feDisplacementMap in='d' in2='g' scale='1.2'/></filter><g filter='url(%23r)' transform='rotate(180 17 17)' fill='none' stroke='black' stroke-linecap='round'><path d='M3 31 C 3 18, 5 7, 12 4.5 S 26 3, 31 3.2' stroke-width='1.6'/><path d='M8 24 C 8.5 15, 11 10, 17 9' stroke-width='.9' stroke-opacity='.75'/><circle cx='3.2' cy='31.5' r='1.1' fill='black' stroke='none'/><circle cx='31.5' cy='3.2' r='1.1' fill='black' stroke='none'/></g></svg>");
  --ink-corner-bl: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'><filter id='r' x='-4%25' y='-4%25' width='108%25' height='108%25'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='4' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='2.2' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' seed='7' result='g'/><feDisplacementMap in='d' in2='g' scale='1.2'/></filter><g filter='url(%23r)' transform='rotate(270 17 17)' fill='none' stroke='black' stroke-linecap='round'><path d='M3 31 C 3 18, 5 7, 12 4.5 S 26 3, 31 3.2' stroke-width='1.6'/><path d='M8 24 C 8.5 15, 11 10, 17 9' stroke-width='.9' stroke-opacity='.75'/><circle cx='3.2' cy='31.5' r='1.1' fill='black' stroke='none'/><circle cx='31.5' cy='3.2' r='1.1' fill='black' stroke='none'/></g></svg>");
  --ink-swash-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><path d='M1 5.2 C 12 3.1, 25 6.4, 38 4.6 S 62 3.2, 76 5.1 S 92 4.2, 99 3.4' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round'/></svg>");
  --ink-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'><path d='M2.2 3.1 C 5 5.4, 7.6 8.6, 10.1 11.4 C 12.4 8.3, 15 5.6, 17.9 2.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* .ink-frame: a quill-drawn outline with a soft, uneven ink radius. No fill. */
.ink-frame { position: relative; background: none; border: 0; }
.ink-frame::before {
  content: ""; position: absolute; inset: var(--ink-out, -4px); pointer-events: none; z-index: 0;
  background-color: var(--ink-frame-color, var(--ink-line));
  -webkit-mask: var(--ink-frame-mask, var(--ink-frame-a)) 0 0 / 100% 100% no-repeat;
          mask: var(--ink-frame-mask, var(--ink-frame-a)) 0 0 / 100% 100% no-repeat;
  transition: background-color .2s ease;
}
.ink-frame.ink-b, .ink-frame:nth-of-type(3n+2) { --ink-frame-mask: var(--ink-frame-b); }
.ink-frame.ink-c, .ink-frame:nth-of-type(3n) { --ink-frame-mask: var(--ink-frame-c); }
.ink-frame.ink-a { --ink-frame-mask: var(--ink-frame-a); }
/* Tinted inks follow the text colour of the element. */
.ink-frame.ink-current { --ink-frame-color: currentColor; }

/* Interactive frames: hover and press darken and thicken the ink; focus shows a bold dark frame. Never a fill. */
.ink-btn { cursor: pointer; background: none; border: 0; font: inherit; color: inherit; }
.ink-btn:hover::before, .ink-btn[aria-pressed="true"]::before, .ink-btn.is-on::before, .ink-btn:active::before {
  --ink-frame-color: var(--ink-line-strong); --ink-frame-mask: var(--ink-frame-bold); }
.ink-btn:focus-visible { outline: none; }
.ink-btn:focus-visible::before { --ink-frame-color: var(--ink-line-strong); --ink-frame-mask: var(--ink-frame-bold); inset: calc(var(--ink-out, -4px) - 3px); }

/* .ink-focus: no frame at rest; keyboard focus draws a bold dark quill frame (in ::after). For bare buttons and links. */
:where(.ink-focus) { position: relative; }
.ink-focus:focus-visible { outline: none; }
.ink-focus:focus-visible::after { content: ""; position: absolute; inset: var(--ink-focus-out, -2px); pointer-events: none; z-index: 5;
  background-color: var(--ink-line-strong);
  -webkit-mask: var(--ink-frame-bold) 0 0 / 100% 100% no-repeat; mask: var(--ink-frame-bold) 0 0 / 100% 100% no-repeat; }

/* .ink-rule: a hand-drawn horizontal line (<hr class="ink-rule">, <span class="ink-rule">), coloured by --ink-rule-color.
   .ink-rule-top / .ink-rule-bottom draw it along a block's edge as a background image, leaving the pseudo-elements free. */
.ink-rule { display: block; height: 10px; border: 0; margin: 10px 0; background: none; position: relative; }
.ink-rule::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; pointer-events: none;
  background-color: var(--ink-rule-color, var(--ink-line));
  -webkit-mask: var(--ink-rule-mask, var(--ink-rule-a)) 0 0 / 100% 100% no-repeat;
          mask: var(--ink-rule-mask, var(--ink-rule-a)) 0 0 / 100% 100% no-repeat;
}
.ink-rule.ink-b::before { --ink-rule-mask: var(--ink-rule-b); }
.ink-rule-top { background: var(--ink-rule-brown) top center / 100% 10px no-repeat; border-top: 0; box-shadow: none; }
.ink-rule-bottom { background: var(--ink-rule-brown-b) bottom center / 100% 10px no-repeat; border-bottom: 0; box-shadow: none; }
.ink-rule-top.ink-rule-bottom { background: var(--ink-rule-brown) top center / 100% 10px no-repeat, var(--ink-rule-brown-b) bottom center / 100% 10px no-repeat; }

/* .ink-bracket: quill flourishes at the four corners only, for lighter framing. */
.ink-bracket { position: relative; background: none; border: 0; }
.ink-bracket::after {
  content: ""; position: absolute; inset: var(--ink-out, -6px); pointer-events: none;
  background-color: var(--ink-frame-color, var(--ink-line));
  -webkit-mask: var(--ink-corner-tl) top left / 34px 34px no-repeat, var(--ink-corner-tr) top right / 34px 34px no-repeat,
                var(--ink-corner-br) bottom right / 34px 34px no-repeat, var(--ink-corner-bl) bottom left / 34px 34px no-repeat;
          mask: var(--ink-corner-tl) top left / 34px 34px no-repeat, var(--ink-corner-tr) top right / 34px 34px no-repeat,
                var(--ink-corner-br) bottom right / 34px 34px no-repeat, var(--ink-corner-bl) bottom left / 34px 34px no-repeat;
}

/* .ink-under: the same pen swash as .lbl, for links such as the skip link. */
:where(.ink-under) { position: relative; }
.ink-under { text-decoration: none; }
.ink-under::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: -3px; height: 7px; background-color: currentColor; opacity: .6;
  -webkit-mask: var(--ink-swash-mask) center / 100% 100% no-repeat; mask: var(--ink-swash-mask) center / 100% 100% no-repeat; transition: opacity .2s; }
.ink-under:hover::after, .ink-under:focus-visible::after { opacity: 1; }

/* .ink-check: a checkbox drawn as a small quill ring, ticked in ink when checked. */
.ink-check { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 0; flex: none; vertical-align: middle; cursor: pointer;
  background: var(--ink-frame-brown) 0 0 / 100% 100% no-repeat; border: 0; }
.ink-check:checked { background: var(--ink-tick) 0 0 / 100% 100% no-repeat, var(--ink-frame-brown) 0 0 / 100% 100% no-repeat; }
.ink-check:focus-visible { outline: none; background-image: var(--ink-frame-brown-bold); }
.ink-check:checked:focus-visible { background-image: var(--ink-tick), var(--ink-frame-brown-bold); }

/* Shared overrides for parchment.css pieces that were chips or boxes. */
/* The skip link rides at the top of the page (absolute, not fixed) so bare ink text never sits over content while scrolling. */
a.skip { position: absolute; background: none; border: 0; box-shadow: none; padding: 2px 2px 4px; color: var(--ink); opacity: 1; text-shadow: 0 0 6px rgba(228,214,187,.9); }
a.skip:hover, a.skip:focus-visible { color: var(--brick); outline: none; }
.seal-badge { background: none; border: 0; border-radius: 0; padding: 3px 11px; position: relative; }
.seal-badge::before {
  content: ""; position: absolute; inset: -2px; pointer-events: none; background-color: currentColor; opacity: .7;
  -webkit-mask: var(--ink-frame-b) 0 0 / 100% 100% no-repeat; mask: var(--ink-frame-b) 0 0 / 100% 100% no-repeat; }
.seal-badge.caveat, .seal-badge.unsupported { background: none; }
/* The hero cue arrow: a drawn chevron, not a bent border. */
.dh-cue::after { border: 0 !important; transform: none; width: .95em; height: .66em; background-color: currentColor;
  -webkit-mask: var(--ink-chevron) center / contain no-repeat; mask: var(--ink-chevron) center / contain no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes ink-cue-bob { 50% { transform: translateY(.3em); } }
  .dh-cue::after { animation: ink-cue-bob 2.2s ease-in-out infinite !important; }
}
.dh-cue:focus-visible { outline: none; }
.dh-cue:focus-visible::before { content: ""; position: absolute; inset: -8px -14px; pointer-events: none; background-color: var(--ink-line-strong);
  -webkit-mask: var(--ink-frame-bold) 0 0 / 100% 100% no-repeat; mask: var(--ink-frame-bold) 0 0 / 100% 100% no-repeat; }
.dh-cue { position: relative; }