/* devtig.dev: the "Hausmannskost" design. DESIGN.md explains the system. */
/* devtig theme. Fonts are self-hosted (public/fonts, SIL OFL 1.1). */
@font-face{font-family:'Funnel Display';font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/funnel-display-300-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Funnel Display';font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/funnel-display-300-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Funnel Sans';font-style:italic;font-weight:300 800;font-display:swap;src:url(/fonts/funnel-sans-300-800-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Funnel Sans';font-style:italic;font-weight:300 800;font-display:swap;src:url(/fonts/funnel-sans-300-800-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Funnel Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/funnel-sans-300-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Funnel Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/funnel-sans-300-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-400-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-400-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ============================================================
   devtig: tactile & hearty. Light "Stube", dark "Kellerbar".
   Crisp pickle-water ground, aubergine ink, kitchen inks
   Gurke / Senf / Paprika / Blaukraut. Everything you can touch
   sits like glazed ceramic: tinted rim + darker lip + soft shadow + grain.
   ============================================================ */
:root{
  color-scheme: light;
  --paper:   oklch(97.9% 0.01 128);
  --paper-2: oklch(93.6% 0.02 128);
  --surface: oklch(99.5% 0.004 128);
  --ink:     oklch(24% 0.07 330);
  --text:    oklch(31% 0.05 330);
  --muted:   oklch(48% 0.04 330);
  --line:    oklch(24% 0.07 330 / .13);
  --line-2:  oklch(24% 0.07 330 / .24);
  --gurke:   oklch(54% 0.15 137);
  --senf:    oklch(84% 0.165 90);
  --paprika: oklch(57.5% 0.205 31);
  --kraut:   oklch(49% 0.16 296);
  --aub:     oklch(31% 0.09 330);
  --on-gurke:   oklch(99% 0.01 128);
  --on-senf:    oklch(24% 0.07 330);
  --on-paprika: oklch(99% 0.01 60);
  --on-kraut:   oklch(99% 0.01 296);
  --deep:   oklch(22% 0.06 330);
  --hi:     oklch(100% 0 0 / .8);
  --hi-2:   oklch(100% 0 0 / .32);
  --shadow: oklch(26% 0.08 330 / .22);
  --sticker-edge: oklch(100% 0 0);
  --focus:  var(--kraut);
  --glow:   oklch(88% 0.1 137 / .38);
  --rim: 24%;
  --neon:   0 0 0 transparent;
  --pic-inset: oklch(10% 0.03 330 / .3); --pic-edge: oklch(10% 0.03 330 / .14);
  --glare: oklch(100% 0 0 / .22); --tab-hi: oklch(100% 0 0 / .35);
  --icode-bg: color-mix(in oklab, var(--senf) 30%, var(--surface));
  --icode-ink: var(--ink);
  --icode-edge: color-mix(in oklab, var(--senf) 70%, var(--deep) 10%);
  --quote-bg: color-mix(in oklab, var(--senf) 26%, var(--surface));
  --cta-bg:   var(--senf);
  --cta-ink:  var(--ink);
  --cta-head: var(--ink);
  --cta-lip:  color-mix(in oklab, var(--senf) 55%, var(--deep));
  --foot-bg:  var(--aub);
  --foot-ink: oklch(95% 0.02 100);
  --foot-mute:oklch(80% 0.04 330);
  --code-bg:   oklch(23% 0.05 330);
  --code-head: oklch(28.5% 0.055 330);
  --code-lip:  oklch(14% 0.04 330);
  --code-rule: oklch(100% 0 0 / .07);
  --code-btn:  oklch(100% 0 0 / .1);
  --code-ink:  oklch(94% 0.012 100);
  --code-dim:  oklch(68% 0.03 330);
  /* same values as src/lib/shiki.mjs, which colours the code itself */
  --tk-key:    #f7cc4b;
  --tk-str:    #9fe079;
  --tk-num:    #ff976d;
  --tk-fn:     #c7b2ff;
  --tk-out:    oklch(76% 0.03 330);
  --tk-ins:    #89dd76;
  --tk-del:    #ff7e70;
  --tk-chg:    #f7cc4b;
  --grain-o: .07; --grain-blend: multiply; --grain-filter: none;
  --sun: none; --moon: block;
  
  --f-display: "Funnel Display", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-body: "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --step-0: 1.0625rem;
  --step-2: clamp(1.4rem, 1.2rem + .8vw, 1.8rem);
  --step-3: clamp(1.75rem, 1.3rem + 1.9vw, 2.7rem);
  --step-4: clamp(2.3rem, 1.5rem + 3.6vw, 4.5rem);
  --step-5: clamp(3rem, 1.4rem + 6vw, 7rem);
  --r-xl: 44px; --r-l: 30px; --r-m: 20px; --r-tile: 16px; --r-s: 12px; --r-xs: 8px;
  --max: 1360px; --gutter: clamp(16px, 4vw, 48px); --head-h: 84px; --measure: 48rem;
  --pop: cubic-bezier(.3, 1.6, .5, 1);
}
/* Kellerbar: the cellar bar after closing time. Same values twice so the toggle wins both ways. */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
    color-scheme: dark;
    --paper: oklch(17% 0.03 330); --paper-2: oklch(14% 0.025 330); --surface: oklch(23% 0.042 330);
    --ink: oklch(95.5% 0.015 105); --text: oklch(87% 0.02 100); --muted: oklch(74% 0.035 330);
    --line: oklch(95% 0.02 105 / .12); --line-2: oklch(95% 0.02 105 / .22);
    --gurke: oklch(78% 0.17 137); --senf: oklch(86% 0.16 91); --paprika: oklch(70% 0.185 33); --kraut: oklch(73% 0.13 296); --aub: oklch(30% 0.07 330);
    --on-gurke: oklch(19% 0.04 330); --on-senf: oklch(19% 0.04 330); --on-paprika: oklch(17% 0.04 330); --on-kraut: oklch(17% 0.04 330);
    --deep: oklch(6% 0.02 330); --hi: oklch(100% 0 0 / .09); --hi-2: oklch(100% 0 0 / .28); --shadow: oklch(4% 0.02 330 / .7);
    --sticker-edge: oklch(93% 0.02 100); --focus: var(--senf);
    --glow: oklch(86% 0.16 91 / .14); --rim: 42%; --neon: 0 0 28px oklch(86% 0.16 91 / .45);
    --icode-bg: color-mix(in oklab, var(--senf) 13%, var(--surface)); --icode-ink: var(--senf); --icode-edge: color-mix(in oklab, var(--senf) 30%, transparent);
    --quote-bg: color-mix(in oklab, var(--senf) 10%, var(--surface));
    --cta-bg: oklch(27% 0.075 330); --cta-ink: var(--text); --cta-head: var(--senf); --cta-lip: oklch(8% 0.02 330);
    --foot-bg: oklch(12% 0.022 330); --foot-ink: var(--ink); --foot-mute: oklch(72% 0.035 330);
    --code-bg: oklch(12.5% 0.022 330); --code-head: oklch(21% 0.04 330); --code-lip: oklch(5% 0.01 330);
    --code-rule: oklch(100% 0 0 / .1); --code-btn: oklch(100% 0 0 / .1);
    --code-dim: oklch(64% 0.03 330);
    --grain-o: .07; --grain-blend: screen; --grain-filter: invert(1);
    --sun: block; --moon: none;
  }}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper: oklch(17% 0.03 330); --paper-2: oklch(14% 0.025 330); --surface: oklch(23% 0.042 330);
  --ink: oklch(95.5% 0.015 105); --text: oklch(87% 0.02 100); --muted: oklch(74% 0.035 330);
  --line: oklch(95% 0.02 105 / .12); --line-2: oklch(95% 0.02 105 / .22);
  --gurke: oklch(78% 0.17 137); --senf: oklch(86% 0.16 91); --paprika: oklch(70% 0.185 33); --kraut: oklch(73% 0.13 296); --aub: oklch(30% 0.07 330);
  --on-gurke: oklch(19% 0.04 330); --on-senf: oklch(19% 0.04 330); --on-paprika: oklch(17% 0.04 330); --on-kraut: oklch(17% 0.04 330);
  --deep: oklch(6% 0.02 330); --hi: oklch(100% 0 0 / .09); --hi-2: oklch(100% 0 0 / .28); --shadow: oklch(4% 0.02 330 / .7);
  --sticker-edge: oklch(93% 0.02 100); --focus: var(--senf);
  --glow: oklch(86% 0.16 91 / .14); --rim: 42%; --neon: 0 0 28px oklch(86% 0.16 91 / .45);
  --icode-bg: color-mix(in oklab, var(--senf) 13%, var(--surface)); --icode-ink: var(--senf); --icode-edge: color-mix(in oklab, var(--senf) 30%, transparent);
  --quote-bg: color-mix(in oklab, var(--senf) 10%, var(--surface));
  --cta-bg: oklch(27% 0.075 330); --cta-ink: var(--text); --cta-head: var(--senf); --cta-lip: oklch(8% 0.02 330);
  --foot-bg: oklch(12% 0.022 330); --foot-ink: var(--ink); --foot-mute: oklch(72% 0.035 330);
  --code-bg: oklch(12.5% 0.022 330); --code-head: oklch(21% 0.04 330); --code-lip: oklch(5% 0.01 330);
  --code-rule: oklch(100% 0 0 / .1); --code-btn: oklch(100% 0 0 / .1);
  --code-dim: oklch(64% 0.03 330);
  --grain-o: .07; --grain-blend: screen; --grain-filter: invert(1);
  --sun: block; --moon: none;
}
/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;accent-color:var(--paprika);scrollbar-color:color-mix(in oklab,var(--muted) 55%,transparent) transparent}
/* focused elements stay clear of the sticky header; not scroll-padding on html, which also makes links inside the header scroll the page */
main,:is(main,.site-foot,.nav-m) :is(a,button,input,[tabindex]){scroll-margin-top:calc(var(--head-h) + 12px)}
body{
  min-height:100dvh; overflow-x:clip;
  background-color:var(--paper);
  background-image:radial-gradient(80rem 42rem at 88% -12%, var(--glow), transparent 70%);
  background-repeat:no-repeat;
  color:var(--text); font:400 var(--step-0)/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased;
}
body::before{ /* grain */
  content:""; position:fixed; inset:0; z-index:90; pointer-events:none;
  opacity:var(--grain-o); mix-blend-mode:var(--grain-blend); filter:var(--grain-filter);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
button,input{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);color:var(--ink);text-wrap:balance;line-height:1.05}
p,li{text-wrap:pretty}
/* a very long word or URL breaks instead of stretching the page; tables keep scrolling sideways */
h1,h2,h3,h4,.post-dek,.card-ex,.feat p.ex,.content,.toc a,.talk-sub,.talk-event,.talk-abstract,.sticker,figcaption{overflow-wrap:anywhere}
::selection{background:var(--senf);color:var(--on-senf)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:var(--r-xs)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:.6em 1em;border-radius:999px;background:var(--ink);color:var(--paper);font:700 .95rem/1 var(--f-display)}
.skip:focus{top:12px}
[hidden]{display:none!important}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;
  padding-left:max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right:max(var(--gutter), env(safe-area-inset-right, 0px))}
.ico{width:1.15em;height:1.15em;flex:none}
/* ---------- tactile primitives ---------- */
.btn{
  --b:var(--paprika); --b-on:var(--on-paprika); --lip:4px;
  display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;
  font:700 1rem/1 var(--f-display);letter-spacing:.005em;text-decoration:none;
  padding:.78em 1.25em .82em;border:0;border-radius:999px;cursor:pointer;
  background:var(--b);color:var(--b-on);
  box-shadow:inset 0 2px 0 var(--hi-2),0 var(--lip) 0 color-mix(in oklab,var(--b) 55%,var(--deep)),0 calc(var(--lip) + 8px) 18px -8px var(--shadow);
  transition:transform .14s var(--pop),box-shadow .14s ease;
}
@media (hover: hover){.btn:hover{transform:translateY(-1px);--lip:5px}}
.btn:active{transform:translateY(3px);--lip:1px}
.btn-quiet{--b:var(--surface);--b-on:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line),inset 0 2px 0 var(--hi),0 var(--lip) 0 var(--line-2),0 calc(var(--lip) + 8px) 18px -10px var(--shadow)}
.ikey{
  --lip:4px; display:grid;place-items:center;width:44px;height:44px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:var(--surface);color:var(--ink);text-decoration:none;
  box-shadow:inset 0 0 0 1.5px var(--line),inset 0 2px 0 var(--hi),0 var(--lip) 0 var(--line-2),0 calc(var(--lip) + 6px) 14px -8px var(--shadow);
  transition:transform .14s var(--pop),box-shadow .14s;
}
@media (hover: hover){.ikey:hover{transform:translateY(-1px)}}
.ikey:active{transform:translateY(3px);--lip:1px}
.theme-toggle .i-sun{display:var(--sun)}
.theme-toggle .i-moon{display:var(--moon)}
/* stickers: palette cycle, a tag's accent_color (inline --c) wins; main.js picks --on for those */
.sticker{
  --c:var(--gurke); --on:var(--on-gurke);
  display:inline-flex;align-items:center;gap:.3em;
  font:700 .8rem/1 var(--f-display);letter-spacing:.01em;text-decoration:none;
  padding:.44em .78em .5em;border-radius:999px;
  background:var(--c);color:var(--on);
  box-shadow:0 0 0 3px var(--sticker-edge),0 5px 12px -3px var(--shadow);
  rotate:var(--rot,-3deg);transition:rotate .3s var(--pop),scale .3s var(--pop);
}
.sticker::before{content:"#";font-weight:500}
.sticker small{font:inherit;font-weight:500}
.stickers{display:flex;flex-wrap:wrap;gap:10px 12px;list-style:none;padding:0}
.stickers > :nth-child(2n){--rot:2.5deg}
.stickers > :nth-child(3n+2) .sticker,.stickers > .sticker:nth-child(3n+2){--c:var(--kraut);--on:var(--on-kraut)}
.stickers > :nth-child(3n) .sticker,.stickers > .sticker:nth-child(3n){--c:var(--senf);--on:var(--on-senf)}
@media (hover: hover){a.sticker:hover{rotate:0deg;scale:1.06}}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1rem;font:500 .9rem/1.3 var(--f-body);color:var(--muted)}
.meta > span{display:inline-flex;align-items:center;gap:.45em}
.portion b{font-weight:700;color:var(--ink)}
/* ceramic frame for every big image; --c comes from the card or tag */
.frame{
  --lip:8px; --rx:0deg; --ry:0deg; --ty:0px; --pad:10px; --r:var(--r-xl);
  position:relative;padding:var(--pad);border-radius:var(--r);
  background:color-mix(in oklab,var(--c,var(--kraut)) var(--rim),var(--surface));
  box-shadow:inset 0 2px 0 var(--hi),inset 0 -2px 0 color-mix(in oklab,var(--c,var(--kraut)) 30%,transparent),
    0 var(--lip) 0 color-mix(in oklab,var(--c,var(--kraut)) 45%,var(--deep)),
    0 calc(var(--lip) + 18px) 40px -14px var(--shadow);
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty));
  transition:transform .35s var(--pop),box-shadow .25s ease;
}
.pic{position:relative;overflow:hidden;border-radius:calc(var(--r) - var(--pad));background:var(--c,var(--kraut));aspect-ratio:var(--ar,16/10)}
.pic img{width:100%;height:100%;object-fit:cover;scale:1.12}
.pic img[data-cover]:not([src]){visibility:hidden}
.pic::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 3px 12px var(--pic-inset),inset 0 0 0 1px var(--pic-edge)}
.frame::before{ /* pointer glare */
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(28rem circle at var(--mx,50%) var(--my,0%),var(--glare),transparent 60%)}
@media (hover: hover){a:hover > .frame,a:hover .frame{--lip:12px;--ty:-4px}
a:hover .frame::before{opacity:1}}
a:active .frame{--lip:3px;--ty:5px;transition-duration:.12s}
/* ---------- header ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;padding-top:12px}
/* flat at the top of the page; the pill fills in over the first 140px of scrolling (main.js sets --head-p from 0 to 1) */
.head-in{
  --pl:20px; --pr:10px;
  position:relative;isolation:isolate;display:flex;align-items:center;gap:clamp(.5rem,2vw,1.5rem);height:64px;border-radius:999px;
  padding-inline:calc(var(--pl) * var(--head-p,1)) calc(var(--pr) * var(--head-p,1));
}
.head-in::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:var(--head-p,1);pointer-events:none;
  background:var(--surface);
  box-shadow:inset 0 0 0 1.5px var(--line),inset 0 2px 0 var(--hi),0 5px 0 var(--line),0 18px 34px -18px var(--shadow);
}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);margin-right:auto;min-width:0}
.logo-key{
  display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:var(--r-tile);
  font:800 1.55rem/1 var(--f-display);background:var(--senf);color:var(--on-senf);rotate:-6deg;
  box-shadow:inset 0 2px 0 var(--hi-2),0 4px 0 color-mix(in oklab,var(--senf) 55%,var(--deep)),var(--neon);
  transition:rotate .4s var(--pop);
}
.logo:hover .logo-key{rotate:6deg}
.logo-key svg{width:84%;height:84%;translate:0 1px}
.logo-word{font:800 1.7rem/1 var(--f-display);letter-spacing:-.02em;white-space:nowrap}
.logo-word span{color:var(--paprika)}
.nav{display:flex;gap:.25rem}
.nav a{font:600 1rem/1 var(--f-display);text-decoration:none;color:var(--text);padding:.7em .95em;border-radius:999px;transition:background .2s}
.nav a:hover{background:var(--paper-2)}
.nav a[aria-current]{background:var(--paper-2);color:var(--ink);box-shadow:inset 0 2px 3px var(--line)}
.head-act{display:flex;align-items:center;gap:.6rem}
/* reading progress on posts: a bar under the header pill (main.js sets --read-p) */
.read-progress{display:none}
.post-template .read-progress{
  display:block;position:absolute;left:28px;right:28px;bottom:-13px;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--gurke),var(--senf) 50%,var(--paprika));transform-origin:left;scale:var(--read-p,0) 1;
  opacity:var(--head-p,1);box-shadow:0 2px 0 var(--line-2)}
.nav-m{display:none}
@media (max-width: 760px){.site-head .nav,.head-act .rss{display:none}
.head-in{--pl:15px;--pr:8px;height:58px;gap:.4rem}
.head-act{gap:.4rem}
.logo-key{width:40px;height:40px;font-size:1.4rem}
.logo-word{font-size:1.45rem}
.head-act .btn{padding:.7em 1em .74em;font-size:.95rem}
.nav-m{display:flex;gap:.3rem;padding-top:.6rem;overflow-x:auto;scrollbar-width:none}
.nav-m a{flex:none;font:600 .95rem/1 var(--f-display);text-decoration:none;color:var(--text);padding:.6em .9em;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line)}
.nav-m a[aria-current]{background:var(--ink);color:var(--paper);box-shadow:none}}
@media (max-width: 380px){.logo-word{display:none}}
/* ---------- section heads ---------- */
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1.2rem 2rem;margin-bottom:clamp(1.8rem,3vw,2.8rem)}
.sec-title{font-size:var(--step-4);font-weight:800;letter-spacing:-.03em}
.sec-title small{display:block;font:700 .8rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--gurke);margin-bottom:.8rem}
.sec-k,.card-k{display:flex;align-items:center;gap:.7rem;font:700 .8rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sec-k .sticker{text-transform:none;letter-spacing:.01em}
.tab{font:800 .74rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;padding:.55em .85em;border-radius:999px;background:var(--paprika);color:var(--on-paprika);box-shadow:0 3px 0 color-mix(in oklab,var(--paprika) 55%,var(--deep))}
/* ---------- HOME: hero ---------- */
.hero{display:grid;gap:clamp(2rem,4vw,4rem);padding-top:clamp(2rem,5vw,4rem);padding-bottom:clamp(2rem,4vw,3.5rem);align-items:end}
@media (min-width: 980px){.hero{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}}
.dict{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .6rem;font:500 1rem/1.4 var(--f-body);color:var(--muted);margin-bottom:1.4rem}
.dict b{font:800 1.15rem/1 var(--f-display);color:var(--ink)}
.ipa{font:500 .9rem/1 var(--f-mono);color:var(--ink);background:var(--paper-2);padding:.35em .55em;border-radius:var(--r-xs);box-shadow:inset 0 0 0 1px var(--line)}
.hero-title{font-size:var(--step-5);font-weight:800;letter-spacing:-.035em;line-height:.92}
.hero-title em{
  font-style:normal;color:var(--paprika);display:inline-block;rotate:-2deg;
  text-shadow:0 1px 0 color-mix(in oklab,var(--paprika) 75%,var(--deep)),0 2px 0 color-mix(in oklab,var(--paprika) 72%,var(--deep)),0 3px 0 color-mix(in oklab,var(--paprika) 69%,var(--deep)),0 4px 0 color-mix(in oklab,var(--paprika) 66%,var(--deep)),0 5px 0 color-mix(in oklab,var(--paprika) 63%,var(--deep)),0 6px 0 color-mix(in oklab,var(--paprika) 60%,var(--deep)),0 16px 26px var(--shadow);
}
.hero-sub{max-width:36rem;margin-top:1.6rem;font-size:clamp(1.12rem,1rem + .45vw,1.38rem);line-height:1.5;color:var(--text)}
.topics-card{
  display:grid;gap:1.3rem;padding:1.6rem 1.6rem 1.8rem;border-radius:var(--r-l);background:var(--surface);
  box-shadow:inset 0 0 0 1.5px var(--line),inset 0 2px 0 var(--hi),0 7px 0 var(--line-2),0 26px 44px -22px var(--shadow);
}
.topics-card .stickers{gap:14px 12px}
.topics-card .sticker{font-size:.9rem}
/* ---------- HOME: featured (latest post) ---------- */
.featured{padding-bottom:clamp(3rem,6vw,5.5rem)}
.feat{--c:var(--kraut);position:relative;display:block;text-decoration:none;color:inherit}
.feat .frame{--pad:14px;--r:52px}
.feat .pic{--ar:2/1}
.feat .stickers{position:absolute;top:-12px;left:34px;right:34px;z-index:3}
.feat-card{
  position:relative;z-index:3;margin:-56px 12px 0;padding:1.5rem 1.4rem 1.6rem;border-radius:var(--r-l);background:var(--surface);
  box-shadow:inset 0 0 0 1.5px var(--line),inset 0 2px 0 var(--hi),0 7px 0 var(--line-2),0 30px 50px -24px var(--shadow);
}
.feat-k{display:flex;margin-bottom:1rem}
.feat h2{font-size:var(--step-3);font-weight:780;letter-spacing:-.025em;transition:font-weight .3s}
@media (hover: hover){.feat:hover h2{font-weight:820}}
.feat p.ex{margin:.9rem 0 1.2rem;color:var(--text);font-size:1.05rem}
/* the plate overlaps the cover in one grid cell, so a long title makes the cover taller instead of spilling out of it */
@media (min-width: 900px){.feat{display:grid;grid-template-columns:minmax(0,1fr)}
.feat > .frame,.feat-card{grid-area:1 / 1}
.feat > .frame{display:flex}
.feat .pic{flex:1 1 0;min-width:0}
.feat-card{align-self:end;margin:clamp(28px,3.4vw,56px);width:min(580px,46%)}}
/* ---------- feed: a repeating 6-card rhythm ---------- */
.feed-sec{padding-bottom:1rem}
.feed{display:grid;gap:clamp(2.6rem,4vw,3.6rem) clamp(1.4rem,2.6vw,2.4rem);grid-template-columns:minmax(0,1fr);grid-auto-flow:dense;padding-bottom:1rem}
.card{container-type:inline-size;min-width:0;text-decoration:none;color:inherit;display:block}
.feed > .card:nth-child(6n+1):not([style]){--c:var(--senf)}
.feed > .card:nth-child(6n+2):not([style]){--c:var(--paprika)}
.feed > .card:nth-child(6n+3):not([style]){--c:var(--kraut)}
.feed > .card:nth-child(6n+4):not([style]){--c:var(--gurke)}
.feed > .card:nth-child(6n+5):not([style]){--c:var(--senf)}
.feed > .card:nth-child(6n):not([style]){--c:var(--kraut)}
.card-in{position:relative;display:grid;gap:1.3rem}
.card .stickers{position:absolute;top:-11px;left:24px;right:24px;z-index:3}
.card-title{font-size:clamp(1.45rem,1rem + 3.4cqi,2.5rem);font-weight:720;letter-spacing:-.022em;line-height:1.06;transition:font-weight .3s,letter-spacing .3s}
@media (hover: hover){.card:hover .card-title{font-weight:810;letter-spacing:-.026em}}
.card-ex{margin:.65rem 0 .95rem;color:var(--text);font-size:1rem;max-width:40rem}
.card-body{min-width:0;padding-inline:4px}
@container (min-width: 820px){
  .card-in{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:2.6rem;align-items:center}
  .card-title{font-size:clamp(2rem,3.4cqi,3rem)}
  .card-ex{font-size:1.15rem}
}
@media (min-width: 700px){.feed{grid-template-columns:repeat(2,minmax(0,1fr))}
.feed > :nth-child(6n+1),.feed > :nth-child(6n),.feed > :nth-child(6n+2):last-child,.feed > :nth-child(6n+4):last-child{grid-column:span 2}}
@media (min-width: 1100px){.feed{grid-template-columns:repeat(12,minmax(0,1fr))}
.feed > *{grid-column:span 4}
.feed > :nth-child(6n+1){grid-column:span 7}
.feed > :nth-child(6n+2){grid-column:span 5}
.feed > :nth-child(6n){grid-column:span 12}
.feed > :nth-child(6n+1):last-child,.feed > :nth-child(6n+3):last-child{grid-column:span 12}
.feed > :nth-child(6n+2):last-child{grid-column:span 5}
.feed > :nth-child(6n+4):last-child{grid-column:span 8}
.feed > :nth-child(6n+2) .pic{--ar:20/19}
.feed > :nth-child(6n+1) .pic{--ar:16/10.5}}
/* related posts: three equal plates */
.feed.feed-3{padding-bottom:0}
@media (min-width: 700px){.feed.feed-3 > *{grid-column:auto}
.feed.feed-3 > :nth-child(3):last-child{grid-column:span 2}}
@media (min-width: 1100px){.feed.feed-3 > *,.feed.feed-3 > :nth-child(3):last-child{grid-column:span 4}
.feed.feed-3 > * .pic{--ar:16/10}}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.5rem;padding-block:clamp(2rem,4vw,3rem) 1rem}
.pager-n{font:600 .95rem/1 var(--f-display);color:var(--muted)}
/* ---------- archives ---------- */
.archive-head{display:grid;gap:1rem;padding-top:clamp(2rem,5vw,4rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.archive-title{font-size:var(--step-5);font-weight:800;letter-spacing:-.035em;line-height:.92}
.archive-head .hero-sub{margin-top:.4rem}
.archive-n{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font:600 1rem/1.3 var(--f-display);color:var(--muted)}
.archive-n a{color:var(--ink)}
.is-paged{padding-top:clamp(2rem,5vw,4rem)}
/* ---------- call to action ---------- */
.cta{padding-block:clamp(3rem,6vw,5rem)}
.cta-in{
  position:relative;overflow:hidden;display:grid;gap:1.6rem 3rem;align-items:center;
  padding:clamp(1.8rem,4.5vw,4rem);border-radius:clamp(30px,4vw,52px);background:var(--cta-bg);color:var(--cta-ink);
  box-shadow:inset 0 3px 0 var(--hi-2),0 10px 0 var(--cta-lip),0 40px 60px -30px var(--shadow);
}
@media (min-width: 980px){.cta-in{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.cta h2{font-size:var(--step-4);font-weight:800;letter-spacing:-.03em;color:var(--cta-head);text-shadow:var(--neon)}
.cta p{font-size:1.15rem;margin-top:.9rem;max-width:30rem}
.cta-blob{position:absolute;right:-60px;bottom:-90px;width:260px;height:260px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, transparent 46%, color-mix(in oklab,var(--cta-ink) 9%,transparent) 47% 60%, transparent 61%)}
/* ---------- footer ---------- */
.site-foot{position:relative;overflow:hidden;margin-top:clamp(2rem,5vw,4rem);background:var(--foot-bg);color:var(--foot-ink);border-radius:clamp(30px,4vw,56px) clamp(30px,4vw,56px) 0 0;padding-bottom:max(24px, env(safe-area-inset-bottom,0px))}
.foot-grid{display:grid;gap:2rem;padding-top:clamp(2.5rem,5vw,4rem)}
@media (min-width: 820px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.site-foot .logo{color:var(--foot-ink)}
.site-foot p{color:var(--foot-mute);margin-top:1rem;max-width:26rem}
.foot-nav{display:flex;flex-direction:column;gap:.5rem;font:600 1.05rem/1.2 var(--f-display)}
.foot-nav h2{font:700 .8rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--foot-mute);margin-bottom:.4rem}
.foot-nav a{text-decoration:none;width:fit-content}
.foot-nav a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px;text-decoration-color:var(--senf)}
.foot-word{font:800 clamp(6rem,24vw,22rem)/.74 var(--f-display);letter-spacing:-.05em;color:color-mix(in oklab,var(--foot-ink) 7%,var(--foot-bg));
  margin-top:2rem;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));white-space:nowrap;user-select:none;
  text-shadow:0 -2px 0 color-mix(in oklab,var(--foot-ink) 3%,var(--foot-bg)),0 3px 0 color-mix(in oklab,var(--foot-bg) 70%,var(--deep))}
.foot-small{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.9rem;color:var(--foot-mute);padding-top:2rem}
.foot-small a{color:var(--foot-ink)}
/* ---------- POST: head ---------- */
.post-head{display:grid;gap:0;max-width:calc(var(--max) - 200px);padding-top:clamp(1.6rem,4vw,3.4rem);padding-bottom:clamp(2rem,4vw,3rem)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-bottom:1.6rem}
.back{display:inline-flex;align-items:center;gap:.45em;font:650 .95rem/1 var(--f-display);text-decoration:none;color:var(--muted)}
.back svg{rotate:180deg}
.back:hover{color:var(--ink)}
.post-title{font-size:clamp(2.4rem,1.3rem + 4.6vw,5.9rem);font-weight:800;letter-spacing:-.035em;line-height:.95}
.post-dek{font-size:clamp(1.12rem,1rem + .45vw,1.38rem);line-height:1.5;color:var(--text);max-width:44rem;margin-top:1.4rem}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.3rem;margin-top:1.8rem;font:500 1rem/1.3 var(--f-body);color:var(--muted)}
.byline > span{display:inline-flex;align-items:center;gap:.5em}
.byline b{color:var(--ink);font-weight:700}
.byline a{text-decoration:none}
.byline a:hover b{text-decoration:underline;text-decoration-color:var(--paprika);text-decoration-thickness:2px;text-underline-offset:3px}
.mono{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;font:800 1rem/1 var(--f-display);letter-spacing:-.02em;
  background:var(--kraut);color:var(--on-kraut);box-shadow:inset 0 2px 0 var(--hi-2),0 3px 0 color-mix(in oklab,var(--kraut) 55%,var(--deep))}
.post-hero{padding-bottom:clamp(2.5rem,5vw,4.5rem)}
.post-hero .frame{--c:var(--senf);--pad:14px;--r:52px}
.post-hero .pic{--ar:2/1;view-transition-name:hero}
.post-hero figcaption,.content figcaption{display:flex;gap:.6rem;align-items:baseline;margin-top:1.4rem;font:500 .95rem/1.45 var(--f-body);color:var(--muted);padding-inline:6px}
.post-hero figcaption::before,.content .figure figcaption::before{content:"";flex:none;width:18px;height:6px;border-radius:999px;background:var(--gurke);translate:0 -.2em}
@media (max-width: 700px){.post-hero .pic,.feat .pic{--ar:4/3}
.post-hero .frame,.feat .frame{--pad:9px;--r:34px}}
/* ---------- POST: body ---------- */
.post-body{display:grid;gap:2.5rem;max-width:1260px}
@media (min-width: 1100px){.post-body:not(.page-body){grid-template-columns:13.5rem minmax(0,1fr);column-gap:clamp(2.5rem,4vw,4.5rem)}
.toc{grid-row:1 / span 2;position:sticky;top:calc(var(--head-h) + 28px);align-self:start}
.post-body:not(.page-body) > .content,.author{grid-column:2}}
@media (max-width: 1099px){.toc{display:none}}
@media (min-width: 1100px){.toc-m{display:none}}
.toc-m{max-width:var(--measure);border-radius:var(--r-m);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line),inset 0 2px 0 var(--hi),0 4px 0 var(--line-2)}
.toc-m summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:48px;padding:.4rem 1.1rem;border-radius:inherit;cursor:pointer;list-style:none;font:700 .8rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.toc-m summary::-webkit-details-marker{display:none}
.toc-m summary:hover{color:var(--ink)}
.toc-m summary .ico{rotate:90deg;transition:rotate .25s var(--pop)}
.toc-m[open] summary .ico{rotate:-90deg}
.toc-m ol{list-style:none;padding:0 .5rem .6rem;margin:0}
.toc-m a{display:block;padding:.7rem .6rem;border-radius:var(--r-s);font:550 .95rem/1.3 var(--f-display);color:var(--text);text-decoration:none}
.toc-m a:hover{background:var(--paper-2)}
.page-body,.page-head{max-width:calc(var(--measure) + 2 * var(--gutter))}
.page-body{padding-bottom:clamp(3rem,6vw,5rem)}
.toc-k{font:700 .8rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.toc ol{list-style:none;padding:0;display:grid;gap:.15rem;border-left:3px solid var(--line)}
.toc a{display:block;text-decoration:none;font:550 .9rem/1.3 var(--f-display);color:var(--muted);padding:.5rem .8rem;margin-left:-3px;border-left:3px solid transparent;border-radius:0 var(--r-s) var(--r-s) 0;text-wrap:balance;transition:color .2s,background .2s,border-color .2s}
.toc a:hover{color:var(--ink);background:var(--paper-2)}
.toc a[aria-current]{color:var(--ink);font-weight:750;border-left-color:var(--paprika);background:color-mix(in oklab,var(--paprika) 9%,transparent)}
.eaten{margin-top:1.6rem;padding:1rem;border-radius:var(--r-m);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line),0 4px 0 var(--line-2)}
.eaten p{font:700 .8rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.eaten .pct{font-variant-numeric:tabular-nums;display:block;font:800 2rem/1 var(--f-display);color:var(--ink);margin-top:.5rem;letter-spacing:-.02em}
.eaten .bowl{height:10px;border-radius:999px;background:var(--paper-2);margin-top:.7rem;overflow:hidden;box-shadow:inset 0 2px 3px var(--line)}
.eaten .bowl i{display:block;height:100%;background:var(--senf);border-radius:inherit;transform-origin:left;scale:var(--read-p,0) 1}
.content{display:grid;grid-template-columns:[main-start] minmax(0,var(--measure)) [main-end] minmax(0,1fr) [wide-end];min-width:0;font-size:clamp(1.08rem,1rem + .25vw,1.19rem);line-height:1.72;color:var(--text)}
.content > *{grid-column:main;min-width:0}
.content > * + *{margin-top:1.35em}
.content :is(h2,h3,h4){scroll-margin-top:calc(var(--head-h) + 24px)}
.content h2{font-size:var(--step-3);font-weight:780;letter-spacing:-.025em;margin-top:2.4em}
.content h3{font-size:var(--step-2);font-weight:760;letter-spacing:-.02em;margin-top:2em}
.content :is(h4,h5,h6){font:750 1.15em/1.3 var(--f-display);color:var(--ink);margin-top:1.8em}
.content :is(h2,h3,h4,h5,h6) + *{margin-top:.8em}
.content a{text-decoration-color:var(--paprika);text-decoration-thickness:2px;text-underline-offset:3px}
.content a:hover{text-decoration-thickness:3px}
.content :is(ul,ol){padding-left:1.4em}
.content li + li,.content li > * + *{margin-top:.45em}
.content li::marker{color:var(--paprika);font-weight:700}
.content hr{border:0;height:6px;width:5rem;border-radius:999px;background:var(--line-2);margin-block:3em}
.content :not(pre) > code{
  font:500 .86em/1 var(--f-mono);color:var(--icode-ink);padding:.18em .42em .22em;border-radius:var(--r-xs);
  background:var(--icode-bg);box-shadow:inset 0 0 0 1px var(--icode-edge),0 2px 0 var(--icode-edge);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.content strong,.content b{color:var(--ink)}
.content > :is(figure,.code-block,blockquote,.callout,.table-wrap){margin-top:2em}
.content > :is(figure,.code-block,blockquote,.callout,.table-wrap) + :not(hr){margin-top:2em}
.content hr + *{margin-top:0}
.content .figure img{display:block;max-width:100%;height:auto;padding:9px;border-radius:var(--r-l);
  background:color-mix(in oklab,var(--kraut) var(--rim),var(--surface));
  box-shadow:inset 0 2px 0 var(--hi),0 7px 0 color-mix(in oklab,var(--kraut) 45%,var(--deep)),0 24px 40px -18px var(--shadow)}
/* a soft shadow shows at whichever edge has more table to scroll to */
.table-wrap{overflow-x:auto;overscroll-behavior-x:contain;
  background:linear-gradient(to right,var(--paper) 40%,transparent) left center/2.4rem 100% no-repeat local,
    linear-gradient(to left,var(--paper) 40%,transparent) right center/2.4rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,var(--shadow),transparent) left center/.9rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,var(--shadow),transparent) right center/.9rem 100% no-repeat scroll}
.content table{width:100%;font-variant-numeric:tabular-nums;overflow-wrap:normal;border-collapse:collapse;font-size:.95em}
/* more columns need more room: below this a table scrolls instead of crushing long text into tall rows */
.content table:has(th:nth-child(3)){min-width:30rem}
.content table:has(th:nth-child(4)){min-width:40rem}
.content table:has(th:nth-child(5)){min-width:50rem}
.content :is(th,td){min-width:8rem;padding:.55em .9em;border-bottom:1.5px solid var(--line);text-align:left}
.content th{font-family:var(--f-display);color:var(--ink)}
/* callouts: tactile */
.content .callout{
  --cc:var(--gurke);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem 1.1rem;align-items:start;
  padding:1.3rem 1.4rem 1.4rem;border-radius:var(--r-l);background:color-mix(in oklab,var(--cc) 11%,var(--surface));
  box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--cc) 34%,transparent),inset 0 2px 0 var(--hi),0 6px 0 color-mix(in oklab,var(--cc) 38%,var(--deep)),0 22px 36px -20px var(--shadow);
}
.content .callout-note{--cc:var(--kraut)}
.content .callout-warning{--cc:var(--paprika)}
.content .callout:not(:has(.callout-emoji)){grid-template-columns:minmax(0,1fr)}
.callout-emoji{display:grid;place-items:center;width:3.1rem;height:3.1rem;border-radius:50%;font-size:1.55rem;line-height:1;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line),0 4px 0 color-mix(in oklab,var(--cc,var(--gurke)) 35%,var(--line-2))}
.callout-text{align-self:center;font-size:1.02em;line-height:1.6;color:var(--text)}
@media (max-width: 600px){.content .callout{grid-template-columns:2.5rem minmax(0,1fr);gap:.8rem .9rem;padding:1.1rem 1.1rem 1.2rem}
.callout-emoji{width:2.5rem;height:2.5rem;font-size:1.25rem}}
/* blockquote = pull quote with a mustard key */
.content blockquote{
  position:relative;
  padding:1.5rem 1.8rem 1.6rem 6rem;font:700 var(--step-2)/1.22 var(--f-display);letter-spacing:-.015em;color:var(--ink);
  background:var(--quote-bg);border-radius:var(--r-l);
  box-shadow:inset 0 2px 0 var(--hi),inset 0 0 0 1.5px color-mix(in oklab,var(--senf) 40%,transparent),0 7px 0 color-mix(in oklab,var(--senf) 45%,var(--deep)),0 24px 40px -20px var(--shadow);
}
.content blockquote::before{
  content:"\201C";content:"\201C"/"";position:absolute;left:1.3rem;top:1.3rem;width:3.4rem;height:3.4rem;display:grid;place-items:center;
  font:800 3.6rem/1 var(--f-display);padding-top:.12em;border-radius:var(--r-tile);rotate:-6deg;background:var(--senf);color:var(--on-senf);
  box-shadow:inset 0 2px 0 var(--hi-2),0 4px 0 color-mix(in oklab,var(--senf) 50%,var(--deep))}
.content blockquote > * + *{margin-top:.6em}
@media (max-width: 600px){.content blockquote{padding:4.6rem 1.3rem 1.4rem}
.content blockquote::before{top:1rem;left:1.2rem;width:3rem;height:3rem;padding-top:.07em}}
/* ---------- code: chunky dark panels with a coloured tab ---------- */
.content pre{ /* no-JS baseline */
  font:400 .9rem/1.72 var(--f-mono);tab-size:2;color:var(--code-ink);background:var(--code-bg);
  border-radius:var(--r-l);padding:1.2rem 1.4rem;overflow-x:auto;
  box-shadow:0 7px 0 var(--code-lip),0 26px 40px -18px var(--shadow);
}
.code-block{
  position:relative;overflow:hidden;background:var(--code-bg);border-radius:var(--r-l);
  box-shadow:inset 0 0 0 1.5px var(--code-rule),inset 0 2px 0 var(--code-rule),0 7px 0 var(--code-lip),0 26px 40px -18px var(--shadow);
}
.code-block pre{background:none;border-radius:0;box-shadow:none;padding:1.15rem 0 1.4rem;margin:0;scrollbar-color:var(--code-dim) transparent;scrollbar-width:thin}
.code-block pre:focus-visible{outline-offset:-3px}
.code-head{display:flex;align-items:center;gap:.8rem;padding:10px 10px 10px 12px;background:var(--code-head);box-shadow:inset 0 -1px 0 var(--code-rule)}
.code-tab{
  --t:var(--tk-key); flex:none;font:600 .74rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  padding:.62em .85em .6em;border-radius:var(--r-s);background:var(--t);color:var(--code-bg);
  box-shadow:inset 0 2px 0 var(--tab-hi),0 3px 0 color-mix(in oklab,var(--t) 45%,var(--code-lip));rotate:-2deg}
.code-tab:is([data-lang="bash"],[data-lang="sh"],[data-lang="shell"],[data-lang="python"],[data-lang="go"]){--t:var(--tk-str)}
.code-tab:is([data-lang="diff"],[data-lang="rust"]){--t:var(--tk-del)}
.code-tab:is([data-lang="yaml"],[data-lang="yml"],[data-lang="json"],[data-lang="typescript"],[data-lang="ts"],[data-lang="php"]){--t:var(--tk-fn)}
.code-tab:is([data-lang="sql"],[data-lang="docker"],[data-lang="dockerfile"],[data-lang="nginx"]){--t:var(--tk-num)}
.code-file{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 .8rem/1 var(--f-mono);color:var(--code-ink)}
.code-file small{color:var(--code-dim);font-size:inherit}
.code-copy{
  --lip:3px; flex:none;display:inline-flex;align-items:center;gap:.4em;cursor:pointer;border:0;border-radius:999px;
  font:650 .8rem/1 var(--f-display);color:var(--code-ink);padding:.6em .95em .62em;background:var(--code-btn);
  box-shadow:inset 0 1px 0 var(--code-rule),0 var(--lip) 0 var(--code-lip);transition:transform .12s var(--pop),background .2s,color .2s}
.code-copy:hover{background:color-mix(in oklab,var(--code-ink) 16%,transparent)}
.code-copy:active{transform:translateY(2px);--lip:1px}
.code-copy.done{background:var(--tk-str);color:var(--code-bg);animation:squish .42s var(--pop)}
@keyframes squish{30%{transform:scale(1.14,.86)}60%{transform:scale(.95,1.06)}}
.code-copy svg{width:1.05em;height:1.05em}
.code-block code{display:block;width:max-content;min-width:100%;font:inherit;counter-reset:ln}
.cl{display:block;padding-inline:1.5rem;min-height:1lh}
.numbered .cl{position:relative;padding-left:3.7rem}
.numbered .cl::before{counter-increment:ln;content:counter(ln);position:absolute;left:0;width:2.5rem;text-align:right;color:var(--code-dim);user-select:none}
.cl.prompt::before{content:"$";color:var(--tk-str);font-weight:600;margin-right:.75ch;user-select:none}
.cl.out{color:var(--tk-out)}
.cl.ins{background:color-mix(in oklab,var(--tk-ins) 14%,transparent);box-shadow:inset 4px 0 var(--tk-ins)}
.cl.del{background:color-mix(in oklab,var(--tk-del) 15%,transparent);box-shadow:inset 4px 0 var(--tk-del)}
.cl.chg{background:color-mix(in oklab,var(--tk-chg) 12%,transparent);box-shadow:inset 4px 0 var(--tk-chg)}
.cl.chg{color:var(--tk-chg)}
@media (max-width: 600px){.content pre,.code-block pre{font-size:.8rem}
.cl{padding-inline:1.1rem}
.numbered .cl{padding-left:3rem}
.numbered .cl::before{width:1.9rem}
.code-block{border-radius:var(--r-m)}
.code-copy:not(.done) span{display:none}}
/* ---------- author box ---------- */
.author{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.4rem;align-items:start;margin-top:clamp(3rem,6vw,4.5rem);max-width:var(--measure);
  padding:1.6rem;border-radius:var(--r-l);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line),inset 0 2px 0 var(--hi),0 7px 0 var(--line-2),0 28px 40px -24px var(--shadow)}
.stamp{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;object-fit:cover;font:800 1.9rem/1 var(--f-display);letter-spacing:-.04em;rotate:-8deg;
  background:var(--senf);color:var(--on-senf);box-shadow:inset 0 0 0 5px color-mix(in oklab,var(--senf) 70%,var(--surface)),inset 0 3px 0 var(--hi-2),0 6px 0 color-mix(in oklab,var(--senf) 52%,var(--deep)),var(--neon)}
.author-k{font:700 .8rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.author h2{font-size:var(--step-2);font-weight:800;margin-top:.4rem;letter-spacing:-.02em}
.author h2 a{text-decoration:none}
.author p.bio{margin-top:.5rem;color:var(--text)}
.author .links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.author .links a{font:650 .9rem/1 var(--f-display);text-decoration:none;padding:.6em .9em;border-radius:999px;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.author .links a:hover{background:var(--paper-2)}
@media (max-width: 520px){.author{grid-template-columns:1fr}
.stamp{width:68px;height:68px;font-size:1.5rem}}
.more{padding-top:clamp(4rem,8vw,7rem)}
/* ---------- error pages ---------- */
.error-page{display:grid;gap:1.4rem;justify-items:start;padding-block:clamp(3rem,10vw,8rem)}
/* ---------- view transitions: the clicked cover morphs into the post hero ---------- */
@media (prefers-reduced-motion: no-preference){@view-transition{navigation:auto}}
::view-transition-group(hero){animation-duration:.55s;animation-timing-function:cubic-bezier(.3,1.2,.4,1);border-radius:34px;overflow:clip}
::view-transition-old(hero),::view-transition-new(hero){height:100%;object-fit:cover}
.vt-theme::view-transition-old(root),.vt-theme::view-transition-new(root){animation:none;mix-blend-mode:normal}
/* ---------- scroll-driven parallax on cover images, where supported (decorative, never hides content) ---------- */
@supports (animation-timeline: scroll()){@media (prefers-reduced-motion: no-preference){
.pic img{animation:par linear both;animation-timeline:view();animation-range:cover}
@keyframes par{from{translate:0 -5%}to{translate:0 5%}}}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.frame{transform:none}}
/* ---------- click to enlarge (main.js builds one native <dialog>) ---------- */
.zoomable{cursor:zoom-in;transition:transform .3s var(--pop),box-shadow .25s ease}
@media (hover: hover){.zoomable:hover{transform:translateY(-3px)}}
.zoom{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;background:transparent;color:oklch(95% .015 105);
  padding:max(72px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  opacity:0;scale:.96;transition:opacity .25s ease,scale .35s var(--pop),display .35s allow-discrete,overlay .35s allow-discrete}
.zoom[open]{display:block;opacity:1;scale:1}
@starting-style{.zoom[open]{opacity:0;scale:.96}}
.zoom::backdrop{background:rgb(23 8 22 / .7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .25s ease,display .35s allow-discrete,overlay .35s allow-discrete}
.zoom[open]::backdrop{opacity:1}
@starting-style{.zoom[open]::backdrop{opacity:0}}
/* the image fills whatever space is left: the stage takes the free height, the caption only what it needs */
.zoom-fig{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:.9rem;width:100%;max-width:1700px;height:100%;margin:0 auto}
.zoom-stage{display:flex;min-width:0;min-height:0;overflow:hidden;border-radius:var(--r-l)}
.zoom-stage img{flex:none;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto;padding:10px;border-radius:var(--r-l);cursor:zoom-out;
  background:var(--surface);box-shadow:inset 0 2px 0 var(--hi),0 8px 0 var(--line-2)}
.zoom.can-zoom .zoom-stage img{cursor:zoom-in}
.zoom.is-zoomed .zoom-stage{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.zoom.is-zoomed .zoom-stage img{max-width:none;max-height:none;cursor:zoom-out}
.zoom-fig figcaption{display:grid;gap:.35rem;justify-items:center;max-width:60ch;margin:0 auto;text-align:center;font:500 1rem/1.45 var(--f-body);text-wrap:balance}
.zoom-fig figcaption:not(:has(span:not(:empty))){display:none}
.zoom-cap:empty,.zoom-hint:empty{display:none}
.zoom-hint{font:650 .8rem/1 var(--f-display);padding:.5em .9em;border-radius:999px;background:rgb(255 255 255 / .12);color:oklch(95% .015 105 / .9)}
.zoom-close{position:fixed;top:max(16px,env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px))}
body:has(.zoom[open]){overflow:hidden}
/* short landscape screens (phones on their side): no top band, keep the corners free for the close button */
@media (max-height: 520px) and (orientation: landscape){
  .zoom{padding:max(12px,env(safe-area-inset-top,0px)) max(72px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(72px,env(safe-area-inset-left,0px))}
  .zoom-fig{gap:.5rem}
}
/* ---------- talks page: a timeline grouped by year ---------- */
.talks-page .talks-head,.talks-page .talks-body{max-width:calc(66rem + 2 * var(--gutter))}
.talks-page .talks-head .post-dek{max-width:40rem}
.talks{display:grid;gap:clamp(3rem,6vw,4.5rem);margin-top:clamp(1rem,3vw,2rem)}
.talk-year{display:grid;gap:1.4rem;align-items:start}
@media (min-width: 900px){.talk-year{grid-template-columns:11rem minmax(0,1fr);column-gap:2.5rem}}
.talk-year-label{position:sticky;top:calc(var(--head-h) + 28px);display:grid;gap:.6rem;font:800 clamp(3rem,2rem + 3vw,4.5rem)/.85 var(--f-display);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.talk-year-label small{font:650 .95rem/1 var(--f-display);letter-spacing:0;color:var(--muted)}
@media (max-width: 899px){.talk-year-label{position:static;grid-auto-flow:column;justify-content:start;align-items:baseline;gap:1rem}}
.talk-list{list-style:none;padding:0;margin:0;display:grid;gap:1.5rem}
.talk{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem 1.4rem;align-items:start;padding:1.4rem 1.5rem 1.5rem;border-radius:var(--r-l);background:var(--surface);
  box-shadow:inset 0 0 0 1.5px var(--line),inset 0 2px 0 var(--hi),0 7px 0 var(--line-2),0 28px 44px -26px var(--shadow)}
.talk-date{--c:var(--senf);--on:var(--on-senf);grid-row:1 / span 2;display:grid;place-items:center;align-content:center;gap:.15rem;width:5.4rem;height:5.4rem;border-radius:var(--r-m);rotate:-4deg;
  background:var(--c);color:var(--on);box-shadow:inset 0 2px 0 var(--hi-2),0 5px 0 color-mix(in oklab,var(--c) 55%,var(--deep)),0 14px 22px -12px var(--shadow)}
.talk-date b{font:800 2.1rem/1 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.talk-date span{font:750 .74rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase}
.talk.is-upcoming .talk-date{--c:var(--paprika);--on:var(--on-paprika)}
.talk-body{min-width:0;display:grid;gap:.4rem}
.talk-body .sticker{--c:var(--paprika);--on:var(--on-paprika);justify-self:start;margin-bottom:.35rem}
.talk-body .sticker::before{content:none}
.talk-title{font-size:var(--step-2);font-weight:780;letter-spacing:-.02em}
.talk-sub{font:550 1rem/1.4 var(--f-body);color:var(--text)}
.talk-event{display:flex;flex-wrap:wrap;gap:.2rem .5rem;font:650 .95rem/1.35 var(--f-display);color:var(--muted)}
.talk-abstract{margin-top:.3rem;font-size:1rem;color:var(--text);max-width:42rem}
.talk-links{grid-column:2;align-self:start;display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.3rem}
.talk-links .btn{font-size:.95rem;padding:.7em 1.1em .74em;white-space:normal}
.talk-links .btn svg{width:1.1em;height:1.1em}
.talk-links .btn small{font:500 .78em/1 var(--f-mono)}
@media (max-width: 560px){.talk{grid-template-columns:1fr}
.talk-date{grid-row:auto}
.talk-links{grid-column:1}
.talk-date{width:4.6rem;height:4.6rem}
.talk-date b{font-size:1.8rem}}

/* ---------- Astro additions ---------- */
.callout-text > :first-child{margin-top:0}
.callout-text > * + *{margin-top:.6em}
.callout-tldr .callout-text > :first-child::before{content:"Vegetarian option (TL;DR): ";font-weight:700;color:var(--ink)}
.cta .btn svg{width:1.1em;height:1.1em}
.cta-actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.cta-actions code{font:500 .95rem/1 var(--f-mono);padding:.7em 1em;border-radius:999px;background:var(--surface);color:var(--ink);box-shadow:inset 0 2px 5px var(--shadow),inset 0 0 0 1.5px var(--line);user-select:all}
.author .stamp{object-fit:cover}
.talks-page .talks{margin-top:0}

/* ---------- touch: 44px targets. Controls that can grow do; small labels keep their look and get a larger invisible hit area ---------- */
@media (any-pointer: coarse){
  .btn,.logo{min-height:44px}
  .logo{min-width:44px}
  .nav a,.nav-m a,.author .links a{display:inline-flex;align-items:center;min-height:44px}
  .foot-nav{gap:0}
  .foot-nav a{display:flex;align-items:center;min-width:44px;min-height:44px}
  .toc a{padding-block:.7rem}
  .stickers,.topics-card .stickers{row-gap:16px}
  a.sticker,.back,.byline a,.author h2 a,.code-copy{position:relative}
  a.sticker::after,.byline a::after,.author h2 a::after,.code-copy::after{content:"";position:absolute;inset:-12px -3px}
  .back::after{content:"";position:absolute;inset:-16px -4px}
  /* nothing hovers here to say a diagram can be enlarged */
  .content .figure:has(.zoomable){position:relative}
  .content .figure:has(.zoomable)::after{content:"";position:absolute;top:-11px;right:14px;width:30px;height:30px;border-radius:50%;pointer-events:none;rotate:-6deg;
    background:#F6F9F2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2331102F' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center/18px no-repeat;
    box-shadow:0 0 0 1.5px oklch(24% .07 330 / .24),0 3px 0 oklch(24% .07 330 / .24)}
}
/* phones held sideways: a sticky header would take a fifth of the screen */
@media (max-height: 520px) and (orientation: landscape){.site-head{position:static}}

/* ---------- Windows high-contrast mode drops shadows and fills: edges and the switch need real ones ---------- */
@media (forced-colors: active){
  .btn,.ikey,.tab,.sticker,.topics-card,.feat-card,.talk,.talk-date,.author,.eaten,.toc-m,.content .callout,.content blockquote,.code-block,.frame,.search-panel,.search-bar{border:1px solid CanvasText}
  .read-progress,.eaten .bowl i{forced-color-adjust:none;background:Highlight}
}

/* ---------- print and PDF: light in every theme, no site furniture, full links ---------- */
@page{margin:2cm}
@media print{
  /* the id in :not() outranks both dark theme blocks */
  :root:not(#_){color-scheme:light;--paper:#fff;--paper-2:#fff;--surface:#fff;--ink:#000;--text:#111;--muted:#444;--line:#bbb;--line-2:#999;--shadow:transparent;--hi:transparent;--hi-2:transparent;--glow:transparent;--paprika:#000;--quote-bg:#fff;--code-bg:#fff;--code-head:#fff;--code-lip:#999;--code-rule:#bbb;--code-ink:#000;--code-dim:#555;--icode-bg:#fff;--icode-ink:#000;--icode-edge:#bbb}
  body{background:#fff;color:#111}
  body::before,.site-head,.nav-m,.site-foot,.cta,.more,.toc,.toc-m,.crumbs,.post-hero,.author,.mono,.code-copy,.skip,.sr,.search,.zoom,.content .figure:has(.zoomable)::after{display:none!important}
  .wrap{max-width:none;padding-inline:0}
  .post-head{padding-block:0 1.2em;max-width:none}
  .post-title{font-size:26pt;line-height:1.1;letter-spacing:-.02em}
  .post-dek{font-size:13pt;max-width:none;margin-top:.6em}
  .byline{margin-top:.8em;font-size:10pt}
  .post-body{display:block;max-width:none}
  .content{display:block;font-size:11pt;line-height:1.5}
  .content h2{font-size:16pt;margin-top:1.4em}
  .content h3{font-size:13pt;margin-top:1.2em}
  .content :is(h2,h3,h4,h5,h6){break-after:avoid}
  .content :is(figure,.code-block,.callout,blockquote,tr){break-inside:avoid}
  .content p{orphans:3;widows:3}
  .content .figure img,.content .callout,.content blockquote,.code-block{box-shadow:none;border:1px solid var(--line);background:none}
  .content blockquote{padding:.8em 1em;font-size:12pt}
  .content blockquote::before{display:none}
  .content .figure img{padding:0;border:0}
  .callout-emoji{box-shadow:none;background:none}
  .table-wrap{overflow:visible;background:none}
  .content :is(th,td),.content table:has(th:nth-child(3)){min-width:0}
  .content a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#444;overflow-wrap:anywhere}
  .code-block pre,.content pre{white-space:pre-wrap;overflow:visible;font-size:9pt}
  .code-block code{width:auto;min-width:0}
  .code-block span{color:#000!important}
  .code-tab{background:none;box-shadow:none;rotate:0deg;color:#000;padding-inline:0}
}
/* ---------- search dialog: a ceramic panel with an inset search tray ---------- */
.search{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;background:transparent;color:var(--text);
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  opacity:0;transition:opacity .2s ease,display .3s allow-discrete,overlay .3s allow-discrete}
.search[open]{display:grid;justify-items:center;align-items:start;opacity:1}
@starting-style{.search[open]{opacity:0}}
.search::backdrop{background:rgb(23 8 22 / .55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .2s ease,display .3s allow-discrete,overlay .3s allow-discrete}
.search[open]::backdrop{opacity:1}
@starting-style{.search[open]::backdrop{opacity:0}}
body:has(.search[open]){overflow:hidden}

.search-panel{
  --top:min(10vh,96px);
  width:min(720px,100%);margin-top:var(--top);max-height:calc(100dvh - var(--top) - 32px);
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden;
  border-radius:var(--r-l);background:var(--surface);
  box-shadow:inset 0 0 0 1.5px var(--line),inset 0 2px 0 var(--hi),0 8px 0 var(--line-2),0 40px 80px -30px rgb(0 0 0 / .55);
  transition:translate .35s var(--pop)}
@starting-style{.search[open] .search-panel{translate:0 -16px}}

.search-bar{display:flex;align-items:center;gap:.8rem;margin:14px 14px 6px;padding:0 10px 0 22px;height:62px;border-radius:999px;
  background:var(--paper);box-shadow:inset 0 3px 6px var(--shadow),inset 0 0 0 1.5px var(--line);transition:box-shadow .2s ease}
.search-bar:focus-within{box-shadow:inset 0 3px 6px var(--shadow),inset 0 0 0 1.5px var(--line),0 0 0 3px var(--focus)}
.search-bar > .ico{width:1.3rem;height:1.3rem;color:var(--muted)}
.search-bar input{caret-color:var(--paprika);flex:1;min-width:0;border:0;background:none;outline:0;font:650 1.2rem/1 var(--f-display);color:var(--ink)}
.search-bar input::placeholder{color:var(--muted);font-weight:500}
.search-bar input::-webkit-search-cancel-button{display:none}
.search-esc{border:0;background:none;padding:6px;cursor:pointer;border-radius:var(--r-s)}
.search-esc:hover kbd{background:var(--line)}
.search-esc span{display:none;font:650 .95rem/1 var(--f-display);color:var(--ink)}

.search-status{overflow-wrap:anywhere;padding:4px 26px 0;font:650 .9rem/1.4 var(--f-display);color:var(--muted)}
.search-status:empty{display:none}
.search-results,.search-empty{scrollbar-width:thin;min-height:0;overflow:auto;overscroll-behavior:contain;padding:8px 14px 14px}
.search:not(.has-query) .search-results,.search.has-query .search-empty{display:none}
.search-results{list-style:none;margin:0;display:grid;gap:4px;align-content:start}

.search-hit > a{display:grid;grid-template-columns:76px minmax(0,1fr);gap:1rem;align-items:start;padding:12px;border-radius:var(--r-m);text-decoration:none;color:inherit;transition:background .15s}
.search-hit > a[aria-selected="true"],.search-subs a[aria-selected="true"]{background:var(--paper-2);box-shadow:inset 4px 0 0 var(--paprika)}
.search-thumb{display:grid;place-items:center;width:76px;aspect-ratio:16/10;border-radius:var(--r-s);overflow:hidden;background:var(--c);
  box-shadow:inset 0 2px 0 var(--hi-2),0 3px 0 color-mix(in oklab,var(--c) 50%,var(--deep))}
.search-thumb img{width:100%;height:100%;object-fit:cover}
.search-thumb svg{width:58%;height:58%}
.search-text{display:grid;gap:.3rem;min-width:0;overflow-wrap:anywhere}
.search-title{font:760 1.05rem/1.2 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.search-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;font:600 .8rem/1 var(--f-display);color:var(--muted)}
.search-meta:empty{display:none}
.search-meta .sticker{--c:var(--gurke);--on:var(--on-gurke);font-size:.74rem;rotate:0deg;box-shadow:0 0 0 2px var(--sticker-edge)}
.search-ex{font-size:.95rem;line-height:1.45;color:var(--text);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.search mark{background:var(--senf);color:var(--on-senf);border-radius:var(--r-xs);padding:0 .12em}
.search-subs{list-style:none;margin:-6px 0 6px;padding:0 0 0 calc(76px + 1rem + 12px);display:grid;gap:2px}
.search-subs a{overflow-wrap:anywhere;display:flex;gap:.45rem;padding:.35rem .6rem;border-radius:var(--r-s);font:650 .9rem/1.3 var(--f-display);color:var(--muted);text-decoration:none}
.search-subs a::before{content:"#";color:var(--paprika)}
.search-subs a:hover,.search-subs a[aria-selected="true"]{color:var(--ink);background:var(--paper-2)}

.search-empty .card-k{margin:10px 12px 8px}
.search-empty .card-k + *{margin-bottom:16px}
.search-quick{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.search-quick a{display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;border-radius:var(--r-tile);font:700 1rem/1.25 var(--f-display);color:var(--ink);text-decoration:none}
.search-quick a .ico{color:var(--paprika);flex:none}
.search-quick a:hover,.search-quick a:focus-visible{background:var(--paper-2)}
.search-empty .stickers{padding:6px 12px 4px}

.search-foot{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;padding:12px 24px;border-top:1.5px solid var(--line);font:600 .8rem/1 var(--f-display);color:var(--muted)}
.search-foot span{display:inline-flex;align-items:center;gap:.3rem}
.search-foot-k{margin-left:auto}
.search kbd{font:600 .74rem/1 var(--f-mono);padding:.32em .5em;border-radius:var(--r-xs);background:var(--paper-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line),0 2px 0 var(--line-2)}

@media (pointer: coarse){
  .search-esc{min-height:44px;padding-inline:12px}
  .search-esc kbd,.search-foot{display:none}
  .search-esc span{display:inline}
  .search-subs a,.search-quick a{min-height:44px;align-items:center}
}

@media (max-width: 600px){
  .search{padding:0}
  .search-panel{width:100%;height:100dvh;max-height:none;margin:0;border-radius:0;padding-top:env(safe-area-inset-top,0px)}
  .search-hit > a{grid-template-columns:60px minmax(0,1fr)}
  .search-thumb{width:60px}
  .search-subs{padding-left:calc(60px + 1rem + 12px)}
  .search-foot{display:none}
}
/* Route announcer */
	.astro-route-announcer {
		position: absolute;
		left: 0;
		top: 0;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		overflow: hidden;
		white-space: nowrap;
		width: 1px;
		height: 1px;
	}