@layer fonts{@font-face{font-family:Atkinson Hyperlegible;src:url(/fonts/AtkinsonHyperlegibleNextVF-Variable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}@font-face{font-family:Kalam;src:url(/fonts/Kalam-Light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Kalam;src:url(/fonts/Kalam-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Kalam;src:url(/fonts/Kalam-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Bitter;src:url(/fonts/Bitter-VariableFont_wght.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}@font-face{font-family:Bitter;src:url(/fonts/Bitter-Italic-VariableFont_wght.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}}@layer reset{body{margin:0}:is(ul,ol).cluster{list-style:none;padding-inline:0;margin-block:0}dd{margin-left:0}}@layer tokens{:root{--fontsize-base: clamp(1rem, 2cqi, 1.25rem);--lineheight-base: 1.6;--rhythm-unit: calc(var(--fontsize-base) * var(--lineheight-base));--type-ratio: 1.25;--article-width: 65ch;--content-padding: var(--space-sm);--font-text: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;--font-heading: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;--font-display: "Bitter", Georgia, Cambria, "Times New Roman", serif;--font-handwritten: "Kalam", "Comic Sans MS", "Apple Chancery", "Bradley Hand", cursive;--fontsize-xs: calc(var(--fontsize-base) / pow(var(--type-ratio), 2));--fontsize-sm: calc(var(--fontsize-base) / var(--type-ratio));--fontsize-md: var(--fontsize-base);--fontsize-lg: calc(var(--fontsize-base) * var(--type-ratio));--fontsize-xl: calc(var(--fontsize-base) * pow(var(--type-ratio), 2));--fontsize-2xl: calc(var(--fontsize-base) * pow(var(--type-ratio), 3));--fontsize-3xl: calc(var(--fontsize-base) * pow(var(--type-ratio), 4));--fontsize-4xl: calc(var(--fontsize-base) * pow(var(--type-ratio), 5));--lineheight-2xs: calc(var(--lineheight-base) - .5);--lineheight-xs: calc(var(--lineheight-base) - .4);--lineheight-sm: calc(var(--lineheight-base) - .2);--lineheight-md: var(--lineheight-base);--lineheight-lg: calc(var(--lineheight-base) + .1);--lineheight-xl: calc(var(--lineheight-base) + .2);--lineheight-2xl: calc(var(--lineheight-base) + .4);--space-0: 0;--space-3xs: calc(.125 * var(--rhythm-unit));--space-2xs: calc(.25 * var(--rhythm-unit));--space-xs: calc(.5 * var(--rhythm-unit));--space-sm: calc(.75 * var(--rhythm-unit));--space-md: var(--rhythm-unit);--space-lg: calc(1.5 * var(--rhythm-unit));--space-xl: calc(2 * var(--rhythm-unit));--space-2xl: calc(3 * var(--rhythm-unit));--space-3xl: calc(4 * var(--rhythm-unit));--border-thin: 1px;--border-normal: 3px;--border-thick: 6px;--c-base: .2;--c-desat: .02;--l-step: .11111 ;--hue-red: 30;--hue-orange: 60;--hue-yellow: 95;--hue-green: 120;--hue-teal: 200;--color-neutral-0: oklch(from var(--color-neutral-1) calc(var(--l-step) / 2) c h);--color-neutral-1: oklch(var(--l-step) var(--c-desat) var(--hue-yellow));--color-neutral-2: oklch(from var(--color-neutral-1) calc(2 * var(--l-step)) c h);--color-neutral-3: oklch(from var(--color-neutral-1) calc(3 * var(--l-step)) c h);--color-neutral-4: oklch(from var(--color-neutral-1) calc(4 * var(--l-step)) c h);--color-neutral-5: oklch(from var(--color-neutral-1) calc(5 * var(--l-step)) c h);--color-neutral-6: oklch(from var(--color-neutral-1) calc(6 * var(--l-step)) c h);--color-neutral-7: oklch(from var(--color-neutral-1) calc(7 * var(--l-step)) c h);--color-neutral-8: oklch(from var(--color-neutral-1) calc(8 * var(--l-step)) c h);--color-neutral-9: oklch(from var(--color-neutral-1) calc(100 - (var(--l-step) / 2)) c h);--color-brand-0: oklch(from var(--color-brand-1) calc(var(--l-step) / 2) c h);--color-brand-1: oklch(var(--l-step) var(--c-base) var(--hue-red));--color-brand-2: oklch(from var(--color-brand-1) calc(2 * var(--l-step)) c h);--color-brand-3: oklch(from var(--color-brand-1) calc(3 * var(--l-step)) c h);--color-brand-4: oklch(from var(--color-brand-1) calc(4 * var(--l-step)) c h);--color-brand-5: oklch(from var(--color-brand-1) calc(5 * var(--l-step)) c h);--color-brand-6: oklch(from var(--color-brand-1) calc(6 * var(--l-step)) c h);--color-brand-7: oklch(from var(--color-brand-1) calc(7 * var(--l-step)) c h);--color-brand-8: oklch(from var(--color-brand-1) calc(8 * var(--l-step)) c h);--color-brand-9: oklch(from var(--color-brand-1) calc(100 - (var(--l-step) / 2)) c h);--color-accent-0: oklch(from var(--color-accent-1) calc(var(--l-step) / 2) c h);--color-accent-1: oklch(var(--l-step) var(--c-base) var(--hue-orange));--color-accent-2: oklch(from var(--color-accent-1) calc(2 * var(--l-step)) c h);--color-accent-3: oklch(from var(--color-accent-1) calc(3 * var(--l-step)) c h);--color-accent-4: oklch(from var(--color-accent-1) calc(4 * var(--l-step)) c h);--color-accent-5: oklch(from var(--color-accent-1) calc(5 * var(--l-step)) c h);--color-accent-6: oklch(from var(--color-accent-1) calc(6 * var(--l-step)) c h);--color-accent-7: oklch(from var(--color-accent-1) calc(7 * var(--l-step)) c h);--color-accent-8: oklch(from var(--color-accent-1) calc(8 * var(--l-step)) c h);--color-accent-9: oklch(from var(--color-accent-1) calc(100 - (var(--l-step) / 2)) c h);--color-casual-0: oklch(from var(--color-casual-1) calc(var(--l-step) / 2) c h);--color-casual-1: oklch(var(--l-step) var(--c-base) var(--hue-yellow));--color-casual-2: oklch(from var(--color-casual-1) calc(2 * var(--l-step)) c h);--color-casual-3: oklch(from var(--color-casual-1) calc(3 * var(--l-step)) c h);--color-casual-4: oklch(from var(--color-casual-1) calc(4 * var(--l-step)) c h);--color-casual-5: oklch(from var(--color-casual-1) calc(5 * var(--l-step)) c h);--color-casual-6: oklch(from var(--color-casual-1) calc(6 * var(--l-step)) c h);--color-casual-7: oklch(from var(--color-casual-1) calc(7 * var(--l-step)) c h);--color-casual-8: oklch(from var(--color-casual-1) calc(8 * var(--l-step)) c h);--color-casual-9: oklch(from var(--color-casual-1) calc(100 - (var(--l-step) / 2)) c h);--color-expert-0: oklch(from var(--color-expert-1) calc(var(--l-step) / 2) c h);--color-expert-1: oklch(var(--l-step) var(--c-base) var(--hue-green));--color-expert-2: oklch(from var(--color-expert-1) calc(2 * var(--l-step)) c h);--color-expert-3: oklch(from var(--color-expert-1) calc(3 * var(--l-step)) c h);--color-expert-4: oklch(from var(--color-expert-1) calc(4 * var(--l-step)) c h);--color-expert-5: oklch(from var(--color-expert-1) calc(5 * var(--l-step)) c h);--color-expert-6: oklch(from var(--color-expert-1) calc(6 * var(--l-step)) c h);--color-expert-7: oklch(from var(--color-expert-1) calc(7 * var(--l-step)) c h);--color-expert-8: oklch(from var(--color-expert-1) calc(8 * var(--l-step)) c h);--color-expert-9: oklch(from var(--color-expert-1) calc(100 - (var(--l-step) / 2)) c h);--color-interactive-0: oklch(from var(--color-interactive-1) calc(var(--l-step) / 2) c h);--color-interactive-1: oklch(var(--l-step) var(--c-base) var(--hue-teal));--color-interactive-2: oklch(from var(--color-interactive-1) calc(2 * var(--l-step)) c h);--color-interactive-3: oklch(from var(--color-interactive-1) calc(3 * var(--l-step)) c h);--color-interactive-4: oklch(from var(--color-interactive-1) calc(4 * var(--l-step)) c h);--color-interactive-5: oklch(from var(--color-interactive-1) calc(5 * var(--l-step)) c h);--color-interactive-6: oklch(from var(--color-interactive-1) calc(6 * var(--l-step)) c h);--color-interactive-7: oklch(from var(--color-interactive-1) calc(7 * var(--l-step)) c h);--color-interactive-8: oklch(from var(--color-interactive-1) calc(8 * var(--l-step)) c h);--color-interactive-9: oklch(from var(--color-interactive-1) calc(100 - (var(--l-step) / 2)) c h)}html,[data-theme=light]{--foreground: var(--color-neutral-0);--background: var(--color-neutral-9);--surface-1: var(--color-neutral-8);--surface-2: var(--color-neutral-7);--surface-3: var(--color-neutral-6);--surface-4: var(--color-neutral-5);--surface-1-contrast: var(--color-neutral-6);--surface-2-contrast: var(--color-neutral-7);--surface-3-contrast: var(--color-neutral-8);--surface-4-contrast: var(--color-neutral-9);--heading-primary: var(--color-brand-3);--heading-secondary: var(--color-accent-3);--link-normal: var(--color-interactive-3);--link-hover: var(--color-interactive-5);--link-decoration: oklch(from var(--link-hover) l c h / .5);--link-hover-decoration: var(--link-hover)}[data-theme=dark]{--foreground: var(--color-neutral-9);--background: var(--color-neutral-0);--surface-1: var(--color-neutral-1);--surface-2: var(--color-neutral-2);--surface-3: var(--color-neutral-3);--surface-4: var(--color-neutral-4);--surface-1-contrast: var(--color-neutral-8);--surface-2-contrast: var(--color-neutral-7);--surface-3-contrast: var(--color-neutral-6);--surface-4-contrast: var(--color-neutral-5);--heading-primary: var(--color-brand-6);--heading-secondary: var(--color-accent-6);--link-normal: var(--color-interactive-6);--link-hover: var(--color-interactive-7);--link-decoration: oklch(from var(--link-hover) l c h / .5);--link-hover-decoration: var(--link-hover)}}@layer elements{:root{color-scheme:light dark}html,body{min-height:100%}a{font-weight:700;transition:color .2s,text-decoration-color .2s}a:is(:link,:visited){color:var(--link-normal);text-decoration-color:var(--link-decoration)}a:is(:hover,:active){color:var(--link-hover);text-decoration-color:var(--link-decoration-hover)}body{color:var(--foreground);background-color:var(--background);font-family:var(--font-text);font-size:var(--fontsize-md);line-height:var(--lineheight-md);display:flex;flex-direction:column;min-height:100%}:is(h1,h2,h3,h4,h5,h6){font-family:var(--font-heading);color:var(--heading-primary)}h1{font-weight:300;font-family:var(--font-display);font-size:var(--fontsize-4xl);line-height:var(--lineheight-2xs)}h2{font-weight:700;font-size:var(--fontsize-3xl);line-height:var(--lineheight-xs)}h3{font-weight:600;font-size:var(--fontsize-2xl);line-height:var(--lineheight-sm)}h4{font-weight:500;font-size:var(--fontsize-xl);line-height:var(--lineheight-sm)}h5{font-weight:400;font-style:italic;font-size:var(--fontsize-lg);line-height:var(--lineheight-md)}h6{font-weight:600;font-size:var(--fontsize-md);line-height:var(--lineheight-md)}img{max-width:100%;height:auto}select{font-size:var(--fontsize-md);padding:var(--space-2xs);border-radius:.5em}[data-theme=dark]{color-scheme:dark;color:var(--foreground);background-color:var(--background)}[data-theme=light]{color-scheme:light;color:var(--foreground);background-color:var(--background)}dt{font-weight:700}:where(dl,ul,ol):not([class]):not(li *){border-inline-start:var(--space-3xs) currentColor solid;padding-inline-start:var(--space-sm);padding-block:var(--space-xs);background-color:var(--surface-1);&:has(:nth-child(10)){padding-inline-start:var(--space-md)}li{margin-left:var(--space-xs)}}dl:not([class]) dd+dt{margin-top:var(--space-2xs)}figure{margin:0}figure img{display:block}figcaption{padding-block:var(--space-2xs)}}@layer composition{[class^=stack]>*{margin-block:0}.stack>*+*{margin-block-start:var(--stack-gap, var(--space-md))}.box{padding:var(--box-padding, var(--space-sm));border-width:var(--box-border-width, var(--border-normal));border-style:var(--box-border-style, solid);border-color:currentColor}.center{box-sizing:content-box;margin-inline:auto;max-inline-size:var(--center-max-size, fit-content)}.cluster{display:flex;flex-wrap:var(--cluster-wrap, nowrap);justify-content:var(--cluster-justify, flex-start);align-items:var(--cluster-align, center);gap:var(--cluster-gap, var(--space-md))}:where(ul,ol).cluster{--cluster-gap: var(--space-sm)}.with-sidebar-left,.with-sidebar-right{display:flex;flex-wrap:wrap;gap:var(--sidebar-gap, var(--space-xs))}.with-sidebar-left{>:first-child{flex-grow:1}>:last-child{flex-basis:0;flex-grow:999;min-inline-size:50%}}.with-sidebar-right{>:last-child{flex-grow:1}>:first-child{flex-basis:0;flex-grow:999;min-inline-size:50%}}.switcher{display:flex;flex-wrap:wrap;gap:var(--space-xs);>*{flex-grow:1;flex-basis:calc((30rem - 100%)*999)}>:nth-last-child(n+5),>:nth-last-child(n+5)~*{flex-basis:100%}}.cover{display:flex;flex-direction:column;min-block-size:100dvh;padding:var(--space-md);>*{margin-block:var(--space-md)}>:first-child:not(h1){margin-block-start:0}>:last-child:not(h1){margin-block-end:0}.cover>h1{margin-block:auto}}.grid{--default-grid-size: calc(8 * var(--rhythm-unit));--grid-size: var(--grid-min-cell, var(--default-grid-size));display:grid;grid-gap:var(--grid-gap, var(--space-xs))}@supports (width: min(var(--grid-size),1fr)){.grid{grid-template-columns:repeat(auto-fit,minmax(min(var(--grid-size),100%),1fr))}}.frame{--n: var(--frame-width, 16);--d: var(--frame-height, 9);aspect-ratio:var(--n) / var(--d);overflow:hidden;display:flex;justify-content:center;align-items:center;>:is(img,video){inline-size:100%;block-size:100%;object-fit:cover}}.icon{width:.75em;width:1cap;height:.75em;height:1cap}.with-icon{display:inline-flex;gap:var(--icon-gap, var(--space-xs));align-items:baseline}main{container-type:inline-size;container-name:--body-copy}}@layer blocks{[href="#main-content"]{position:absolute;top:0;left:50%;translate:-50% -100%;transition:translate .2s ease-in-out;padding:var(--space-xs);&:focus{display:block;translate:-50% 0}}:is(#page-header,#page-footer){--stack-gap: var(--space-xs)}#page-header{position:relative;padding:var(--content-padding);overflow:hidden;>*{position:relative;z-index:2}&:after{z-index:1;content:"";opacity:.2;inset:0;position:absolute;filter:url(#noiseFilter);mix-blend-mode:luminosity}}#page-footer{position:relative;padding:var(--content-padding);border-block-end-width:0;padding-block-start:var(--stack-gap);&:after{position:absolute;filter:url(#noiseFilter)}}#home{--cluster-gap: var(--space-2xs);--cluster-align: baseline;font-size:var(--fontsize-4xl);font-family:var(--font-handwritten);font-weight:400;text-decoration:none;svg{height:1cap;width:auto}}figure.hero{margin-inline:calc(-1 * var(--content-padding));figcaption{padding:var(--space-sm)}img{width:100%;height:100%;max-height:70vh;object-fit:cover;object-position:center}}dl.metadata{--cluster-wrap: wrap;--cluster-gap: var(--space-xs)}.metadata-item{--cluster-gap: var(--space-3xs);& dt:after{content:": "}}[data-position=left]{font-family:var(--font-display);@container --body-copy (width > 768px){float:left;width:31%;margin-inline-end:var(--space-lg);margin-block-end:var(--space-lg);font-size:var(--fontsize-lg)}}[data-position=right]{font-family:var(--font-display);@container --body-copy (width > 768px){float:right;width:31%;margin-inline-start:var(--space-lg);margin-block-end:var(--space-lg);font-size:var(--fontsize-lg)}}.archive{padding-inline:var(--space-sm);--stack-gap: var(--space-md)}.lyrics-list li{margin-block-start:var(--space-xs);.lyrics-lyric:not(:has(del)){font-weight:500}del{font-weight:200}}:is(header,footer) nav{--cluster-wrap: wrap;--cluster-justify: center}nav[aria-labelledby=tags-heading]{ul{--cluster-justify: start;--cluster-gap: var(--space-2xs)}li{font-size:var(--fontsize-sm);background-color:var(--surface-2);color:var(--surface-2-contrast);line-height:var(--lineheight-xs);padding:var(--space-2xs) var(--space-sm);border-radius:var(--space-xs);transition:background-color .3s;a{text-decoration:none;color:var(--foreground)}&:has(a:is(:hover,:active)){background-color:var(--surface-1);color:var(--surface-1-contrast)}}}article[data-contenttype]{box-sizing:border-box;width:min(var(--article-width),100%);padding:var(--content-padding);--fontsize-base: clamp(1rem, 2cqi, 1.25rem);&.stack{--stack-gap: var(--space-xs)}header{--stack-gap: var(--space-xs);p{font-family:var(--font-handwritten);font-size:var(--fontsize-xl);color:light-dark(var(--neutral-800),var(--neutral-200))}}}article:not([data-contenttype]) :is(header,footer){--stack-gap: var(--space-3xs)}header>.metadata{font-size:var(--fontsize-sm);color:light-dark(var(--neutral-800),var(--neutral-200))}.grid:has(article){--grid-gap: var(--space-sm);--box-border-width: var(--border-thin);--box-padding: var(--space-xs);h2{font-size:var(--fontsize-lg)}a{transition:text-decoration-color .3s}a:is(:link,:visited){text-decoration-color:oklch(from currentcolor l c h / 0)}a:is(:hover,:active){text-decoration-color:oklch(from currentcolor l c h / 1)}}.card-link{--stack-gap: var(--space-2xs);border-color:var(--heading-primary);position:relative;transition:translate .15s ease-in-out;corner-shape:scoop;border-radius:10px;background-color:var(--surface-1);overflow:hidden;:is(h2,h3,h4) a:after{content:"";position:absolute;inset:0}&:has(a:hover),&:has(a:focus){translate:0 -2px}img{display:block;margin-block-start:calc(-1 * var(--box-padding));margin-inline:calc(-1 * var(--box-padding));width:calc(100% + (2 * var(--box-padding)));border-block-end:solid 1px var(--heading-primary);aspect-ratio:16 / 9;object-fit:cover;max-width:none;height:auto}}}@layer helpers{.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}}@layer overrides;
