html {    
  --accent-light: color(display-p3 0.28898 0.61605 0.20681);
  --paper-light: hsl(30 100% 100%);
  --text-light: rgb(0, 0, 0);
  
  --gray-light: hsl(0 0% 48%);
  --gray-on-green-light: hsl(153.96 10% 50%);  
  
  
  --green-bk-light: hsl(153.96 100% 96.61%);
  
  --green-bk-light: url("data:image/svg+xml,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' result='noise'/><feColorMatrix in='noise' type='matrix' values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 1 0' result='monoNoise'/><feComponentTransfer in='monoNoise'><feFuncR type='table' tableValues='0.0000 0.5000 0.9322 0.9660 1.0000'/><feFuncG type='table' tableValues='0.4000 0.9000 1.0000 1.0000 1.0000'/><feFuncB type='table' tableValues='0.2264 0.7800 0.9706 0.9853 1.0000'/></feComponentTransfer></filter><rect width='100%' height='100%' fill='%23edfff7'/><rect width='100%' height='100%' filter='url(%23noiseFilter)'/></svg>");
  --green-bk-light-no-noise: hsl(153.96 100% 96.61%);
  

  
  /* --green-mid-bk: hsl(153.96 100% 94.61%); */
  --green-deep-bk-light-no-noise: hsl(153.96 100% 92.61%);
  
  --green-deep-bk-light: url("data:image/svg+xml,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' result='noise'/><feColorMatrix in='noise' type='matrix' values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 1 0' result='monoNoise'/><feComponentTransfer in='monoNoise'><feFuncR type='table' tableValues='0.0000 0.3800 0.8122 0.8460 1.0000'/><feFuncG type='table' tableValues='0.2800 0.7800 1.0000 1.0000 1.0000'/><feFuncB type='table' tableValues='0.1064 0.6600 0.9186 0.9332 1.0000'/></feComponentTransfer></filter><rect width='100%' height='100%' fill='%23cfffeb'/><rect width='100%' height='100%' filter='url(%23noiseFilter)'/></svg>");


  --gray-bk-light-no-noise: hsl(60 15% 97%);

  --gray-bk-light: url("data:image/svg+xml,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' result='noise'/><feColorMatrix in='noise' type='matrix' values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 1 0' result='monoNoise'/><feComponentTransfer in='monoNoise'><feFuncR type='table' tableValues='0.4723 0.7363 0.9683 0.9710 0.9739'/><feFuncG type='table' tableValues='0.4723 0.7363 0.9683 0.9710 0.9739'/><feFuncB type='table' tableValues='0.4420 0.6829 0.9591 0.9627 0.9667'/></feComponentTransfer></filter><rect width='100%' height='100%' fill='%23fdfdfb'/><rect width='100%' height='100%' filter='url(%23noiseFilter)'/></svg>");


  /* --green-deep-bk: hsl(37 20% 92%); */
  
  /* white \ -green-bk-light with noise */
  --top-diagonal-positive-green-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cfilter id='n' x='0' y='0' width='200' height='200' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0' result='monoNoise'/%3E%3CfeComponentTransfer in='monoNoise'%3E%3CfeFuncR type='table' tableValues='0.0000 0.5000 0.9322 0.9660 1.0000'/%3E%3CfeFuncG type='table' tableValues='0.4000 0.9000 1.0000 1.0000 1.0000'/%3E%3CfeFuncB type='table' tableValues='0.2264 0.7800 0.9706 0.9853 1.0000'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cpattern id='p' width='200' height='200' patternUnits='userSpaceOnUse'%3E%3Crect width='200' height='200' fill='%23edfff7'/%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/pattern%3E%3CclipPath id='c' clipPathUnits='objectBoundingBox'%3E%3Cpolygon points='0,0 1,0 1,1'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23p)' clip-path='url(%23c)'/%3E%3Cline x1='0%25' y1='0%25' x2='100%25' y2='100%25' stroke='rgba(21,159,0,0.3)' stroke-width='.5'/%3E%3C/svg%3E");
  
  
  /* white / --green-bk-light with noise */
  --top-diagonal-negative-green-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cfilter id='n' x='0' y='0' width='200' height='200' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0' result='monoNoise'/%3E%3CfeComponentTransfer in='monoNoise'%3E%3CfeFuncR type='table' tableValues='0.0000 0.5000 0.9322 0.9660 1.0000'/%3E%3CfeFuncG type='table' tableValues='0.4000 0.9000 1.0000 1.0000 1.0000'/%3E%3CfeFuncB type='table' tableValues='0.2264 0.7800 0.9706 0.9853 1.0000'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cpattern id='p' width='200' height='200' patternUnits='userSpaceOnUse'%3E%3Crect width='200' height='200' fill='%23edfff7'/%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/pattern%3E%3CclipPath id='c' clipPathUnits='objectBoundingBox'%3E%3Cpolygon points='0,0 1,0 0,1'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23p)' clip-path='url(%23c)'/%3E%3Cline x1='0%25' y1='100%25' x2='100%25' y2='0%25' stroke='rgba(21,159,0,0.3)' stroke-width='.5'/%3E%3C/svg%3E");
  
  --top-diagonal-positive-paper-light: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><polygon points="0,0 100,0 100,100" fill="white"/><line x1="0" y1="0" x2="100" y2="100" stroke="rgba(21, 159, 0, 30%)" stroke-width="1" vector-effect="non-scaling-stroke"/></svg>');
  --top-diagonal-negative-paper-light: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><polygon points="0,0 100,0 0,100" fill="white"/><line x1="0" y1="100" x2="100" y2="0" stroke="rgba(21, 159, 0, 30%)" stroke-width="1" vector-effect="non-scaling-stroke"/></svg>');      

  
  --accent-dark: hsl(163 80% 41%);
  --paper-dark: hsl(163 10% 6%);
  --text-dark: hsl(0 0% 90%);
  
  --gray-dark: hsl(163 4% 50%);
  --gray-on-green-dark: hsl(163 15% 43%);

  --green-bk-dark-no-noise: hsl(163 70% 8.61%);
  
  --green-bk-dark: url("data:image/svg+xml,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' result='noise'/><feColorMatrix in='noise' type='matrix' values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 1 0' result='monoNoise'/><feComponentTransfer in='monoNoise'><feFuncR type='table' tableValues='0.0042 0.0044 0.0045 0.0048 0.0050'/><feFuncG type='table' tableValues='0.0477 0.0491 0.0503 0.0517 0.0531'/><feFuncB type='table' tableValues='0.0302 0.0309 0.0316 0.0324 0.0332'/></feComponentTransfer></filter><rect width='100%' height='100%' fill='%23010d08'/><rect width='100%' height='100%' filter='url(%23noiseFilter)'/></svg>");

  
  --green-deep-bk-dark-no-noise: hsl(163 70% 12.11%);

  --green-deep-bk-dark: url("data:image/svg+xml,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' result='noise'/><feColorMatrix in='noise' type='matrix' values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 1 0' result='monoNoise'/><feComponentTransfer in='monoNoise'><feFuncR type='table' tableValues='0.0085 0.0089 0.0091 0.0097 0.0101'/><feFuncG type='table' tableValues='0.0903 0.0929 0.0952 0.0978 0.1005'/><feFuncB type='table' tableValues='0.0562 0.0575 0.0588 0.0603 0.0618'/><feFuncA type='linear' slope='0.6700' intercept='0.1650'/></feComponentTransfer></filter><rect width='100%' height='100%' fill='%2301120b'/><rect width='100%' height='100%' filter='url(%23noiseFilter)'/></svg>");


  --gray-bk-dark-no-noise: hsl(163 5% 12%);
  
  --gray-bk-dark: url("data:image/svg+xml,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' result='noise'/><feColorMatrix in='noise' type='matrix' values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 1 0' result='monoNoise'/><feComponentTransfer in='monoNoise'><feFuncR type='table' tableValues='0.0000 0.0017 0.0137 0.0138 0.0140'/><feFuncG type='table' tableValues='0.0000 0.0022 0.0155 0.0156 0.0158'/><feFuncB type='table' tableValues='0.0000 0.0000 0.0154 0.0157 0.0160'/></feComponentTransfer></filter><rect width='100%' height='100%' fill='%23212524'/><rect width='100%' height='100%' filter='url(%23noiseFilter)'/></svg>");



  --top-diagonal-positive-green-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><polygon points="0,0 100,0 100,100" fill="hsl(163 70% 8.61%)"/><line x1="0" y1="0" x2="100" y2="100" stroke="rgba(19, 189, 141, 80%)" stroke-width=".5" vector-effect="non-scaling-stroke"/></svg>'); 
  
  --top-diagonal-positive-green-dark: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cfilter id='n' x='0' y='0' width='200' height='200' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0' result='monoNoise'/%3E%3CfeComponentTransfer in='monoNoise'%3E%3CfeFuncR type='table' tableValues='0.0042 0.0044 0.0045 0.0048 0.0050'/%3E%3CfeFuncG type='table' tableValues='0.0477 0.0491 0.0503 0.0517 0.0531'/%3E%3CfeFuncB type='table' tableValues='0.0302 0.0309 0.0316 0.0324 0.0332'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cpattern id='p' width='200' height='200' patternUnits='userSpaceOnUse'%3E%3Crect width='200' height='200' fill='%23010d08'/%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/pattern%3E%3CclipPath id='c' clipPathUnits='objectBoundingBox'%3E%3Cpolygon points='0,0 1,0 1,1'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23p)' clip-path='url(%23c)'/%3E%3Cline x1='0%25' y1='0%25' x2='100%25' y2='100%25' stroke='rgba(19,189,141,0.2)' stroke-width='1'/%3E%3C/svg%3E"); 
  
   
  --top-diagonal-negative-green-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><polygon points="0,0 100,0 0,100" fill="hsl(163 70% 8.61%)"/><line x1="0" y1="100" x2="100" y2="0" stroke="rgba(19, 189, 141, 80%)" stroke-width=".5" vector-effect="non-scaling-stroke"/></svg>');      
  --top-diagonal-negative-green-dark: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cfilter id='n' x='0' y='0' width='200' height='200' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0' result='monoNoise'/%3E%3CfeComponentTransfer in='monoNoise'%3E%3CfeFuncR type='table' tableValues='0.0042 0.0044 0.0045 0.0048 0.0050'/%3E%3CfeFuncG type='table' tableValues='0.0477 0.0491 0.0503 0.0517 0.0531'/%3E%3CfeFuncB type='table' tableValues='0.0302 0.0309 0.0316 0.0324 0.0332'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cpattern id='p' width='200' height='200' patternUnits='userSpaceOnUse'%3E%3Crect width='200' height='200' fill='%23010d08'/%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/pattern%3E%3CclipPath id='c' clipPathUnits='objectBoundingBox'%3E%3Cpolygon points='0,0 1,0 0,1'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23p)' clip-path='url(%23c)'/%3E%3Cline x1='0%25' y1='100%25' x2='100%25' y2='0%25' stroke='rgba(19,189,141,0.2)' stroke-width='1'/%3E%3C/svg%3E"); 

  
  --top-diagonal-positive-paper-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><polygon points="0,0 100,0 100,100" fill="hsl(163 10% 6%)"/><line x1="0" y1="0" x2="100" y2="100" stroke="rgba(19, 189, 141, 80%)" stroke-width=".5" vector-effect="non-scaling-stroke"/></svg>');
  --top-diagonal-negative-paper-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><polygon points="0,0 100,0 0,100" fill="hsl(163 10% 6%)"/><line x1="0" y1="100" x2="100" y2="0" stroke="rgba(19, 189, 141, 80%)" stroke-width=".5" vector-effect="non-scaling-stroke"/></svg>');      




  --accent-very-faint-mix: 85%;
  --accent-faint-mix-light: 75%;
  --gray-very-faint-mix: 85%;
  --gray-faint-mix: 70%;
  --gray-half-mix: 50%;
  


  /* Dark */
  --accent-faint-mix-dark: 80%;



  
  --font-body: 'UnsungSymbolsFallback', 'Warbler', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  --font-sans-serif: 'Bild', 'PixelFontFallbackMac', 'PixelFontFallbackWindows', system-ui, sans-serif;
  
  --focus-highlight: color-mix(in srgb, transparent, var(--accent) 20%);
  --selection-highlight:  color-mix(in srgb, transparent, var(--accent) 40%);
  
  --bezier: cubic-bezier(1, -0.03, .02, 1.02);
}

::selection {
  background: var(--selection-highlight);
}

:focus-visible {
  outline: .15em solid var(--focus-highlight);
  outline-offset: .15em;
}
.prevent-focus-visible {
  outline: none;
}

html {
  --max-text-width: calc(34 * var(--font-size-body)); /* ~750px on big */
  
  --noise-background-size: 200px;
  @media (-webkit-max-device-pixel-ratio: 1.49), (max-resolution: 1.49dppx) {
    --noise-background-size: 100px;  
  }
}


@media (width > 767px) {
  html {
    --font-size-sans-serif: 20px;
    --font-size-body: 22px;
    --font-size-tag: 18px;
    --font-size-hint: 16px; 
    --font-size-headline: 55px;
    --font-size-tiny: 14px;
    --margin: 16px;
    
    --viewport-margin-left: calc(12 * 16px);
    --viewport-margin-left-inset: 0;
    --viewport-margin-right: calc(6 * 16px);
  }
}

@media (width <= 1150px) {
  html {
    --viewport-margin-left: calc(6 * 16px);    
    --viewport-margin-right: calc(9 * 16px);
  }
}


@media (width <= 767px) {
  html {
    --font-size-sans-serif: 16px;
    --font-size-body: 18px;
    --font-size-tag: 16px;
    --font-size-hint: 14px; 
    --font-size-headline: 34px;
    --font-size-tiny: 13px;
    --margin: 12px;


    --viewport-margin-left: calc(2 * 12px);
    --viewport-margin-left-inset: 0;
    --viewport-margin-right: calc(4 * 12px);
  }
}


/* Light */
html {
  --accent: var(--accent-light);
  --paper: var(--paper-light);
  --text: var(--text-light);
  --gray: var(--gray-light);
  --gray-on-green: var(--gray-on-green-light);
  
  --gray-bk: var(--gray-bk-light);
  --gray-bk-no-noise: var(--gray-bk-light-no-noise);
  --green-bk: var(--green-bk-light);
  --green-bk-no-noise: var(--green-bk-light-no-noise);
  --green-deep-bk: var(--green-deep-bk-light);
  --green-deep-bk-no-noise: var(--green-deep-bk-light-no-noise);
  
  --top-diagonal-positive-green: var(--top-diagonal-positive-green-light);
  --top-diagonal-negative-green: var(--top-diagonal-negative-green-light);
  --top-diagonal-positive-paper: var(--top-diagonal-positive-paper-light);
  --top-diagonal-negative-paper: var(--top-diagonal-negative-paper-light);
  
  --accent-faint-mix: var(--accent-faint-mix-light);
}

/* Dark */
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
    --accent: var(--accent-dark);
    --paper: var(--paper-dark);
    --text: var(--text-dark);
    --gray: var(--gray-dark);
    --gray-on-green: var(--gray-on-green-dark);

    --gray-bk: var(--gray-bk-dark);
    --gray-bk-no-noise: var(--gray-bk-dark-no-noise);
    --green-bk: var(--green-bk-dark);
    --green-bk-no-noise: var(--green-bk-dark-no-noise);
    --green-deep-bk: var(--green-deep-bk-dark);
    --green-deep-bk-no-noise: var(--green-deep-bk-dark-no-noise);

    --top-diagonal-positive-green: var(--top-diagonal-positive-green-dark);
    --top-diagonal-negative-green: var(--top-diagonal-negative-green-dark);
    --top-diagonal-positive-paper: var(--top-diagonal-positive-paper-dark);
    --top-diagonal-negative-paper: var(--top-diagonal-negative-paper-dark);
    
    --accent-faint-mix: var(--accent-faint-mix-dark);
  }
}

html {
  --indent: calc(var(--margin) * 2);

  scrollbar-color: color-mix(in srgb, var(--accent), transparent 66%) var(--paper);
  /* scrollbar-width: thin; */
  
  /* --icon-close: url(/_unsung/icons/close.svg); */
  --icon-close: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 4L9.58579 9.58579C10.3668 10.3668 10.3668 11.6332 9.58579 12.4142L3.5 18.5C3.22386 18.7761 3.22386 19.2239 3.5 19.5C3.77614 19.7761 4.22386 19.7761 4.5 19.5L19 5C19.2761 4.72386 19.7239 4.72386 20 5C20.2761 5.27614 20.2761 5.72386 20 6L14.4142 11.5858C13.6332 12.3668 13.6332 13.6332 14.4142 14.4142L20 20" stroke="black" style="stroke:black;stroke-opacity:1;" stroke-width="1.2" stroke-linecap="round"/></svg>');

  
  /* --icon-search: url(/_unsung/icons/search.svg); */
  --icon-search: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.4849 16.4969C12.7163 16.7909 11.8819 16.952 11.0099 16.952C7.18259 16.952 4.07992 13.8493 4.07992 10.022C4.07992 6.19465 7.18259 3.09198 11.0099 3.09198C14.8373 3.09198 17.9399 6.19465 17.9399 10.022C17.9399 10.9111 17.7725 11.761 17.4675 12.5421C16.4405 15.1716 15.927 16.4864 16.0358 17.0058C16.1446 17.5252 16.6974 18.0779 17.8029 19.1835L19.9199 21.3005" stroke="black" style="stroke:black stroke-opacity:1;" stroke-width="1.2" stroke-linecap="round"/></svg>');

  /* --icon-email: url(/_unsung/icons/email.svg); */
  --icon-email: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.17414 5.69995L3.0463 14.6485C3.02174 16.3677 3.00946 17.2273 3.53819 17.7636C4.06691 18.3 4.92659 18.3 6.64593 18.3H17.2394C18.9256 18.3 19.7687 18.3 20.2951 17.7772C20.8215 17.2545 20.8275 16.4114 20.8394 14.7253L20.8654 11.0303C20.8759 9.55016 20.8811 8.81011 20.4076 8.55235C19.9342 8.2946 19.3155 8.70061 18.078 9.51263L14.63 11.7751C13.1657 12.736 12.4335 13.2164 11.6623 13.0884C10.8911 12.9603 10.3534 12.2691 9.27815 10.8865L6.3739 7.1525C5.88236 6.52052 5.63659 6.20453 5.75999 5.95224C5.88338 5.69995 6.28369 5.69995 7.08432 5.69995H20.5441" stroke="black" style="stroke:black;stroke-opacity:1;" stroke-width="1.2" stroke-linecap="round"/></svg>');

  /* --icon-mastodon: url(/_unsung/icons/mastodon.svg); */
  --icon-mastodon: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.59006 14.7869C8.59006 14.7869 10.1276 15.1631 12.0768 15.2525C13.2686 15.3072 14.3857 15.183 15.5211 15.0475C19.6794 14.5514 20.2326 13.1015 20.1771 9.05046C20.1771 5.28136 17.7075 4.1773 17.7075 4.1773C16.0058 3.39591 13.8864 3.34686 12.0491 3.34686C7.99907 3.38012 3.97663 4.02723 3.97663 9.05046C3.97663 12.8583 3.42213 19.0296 8.0706 20.2596C9.642 20.6757 10.991 20.7626 12.0768 20.7026C13.1074 20.6454 13.9015 20.4557 14.4245 20.2878C14.8824 20.1408 15.1448 19.6965 15.1321 19.2157C15.1098 18.37 14.2743 17.7602 13.434 17.8581C13.0261 17.9056 12.57 17.9338 12.0986 17.9177C11.324 17.8911 10.5283 17.8496 9.8911 17.5821" stroke="black" style="stroke:black;stroke-opacity:1;" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="bevel"/></svg>');

  /* --icon-rss: url(/_unsung/icons/rss.svg); */
  --icon-rss: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.6501 19.1496C19.6501 9.86736 14.2466 4.57347 6.16337 3.89568C5.16493 3.81196 4.35001 4.63352 4.35 5.63546C4.34999 6.63742 5.16627 7.43564 6.15893 7.57187C11.2415 8.26943 15.2225 11.9098 15.9358 17.3644C16.0642 18.3458 15.2509 19.1546 14.2611 19.1607C13.2627 19.1669 12.4716 18.3522 12.293 17.3698C11.6788 13.9895 9.31466 11.8006 6.14096 11.2105C5.16359 11.0288 4.35003 11.8555 4.35003 12.8496C4.35003 13.8437 5.18274 14.6049 6.11689 14.9449C7.21399 15.3442 8.03865 16.131 8.48214 17.1964C8.90662 18.2162 7.95459 19.1496 6.85001 19.1496L4.35003 19.1496" stroke="black" style="stroke:black;stroke-opacity:1;" stroke-width="1.2" stroke-linecap="round"/></svg>');

  
  /* --icon-bluesky: url(/_unsung/icons/bluesky.svg); */
  --icon-bluesky: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.869 18.8484C12.3287 17.8542 12.0035 15.2052 12.0013 15.5692C11.998 14.9972 10.5527 22.4607 6.227 17.9741C4.30227 15.9778 5.19346 13.9814 8.69688 13.3788C6.69259 13.7236 4.43939 13.1539 3.82115 10.9205C3.64326 10.278 3.33997 6.32091 3.33997 5.78627C3.33997 3.10892 5.66196 3.95031 7.0949 5.03774C9.08092 6.54479 11.2171 9.60046 12.0014 11.2403C12.7858 9.60058 14.9218 6.54476 16.9079 5.03774C18.3409 3.95031 20.6627 3.10892 20.6627 5.78627C20.6627 6.32097 20.3594 10.278 20.1816 10.9205C19.5632 13.1539 17.3101 13.7236 15.3058 13.3788C18.8092 13.9815 19.7004 15.9778 17.7757 17.9741C17.1916 18.58 16.66 18.9679 16.1773 19.1872" stroke="black" style="stroke:black;stroke-opacity:1;" stroke-width="1.2" stroke-miterlimit="16" stroke-linecap="round" stroke-linejoin="round"/></svg>');

  /* --icon-url: url(/_unsung/icons/url.svg); */
  --icon-url: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.95005 7.10006C4.52 7.10006 2.55005 9.07 2.55005 11.5001C2.55005 13.9301 4.52 15.9001 6.95005 15.9001L7.35307 15.8966C7.99101 15.8911 8.46079 15.2978 8.31977 14.6756L7.87679 12.7211C7.735 12.0955 8.21058 11.5001 8.85206 11.5001H15.2314C15.8453 11.5001 16.3143 10.952 16.2194 10.3455L15.8921 8.2536C15.7967 7.64361 16.2714 7.09373 16.8888 7.09907L17 7.10003C19.4301 7.10003 21.4 9.06998 21.4 11.5C21.4 13.9301 19.4301 15.9 17 15.9" stroke="black" style="stroke:black;stroke-opacity:1;" stroke-width="1.2" stroke-linecap="round"/></svg>');

  
  /* --icon-arrow-left: url(/_unsung/icons/arrow-left.svg); */
  --icon-arrow-left: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5 4L6.32842 9.17158C4.99509 10.5049 4.32843 11.1716 4.32843 12C4.32843 12.8284 4.99509 13.4951 6.32843 14.8284L11 19.5C11.2761 19.7761 11.7239 19.7761 12 19.5C12.2761 19.2239 12.2761 18.7761 12 18.5L10.4497 16.9497C9.17027 15.6703 8.53054 15.0305 8.39338 14.5056C8.16691 13.6387 8.54454 12.727 9.31763 12.2742C9.78583 12 10.6906 12 12.5 12H20" stroke="black" style="stroke:black;stroke-opacity:1;" stroke-width="1.2" stroke-linecap="round"/></svg>');

  
  /* --icon-arrow-right: url(/_unsung/icons/arrow-right.svg); */
  --icon-arrow-right: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 4L17.1716 9.17158C18.5049 10.5049 19.1716 11.1716 19.1716 12C19.1716 12.8284 18.5049 13.4951 17.1716 14.8284L12.5 19.5C12.2239 19.7761 11.7761 19.7761 11.5 19.5C11.2239 19.2239 11.2239 18.7761 11.5 18.5L13.0503 16.9497C14.3297 15.6703 14.9695 15.0305 15.1066 14.5056C15.3331 13.6387 14.9555 12.727 14.1824 12.2742C13.7142 12 12.8094 12 11 12H3.5" stroke="black" style="stroke:black;stroke-opacity:1;" stroke-width="1.2" stroke-linecap="round"/></svg>');


  /* --icon-arrow-blink-left: url(/_unsung/icons/arrow-blink-left.svg); */
  --icon-arrow-blink-left: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 14.25L8.92158 19.4216C10.2549 20.7549 10.9216 21.4216 11.75 21.4216C12.5784 21.4216 13.2451 20.7549 14.5784 19.4216L19.25 14.75C19.5261 14.4739 19.5261 14.0261 19.25 13.75C18.9739 13.4739 18.5261 13.4739 18.25 13.75L16.6997 15.3003C15.4203 16.5797 14.7805 17.2195 14.2556 17.3566C13.3887 17.5831 12.477 17.2055 12.0242 16.4324C11.75 15.9642 11.75 15.0594 11.75 13.25V9C11.75 6.17157 11.75 4.75736 12.6287 3.87868C13.5074 3 14.9216 3 17.75 3L19.75 3" stroke="black" style="stroke:black;stroke-opacity:1;" stroke-width="1.2" stroke-linecap="round"/></svg>');
  /* --icon-arrow-blink-right: url(/_unsung/icons/arrow-blink-right.svg); */
  
  /* --icon-youtube-play: url(/_unsung/icons/youtube-play.svg); */
  --icon-youtube-play: url('data:image/svg+xml,<svg width="135" height="135" viewBox="0 0 135 135" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M59.375 103.375L85.9321 83.4571C94.3626 77.1343 98.5778 73.9729 98.528 69.693C98.4782 65.413 94.1907 62.3505 85.6155 56.2254L58.6542 36.9673C52.8108 32.7935 49.8892 30.7065 47.6008 31.8842C45.3125 33.0618 45.3125 36.6522 45.3125 43.8332V92.8281" stroke="black" style="stroke:black;stroke-opacity:1;" stroke-width="5.0625" stroke-linecap="round"/></svg>');

  
  /* --icon-youtube-play-white: url(/_unsung/icons/youtube-play-white.svg); */
  --icon-youtube-play-white: url('data:image/svg+xml,<svg width="135" height="135" viewBox="0 0 135 135" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M59.375 103.375L85.9321 83.4571C94.3626 77.1343 98.5778 73.9729 98.528 69.693C98.4782 65.413 94.1907 62.3505 85.6155 56.2254L58.6542 36.9673C52.8108 32.7935 49.8892 30.7065 47.6008 31.8842C45.3125 33.0618 45.3125 36.6522 45.3125 43.8332V92.8281" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="5.0625" stroke-linecap="round"/></svg>');


  --wordmark: url('data:image/svg+xml,<svg width="1550" height="380" viewBox="0 0 1550 380" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M125.962 259.222C118.499 259.222 112.452 256.52 107.82 251.116C103.188 245.455 100.872 237.992 100.872 228.728C100.872 215.604 104.603 199.135 112.066 179.32C119.528 159.505 129.436 137.375 141.788 112.928C154.397 88.4814 168.164 62.8768 183.09 36.1141C151.695 39.4595 123.131 44.2201 97.3976 50.3961C71.9216 56.3148 47.0889 63.2628 22.8996 71.2401C20.0689 72.2695 17.2383 72.1408 14.4076 70.8541C11.5769 69.3101 9.64693 67.1228 8.6176 64.2921C7.58827 61.2041 7.8456 58.2448 9.3896 55.4141C10.6763 52.5835 12.7349 50.6535 15.5656 49.6241C43.1003 40.3601 71.7929 32.3828 101.644 25.6921C131.494 19.0015 165.462 14.1121 203.548 11.0241C208.18 10.7668 211.782 12.5681 214.356 16.4281C216.672 20.5455 216.8 24.5341 214.742 28.3941C197.243 57.7301 181.674 85.7795 168.036 112.542C154.397 139.305 143.589 162.979 135.612 183.566C127.892 204.153 124.032 219.979 124.032 231.044C124.032 233.103 124.289 234.518 124.804 235.29C125.576 235.805 126.09 236.062 126.348 236.062C134.068 236.062 145.905 229.243 161.86 215.604C178.072 201.965 197.243 182.923 219.374 158.476C241.762 134.029 265.694 105.465 291.17 72.7841C292.971 70.4681 295.287 69.1815 298.118 68.9241C300.948 68.4095 303.65 68.9241 306.224 70.4681C308.797 72.0121 310.47 74.1995 311.242 77.0301C312.014 79.8608 311.756 82.5628 310.47 85.1361L238.288 230.658C238.03 230.915 237.644 231.945 237.13 233.746C236.615 235.29 237.13 236.062 238.674 236.062C247.423 236.062 261.319 232.588 280.362 225.64C299.404 218.435 321.792 208.399 347.526 195.532C373.516 182.408 400.794 167.097 429.358 149.598C432.188 147.797 435.148 147.282 438.236 148.054C441.581 148.826 444.026 150.627 445.57 153.458C447.371 156.289 447.886 159.248 447.114 162.336C446.342 165.424 444.54 167.869 441.71 169.67C411.602 187.683 383.038 203.509 356.018 217.148C328.998 230.529 305.194 240.951 284.608 248.414C264.021 255.619 248.324 259.222 237.516 259.222C230.825 259.222 225.164 256.906 220.532 252.274C215.9 247.642 213.584 241.981 213.584 235.29C213.584 230.143 214.87 225.125 217.444 220.236L248.324 159.634C245.75 162.979 243.177 166.067 240.604 168.898C238.288 171.729 235.972 174.431 233.656 177.004C211.782 201.708 191.453 221.651 172.668 236.834C154.14 251.759 138.571 259.222 125.962 259.222Z" fill="black" style="fill:black;fill-opacity:1;"/><path d="M406.345 262.31C399.6 262.31 395.647 256.63 391.291 252.274C387.946 248.929 387.689 244.297 390.519 238.378L440.313 125.666C441.6 122.835 443.659 120.905 446.489 119.876C449.577 118.589 452.537 118.589 455.367 119.876C458.198 120.905 460.128 122.964 461.157 126.052C462.444 129.14 462.444 132.099 461.157 134.93L428.347 205.182C437.097 193.345 445.074 182.923 452.279 173.916C459.485 164.652 465.532 157.189 470.421 151.528C481.229 139.433 491.008 129.783 499.757 122.578C508.764 115.115 516.098 111.384 521.759 111.384C524.59 111.384 527.549 112.413 530.637 114.472C533.725 116.273 535.269 119.747 535.269 124.894C535.269 126.695 535.012 128.754 534.497 131.07C533.983 133.129 533.339 135.445 532.567 138.018L500.915 229.114C499.886 232.202 499.5 234.132 499.757 234.904C500.015 235.676 501.044 236.062 502.845 236.062C509.021 236.062 517.899 233.875 529.479 229.5C541.059 225.125 553.926 219.593 568.079 212.902C582.49 205.954 597.029 198.62 611.697 190.9C626.623 182.923 640.39 175.331 652.999 168.126C665.609 160.663 675.773 154.487 683.493 149.598C686.324 148.054 689.283 147.668 692.371 148.44C695.459 148.955 697.904 150.627 699.705 153.458C701.249 156.031 701.635 158.991 700.863 162.336C700.349 165.424 698.676 167.869 695.845 169.67C683.236 177.39 669.597 185.367 654.929 193.602C640.519 201.837 625.851 209.943 610.925 217.92C596 225.64 581.589 232.588 567.693 238.764C553.797 244.94 541.059 249.958 529.479 253.818C518.157 257.421 508.764 259.222 501.301 259.222C496.155 259.222 490.751 257.549 485.089 254.204C479.428 250.601 476.597 244.168 476.597 234.904C476.597 232.845 476.855 230.529 477.369 227.956C477.884 225.383 479.042 221.651 480.843 216.762L505.547 147.668C498.599 154.616 489.721 164.137 478.913 176.232C468.363 188.069 455.882 203.509 441.471 222.552L419.855 251.116C417.025 254.976 414.709 257.807 412.907 259.608C410.849 261.409 408.661 262.31 406.345 262.31Z" fill="black" style="fill:black;fill-opacity:1;"/><path d="M674.308 259.222C669.933 259.222 665.301 258.45 660.412 256.906C655.522 255.105 651.405 252.66 648.06 249.572C644.714 246.227 643.042 242.238 643.042 237.606C643.042 228.599 647.931 220.751 657.71 214.06C667.231 207.369 679.583 201.193 694.766 195.532C690.648 190.385 686.917 184.853 683.572 178.934C679.969 172.758 678.168 166.453 678.168 160.02C678.168 152.043 681.127 144.837 687.046 138.404C692.964 131.971 700.684 125.923 710.206 120.262C724.102 112.027 736.711 107.91 748.034 107.91C751.636 107.91 755.368 108.553 759.228 109.84C763.088 111.127 766.433 113.571 769.264 117.174C772.094 120.519 773.51 125.28 773.51 131.456C773.51 138.147 771.58 145.352 767.72 153.072C766.433 155.903 764.246 157.833 761.158 158.862C758.07 159.891 755.11 159.763 752.28 158.476C749.449 157.189 747.519 155.002 746.49 151.914C745.46 148.826 745.589 145.867 746.876 143.036C748.162 140.205 749.063 137.761 749.578 135.702C750.092 133.643 750.35 132.228 750.35 131.456C748.034 130.684 743.916 131.199 737.998 133C732.336 134.801 727.19 137.117 722.558 139.948C715.867 144.065 710.592 147.797 706.732 151.142C703.129 154.487 701.328 157.447 701.328 160.02C701.328 163.623 703.258 168.126 707.118 173.53C710.978 178.677 714.709 183.437 718.312 187.812C736.325 182.151 759.356 175.975 787.406 169.284C815.455 162.593 850.066 155.645 891.24 148.44C894.328 147.925 897.158 148.569 899.732 150.37C902.305 151.914 903.849 154.359 904.364 157.704C904.878 160.792 904.235 163.751 902.434 166.582C900.89 169.155 898.445 170.699 895.1 171.214C864.22 176.618 837.071 181.893 813.654 187.04C790.494 192.187 770.422 197.076 753.438 201.708L731.822 207.884C735.682 213.031 737.612 218.306 737.612 223.71C737.612 231.43 735.296 237.606 730.664 242.238C726.032 246.87 720.242 250.473 713.294 253.046C706.346 255.362 699.269 257.035 692.064 258.064C685.116 258.836 679.197 259.222 674.308 259.222ZM668.518 235.676C670.319 236.191 673.664 236.319 678.554 236.062C683.443 235.805 688.59 235.161 693.994 234.132C699.655 233.103 704.416 231.687 708.276 229.886C712.393 228.085 714.452 226.026 714.452 223.71C714.452 222.423 713.937 220.879 712.908 219.078C711.878 217.277 710.849 215.861 709.82 214.832C699.012 218.177 690.005 221.78 682.8 225.64C675.337 229.243 670.576 232.588 668.518 235.676Z" fill="black" style="fill:black;fill-opacity:1;"/><path d="M867.44 259.222C862.551 259.222 858.691 257.421 855.86 253.818C853.03 250.215 851.614 245.969 851.614 241.08C851.614 235.419 853.158 228.085 856.246 219.078C859.334 210.071 863.323 200.293 868.212 189.742C873.102 178.934 878.377 167.997 884.038 156.932C889.7 145.609 894.975 134.93 899.864 124.894C901.408 122.063 903.724 120.262 906.812 119.49C909.9 118.461 912.86 118.718 915.69 120.262C918.521 121.549 920.322 123.736 921.094 126.824C922.124 129.912 921.866 132.871 920.322 135.702C914.146 147.282 908.099 159.248 902.18 171.6C896.262 183.695 891.115 194.76 886.74 204.796C882.366 214.832 879.278 222.552 877.476 227.956C892.916 215.089 906.426 202.609 918.006 190.514C929.586 178.162 939.365 167.097 947.342 157.318C955.32 147.282 961.367 139.305 965.484 133.386C969.602 127.467 971.66 124.379 971.66 124.122C973.462 121.549 975.778 119.876 978.608 119.104C981.696 118.332 984.527 118.718 987.1 120.262C989.931 121.549 991.732 123.607 992.504 126.438C993.534 129.269 993.405 132.099 992.118 134.93L947.728 235.29C956.992 235.29 970.498 232.49 984.012 227.184C1012.5 216 1035.12 199.659 1051.65 189.415C1068.18 179.172 1084.77 168.147 1101.4 156.341C1118.03 144.536 1133.42 133.246 1147.57 122.472C1150.2 120.39 1153.1 119.574 1156.25 120.025C1159.65 120.449 1162.27 121.99 1164.1 124.647C1166.18 127.278 1166.99 130.169 1166.54 133.32C1166.09 136.471 1164.55 139.088 1161.92 141.17C1143.91 154.67 1125.74 167.8 1107.39 180.558C1089.28 193.034 1071.7 204.421 1054.65 214.717C1037.6 225.014 998.552 246.999 983.626 251.888C968.701 256.777 955.963 259.222 945.412 259.222C939.236 259.222 934.218 257.035 930.358 252.66C926.498 248.285 924.568 243.267 924.568 237.606C924.568 232.717 925.726 227.827 928.042 222.938L941.938 195.532C930.101 210.972 917.234 224.611 903.338 236.448C895.618 243.139 888.928 248.671 883.266 253.046C877.348 257.163 872.072 259.222 867.44 259.222Z" fill="black" style="fill:black;fill-opacity:1;"/><path d="M1111.62 262.31C1104.88 262.31 1100.5 257 1096.57 252.274C1092.64 247.548 1092.97 244.297 1095.8 238.378L1145.59 125.666C1146.88 122.835 1148.94 120.905 1151.77 119.876C1154.86 118.589 1157.82 118.589 1160.65 119.876C1163.48 120.905 1165.41 122.964 1166.44 126.052C1167.72 129.14 1167.72 132.099 1166.44 134.93L1133.63 205.182C1142.38 193.345 1150.35 182.923 1157.56 173.916C1164.76 164.652 1170.81 157.189 1175.7 151.528C1186.51 139.433 1196.29 129.783 1205.04 122.578C1214.04 115.115 1221.38 111.384 1227.04 111.384C1229.87 111.384 1232.83 112.413 1235.92 114.472C1239 116.273 1240.55 119.747 1240.55 124.894C1240.55 126.695 1240.29 128.754 1239.78 131.07C1239.26 133.129 1238.62 135.445 1237.85 138.018L1206.19 229.114C1205.17 232.202 1204.78 234.132 1205.04 234.904C1205.29 235.676 1206.32 236.062 1208.12 236.062C1214.3 236.062 1223.18 233.875 1234.76 229.5C1246.34 225.125 1259.21 219.593 1273.36 212.902C1287.77 205.954 1302.31 198.62 1316.98 190.9C1331.9 182.923 1345.67 175.331 1358.28 168.126C1370.89 160.663 1391.05 145.487 1398.77 140.598C1401.6 139.054 1414.91 127.728 1418 128.5C1421.09 129.015 1413.18 140.627 1414.98 143.458C1416.53 146.031 1416.91 148.991 1416.14 152.336C1415.63 155.424 1413.96 157.869 1411.12 159.67C1398.52 167.39 1374.88 185.367 1360.21 193.602C1345.8 201.837 1331.13 209.943 1316.2 217.92C1301.28 225.64 1286.87 232.588 1272.97 238.764C1259.08 244.94 1246.34 249.958 1234.76 253.818C1223.44 257.421 1214.04 259.222 1206.58 259.222C1201.43 259.222 1196.03 257.549 1190.37 254.204C1184.71 250.601 1181.88 244.168 1181.88 234.904C1181.88 232.845 1182.13 230.529 1182.65 227.956C1183.16 225.383 1184.32 221.651 1186.12 216.762L1210.83 147.668C1203.88 154.616 1195 164.137 1184.19 176.232C1173.64 188.069 1161.16 203.509 1146.75 222.552L1125.13 251.116C1122.3 254.976 1119.99 257.807 1118.19 259.608C1116.13 261.409 1113.94 262.31 1111.62 262.31Z" fill="black" style="fill:black;fill-opacity:1;"/><path d="M1355.66 368.846C1352.31 368.846 1348.84 367.431 1345.23 364.6C1341.63 362.027 1336.1 356.365 1328.64 347.616C1324.52 342.727 1321.17 337.837 1318.6 332.948C1316.03 328.316 1314.74 324.199 1314.74 320.596C1314.74 316.221 1315.77 312.876 1317.83 310.56C1319.89 308.244 1321.43 306.571 1322.46 305.542C1330.95 298.337 1340.34 290.874 1350.64 283.154C1360.67 275.691 1371.61 267.971 1383.45 259.994L1395.8 230.272C1387.31 239.793 1379.33 246.999 1371.87 251.888C1364.15 256.777 1357.59 259.222 1352.18 259.222C1346.78 259.222 1342.66 257.421 1339.83 253.818C1337 250.215 1335.58 246.098 1335.58 241.466C1335.58 235.033 1338.16 226.798 1343.3 216.762C1348.19 206.469 1354.63 195.789 1362.6 184.724C1370.58 173.401 1379.2 162.722 1388.47 152.686C1397.73 142.393 1406.74 134.158 1415.49 127.982C1424.49 121.549 1432.21 118.332 1438.65 118.332C1444.05 118.332 1448.04 120.133 1450.61 123.736C1453.44 127.339 1454.86 131.327 1454.86 135.702C1454.86 140.591 1453.44 146.639 1450.61 153.844C1439.33 182.556 1426.14 210.507 1415.1 239.536C1430.8 230.015 1447.78 220.236 1466.05 210.2C1484.58 200.164 1504.39 189.871 1525.5 179.32C1528.33 178.033 1531.16 177.905 1533.99 178.934C1537.08 179.963 1539.39 181.893 1540.94 184.724C1542.22 187.297 1542.35 190.128 1541.32 193.216C1540.29 196.304 1538.36 198.62 1535.53 200.164C1508.51 213.545 1483.81 226.541 1461.42 239.15C1439.29 251.759 1419.35 263.854 1401.59 275.434L1371.48 356.108C1369.42 361.769 1366.98 365.243 1364.15 366.53C1361.06 368.074 1358.23 368.846 1355.66 368.846ZM1372.64 293.576C1366.46 298.723 1360.42 303.741 1354.5 308.63C1348.32 313.777 1343.05 318.28 1338.67 322.14C1342.53 329.088 1347.55 335.393 1353.73 341.054L1372.64 293.576ZM1360.29 232.588C1366.98 228.728 1373.93 223.324 1381.13 216.376C1388.34 209.428 1395.16 201.708 1401.59 193.216C1408.28 184.724 1414.07 176.361 1418.96 168.126C1423.85 159.634 1427.45 152.043 1429.77 145.352C1424.11 148.697 1417.8 153.715 1410.85 160.406C1403.91 167.097 1396.96 174.688 1390.01 183.18C1383.06 191.672 1377.01 200.293 1371.87 209.042C1366.46 217.791 1362.6 225.64 1360.29 232.588Z" fill="black" style="fill:black;fill-opacity:1;"/></svg>');

}

* {
  box-sizing: border-box;
  scroll-margin-top: var(--margin);
}

body {
  font-family: var(--font-body);
  line-height: 1.454; /* Natural – no breaks in selection */
  font-size: var(--font-size-body);
  
  color: var(--text);
  background: var(--paper);
  --background: var(--paper);

  /* -webkit-font-smoothing: antialiased; */
  /* font-smooth: antialiased; */
  -webkit-font-smoothing: subpixel-antialiased;
  padding: 0;
  margin: 0;
  min-height: 100vh;
  
  hanging-punctuation: first;
  
  overflow-x: hidden;
  overflow-x: clip; 
  
  -webkit-tap-highlight-color: transparent; 
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  
  scroll-behavior: smooth;
  
  font-variation-settings: "opsz" 15;  
}
@media (width <= 767px) {
  body {
    overflow-x: clip;
  }
}

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent), transparent 75%);
  
  @media (hover: hover) {
    &:hover {
      text-decoration-color: color-mix(in srgb, var(--accent), transparent 65%);  
    }
  }

  &.always-visited,
  &:not(.never-visited):visited {
    color: var(--text);
    text-decoration-color: color-mix(in srgb, var(--text), transparent 90%);
    @media (prefers-color-scheme: dark) {
      text-decoration-color: color-mix(in srgb, var(--text), transparent 80%);
    }
   
    @media (hover: hover) { 
      &:hover {
        text-decoration-color: color-mix(in srgb, var(--text), transparent 80%);  
        @media (prefers-color-scheme: dark) {
          text-decoration-color: color-mix(in srgb, var(--text), transparent 70%);  
        }
      }
    }
  } 
}

body:not(.cmd-held) a.not-a-link-unless-cmd {
  cursor: default;
} 

.contents a:not(.copy-url),
footer :not(nav) a,
header a:not(.copy-url):not(.logo),
.tag-index a {
  text-decoration-thickness: 2.5px;
  text-underline-offset: .17em;
  
  hyphens: none;
  
  &:not(:has(img)):active {
    position: relative;
    top: .05em;
    text-underline-offset: .12em;
    border-top: .2em solid transparent; /* Prevents link from moving away from the cursor if you click at the very top. */
  }
}



section.main {
  padding: 0 0 0 0;
  min-height: 100vh;
  
  /* Only to bottom align footer */
  display: flex;
  flex-direction: column; 
  
  background: var(--paper);
}

@media (width <= 767px) {
  section.main {
    overflow: hidden;   
  }
}

article {
  position: relative;

  padding-left: var(--viewport-margin-left);
  padding-right: var(--viewport-margin-right);
  
  margin-top: calc(4 * var(--margin));
  padding-top: calc(2 * var(--margin));
  padding-bottom: calc(3 * var(--margin));
  
  --background: var(--paper);
  background: var(--background);
  

  & > header,
  & > .contents,
  & > .meta {
    max-width: var(--max-text-width);  
  }
}

article {
  --desired-inter-article-distance: calc(11.25 * var(--margin));
  
  --diagonal-height-multiplier: 1.0; /* Diagonal height is generated on the server without knowing of the viewport. It matches the original big screen desired-inter-article-distance, so we need to multiply it if needed. */
  
  @media (width <= 1150px) {
    --diagonal-height-multiplier: .75;
  }
  
  @media (width <= 767px) {
    --desired-inter-article-distance: calc(9 * var(--margin));  
    --diagonal-height-multiplier: .33;
  }
}

body:not(.main-page) article:first-of-type {
  --desired-inter-article-distance: calc(6.5 * var(--margin));
}

@media (width <= 767px) {
  body.main-page article:first-of-type {
    --desired-inter-article-distance: calc(5.5 * var(--margin));    
  }
}


article {
  /* margin-top: calc(8 * var(--margin)); */
  
  
  --padding-top: calc(var(--desired-inter-article-distance) / 2);
  --margin-top: calc(var(--desired-inter-article-distance) / 2);
  /* --padding-bottom: calc(var(--desired-inter-article-distance) / 2); */
  /* --margin-bottom: calc(var(--desired-inter-article-distance) / 2); */
  
  header + & {
    --margin-top: 0 !important;
  }
  
  border-top: var(--margin-top) solid transparent; /* Will be overpainted in &:after */
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  /* margin-bottom: var(--margin-bottom); */
  /* padding-bottom: var(--padding-bottom); */
  padding-top: var(--padding-top);
  
  /* This is &:after simulating border-top simulating padding-top. We need this for a noisy bk */
  &:after {
    content: '';
    background: var(--paper);
    position: absolute;
    left: 0;
    top: calc(-1 * var(--margin-top));
    width: 100%;
    height: var(--margin-top);
  }
}

body.main-page article:nth-of-type(even),
body:not(.main-page) article:nth-of-type(odd) { 
  /* TK explain */
  --margin-top: 0;
  --padding-top: 0;
  
  header h1 a:not(.copy-url) {
    /* text-shadow: 0 .065em 0 color-mix(in srgb, var(--accent), transparent var(--accent-faint-mix)); */
    text-shadow: 0 .065em 0 color-mix(in srgb, var(--gray), transparent var(--gray-very-faint-mix));
  
    /* text-shadow-color: red !important; */
  }

  
}


  

/* TK OPTIMIZE */
body.main-page article:nth-of-type(even),
body:not(.main-page) article:nth-of-type(odd),
body.main-page article:nth-of-type(odd),
body:not(.main-page) article:nth-of-type(even) { 

  /* Optical adjustments to diagonal lines. */
  /* Left on its own devices, the line will want to be centered vertically vis-a-vis the horizontal center of the viewport. We make it so it instead centers vis-a-vis the left spine of the page (or, slightly toward the center for mobile) */

  &.top-diagonal-negative {
    /* Negative / – pull up above */
    @media (width <= 767px) {
      --hdelta: calc(70vw - var(--viewport-margin-left));
    }
    @media (width > 767px) {
      --hdelta: calc(50vw - var(--viewport-margin-left));
    }
    
    @supports (opacity: calc(1px / 1px)) {
      --slope: calc(100vw / (var(--diagonal-height-top) * var(--diagonal-height-multiplier))); /* Needed for Safari that struggles with atan2 below on large widths */
    }
    @supports not (opacity: calc(1px / 1px)) {
      --slope-ratio: tan(atan2(var(--hdelta), 100vw)); /* Needed to be more complex for Firefox */
    }
  }
  &.top-diagonal-positive {
    /* Positive \ – pull up belpw */
    @media (width <= 767px) {
      --hdelta: calc(30vw - var(--viewport-margin-left));
    }
    @media (width > 767px) {
      --hdelta: calc(50vw - var(--viewport-margin-left));
    }
    
    @supports (opacity: calc(1px / 1px)) {
      --slope: calc(-100vw / (var(--diagonal-height-top) * var(--diagonal-height-multiplier)));    
    }
    @supports not (opacity: calc(1px / 1px)) {
      --slope-ratio: tan(atan2(var(--hdelta), -100vw)); /* Needed to be more complex for Firefox */
    }
  }
  
  /* Above */
  --margin-top-desired: calc(var(--desired-inter-article-distance) / 2 - (var(--diagonal-height-top) * var(--diagonal-height-multiplier)) / 2);
  /* Below */
  --padding-top-desired: calc(var(--desired-inter-article-distance) / 2 + (var(--diagonal-height-top) * var(--diagonal-height-multiplier)) / 2);

  @supports (opacity: calc(1px / 1px)) {
    --adjustment: calc(var(--hdelta) / var(--slope));   
  }
  @supports not (opacity: calc(1px / 1px)) {
    --adjustment: calc(var(--slope-ratio) * var(--diagonal-height-top) * var(--diagonal-height-multiplier)); /* Needed to be more complex for Firefox */
  }
      
  --margin-top: max(0px, calc(var(--margin-top-desired) - var(--adjustment)));
  --padding-top: max(0px, calc(var(--padding-top-desired) + var(--adjustment)));

}










body.main-page article:nth-of-type(even),
body:not(.main-page) article:nth-of-type(odd) {   
  
  /* border-top-color: var(--green-bk-no-noise); */
  /* This is &:after simulating border-top simulating padding-top. We need this for a noisy bk */
  &:after {
    background: var(--green-bk);
    background-repeat: repeat;
    background-size: var(--noise-background-size) var(--noise-background-size);
  }



  &:before { /* Cuts into height */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(var(--diagonal-height-top) * var(--diagonal-height-multiplier));
  
    /* 10px padding on each side to avoid strange cropping of the line */
    background-size: calc(100% + 20px) calc(100%);
    background-repeat: no-repeat;
    background-position: -10px 0;
    
    content: '';
    pointer-events: none;
  }
  
  &.top-diagonal-positive:before {
    background-image: var(--top-diagonal-positive-green);
  }
  
  &.top-diagonal-negative:before {
    background-image: var(--top-diagonal-negative-green);
    
    
  }

}



body.main-page article:nth-of-type(odd),
body:not(.main-page) article:nth-of-type(even) { 
  --background: var(--green-bk);  
  background-repeat: repeat;
  background-size: var(--noise-background-size) var(--noise-background-size);

  --gray: var(--gray-on-green);

  



  

  &:before { /* Cuts into height */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(var(--diagonal-height-top) * var(--diagonal-height-multiplier));

    /* 10px padding on each side to avoid strange cropping of the line */
    background-size: calc(100% + 20px) calc(100%);
    background-repeat: no-repeat;
    background-position: -10px 0;
    
    content: '';
    pointer-events: none;
  }

  &.top-diagonal-positive:before {
    background-image: var(--top-diagonal-positive-paper);
  }
  
  &.top-diagonal-negative:before {
    background-image: var(--top-diagonal-negative-paper);
  }
}

nav.tools:not(.without-about):not(.without-subscribe) {
  &:has(input:not([type="hidden"]):focus), 
  &:has(input:not([type="hidden"]):not(:placeholder-shown)) {
    font-variation-settings: "wght" 300, "wdth" 71.5; 
  }
}

body:not(.main-page) nav.tools:not(.without-about):not(.without-subscribe) {
  &:has(input:not([type="hidden"]):focus), 
  &:has(input:not([type="hidden"]):not(:placeholder-shown)) {
    font-variation-settings: "wght" 300, "wdth" 70.5;
  }
}  
  
nav.tools {
  font-family: var(--font-sans-serif);
  font-size: var(--font-size-sans-serif);
  font-variation-settings: "wght" 350, "wdth" 100;
  
  padding-top: 1px;
  padding-bottom: 1px;
}


.page-header .tools {
  /* Scrolls in the header, but not in the footer */    
  @media (width <= 767px) {
    white-space: nowrap; /* Temporary to get a feel */
    overflow-x: auto;
    overflow-y: clip;
    
    &:has(input:not([type="hidden"]):focus), 
    &:has(input:not([type="hidden"]):not(:placeholder-shown)) {
      overflow-x: hidden;
      font-variation-settings: inherit;
    }
  }

}

body.main-page .page-header .tools {
  margin-top: calc(2 * var(--margin));
  
  @media (width <= 767px) {
    white-space: nowrap; /* Temporary to get a feel */
    margin-top: calc(3 * var(--margin));
    margin-bottom: calc(1 * var(--margin));
  }

}

body:not(.main-page) .page-header .tools {  
  margin-top: calc(2 * var(--margin));

}

footer .tools {
  /* background: red !important; */
  &:not(:first-child) {
    margin-top: calc(1.5 * var(--margin));  
  }
  
  padding-right: var(--viewport-margin-right);
  
  
  /* In the footer, the tools wrap but the line height is too large. This compensates for that */
  @media (width <= 767px) {
    margin-bottom: 1em;
    
    > * {
      margin-bottom: -1em; 
    }
  }
}




nav.tools {
  user-select: none;
  -webkit-user-select: none;
  
  @media (prefers-reduced-motion: no-preference) {
    transition: font-variation-settings 200ms;
  }
  
  &:not(.without-about):not(.without-subscribe):has(input:not([type="hidden"]):focus), 
  &:not(.without-about):not(.without-subscribe):has(input:not([type="hidden"]):not(:placeholder-shown)) {
    @media (prefers-reduced-motion: no-preference) {
      transition: font-variation-settings 500ms var(--bezier);
    }
    
    .pagefind-input {
      @media (prefers-reduced-motion: no-preference) {
        transition: width 500ms var(--bezier);
      }
      width: 20em;
    }

    & > *:not(:first-child)::before {
      /* Swap / to | */
      @media (prefers-reduced-motion: no-preference) {
        transition: margin 500ms var(--bezier), transform 500ms var(--bezier);
      }
      margin-left: .2em;
      margin-right: .2em;
      
      transform: rotateZ(-12deg);
    }

  }
  
  > * {
    display: inline-block;    
    line-height: 2.3em;
    vertical-align: top;
    
    color: var(--gray);
    
    pointer-events: none;
    
    &:not(:first-child)::before {
      @media (prefers-reduced-motion: no-preference) {
        transition: margin 200ms, transform 200ms;
      }
      
      display: inline-block;

      content: '/';
      font-variation-settings: "wght" 350, "wdth" 100;
      color: var(--gray);
      margin-left: .64em;
      margin-right: .64em;
      @media (width <= 767px) {
        margin-left: .5em;
        margin-right: .5em;
      }
      
      
    }
  }
  
  a {
    color: inherit;
    text-decoration: none;  
    pointer-events: auto;
    white-space: nowrap; /* Firefox being silly */
    
    padding: .77em;
    margin: -.77em;
  
    &:visited {
      color: var(--gray);
    }
    @media (hover: hover) {
      &:hover {
        color: var(--text);
      }
    }
    
    &:active {
      color: var(--text);
    }
        
    &.active {
      color: var(--text);
    }
  }
  
  
}
  
.pagefind-input {
  font-family: var(--font-sans-serif);
  font-size: var(--font-size-sans-serif);
  
  -webkit-user-select: none;
  user-select: none;
  
  -webkit-font-smoothing: antialiased !important; 
  font-smooth: antialiased !important;
  
  
  anchor-name: --search-box-anchor !important;

  pointer-events: auto !important;
    
  outline: 1px solid color-mix(in srgb, var(--gray), transparent var(--gray-faint-mix));
  
  
  color: var(--gray);
  caret-color: var(--accent);
  
  margin-left: calc(-1 * var(--margin));
  @media (width <= 767px) {
    margin-left: 1px; /* For outline to show */
  }

  width: 10.2em;
  @media (width <= 767px) {
    width: 2em;
  }
  height: 2.3em !important;
  position: relative;
  /* overflow: clip; */
  box-sizing: border-box !important;
  z-index: 10;

  @media (prefers-reduced-motion: no-preference) {
    transition: width 200ms;
  }
  
  input[type='search'] {
    font-family: var(--font-sans-serif) !important;
    font-size: var(--font-size-sans-serif) !important;
    background: var(--background) !important;
    color: var(--text) !important;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    padding-top: calc(var(--margin) / 2) !important;
    padding-bottom: calc(var(--margin) / 2) !important;
    padding-left: .75em !important;
    padding-right: .75em !important;
    margin: 0 !important;
    line-height: 2.3em !important;
    height: 2.3em !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    box-shadow: none !important;
    
    &:focus,
    &:focus-visible {
      outline: none !important;
      background: var(--paper) !important;
      border: none !important;
    }
    
    &::placeholder {
      color: var(--gray) !important;
      font-family: var(--font-sans-serif);
      font-variation-settings: "wght" 350, "wdth" 100;
    }
    
    /* Remove clear box in fallback no-JS input box */
    &::-webkit-search-cancel-button,
    &::-webkit-clear-button {
      -webkit-appearance: none !important;
      appearance: none !important;
    }    
    &::-ms-clear {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
    }
  }
  
  .pf-input-clear {
    outline: 1px solid red !important;
    
    font-size: 0 !important;
    
    /* top: 0 !important; */
    transform: none !important;
    
    width: 24px !important;
    /* height: auto !important; */
    
    display: block !important;
    
    position: absolute !important;
    top: 0 !important;
    height: calc(2.3 * var(--font-size-sans-serif)) !important;
    /* bottom: 0 !important; */
    right: 0 !important;
    /* right: -32px; */
    
    mask: var(--icon-close) !important;
    mask-repeat: no-repeat !important;
    mask-position: 50% 50% !important;
    background: var(--gray) !important;
    
    cursor: default !important;
    
    &:hover {
      background: var(--text) !important;  
    }
    
    &:active {
      top: 2px !important;
    }

  }
  
}

@media (width > 767px) {
  .tools.without-about .pagefind-input {
    width: 18.2em;
  }
  
  .tools.without-subscribe .pagefind-input {
    width: 18.5em;
  }
}

/* If on mobile, change to a loupe */
@media (width <= 767px) {
  .pagefind-input:has(input:not(:focus):placeholder-shown) {
    outline: none !important;
    
    margin-left: -7px;
    margin-right: -4px;

    mask: var(--icon-search) 50% 50% no-repeat;
    
    input[type='search'] {
      background: var(--gray) !important;
      
      &::placeholder {
        color: transparent !important; 
      }
    }
  }
}






footer nav.pagination {
  margin-top: -4.45em;
  
  
  margin-top: calc(-1 * var(--padding-top) - (1.4em * 2 - .5em) / 2 - 1.5px);
  
  > * {
    margin-bottom: .5em;
  }
}






input:not([type="hidden"]),
button,
a.button-like, 
span.button-like {
  font-size: var(--font-size-sans-serif);
  font-family: var(--font-sans-serif);
  color: var(--text);

  position: relative;
  display: inline-block;
  vertical-align: top;
  outline: none;

  --line-height: 1.4em;
  --height: calc(var(--line-height) + 2 * .5em);
  height: var(--height);
  line-height: var(--line-height);

  text-decoration: none;
  padding: .5em 1em;
  
  margin-right: .5em;
  
  border: none;
  
  background: var(--paper);
  font-variation-settings: "wght" 400, "wdth" 100;
  
  .hash {
    margin-left: -.05em;
    margin-right: .05em;
    font-variation-settings: "wght" 380, "wdth" 70;
  }  

}
input:not([type="hidden"]) {
  padding-top: calc(var(--margin) / 2) !important;
  padding-bottom: calc(var(--margin) / 2) !important;
  padding-left: .75em !important;
  padding-right: .75em !important;  

  caret-color: var(--accent);
  
  &::placeholder {
    color: var(--gray) !important;
    font-family: var(--font-sans-serif);
    font-variation-settings: "wght" 350, "wdth" 100;
  }
}

a.button-like {
  color: var(--text);
}

button:active,
a.button-like:active {
  padding-top: .7em;
  padding-bottom: .3em;    
}

.button-like:not(.button-arrow-back):not(.button-arrow-forward) {
  color: var(--gray);
}

button,
input:not([type="hidden"]),
.button-like:not(.button-arrow-back):not(.button-arrow-forward) {
  border: 1px solid color-mix(in srgb, var(--gray), transparent var(--gray-faint-mix));
}
input:focus {
  border: 1px solid var(--accent);
  z-index: 1;
}

a.button-arrow-back,
a.button-arrow-forward {
  background: color-mix(in srgb, var(--gray), transparent var(--gray-faint-mix));

  &::after {
    position: absolute;
    content: '';
    z-index: -2;
    pointer-events: none;
    inset: 0;
    background: var(--background);
    background-repeat: repeat;
    background-size: var(--noise-background-size) var(--noise-background-size);

  }
  
  @media (hover: hover) {
    &:hover {
      background: var(--gray);
    }
  }
}

@media (hover: hover) {
  button:hover {
    border-color: var(--gray);
  }
}
button:active {
  border-color: var(--gray);
  /* border-top-width: .2em; */
  box-shadow: inset 0 .2em 0 color-mix(in srgb, var(--gray), transparent var(--gray-faint-mix));
}


a.button-arrow-forward {
  padding-right: 1.7em;
  &.wide {
    margin-right: 1 em;
    padding-left: 1.4em;
    padding-right: 2em;      
  }
  
  
  clip-path: polygon(0 0, calc(100% - var(--height) / 2) 0, 100% calc(var(--height) / 2), calc(100% - var(--height) / 2) 100%, 0 100%); 
  
  &::after {
    clip-path: polygon(1px 1px, calc(100% - var(--height) / 2) 1px, calc(100% - 1px) calc(var(--height) / 2), calc(100% - var(--height) / 2) calc(100% - 1px), 1px calc(100% - 1px)); 
  }    

  &:active::before {
    background: color-mix(in srgb, var(--gray), transparent var(--gray-faint-mix));
    position: absolute;
    content: '';
    z-index: -1;
    pointer-events: none;
    inset: 0;
    
    clip-path: polygon(100% calc(var(--height) / 2 + .2em), calc(100% - var(--height) / 2) .2em, 0 .2em, 0 0, calc(100% - var(--height) / 2) 0, 100% calc(var(--height) / 2));
  }

}

a.button-arrow-back {
  padding-left: 1.7em;
  
  &:first-child {
    margin-left: -.5em;
  }
  
  clip-path: polygon(100% 0, calc(var(--height) / 2) 0, 0 calc(var(--height) / 2), calc(var(--height) / 2) 100%, 100% 100%); 
  
  &::after {
    clip-path: polygon(calc(100% - 1px) 1px, calc(var(--height) / 2) 1px, 1px calc(var(--height) / 2), calc(var(--height) / 2) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px)); 
  }    

  &:active::before {
    background: color-mix(in srgb, var(--gray), transparent var(--gray-faint-mix));
    position: absolute;
    content: '';
    z-index: -1;
    pointer-events: none;
    inset: 0;
    
    clip-path: polygon(0 calc(var(--height) / 2 + .2em), calc(var(--height) / 2) .2em, 100% .2em, 100% 0, calc(var(--height) / 2) 0, 0 calc(var(--height) / 2));
  }

}


/* TK */
body {
  &:not(.main-page) {
    /* background: blue; */
    background: var(--green-bk-no-noise);
  }
  
  &:has(.page-subheader) {
    /* background: red; */
    background: var(--green-deep-bk-no-noise);
  }
}


body .page-header {
  
  position: relative;
  
  background: var(--background);
  
  /* background: linear-gradient(in oklab, color-mix(in srgb, var(--background), black 50%), var(--background)); */
  
  padding-left: var(--viewport-margin-left);
  
  margin-left: calc(-1 * var(--viewport-margin-left-inset));
  
  --margin-bottom: calc(2 * var(--margin));  
  /* margin-bottom: var(--margin-bottom); */
  margin-bottom: 0;
  
  width: 100vw;
  overflow: clip;
  
  /* &:before {
    position: fixed;
    left: 0;
    top: -10px;
    right: 0;
    height: 11px;
    content: '';
    background-color: green;
    pointer-events: none;
    z-index: 1000;
  } */
  
  &:after {
    pointer-events: none;
    content: '';
    background: var(--background);
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--margin-bottom));
    height: var(--margin-bottom);
  }
}

body.main-page .page-header {
  h1 {
    padding: 0;
    margin: 0;
    padding-top: 25px;
    /* margin-left: -.08em; */
    position: relative;
    
    user-select: none;
    -webkit-user-select: none;  
    
    height: 298px;
    @media (width <= 767px) {
      height: 38vw;
    }
    
    pointer-events: none; /* Will be restored in <a> below */
    
    &:before {
      content: '';
      position: absolute;
      inset: 0;
      left: -100px;
      mask: var(--wordmark);
      pointer-events: none;
      
      mask-size: 863px;
      mask-position: 43px 88px;
      mask-repeat: no-repeat;      
      background: var(--text);
      
      @media (width <= 767px) {
        left: calc(-1 * var(--viewport-margin-left));
        right: 0;
        mask-size: calc(120.5vw);
        mask-position: 48% 100%;
      
        
        /* font-size: 30vw; */
        /* margin-left: -10vw; */
        /* padding-top: 0; */
      }
      
    }
    
    a {
      height: 220px;
      margin-left: -100px;
      @media (width <= 767px) {
        margin-left: calc(-1 * var(--viewport-margin-left));
        margin-top: -25px;
        height: calc(25vw + 25px);
      }
      
      display: block;
      pointer-events: auto;
    }
    
    &:has(a:active) {
      /* opacity: .2; */
      &:before {
        mask-position: 43px calc(88px + 9px);
      }
      
      @media (width <= 767px) {
        &:before {
          mask-position: 48% calc(100% + .008 * 100vw);
        }

      }
    }
    

    
    

  }
  h2 {
    font-feature-settings: "ss02" on; /* Alt Q */
            
    font-family: var(--font-sans-serif);
    font-size: calc(var(--font-size-sans-serif) * 1.1); 
    font-variation-settings: "wght" 650;    
    @media (prefers-color-scheme: dark) {
      font-variation-settings: "wght" 600;
    }
  
    margin-top: -1.5em;
    line-height: 1.2;
    text-wrap: balance;
    
    text-transform: uppercase;
    letter-spacing: .07em;
    
    
    @media (width <= 767px) {
      margin-top: -1em;
      font-size: var(--font-size-sans-serif);
    }

    
    
    a {
      color: var(--text);
      text-decoration-color: color-mix(in srgb, var(--gray), var(--background) var(--gray-faint-mix));
      
      .tighten {
        letter-spacing: -.15em;
        margin-left: -.02em;
      }
      
      @media (hover: hover) {
        &:hover {
          color: var(--accent);
          text-decoration-color: color-mix(in srgb, var(--accent), transparent var(--accent-faint-mix));
        }
      }
    }    
  }
}


body:not(.main-page) .page-header {

  
  --background: var(--green-bk);
  background-repeat: repeat;
  background-size: var(--noise-background-size) var(--noise-background-size);
  
  
  --gray: var(--gray-on-green);
  
  padding-bottom: 0;
  
 
  
  h1 {
    /* font-family: Neonoir; */
    /* font-weight: 400; */
    /* font-size: 160px; */
    
    padding: 0;
    margin: 0;
    height: 203px;
    @media (width <= 767px) {
      height: 40vw;
      margin-bottom: -15vw;
    }
    position: relative;
    pointer-events: none; /* Will be restored in <a> below */
    
    /* outline: 2px solid blue; */
    
    user-select: none;
    -webkit-user-select: none;
    
    /* margin-bottom: .4em; */
    /* margin-top: 25px; */
    /* margin-left: -.08em; */
  
    /* text-shadow: 0 .04em 0 color-mix(in srgb, var(--accent), transparent var(--accent-very-faint-mix)); */

    &:before { /* Shadow */
      content: '';
      position: absolute;
      inset: 0;
      left: -100px;
      z-index: 0;
      mask: var(--wordmark);
      pointer-events: none;
      mask-size: 643px;
      mask-position: 57px calc(47px + 6px);
      mask-repeat: no-repeat;      
      background: color-mix(in srgb, var(--accent), transparent var(--accent-very-faint-mix));
      
      @media (width <= 767px) {
        left: calc(-1 * var(--viewport-margin-left));
        mask-size: calc(112.5vw);
        mask-position: -7vw calc(6vw + .012 * 100vw);
      }
    }
    
    &:after { /* Logo */
      content: '';
      position: absolute;
      inset: 0;
      left: -100px;
      mask: var(--wordmark);
      mask-size: 643px;
      mask-position: 57px 47px;
      mask-repeat: no-repeat;      
      background: var(--text);

      @media (width <= 767px) {
        left: calc(-1 * var(--viewport-margin-left));
        mask-size: calc(112.5vw);
        mask-position: -7vw calc(6vw);
        
      }
      
    }
    
    a {
      &:active {
        /* mask-position: 57px calc(47px + 6px); */
      }
      height: 200px;
      @media (width <= 767px) {
        height: 30vw; 
      }
      display: block;
      pointer-events: auto;

    
      @media (width <= 767px) {
        /* font-size: 28vw; */
        /* margin-left: -7vw; */
        /* padding-top: 0; */
        /* margin-bottom: calc(-2 * var(--margin)); */
        
        left: calc(-1 * var(--viewport-margin-left));
        right: 0;
        mask-size: calc(112.5vw);
        mask-position: -5vw 5vw;
        
        &:active {
        }
      }

      
    }
    
    &:has(a:active) {
      /* opacity: .2; */
      &:after {
        mask-position: 57px calc(47px + 6px);
      }
      
      @media (width <= 767px) {
        &:after {
          mask-position: -7vw calc(6vw + .012 * 100vw);
        }
      }
    }
    


    
    /* a {
      text-decoration: none;      
      top: 0;
      color: var(--text);
      
    }
    a:active {
      top: .04em;
      text-shadow: none;
    } */


  }

  h2 {
    /* font-weight: 400; */
    
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-sans-serif);
  
    font-feature-settings: "ss02" on; /* Alt Q */
    
    font-variation-settings: "wght" 650;
    @media (prefers-color-scheme: dark) {
      font-variation-settings: "wght" 600;
    }
    
    margin-top: -1.5em;
    line-height: 1.2;
    text-wrap: balance;    
    text-transform: uppercase;
    letter-spacing: .07em;    
    
    @media (width <= 767px) {
      & {
        display: none;
      }
      margin-top: -1em !important;
      /* font-size: var(--font-size-sans-serif); */
    }

  }

  
}

@media (width <= 767px) {
  
  body:not(.main-page) .page-header {
    flex-direction: column;
    align-items: start;
    
    .header-group {
      flex-direction: column;
    }
    
    h2 {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
}

body:has(.page-subheader) .page-header {
  --background: var(--green-deep-bk);
  
  /* Replace fancy continuity with bland one */
  padding-bottom: calc(var(--margin) * 2);
  &:after {
    display: none;
  }
  /* border-bottom: 0; */
  /* background: var(--green-deep-bk); */
  
  /* &:after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><polygon points="0,0 0,100 100,100" fill="hsl(153.96 100% 96.61%)"/><line x1="0" y1="0" x2="100" y2="100" stroke="rgba(21, 159, 0, 30%)" stroke-width="1" vector-effect="non-scaling-stroke"/></svg>');

  } */
}

body .page-subheader {
  --background: var(--green-bk);
  background: var(--background);
  padding-left: var(--viewport-margin-left);
  
  background-repeat: repeat;
  background-size: var(--noise-background-size) var(--noise-background-size);

  
  /* margin-top: calc(-4 * var(--margin));   */
    
  /* padding-top: calc(1 * var(--margin)); */
  padding-top: 1px;
  padding-bottom: calc(0 * var(--margin));
  border-top: 1px solid color-mix(in srgb, var(--accent), transparent var(--accent-faint-mix));
  padding-top: calc(3 * var(--margin));
  /* margin-bottom: calc(4 * var(--margin)); */
  
  --gray: var(--gray-on-green);
  
  /* background: yellow; */
  
  /* z-index: 200; */
  
  > * {
    max-width: var(--max-text-width);  
  }
  
  .contents {
    /* z-index: 1000; */
  }
}



.about-contact-reveal,
.newsletter-rss-reveal {
  overflow: clip;
  
  
  font-size: var(--font-size-sans-serif);
  font-family: var(--font-sans-serif);
  font-variation-settings: "wght" 350, "wdth" 100;
  word-spacing: .1em;

  padding-top: 100px; /* Prevents clipping when rotating internally */
  pointer-events: none; /* Otherwise the 100px padding blocks the top */
  
  --background: var(--gray-bk);
  
  --padding-bottom: 200px; /* Prevents gap between this and next */
  
  .contents {
    overflow: clip;
    pointer-events: auto;

    background: var(--background);
    background-size: var(--noise-background-size) var(--noise-background-size);
    background-repeat: repeat;
    
    padding-top: calc(2 * var(--margin));
    padding-bottom: calc(var(--padding-bottom) + 2 * var(--margin));
    border-top: 1px solid color-mix(in srgb, var(--gray), transparent var(--gray-very-faint-mix));
    
    margin-left: -20px; /* Prevents edge reveal when internally rotating */
    margin-right: -20px;
    
    max-width: calc(100vw + 40px);
    
    .contents-inner {
      position: relative;
        
      padding-left: calc(var(--viewport-margin-left) + 20px);
      max-width: calc(var(--viewport-margin-left) + 60px + var(--max-text-width));
      width: min(calc(var(--viewport-margin-left) + 20px + var(--max-text-width), calc(100vw - var(--viewport-margin-left) - var(--viewport-margin-right))));
      padding-right: var(--viewport-margin-right);
      @media (width <= 950px) {
        padding-right: calc(var(--viewport-margin-right) + 32px); /* Close box not sticking out */
      }
      
      button.close {
        background: none;
        padding: 0;
        margin: 0;
        border: none;
        position: absolute;
        width: 24px;
        height: 24px;
        right: 0;
        
        @media (width <= 950px) {
          right: 48px;
        }
        
        mask: var(--icon-close);
        mask-repeat: no-repeat;
        mask-position: 50% 50%;
        background: var(--text);
        
        @media (hover: hover) {
          &:hover {
            background: var(--gray);
          }
        }
        &:active {
          margin-top: 2px;
        }

      }
      
      
    }
  }
  
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
  top: 0;
  
  display: none;
  
  &.measurable {
    display: block;
    opacity: 0;
  }
  
  &.revealed {
    display: block;
    opacity: 1;
  }
  
  /* */
  
  .contents-inner {
    p {
      margin: 0;
      
      
      & + p {
        margin-top: 1em;
      }
    }
    
    &:has(.first-part) {
      display: flex;
      flex-direction: row;
      gap: calc(2 * var(--margin));
    }
    .second-part {
      width: 61%;
    }
    .first-part {
      width: 39%;
    }
  }
  
  ul {
    list-style: none;
    position: relative;
    
    margin: 0;
    padding: 0;
    
    margin-top: .5em;
    
    
    li {
      margin-left: 32px;
      margin-top: .2em;
      margin-bottom: .2em;
      
    }

    @media (width < 950px) {
      &.subscribe-options li:not(:first-child) {
        margin-top: .8em; 
      }
      &.contact-options {
        margin-bottom: .8em;
      }
    }


  }
  
  .backlinks {
    margin-left: 30px;
  }
}

li.icon-email:before,
li.icon-mastodon:before,
li.icon-bluesky:before,
li.icon-rss:before {
  display: inline-block;
  position: absolute;
  margin-left: -32px;
  /* color: var(--text);     */
  width: 1.4em;
  text-align: center;
  
  content: '';
  width: 24px;
  height: 24px;
  margin-top: calc((1lh - 24px) / 2);
  
  mask: var(--icon-email);
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  background: var(--text);
}
li.icon-rss:before {
  mask: var(--icon-rss);
}
li.icon-bluesky:before {
  mask: var(--icon-bluesky);
}
li.icon-mastodon:before {
  mask: var(--icon-mastodon);;
}



.newsletter-rss-reveal {
  .contents-inner {
    padding-right: var(--viewport-margin-right);
    .second-part {
      width: 39%;
    }
    .first-part {
      width: 61%;
    }
  }
  
  form {
    margin-top: var(--margin);
    
    input {
      width: 225px;
      margin-right: -1.5px;
    }
  }
}




article:has( + footer) {
  margin-bottom: calc(8 * var(--margin));
}

footer {
  font-size: var(--font-size-sans-serif);

  padding-left: var(--viewport-margin-left);
  padding-bottom: calc(4 * var(--margin));
  @media (width < 767px) {
    padding-bottom: calc(3 * var(--margin));  
  }
  
  --footer-bk: var(--paper);
  background: var(--footer-bk);
  
  font-family: var(--font-sans-serif);
  font-variation-settings: "wght" 350, "wdth" 100;
  
  color: var(--gray);
  
  --padding-top: 0;
  
  /* margin-top: calc(8 * var(--margin)); */
  margin-top: auto; /* Makes it align to a window if the content is below 100% viewport height */
  padding-top: var(--padding-top);
  margin-left: calc(-1 * var(--viewport-margin-left-inset));
  position: relative;
  
  display: flex;
  flex-direction: column;
  gap: 1em;
  
  .related-tags {
    display: inline-flex;
    
    .label,
    .related-label {
      white-space: nowrap;
    }
  }
  
  .small-print {
    /* margin-top: calc(2 * var(--margin)); */
    font-size: var(--font-size-tiny);
    font-variation-settings: "wght" 380, "wdth" 100;
    letter-spacing: .02em;
    padding-right: var(--viewport-margin-right);
    max-width: var(--max-text-width);
    
    a {
      text-decoration-thickness: 1.5px;
      text-underline-offset: .2em;
      white-space: nowrap;
    }
  }
}

body.main-page article:nth-of-type(even) + footer,
body:not(.main-page) article:nth-of-type(odd) + footer {
  --footer-bk: var(--green-bk);
  --gray: var(--gray-on-green);
  
  --padding-top: calc(4 * var(--margin));
  
  border-top: 1px solid color-mix(in srgb, var(--accent), transparent var(--accent-faint-mix));
}

body.main-page article:nth-of-type(odd) + footer,
body:not(.main-page) article:nth-of-type(even) + footer {
  --padding-top: calc(4 * var(--margin));
  
  border-top: 1px solid color-mix(in srgb, var(--accent), transparent var(--accent-faint-mix));
  
  &::before {
    content: '';
    z-index: 0;
    position: absolute;
    background: var(--green-bk);
    left: 0;
    right: 0;
    top: calc(-8 * var(--margin) - 1px);
    height: calc(8 * var(--margin));
  }
  

}


@media (width < 767px) {
  footer {
    .related-tags {
      display: grid;
      grid-template-columns: .61fr 1fr;
    }
    .label {
      grid-column: 1 / span 2;
      grid-row: 1;
    }
    .related-label {
      grid-column: 1;
      grid-row: 2;
    }
  }
}
@media (width >= 767px) {
  footer {
    .related-label:before {
      margin-left: .4em;
      content: '/ ';
    }
  }
}

h1 {
  margin: 0;
  margin-top: calc(2 * var(--margin));
  font-size: var(--font-size-headline);
  font-weight: 400;
  font-family: var(--font-sans-serif);
  font-feature-settings: "liga" on;
  line-height: 1.27;

  /* padding-bottom: 10px; */
  /* margin-bottom: -10px; */
  
  .hash {
    margin-left: -.1em;
  }  
  
  .copy-url {
    display: inline-block;
    vertical-align: bottom;
    position: absolute;
    width: 72px;
    height: 1em;
    bottom: .15em;
    
    cursor: default;
    
    mask: var(--icon-url);
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    background: var(--gray);
    
    pointer-events: none;
    opacity: 0;
    
    @media (width <= 767px) {
      display: none;
    }
    
    &:active {
      mask-position: 50% calc(50% + 4px) !important;
    }
    
    @media (hover: hover) {
      &:hover,
      &.fake-hover {
        background: var(--text);
      }
    }
  }
  
  &:hover .copy-url,
  &.fake-hover .copy-url {
    opacity: 1;
    pointer-events: auto;
  }
}  


h3 {
  margin: 0;
  /* margin-top: calc(2 * var(--margin)); */
  margin-bottom: 0;
  /* text-box-edge: cap alphabetic; */
  /* text-box-trim: trim-both; */

  
  font-family: var(--font-sans-serif);    
  font-weight: 400;
  font-size: var(--font-size-headline);
  
  line-height: 1.27;  
  
  font-variation-settings: "wght" 340, "wdth" 100;
  letter-spacing: -.03em;
  word-spacing: .12em;

  
  .hash {
    margin-left: -.05em;
    margin-right: .05em;
    font-variation-settings: "wght" 300, "wdth" 70;
  }  
}

h4 {
  margin: 0;
  margin-top: calc(1 * var(--margin));
  
  font-family: var(--font-sans-serif);
  font-size: var(--font-size-sans-serif);
  font-weight: 400;
  
  line-height: 1.27;  
  
  &.sub {
    margin-top: 0;
    display: block;
    color: var(--gray);
  }
  
  .slash {
    margin: 0 .4em;
  }
}




h5 {
  margin-top: 3.6em;
  margin-bottom: 1.2em;
  
  font-family: var(--font-sans-serif);
  font-size: calc(var(--font-size-body)); /* Slightly larger by design */
  
  font-variation-settings: "wght" 500, "wdth" 100;
  letter-spacing: .02em;
  word-spacing: 0;

}
h5:first-child {
  margin-top: 0;
}
@media (prefers-color-scheme: dark) {
  .note-content {
    h5 {
      font-variation-settings: "wght" 600, "wdth" 100; 
    }
  }
}


.note-header {
  padding-bottom: calc(1 * var(--margin));
  margin-bottom: calc(2 * var(--margin));
  
  position: relative;

  h1 {
    margin: 0;
    margin-left: -.05em; /* Sidebearings */
    
    font-size: var(--font-size-headline);
    font-weight: 400;
    font-family: var(--font-sans-serif);
    font-feature-settings: "liga" on;
    line-height: 1.02;
    
    font-variation-settings: "wght" 340, "wdth" 100;
    letter-spacing: -.03em;
    word-spacing: .12em;
    

    /* outline: 1px solid red; */
    
    &.starts-with-double-quote { /* Chrome doesn't support hanging-punctuation yet */
      text-indent: -.29em;
    }

    a:not(.copy-url) {
      text-decoration: none;
      text-shadow: 0 .065em 0 color-mix(in srgb, var(--accent), transparent var(--accent-faint-mix));
      
      &:visited {
        color: var(--accent);
      }
        
      &:active {
        position: relative;
        top: .07em;
        text-shadow: none;
      }
    }

    .review-title {
      display: block;
      /* font-family: var(--font-pixel-font-12); */
      /* font-size: calc(12 / 17 * var(--font-size-headline)); */
      
      text-decoration: underline;
      text-decoration-thickness: .1em;
      text-underline-offset: .4em;
      padding-bottom: .5em;

      font-family: Neonoir;
      font-size: calc(.9 * var(--font-size-headline));
      text-decoration: none !important;
      padding-bottom: 0;
      letter-spacing: 0;
      
      /* background: red; */
      margin-top: -.3em;
      
      .colon { /* For search only */
        display: none;
      }
      
    }
  }
}



@supports (hanging-punctuation: first) {
  .note-header {
    h1 {
      &.starts-with-double-quote {
        text-indent: 0;
      }
    }
  }
}




.note-header .barcode {
  /* --id: 'arno-becks-art'; */
  /* --barcode: url(/_unsung/barcodes/notes/arno-becks-art.svg); */
  font-size: var(--font-size-tiny);
  font-variation-settings: "wght" 380, "wdth" 100;
  letter-spacing: .02em;
  
  width: calc(.6 * var(--font-size-sans-serif));
  height: calc(6 * var(--font-size-sans-serif));
  position: absolute;
  left: -7.3em;
  /* margin-left: calc(5 * var(--font-size)); */
  /* margin-top: .3em; */
  /* left: calc(-1 * var(--viewport-margin-left) + 2em); */
  /* top: .3em; */
  /* bottom: 1em; */
  
  top: calc(100% + 2.8em);
  
  /* outline: .5px solid var(--gray); */
  
  
  &:before {
    position: absolute;
    inset: 0;
    height: calc(.6 * var(--font-size-sans-serif));
    width: calc(6 * var(--font-size-sans-serif));
    content: '';
    transform-origin: 0 0;
    transform: rotateZ(90deg) translateX(100%) translateY(calc(-.6 * var(--font-size-sans-serif))) scaleX(-1);
    background: var(--barcode);
    background-size: 100%;
    /* background-repeat: repeat-y; */
    border-left: .5px solid var(--gray);
    border-right: .5px solid var(--gray);

    mix-blend-mode: multiply; 
    @media (prefers-color-scheme: dark) {
      mix-blend-mode: screen;
      filter: invert(1);
    }

  }
  
  &:after {
    display: block;
    font-family: var(--font-sans-serif);
    font-variation-settings: "wght" 350, "wdth" 100;
    content: var(--text);
    
    position: absolute;
    right: 1.15em;
    bottom: -2.5em;
    text-align: right;
    
    line-height: var(--font-size-sans-serif);
    color: var(--gray);
    
    white-space: nowrap;

    transform-origin: 100% 0;
    transform: rotateZ(-90deg);
    
  }
}

@media (width <= 1150px) {
  .note-header .barcode {
    left: calc(-1 * var(--viewport-margin-left) + 100vw - 2 * var(--margin));
  }
}

@media (width <= 767px) {
  .note-header .barcode {
    display: none;
    /* left: auto; */
    /* right: calc(-1 * var(--viewport-margin-right) + var(--margin));
    top: 0;
    
    &:after {
      display: none;
    } */
  }
}



.forwardlinks {
  margin: 1.2em 0;
  margin-top: 0;
  margin-bottom: .6em;
  font-family: var(--font-sans-serif);
  font-size: var(--font-size-sans-serif);
  position: relative;
  
  @media (width <= 767px) {
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    height: 1.4em;
    color: var(--gray);
  }
  
  a {
    text-decoration: none;
    color: var(--gray);
    &:visited {
      color: var(--gray);      
    }
    
    &:hover {
      color: var(--accent);
    }
  }
  
  @media (width <= 767px) {
    padding-left: 26px;
  }
  
  
  &:before {
    background: none;
    padding: 0;
    margin: 0;
    border: none;
    position: absolute;
    content: '';
    width: 24px;
    height: 24px;
    margin-left: -30px;
    margin-top: calc((1lh - 24px) / 2);
    
    mask: var(--icon-arrow-left);
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    background: var(--gray);
  }
  
  &:hover:before {
    background: var(--accent);
  }

}
.backlinks {
  margin: 0;
  margin-top: calc(8 * var(--margin));
  margin-bottom: calc(-1 * var(--margin));
  font-family: var(--font-sans-serif);
  font-size: var(--font-size-sans-serif);
  font-variation-settings: "wght" 350, "wdth" 100;
  position: relative;
  
  @media (width <= 767px) {
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    height: 1.4em;
    color: var(--gray);
  }
  
  @media (width <= 767px) {
    margin-top: calc(4 * var(--margin));
  }
    
  a {
    text-decoration: none;
    color: var(--gray);
    &:visited {
      color: var(--gray);      
    }

    &:hover {
      color: var(--accent);
    }
  }

  @media (width <= 767px) {
    padding-left: 26px;
  }
  
  &:before {
    background: none;
    padding: 0;
    margin: 0;
    border: none;
    position: absolute;
    content: '';
    width: 24px;
    height: 24px;
    margin-left: -30px;
    margin-top: calc((1lh - 24px) / 2);
    
    mask: var(--icon-arrow-right);
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    background: var(--gray);
  }

  &:hover:before {
    background: var(--accent);
  }

}

.meta {
  color: var(--gray);
  /* font-variation-settings: "wght" 450, "wdth" 105, "opsz" 10, "GRAD" 0; */
  
  font-family: var(--font-sans-serif);
  font-variation-settings: "wght" 350, "wdth" 100;
  font-size: var(--font-size-sans-serif);

    


  margin-top: calc(4 * var(--margin));
  
  @media (width <= 767px) {
    margin-top: calc(3 * var(--margin) - .45em); /* .6em is compensated below and in tags.compact, to make sure things align properly whether they’re side by side or overflow. */    
  }
  
  
  display: flex;



  
  /* margin-top: -.5em; */
  
  a {
    color: inherit;
    text-decoration: none;
    max-height: fit-content;
  
    @media (width <= 767px) {  
      margin-top: .6em;
    }
    
    &:hover {
      color: var(--text);
    }
  }
  
  .date {
    white-space: nowrap;    
    margin-right: .7em;
  }

}  

@media (width <= 767px) {
  .meta {
    flex-wrap: wrap;
    max-width: 100%;
    box-sizing: border-box;    
  }
  
  body.many-posts .meta {
    display: block;
    white-space: nowrap;
    overflow-x: auto;
    margin-right: calc(-1 * var(--viewport-margin-right));
    margin-left: calc(-1 * var(--viewport-margin-left));
    padding-left: var(--viewport-margin-left);
    padding-right: var(--margin);
    
    /* Offset the scrollbar */
    padding-bottom: calc(.5 * var(--margin));
    margin-bottom: calc(-.5 * var(--margin));
      
  }

}


.meta + .barcode {
  margin-top: calc(var(--margin) * .25);
  width: calc(9.6 * var(--font-size-sans-serif));
  height: calc(.7 * var(--font-size-sans-serif));
  /* background: url(/_unsung/tmp/test-rotated.png); */
  background: var(--barcode);
  background-size: 100%;
  /* background-repeat: repeat; */
  border-left: .5px solid var(--gray);
  border-right: .5px solid var(--gray);

  mix-blend-mode: multiply; 
  @media (prefers-color-scheme: dark) {
    mix-blend-mode: screen;
    filter: invert(1);
  }
  
  @media (width > 767px) {
    display: none;
  }
}  



.tags {
  margin-left: calc(var(--margin) / 2);
  display: inline-block;
  
  margin: 0;
  padding: 0;
  
  @media (width <= 767px) {
    margin-left: .6em;
    margin-top: .45em;
  }

  
  li {
    list-style: none;
    display: inline-block;
    
    margin-left: -.2em; 
    margin-bottom: .3em;
    
    font-size: var(--font-size-tag);
    line-height: 1.8;
    
    a.tag {
      white-space: nowrap;
      padding: .3em .85em .2em .9em;
      text-decoration: none;
      color: inherit;
      
      display: inline-block;
      line-height: 1.3;
      vertical-align: top;
      

      /* position: relative; */
      /* top: -.1em; */
      
      &:active {
        padding: calc(.3em + .1em) .85em calc(.2em - .1em) .9em;
      }
      
      /* margin-bottom: .5em; */
      
      clip-path: polygon(calc(var(--margin) * .52) 0, 100% 0, calc(100% - calc(var(--margin) * .52)) 100%, 0 100%);

      font-family: var(--font-sans-serif);
      /* font-variation-settings: "wght" 400, "wdth" 100; */
      font-variation-settings: "wght" 400, "wdth" 100, "XHGT" 80;
      /* background: white; */
      
      position: relative;
      background: color-mix(in srgb, var(--gray), transparent var(--gray-faint-mix));
      margin-top: -.1em;
      
      &::after {
        position: absolute;
        content: '';
        z-index: -1;
        inset: 1px;
        clip-path: polygon(calc(var(--margin) * .5) 0, 100% 0, calc(100% - calc(var(--margin) * .5)) 100%, 0 100%);
        background: var(--background);
      }

      &:hover {
        background: var(--gray);        
      }
      
      &:focus-visible {
        background: var(--focus-highlight);
      }
      
      &:before {
        content: '#';
        color: var(--gray);
        font-variation-settings: "wght" 400, "wdth" 75;
        padding-right: .05em;
      }
      
      .hyphen {
      }
        
      .tag-count {
        color: var(--gray);
        font-variation-settings: "wght" 400, "wdth" 75;
        margin-left: .35em;
      }
    }
  }  
}

@media (width <= 767px) {
  .tags {
    margin-left: 0;
  }
}













.sitemap-content {
  max-width: var(--max-text-width);  
  /* display: grid; */
  /* grid-template-columns: .31fr .51fr 1fr; */
  /* gap: var(--margin); */
  /* margin-top: calc(8 * var(--margin)); */
  
  --indent-inside: 1em;
  --indent-outside: .5em;
  
  table {
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-sans-serif);

    
    @media (width > 1150px) {
      /* background: yellow; */
      margin-right: calc(-1 * min(2000px, 100vw - var(--viewport-margin-left) * 2 - var(--max-text-width))) !important;
    }    
    
    border-collapse: collapse;
    
    
    tr {
      vertical-align: top;
      
      &.indent {
        td {
          padding-top: 1em;
        }
      }
      
      &.indent + .indent-2,
      &.indent-3 + .indent-2 {
        td {
          padding-top: 1em;
        }
      }
      &.indent-2:has(+ .indent-3) {
        td {
          /* padding-top: 1.5em; */
          padding-bottom: 1em;
        }
      }
    }
    
    tr.indent-2 > td:first-child {
      padding-left: calc(1 * (var(--indent-inside) + var(--indent-outside)));
    }
    tr.indent-3 > td:first-child {
      padding-left: calc(2 * (var(--indent-inside) + var(--indent-outside)));
    }
    
    td {
      padding: .15em .2em;
    }
    
    td:first-child:not(:has(a)) {
      font-variation-settings: "wght" 500, "wdth" 100;
    }
    
    td:nth-child(1) {
      white-space: nowrap;
    }
    
    h4 {
      grid-column: 1;
      margin-top: 0;
      text-wrap: balance;
    }
    td:nth-child(1) > a {
      display: inline-block;
      line-height: 1.2;
      
      /* Align to # on mobile */
      text-indent: -.5em;
      padding-left: .5em;
      .hash {
        margin-left: -.05em;
        padding-right: .05em;
        font-variation-settings: "wght" 350, "wdth" 70;
      }  
    }
    .tag-description {
      display: block;
      line-height: 1.4;
      margin-top: .35em;
      margin-bottom: .2em;
      font-size: var(--font-size-hint);
      letter-spacing: .005em;

      .extra {
        color: var(--gray);
      }
      .slash {
        margin: 0 .2em;
      }
      
      font-variation-settings: "wght" 400, "wdth" 100, "XHGT" 50;

    }
  }
}

@media (width <= 767px) {
  .sitemap-content {
    --indent-inside: .5em;
    --indent-outside: .25em;
    
    /* Temporarily make right margin the same as left */
    table {
      margin-right: calc(-1 * (var(--viewport-margin-right) - var(--viewport-margin-left)));
    }
    
    tr .tag-description {
      font-size: var(--font-size-tiny);
      margin-top: .25em;
      margin-bottom: .4em;
    }
    
    table tr td:nth-child(1) {
      white-space: normal;
      width: 50%;
    }

  }
}



/* Note content */

.note-content {
  em {
    letter-spacing: -.02em;
    padding-right: .1em;
  }
  
  code {
    hanging-punctuation: none;
    /* font-family: OutputSans2; */
    font-family: var(--font-sans-serif);
    font-size: calc(var(--font-size-sans-serif) * .92);
    font-variation-settings: "wght" 350, "wdth" 100;
    letter-spacing: .02em;
    color: var(--gray);
    word-break: break-word;
    hyphens: none;
    word-spacing: .15em;
    
    &:has(br) {
      display: block;
      white-space: pre;
      max-width: 100%;
      overflow-x: auto;
      word-spacing: .23em;
      
      br {
        display: none;
      }
    }
  }
  
  hr {
    height: 1.5lh;
    /* background: red; */
    border: 0;
    /* overflow: auto; */
    
    &:before {
      content: "—";
      font-family: Neonoir;
      font-size: calc(.9 * var(--font-size-headline));
      line-height: .89;
      margin-left: -.05em;
      color: var(--text);
    }
  }
  
  em {
    margin-right: -.09em;
  }
  
  
  p, 
  ul {
    font-feature-settings: "lnum" on; /* Intentional */
    font-variation-settings: "opsz" 15, "wght" 400;
    font-optical-sizing: none; /* for Safari */
    -webkit-font-optical-sizing: none; /* for Safari */
    /* -webkit-text-stroke: .008em currentcolor;
    @media (prefers-color-scheme: dark) {
      -webkit-text-stroke: .015em currentcolor;  
    }  */
    /* @media (-webkit-max-device-pixel-ratio: 1.49), (max-resolution: 1.49dppx) {
      -webkit-text-stroke: 0;
    } */

    font-size: var(--font-size-body);    
  }
  
  p {
    hyphens: auto;
  
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    /* text-box-edge: cap alphabetic; */
    /* text-box-trim: trim-both; */
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  ul {
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    /* text-box-edge: cap alphabetic; */
    /* text-box-trim: trim-both; */
    padding-left: 0;

    li {
      padding: 0;
      padding-left: var(--indent);
      margin-left: 0;
      margin-top: .3em;
      margin-bottom: .3em;
      position: relative;
      list-style: none;
      /* text-box-edge: cap alphabetic; */
      /* text-box-trim: trim-both; */
      hanging-punctuation: none;
      
      &:not(.icon-mastodon):not(.icon-bluesky):not(.icon-rss):not(.icon-email):before {
        position: absolute;
        content: '';
        left: 0;
        top: .7em;
        width: var(--margin);
        border-top: 2px solid color-mix(in srgb, var(--gray), transparent var(--gray-half-mix));
      }
      
    }

    &.long-list {
      /* outline: .5px solid #3f3f3f3f; */
      
      li {
        margin-top: .8em;
        margin-bottom: .8em;        
      }
    }
    
  }
  
  .credit {
    margin-top: 2em;
    &::last-child {
      margin-bottom: -2em;
    }
    a {
      color: inherit;
      
      &,
      &:visited {
        text-decoration-color: color-mix(in srgb, var(--gray), transparent var(--gray-faint-mix));
      }      
    }
    em {
      font-style: normal;
      &:before { content: '*'; }
      &:after { content: '*'; }
      
    }
  }
  
  .credit,
  .hint {
    /* color: var(--gray);    
    font-variation-settings: "wght" 450;
    line-height: 1.4;
    letter-spacing: .01em; */
    
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-sans-serif);
    font-variation-settings: "wght" 350, "wdth" 100;
    /* letter-spacing: .02em; */
    color: var(--gray);    
  }
  
  .blink-comparator .hint {
    /* font-size: var(--font-size-hint); */
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-sans-serif);
    position: absolute;
    z-index: 100;
    margin-top: -2em;
    
    left: 0;
    right: 0;
    top: 0;
    text-align: left;    
  }
  
  .blink-comparator .frame-iphone .hint {
    text-align: center;
  }
  .blink-comparator :not(.frame-iphone) .hint {
    /* text-align: center; */
    padding-left: 10px;
  }
  
  .blink-comparator figure:has(.hint) {
  }
  
  blockquote {
    /* border-left: 2px solid var(--gray); */
    padding-left: 1.2em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    /* text-box-edge: cap alphabetic; */
    /* text-box-trim: trim-both;     */
    
    position: relative;
    
    &:before {
      content: '';
      position: absolute;
      border-left: 2px solid color-mix(in srgb, var(--gray), transparent var(--gray-half-mix));
      left: 0;
      top: .25em;
      bottom: .35em;
    }
  }
  
  figure {
    --max-image-height: 700px;
    --container-width: 100%;
    /*--aspect: calc(tan(atan2(var(--width), var(--height))));*/ /* Hack for division since Firefox doesn’t support division with units */
    aspect-ratio: var(--aspect);
    position: relative;
    
    user-select: none;
    -webkit-user-select: none;
    
    width: 
      min(
        var(--max-image-height) * var(--aspect), 
        var(--container-width), 
        var(--width)
      );
    height: 
      min(
        var(--max-image-height), 
        var(--container-width) / var(--aspect), 
        var(--height)
      );
    
    margin: 0;
    margin-top: 2em;
    margin-bottom: 2em;
    
    --thumbnail-size: 140px;
    --distance-from-bottom: calc(var(--margin) * 4);
    @media (width < 767px) {
      --distance-from-bottom: calc(var(--margin) * 3);
    }
    
    &.youtube-video:before,
    &.tiktok-video:before {
      /* content: ''; */
      position: absolute;
      inset: 0;
      z-index: 10;
      
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
      
      
      background-image: 
        linear-gradient(var(--paper), var(--paper)),
        radial-gradient(circle at 50% 75%, rgba(0, 0, 0, .4) 25%, transparent);        
      @media (prefers-color-scheme: dark) {
        background-image: 
          linear-gradient(var(--green-deep-bk-dark-no-noise), var(--green-deep-bk-dark-no-noise)),
            radial-gradient(circle at 50% 75%, rgba(0, 0, 0, .4) 25%, transparent);        
      }
        
      background-size: var(--thumbnail-size) var(--thumbnail-size), 100% 100%;
      background-position: 50% calc(100% - var(--distance-from-bottom)), 50% 50%;
      background-repeat: no-repeat, no-repeat;
      
      content: var(--duration, '');
      display: grid;
      grid-template-rows: 3fr calc(var(--distance-from-bottom) + 1.2em); /* 75% / 25% */
      align-items: end; 
      justify-items: center;
      line-height: 0;

      font-family: var(--font-sans-serif);
      font-size: var(--font-size-hint);
      color: var(--text-light);
      font-weight: 550;
      color: var(--text);
      

    }
    
    &.youtube-video a:after,
    &.tiktok-video a:after {
      content: '';      
      width: var(--thumbnail-size);
      height: var(--thumbnail-size);
      position: absolute;
      left: 50%;
      top: 100%;
      transform: translate(-50%, calc(-1.1 * var(--thumbnail-size) - var(--distance-from-bottom))); /* See below for Tiktok */
      
      z-index: 20;
      pointer-events: none;
      
      background-image: var(--icon-youtube-play);
      background-size: 100% 100%;
      @media (prefers-color-scheme: dark) {
        background-image: var(--icon-youtube-play-white);      
        
      }
      filter: drop-shadow(0 5px 0 color-mix(in srgb, var(--accent), transparent var(--accent-faint-mix)));
    }
    &.tiktok-video a:after { /* No duration for Tiktok */
      transform: translate(-50%, calc(-1 * var(--thumbnail-size) - var(--distance-from-bottom)));
    }
    
    &.youtube-video:active a:after,
    &.tiktok-video:active a:after {
      
      transform: translate(-50%, calc(-1.1 * var(--thumbnail-size) - var(--distance-from-bottom) + 5px));
      filter: none;

      /* background-color: var(--green-bk-light-no-noise); */
    }
    &.tiktok-video:active a:after {
      transform: translate(-50%, calc(-1 * var(--thumbnail-size) - var(--distance-from-bottom) + 5px));      
    }
    
    
    &:has(video):before { /* Extra padding at the bottom to enable hover over progress bar */
      content: '';
      position: absolute;
      left: 0; 
      right: 0;
      bottom: -20px;
      height: 20px;
    }
    
    video {
      position: absolute;
      z-index: 2;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: block;
      
      /* touch-action: none; */

    }
    img {
      position: absolute;
      z-index: 2;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: block;
    }
    
    &.no-height-limit,
    &.is-retina:not(.frame-iphone):not(.force-height-limit) {
      --max-image-height: 5000px;
    }
    &[data-device-frame="playdate"],
    &[data-device-frame="playdate/colorize"] {
      --max-image-height: 500px;
    }
    
    .hover-detector { /* Only used in JS */
      inset: 0;
      position: absolute;
      pointer-events: none;
      opacity: 0;
    }
    
    .progress {
      z-index: 10000;
      position: absolute;
      
      left: .5px;
      right: .5px;
      bottom: -28px;
      height: 42px; /* 2px actual without borders */
      border-top: 20px solid transparent; /* Click target */
      border-bottom: 20px solid transparent;
      background-clip: content-box;


      cursor: ew-resize;
      
      opacity: 0;
      
      &:hover:before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: color-mix(in srgb, var(--accent), transparent var(--accent-faint-mix));
      }
      
      &:after {
        content: '';
        position: absolute;
        left: 0;
        right: auto !important;
        top: 0;
        bottom: 0;
        width: var(--value);
        transition: width linear 250ms;
        background: var(--accent);
      }
      
      &.instant:after {
        transition: none !important;
      }
      
      /* ---- */
      
      &.sticky {
        position: fixed;
        top: calc(100dvh - 22px);
      }
      &.invisible {
        opacity: 0 !important;
      }
    }
    
    .loading-indicator {
      z-index: 10000;
      
      pointer-events: none;
      
      position: absolute;
      left: .5px;
      right: .5px;
      bottom: -8px;
      height: 2px;
      
      background: linear-gradient(90deg, var(--accent) 50%, transparent 50%);
      background-repeat: repeat-x;
      background-size: 50px 100%;
      opacity: 0;
      
    }      

    /* &.show-pause {
      .text {
        display: block;
        padding-left: .2em;
        &:before {
          content: 'Paused';
        }

      }
    } */

    &.show-loading-dots {
      .loading-indicator {
        opacity: 1;   
        animation: video-loading-animation 1s linear infinite;
      }
      .progress {
        opacity: 0; /* Not visible, but you can still drag to interact */
      }
    }
  }
}

body.video-being-dragged,
body.video-being-dragged * {
  cursor: ew-resize !important;
}

@media (width > 767px) {
  .note-content {
    figure {
      &.indented {
        --container-width: calc(100% - var(--indent));
        margin-left: var(--indent);
      }
    }
  }
}

.note-content:has(.credit:not(:last-child)) .credit {
  margin-top: 1em;
  
  &:not(:last-child) {
    margin-bottom: 3em;
  }
}

.blink-comparator .hint:before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  margin-left: -16px;
  margin-top: calc((1lh - 24px) / 2);
  mask: var(--icon-arrow-blink-left) !important;
  mask-repeat: no-repeat !important;
  mask-position: 50% 50% !important;
  background: var(--gray) !important;
}

.blink-comparator .hint:after {
  margin-left: 16px;
  content: 'Hover over to flip';
}

body[pointer-type='touch'] {
  .blink-comparator .hint:after {
    content: 'Tap the image to flip';
  }
}



figure.progress-visible,
figure.progress-visible-while-dragging,
figure.progress-visible-prolonged {
  .progress {
    opacity: 1;
  }
}

@keyframes video-loading-animation {
  0% { background-position: 0 0; }
  100% { background-position: -50px 0; }
}


@media (prefers-color-scheme: light) {
  figure.border-when-on-light:after {
    inset: 0;
    position: absolute;
    z-index: 3;
    outline: .5px solid color-mix(in srgb, var(--gray), transparent var(--gray-faint-mix));
    outline-offset: -.5px;
    content: '';
    
    pointer-events: none;
  }
}

@media (prefers-color-scheme: dark) {
  figure.border-when-on-dark:after {
    inset: 0;
    position: absolute;
    z-index: 3;
    outline: .5px solid color-mix(in srgb, var(--gray), transparent var(--gray-half-mix));
    outline-offset: -.5px;
    content: '';  
    pointer-events: none;
  }
}


.images-side-by-side {
  display: flex;
  flex-direction: row;
  gap: calc(var(--margin) * 2);
  margin-top: 2em;
  margin-bottom: 2em;
  align-items: start;
  
  & > figure {
    margin-top: 0;
    margin-bottom: 0;
  }
  & > .blink-comparator {
    min-width: 100%; /* new */    
    margin-bottom: 0;
    margin-top: 2em;
  }
  
  
  &:has(.blink-comparator + .blink-comparator) > .blink-comparator {
    min-width: 50%; /* Hack – it will only look good if it’s filling out the whole width */
  }
  @media (width > 767px) {
    &:has(.blink-comparator + .blink-comparator + .blink-comparator) > .blink-comparator {
      min-width: calc((100% - var(--margin) * 4) / 3); /* Hack – it will only look good if it’s filling out the whole width */
    }
  }
  @media (width <= 767px) {
    /* Three side by side don’t fit on mobile under any circumstance, so streamline */
    &:has(.blink-comparator + .blink-comparator + .blink-comparator) {
      flex-direction: column;
      display: block;
    }
    &:has(.blink-comparator + .blink-comparator + .blink-comparator) > .blink-comparator {
      min-width: auto;
      margin-top: 4em;
    }
  }
  
}

@media (width > 767px) {
  .images-side-by-side {
    &.indented {
      margin-left: var(--indent);  
    }
  }
}

.blink-comparator {
  display: block;
  margin-top: 3.5em;
  margin-bottom: 2em;
  
  /* touch-action: manipulation; */
  
  & > figure {
    margin-top: 0;
    margin-bottom: 0;    
    /* touch-action: manipulation; */
  }
  & > figure * {
    pointer-events: none; /* So that pointer enter on blink comparator is trimmed to <figure> if there are shadows. */
  }
  
  figure:nth-child(2) {
    display: none;
  }
  
  &.active {
    cursor: alias;
    
    figure:nth-child(1) {
      display: none;
    }
    figure:nth-child(2) {
      display: block;
    }
  }
}



figure.keyed .video-edge-cover {
  outline: 4px solid var(--background);
  outline-offset: -4px;
  /* z-index: -1; */
  
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;

}

:not(.blink-comparator) > :not(.frame-iphone).soft-shadow-hor video {
  pointer-events: none; /* Videos with shadows can stick out and cover text above and below, especially links */
}


@media (width <= 767px) {
  .note-content {
    figure {
      --thumbnail-size: 100px;
    }
    
    code {
      &:has(br) {
        display: block;
        padding-left: var(--viewport-margin-left);
        padding-right: var(--viewport-margin-right);
        margin-left: calc(-1 * var(--viewport-margin-left));
        margin-right: calc(-1 * var(--viewport-margin-right));
        overflow-x: auto;
      }
    }
    

  }
  
  :not(.images-side-by-side) > figure.landscape:not(.soft-shadow-hor),
  .images-side-by-side {
    margin-left: calc(-1 * var(--viewport-margin-left));
    margin-right: calc(-1 * var(--viewport-margin-right));

    /* Three side by side are streamlined above and this helps */
    &:has(.blink-comparator + .blink-comparator + .blink-comparator) {
      margin-left: 0;
      margin-right: 0;
    }
    
    .hint {
      margin-left: var(--viewport-margin-left);
    }
    
    img, video {
      /* object-position: center; */
    }
  }
  
  :not(.images-side-by-side) > figure.landscape:not(.soft-shadow-hor) {
    --container-width: calc(100% + var(--viewport-margin-left) + var(--viewport-margin-right));
  }

  figure { /* For centering – see below */
    container-name: mobile-figure;
    container-type: inline-size;
  }
  
  :not(.images-side-by-side) > figure.landscape:not(.soft-shadow-hor) { /* For centering – see below */
    container-name: mobile-figure-landscape;
    container-type: inline-size;
  }
  
  @media (prefers-color-scheme: light) {
    figure.border-when-on-light:after {
      outline-offset: 0;
    }
  }
  
  @media (prefers-color-scheme: dark) {
    figure.border-when-on-dark:after {
      outline-offset: 0;
    }
  }
}

/* Center if regular but very close to full width – in this case left aligned feels off */
/* Supports both soft-shadow and non soft-shadow */
@container mobile-figure (width > 80vw) {
  figure:after,
  img,
  video {
    /* transform: translateX(calc((50vw - var(--viewport-margin-left)) - 50% * var(--width) / var(--widthFull))); */
  }
}

/* Center if landscape and doesn’t span the whole width */
/* Only needs to support non soft-shadow */
@container mobile-figure-landscape (width > 80vw) {
  figure:after,
  img,
  video {
    transform: translateX(calc(50vw - 50% * var(--width) / var(--widthFull)));
  }
}

/* If 75% width or less, cancel landscaping and treat as regular */
/* Only needs to support non soft-shadow */
@container mobile-figure-landscape (width <= 80vw) {
  :after,
  img,
  video {
    transform: translateX(var(--viewport-margin-left));
  }
}

/* -------------------------------------------------------------- */

.link-explainer {
  position: fixed;
  bottom: 20px;
  left: 0;
  background: #efefef;
  z-index: 100;
  
  outline: 1px solid #0000003f;
  
  border-top-right-radius: 3px;
  
  pointer-events: none;
  opacity: 0;
  
  font-family: ui-system;
  font-size: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  line-height: 12px;
  font-weight: 500;
  
  font-kerning: none; /* Just to match */
  
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  
  box-shadow: 3px 0 6px #0000002f;

  > div {
    display: inline-block;
    
    &.url-spacer {
      display: none;
      /* opacity: 0; */
      padding-left: 5px;
      max-width: 485px;
    }
    
    &.name {
      padding-left: 12px;    
      padding-right: 8px;  
    }
  }
  
  &.visible {
    opacity: 1;
  }
}

/* -------------------------------------------------------------- */
/* SEARCH */

.pagefind-results {
  *:focus-visible {
    /* outline: 10px solid red !important; */
  }

  &.hidden {
    display: none !important;
  }
  
  -webkit-font-smoothing: antialiased !important; 
  font-smooth: antialiased !important;
  
  -webkit-tap-highlight-color: transparent !important; 
  -webkit-text-size-adjust: none !important; 
  text-size-adjust: none !important;

  
  background: var(--background) !important;
  /* background: red !important; */
  
  position: absolute !important;
  z-index: 10000 !important;
  position-anchor: --search-box-anchor !important;
  left: calc(anchor(left)) !important;
  top: calc(anchor(bottom)) !important;
  width: calc(anchor-size(width)) !important;
  
  outline: .5px solid color-mix(in srgb, var(--gray), transparent var(--gray-half-mix)) !important;
  /* box-shadow: 0 .5em 1.8em white !important; */
  
  &:after {
    content: '';
    position: absolute;
    bottom: calc(-1 * var(--margin) / 2);
    left: calc(var(--margin) / 2);
    right: calc(var(--margin) / 2);
    height: calc(var(--margin) / 2 - .5px);
    background: color-mix(in srgb, var(--gray), transparent var(--gray-very-faint-mix));
  }
  
  /* outline: 1px solid red !important; */
  /* background: var(--background); */
  
  /* width: 700px !important; */
  /* width: 100% !important; */
  
  &:empty,
  &:has(ul:empty) {
    opacity: 0;
    pointer-events: none;
  }
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-results {
  max-height: 60vh !important;
  @media (width <= 767px) {
    max-height: 50vh !important;
    
  }
  overflow-y: auto !important;
  /* padding-top: 1em !important; */
  gap: 0 !important;
  overscroll-behavior: contain !important;
  
  scrollbar-color: color-mix(in srgb, var(--accent), transparent 66%) var(--paper);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-result-card {
  font-family: var(--font-sans-serif);
  font-size: var(--font-size-sans-serif);

  border: none !important;
  border-radius: 0 !important;
  &:not(:last-of-type) {
  }
  
  padding-top: calc(1 * var(--margin)) !important;
  padding-bottom: var(--margin) !important;
  padding-left: .75em !important;
  padding-right: .75em !important;
  
  background: var(--background) !important;
  
  
  /* margin-top: .5em !important; */
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-result.selected .pf-result-card {
  background: var(--green-bk-no-noise) !important; 
  
  .pf-skeleton {
    background: color-mix(in srgb, var(--accent), transparent var(--accent-very-faint-mix)) !important;
  }
}

@media (prefers-color-scheme: dark) {
  .pf-skeleton {
    background: color-mix(in srgb, var(--gray), transparent var(--gray-faint-mix)) !important;  
  }
}


:is(*, #\#):is(*, #\#):is(*, #\#) .pf-result {
  scroll-margin-top: calc(2 * var(--margin)) !important;
  scroll-margin-bottom: calc(2 * var(--margin)) !important;
}


:is(*, #\#):is(*, #\#):is(*, #\#) .pf-result:not(:last-of-type) .pf-result-card {
  border-bottom: .5px solid color-mix(in srgb, var(--gray), transparent var(--gray-half-mix)) !important;  
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-result-card:has(.pf-result-title .pf-result-link:hover) {
  /* background: var(--green-bk); */
  /* background: var(--gray-bk-no-noise) !important; */
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-result-title a {
  /* color: red !important; */
  display: block;

  font-family: var(--font-sans-serif) !important;
  font-size: var(--font-size-sans-serif) !important;
  line-height: 1.2 !important;
  
  color: var(--accent)  !important;
  font-weight: 450 !important;
  /* letter-spacing: .02em; */
  
  &:hover {
    text-decoration: none  !important;
  }
  
  &.starts-with-double-quote { /* Chrome doesn't support hanging-punctuation yet */
    text-indent: -.29em !important;
  }
  
  /* 108.789 = 76.789 + 16 + 16 = 108.789 */
  
  mark {
    font-weight: 480 !important;
    /* color: var(--text) !important; */
  }
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-result-excerpt {
  /* background: yellow;  */
  
  white-space: unset !important;
  /* text-overflow: unset !important; */
  
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  hyphens: auto !important;

  /* Make room for highlight */
  padding-top: .2em;
  margin-top: .5em !important;
  
  min-height: calc(2lh + .2em);
  
  font-family: var(--font-sans-serif);
  font-size: var(--font-size-hint) !important;
  line-height: 1.3 !important;
  color: var(--gray) !important;
  letter-spacing: .01em !important;
  font-weight: 350 !important;
  
  mark {
    font-weight: 440 !important;
    hyphens: auto !important;
    color: var(--text) !important;
  }
}

:is(*, #\#):is(*, #\#):is(*, #\#) .pf-skeleton-image {
  display: none !important;
}
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-skeleton {
  border-radius: 0 !important;
  animation: none !important; 
}
:is(*, #\#):is(*, #\#):is(*, #\#) .pf-skeleton-title {
  border-radius: 0 !important;
  animation: none !important; 
  
  height: calc(1.2 * var(--font-size-sans-serif)) !important;
}

mark {
  /* background: var(--accent-diluted) !important; */
  /* border-top: .3em solid var(--accent-diluted); */
  /* border-bottom: .1em solid var(--accent-diluted); */
  
  /* outline: 1px solid var(--accent); */
  /* outline-offset: .2em; */
  
  background: transparent !important;
  /* background: var(--accent) !important; */
  /* background: color-mix(in srgb, var(--accent), transparent var(--accent-faint-mix)) !important; */
  /* color: var(--paper) !important; */
  color: var(--text) !important;
  /* outline: .5px solid color-mix(in srgb, var(--accent), transparent var(--accent-faint-mix)); */

  padding-left: .1em;
  padding-right: .1em;
  margin-left: -.1em;
  margin-right: -.1em;
  /* font-weight: 550; */
}


.tooltip {
  position: fixed;
  /* left: 10px; */
  /* top: 10px; */
  background: var(--text);
  color: var(--background);
  
  white-space: nowrap;
  
  padding: .5em 1.2em;
  font-family: var(--font-sans-serif);
  font-size: var(--font-size-tiny);
  font-variation-settings: "wght" 400, "wdth" 100;
  letter-spacing: .02em;
  
  clip-path: polygon(calc(var(--margin) * .52) 0, calc(var(--margin) * .52) 0, 0 100%, 0 100%);
  
  &.appear {
    transition: clip-path var(--bezier) 350ms;
    clip-path: polygon(calc(var(--margin) * .52) 0, 100% 0, calc(100% - calc(var(--margin) * .52)) 100%, 0 100%);
  }
  
  &.disappear {
    transition: clip-path var(--bezier) 200ms;    
    clip-path: polygon(100% 0, 100% 0, calc(100% - calc(var(--margin) * .52)) 100%, calc(100% - calc(var(--margin) * .52)) 100%);
  }
}

/* -------------------------------------------------------------- */

@media (width <= 767px) {
  .is-not-mobile {
    display: none !important;		
  }
}
@media (width > 767px) {
  .is-mobile {
    display: none !important;		
  }
}
@media (width <= 950px) {
  .is-not-narrow {
    display: none !important;		
  }
}
@media (width > 950px) {
  .is-narrow {
    display: none !important;		
  }
}


/* -------------------------------------------------------------- */


@font-face {
  font-family: Warbler;
  src: url(https://unsung.aresluna.org/_unsung/WarblerVariable.woff2) format('woff2');
  font-weight: 100 900;
}
@font-face {
  font-family: Warbler;
  src: url(https://unsung.aresluna.org/_unsung/WarblerVariable-Italic.woff2) format('woff2');
  font-weight: 100 900;
  font-style: italic;
}
@font-face {
  font-family: Bild;
  src: url(https://unsung.aresluna.org/_unsung/BildVariable-v5.woff2) format('woff2');
  font-weight: 100 900;
}
@font-face {
  font-family: Neonoir;  
  src: url(https://unsung.aresluna.org/_unsung/Neonoir-Bold.woff2?v6) format("woff2");
}
@font-face {
  font-family: PixelFontFallbackMac;
  src: local(Geneva);
  size-adjust: 120%;
}
@font-face {
  font-family: PixelFontFallbackWindows;
  src: local(SegoeUI);
  size-adjust: 120%;
}
@font-face {
  font-family: UnsungSymbolsFallback;
  src: url(https://unsung.aresluna.org/_unsung/UnsungSymbols-Regular.woff2?27) format("woff2");
  unicode-range: U+F8FF, U+1F310, U+2318, U+2325, U+2303, U+21E7, U+229E, U+2191, U+2192, U+2193, U+2190, U+21E5, U+2196, U+2198, U+2263, U+23CE, U+2324, U+238B, U+2327, U+232B, U+2326, U+2912, U+2913, U+21DE, U+21DF, U+2B7E, U+25C0, U+25B2, U+25BC, U+25B6, U+1F512, U+21EA;
}