/* v4: bit2swaz.me layout · Geist + Geist Mono (bit2swaz's own pair) · xevrion-style monochrome cards
   Palette pulled from the Sisyphus footer's own greys so page + footer read as one system.
   Rules: Jakub Krehel better-* skills (priority), Vercel Web Interface Guidelines, Anthropic frontend-design, ui-ux-pro-max. */
@font-face { font-family: 'Geist'; src: url('fonts/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/geist-mono-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---------- primitives: footer greys (footer.js PAL) ---------- */
:root {
  --grey-0: #0b0b0b;   /* footer dark base */
  --grey-1: #2a2a2a;   /* footer dark quote / light hill */
  --grey-2: #3a3a3a;
  --grey-3: #3d3d3d;   /* footer light boulder edge */
  --grey-4: #5e5e5e;   /* v6: neutral (was warm #5c5c5a) */
  --grey-5: #8f8f8f;
  --grey-6: #b4b4b4;   /* footer dark hill */
  --grey-7: #d6d6d6;   /* v6: neutral (was warm #d4d3cf) */
  --grey-8: #e6e6e6;   /* footer light quote */
  --grey-9: #ececec;   /* footer dark ink */
  --paper:  #f7f7f7;   /* v6: neutral near-white (was cream #f4f3ef) */
  --ink:    #111111;   /* footer light ink */

  /* spacing: 4/8 scale */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;

  /* type scale by role (size / line-height / weight) */
  --text-caption: 0.8125rem;  /* 13 mono labels, meta */
  --text-ui: 0.9375rem;       /* 15 nav, ui */
  --text-desc: 1rem;          /* 16 card + row descriptions */
  --text-body: 1.125rem;      /* 18 intro / prose (desktop) */
  --text-heading: 1.125rem;   /* 18 card titles */
  --text-display: 2.5rem;     /* 40 name */

  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --col: 42rem;               /* 672px, bit2swaz column */
  --gutter: var(--s-5);
  --radius-tile: 0.5rem; --radius-card: calc(var(--radius-tile) + var(--s-4) + 1px); /* concentric: tile + padding + border */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1); /* Emil: strong ease-out for draw-ins */
}

/* ---------- semantic tokens (components use only these) ---------- */
:root, html[data-theme='dark'] {
  --color-bg: var(--grey-0);
  --color-text: var(--grey-9);           /* 16.7:1 */
  --color-text-secondary: var(--grey-6); /* 9.5:1  (hill grey) */
  --color-text-tertiary: var(--grey-5);  /* 6.1:1  */
  --color-border: var(--grey-1);
  --color-border-strong: var(--grey-2);
  --color-surface: rgb(236 236 236 / 0.025);
  --color-surface-hover: rgb(236 236 236 / 0.05);
  --color-tile: #151515;
  --color-scrim: rgb(0 0 0 / 0.5);
  --color-selection: #3a3a3a;            /* text on it 11.6:1 */
  --color-scrollbar: var(--grey-2);
  --color-overlay: var(--grey-0);
  --color-hill-edge: #404040;   /* border family, one step up so the ridge reads */
  --color-hill-line: var(--grey-1);
  --color-item-active: rgb(236 236 236 / 0.06);
  /* better-ui shadow recipe, dark: one white ring */
  --shadow-border: 0 0 0 1px oklch(1 0 0 / 0.08);
  --shadow-border-hover: 0 0 0 1px oklch(1 0 0 / 0.13);
  --shadow-overlay: 0 0 0 1px oklch(1 0 0 / 0.1), 0 24px 60px oklch(0 0 0 / 0.5);
  --color-hairline: oklch(1 0 0 / 0.08);      /* = card ring; footer hill edge + contours */
  color-scheme: dark;
}
html[data-theme='light'] {
  --color-bg: var(--paper);
  --color-text: var(--ink);              /* 17.6:1 */
  --color-text-secondary: var(--grey-3); /* 10.0:1 */
  --color-text-tertiary: var(--grey-4);  /* 6.2:1 on #f7f7f7 */
  --color-border: var(--grey-8);
  --color-border-strong: var(--grey-7);
  --color-surface: #ffffff;              /* v6: cards lift to white on the near-white page */
  --color-surface-hover: #ffffff;
  --color-tile: #f0f0f0;
  --color-scrim: rgb(247 247 247 / 0.6);
  --color-selection: #d6d6d6;            /* text on it 13.9:1 */
  --color-scrollbar: var(--grey-7);
  --color-overlay: #ffffff;
  --color-hill-edge: #c4c4c4;
  --color-hill-line: #dcdcdc;
  --color-item-active: rgb(17 17 17 / 0.05);
  /* better-ui shadow recipe, light: ring + lift + ambient */
  --shadow-border: 0px 0px 0px 1px oklch(0 0 0 / 0.06), 0px 1px 2px -1px oklch(0 0 0 / 0.06), 0px 2px 4px 0px oklch(0 0 0 / 0.04);
  --shadow-border-hover: 0px 0px 0px 1px oklch(0 0 0 / 0.08), 0px 1px 2px -1px oklch(0 0 0 / 0.08), 0px 2px 4px 0px oklch(0 0 0 / 0.06);
  --shadow-overlay: 0 0 0 1px oklch(0 0 0 / 0.08), 0 24px 60px oklch(0 0 0 / 0.14);
  --color-hairline: oklch(0 0 0 / 0.08);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--color-bg); -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-block-start: var(--s-6);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html.no-tr *:not(.ti), html.no-tr *::before, html.no-tr *::after { transition: none !important; }
a, button { -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column; position: relative;
  background-color: var(--color-bg); color: var(--color-text);
  font-family: var(--font-sans); font-size: 1rem; font-weight: 400; line-height: 1.5;
}
/* one faint 0/1 field behind everything, footer included, so there is never a seam.
   Fades a little behind the reading column. */
body::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--field, none); background-size: var(--field-size, auto);
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(50% - var(--col) / 2 - 6rem), rgb(0 0 0 / 0.45) calc(50% - var(--col) / 2), rgb(0 0 0 / 0.45) calc(50% + var(--col) / 2), #000 calc(50% + var(--col) / 2 + 6rem), #000 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(50% - var(--col) / 2 - 6rem), rgb(0 0 0 / 0.45) calc(50% - var(--col) / 2), rgb(0 0 0 / 0.45) calc(50% + var(--col) / 2), #000 calc(50% + var(--col) / 2 + 6rem), #000 100%);
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--color-selection); color: var(--color-text); }
html { scrollbar-color: var(--color-scrollbar) transparent; text-rendering: optimizeLegibility; }
:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; border-radius: 4px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
kbd { font-family: var(--font-mono); }
svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skip { position: absolute; inset-inline-start: var(--s-4); inset-block-start: var(--s-4); z-index: 70; padding: var(--s-2) var(--s-3); border-radius: 6px;
  background: var(--color-text); color: var(--color-bg); font: 400 var(--text-caption) var(--font-mono); transform: translateY(-200%); }
.skip:focus-visible { transform: none; }

/* ---------- column ---------- */
.col { width: 100%; max-width: calc(var(--col) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); flex: 1 0 auto; position: relative; z-index: 2; }

/* ---------- top bar ---------- */
.bar { display: flex; align-items: center; justify-content: space-between; min-height: var(--s-7); margin-block-start: var(--s-7); }
.nav { display: flex; gap: var(--s-5); font-size: var(--text-ui); }
.nav a { display: inline-flex; align-items: baseline; gap: var(--s-1); padding-block: var(--s-2); color: var(--color-text-secondary); transition: color 150ms var(--ease-out); }
.nav a kbd { font-size: 0.75rem; color: var(--color-text-tertiary); transition: color 150ms var(--ease-out); }
.nav a[aria-current='page'], .nav a.hit { color: var(--color-text); }
.tools { display: flex; align-items: center; gap: var(--s-2); }
.cmdk-btn { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 2.5rem; padding: 0 var(--s-2); border: 0; background: none; color: var(--color-text-secondary); cursor: pointer; border-radius: 8px; transition: color 150ms var(--ease-out), scale 150ms ease-out; }
.cmdk-btn svg { margin-inline-end: var(--s-1); }
.cmdk-btn kbd, .cmdk kbd { font-size: 0.75rem; line-height: 1; padding: 3px 5px; border: 1px solid var(--color-border-strong); border-radius: 4px; color: var(--color-text-secondary); }
.icon-btn { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; padding: 0; background: none; color: var(--color-text-secondary); border-radius: 8px; cursor: pointer; transition: color 150ms var(--ease-out), scale 150ms ease-out; }
.icon-btn { position: relative; }
.icon-btn .ti { grid-area: 1 / 1; transition-property: opacity, scale, filter; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
.icon-btn .moon, html[data-theme='light'] .icon-btn .sun { opacity: 0; scale: 0.25; filter: blur(4px); }
html[data-theme='light'] .icon-btn .moon { opacity: 1; scale: 1; filter: blur(0); }
@media (prefers-reduced-motion: reduce) { .icon-btn .ti { transition-property: opacity; } .icon-btn .ti { scale: 1 !important; filter: none !important; } }
@media (prefers-reduced-motion: no-preference) {
  .cmdk-btn:not(:disabled):active, .icon-btn:not(:disabled):active, .cmdk-item:not(:disabled):active { scale: 0.96; }
}

/* ---------- hero ---------- */
.hero { display: flex; align-items: center; gap: var(--s-5); margin-block-start: var(--s-8); }
.avatar { width: 6.5rem; height: 6.5rem; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--color-border-strong); }
.avatar #sphere { width: 100%; height: 100%; }
.avatar .relative { position: relative; } .avatar .aspect-square { aspect-ratio: 1 / 1; } .avatar .select-none { user-select: none; -webkit-user-select: none; }
.avatar .flex { display: flex; } .avatar .items-center { align-items: center; } .avatar .justify-center { justify-content: center; }
.avatar .w-full { width: 100%; } .avatar .h-full { height: 100%; } .avatar .block { display: block; } .avatar .rounded-full { border-radius: 9999px; }
.avatar .cursor-grab { cursor: grab; } .avatar .cursor-grabbing { cursor: grabbing; }
.who { min-width: 0; }
.who h1 { margin: 0; font-size: var(--text-display); line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; }
.meta { margin: var(--s-2) 0 0; font-size: var(--text-caption); line-height: 1.4; color: var(--color-text-secondary); }

/* ---------- intro ---------- */
.intro { margin-block-start: var(--s-6); }
.intro p { margin: 0; max-width: 62ch; font-size: var(--text-body); line-height: 1.6; color: var(--color-text); text-wrap: pretty; }
.intro p + p { margin-block-start: var(--s-4); }

/* ---------- sections: one rhythm ---------- */
.sec { margin-block-start: var(--s-8); }
.sec.first { margin-block-start: var(--s-8); }
.label { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 var(--s-4); font-size: var(--text-caption); font-weight: 400; line-height: 1.4; color: var(--color-text-tertiary); }
.label .count { color: var(--color-text-tertiary); }
.see { position: relative; color: var(--color-text-secondary); transition: color 150ms var(--ease-out); }
.see::after { content: ""; position: absolute; inset: -0.5rem -0.25rem; } /* 24px+ hit area */

/* now: one quiet row */
.nowrow { display: flex; align-items: baseline; gap: var(--s-3); }
.nowname { font-weight: 600; font-size: var(--text-desc); white-space: nowrap; }
.nowdesc { flex: 1; min-width: 0; color: var(--color-text-secondary); font-size: var(--text-desc); line-height: 1.5; text-wrap: pretty; }
.tag { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--text-caption); color: var(--color-text-secondary); white-space: nowrap; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text); opacity: .75; }

/* project cards: xevrion grid, monochrome */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.card { position: relative; display: flex; flex-direction: column; min-height: 10rem; padding: var(--s-4); border: 1px solid transparent; border-radius: var(--radius-card);
  background-color: var(--color-surface); box-shadow: var(--shadow-border);
  transition-property: box-shadow, background-color; transition-duration: 150ms; transition-timing-function: ease-out; }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.tile { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-tile); background: var(--color-tile); border: 1px solid transparent; box-shadow: var(--shadow-border); color: var(--color-text); }
.tile svg { width: 1rem; height: 1rem; }
.card-meta { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--color-text-tertiary); }
.stat { font-size: var(--text-caption); color: var(--color-text-secondary); white-space: nowrap; }
.arr { transition: color 150ms var(--ease-out); }
@media (prefers-reduced-motion: no-preference) { .arr { transition-property: color, translate; } }
.card-name { margin-block-start: auto; padding-block-start: var(--s-5); font-size: var(--text-heading); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.card-desc { margin-block-start: var(--s-1); font-size: var(--text-desc); line-height: 1.5; color: var(--color-text-secondary); text-wrap: pretty; }

/* writing list */
.wlist { display: grid; gap: var(--s-1); margin-inline: calc(-1 * var(--s-3)); }
.wrow { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: var(--s-3); border-radius: var(--radius-tile); transition: background-color 150ms ease-out; }
.wtitle { font-size: var(--text-desc); font-weight: 500; }
.wdate { font-size: var(--text-caption); color: var(--color-text-tertiary); white-space: nowrap; }

/* post */
.post { margin-block-start: var(--s-8); }
.post .meta a { transition: color 150ms var(--ease-out); }
.post h1 { margin: var(--s-3) 0 var(--s-5); font-size: var(--text-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.post p a { text-decoration: underline; text-underline-position: from-font; text-decoration-thickness: from-font; text-underline-offset: 0.15em; }
.post p:not(.meta) { max-width: 65ch; font-size: var(--text-body); line-height: 1.7; margin: 0 0 var(--s-4); text-wrap: pretty; }

/* links row, then straight into the footer art */
.links { display: flex; gap: var(--s-5); margin-block-start: var(--s-7); font-size: var(--text-caption); }
.links a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.5rem; color: var(--color-text-secondary); transition: color 150ms var(--ease-out); }

/* hover only where hover exists */
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .card:hover .arr { translate: 2px -2px; } }
@media (hover: hover) {
  .nav a:hover, .cmdk-btn:hover, .icon-btn:hover, .see:hover, .links a:hover, .post .meta a:hover { color: var(--color-text); }
  .nav a:hover kbd { color: var(--color-text-secondary); }
  .card:hover { box-shadow: var(--shadow-border-hover); background-color: var(--color-surface-hover); }
  .card:hover .arr { color: var(--color-text); }
  .wrow:hover { background-color: var(--color-surface-hover); }
}

/* ---------- command menu ---------- */
.cmdk { position: fixed; inset: 0; z-index: 50; display: grid; place-items: start center; padding-block-start: 14vh; background: var(--color-scrim); opacity: 0; transition: opacity 150ms ease-out; }
.cmdk[hidden] { display: none; } /* fix: display:grid was overriding [hidden], so the invisible overlay ate every click */
.cmdk.open { opacity: 1; transition-duration: 300ms; }
.cmdk-panel { opacity: 0; transition: opacity 150ms ease-out; }
.cmdk.open .cmdk-panel { opacity: 1; transition-duration: 300ms; }
@media (prefers-reduced-motion: no-preference) {
  .cmdk-panel { translate: 0 -12px; filter: blur(4px); transition-property: opacity, translate, filter; }
  .cmdk.pre .cmdk-panel { translate: 0 12px; transition: none; }
  .cmdk.open .cmdk-panel { translate: 0 0; filter: blur(0); }
}
.cmdk-panel { width: min(35rem, calc(100% - 2rem)); background: var(--color-overlay); border: 1px solid transparent; border-radius: calc(var(--radius-tile) + var(--s-2) + 1px); overflow: hidden; box-shadow: var(--shadow-overlay); }
.cmdk-q { width: 100%; padding: var(--s-4); border: 0; border-block-end: 1px solid var(--color-border); background: none; color: var(--color-text); font: 400 1rem var(--font-sans); outline: none; }
.cmdk-q::placeholder { color: var(--color-text-tertiary); }
.cmdk-list { max-height: 21rem; overflow: auto; overscroll-behavior: contain; padding: var(--s-2); }
.cmdk-group { margin: var(--s-2) var(--s-2) var(--s-1); font: 400 0.75rem var(--font-mono); color: var(--color-text-tertiary); }
.cmdk-item { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 2.5rem; padding: var(--s-2); border: 0; border-radius: var(--radius-tile); background: none; color: var(--color-text); font: 400 var(--text-ui) var(--font-sans); text-align: start; cursor: pointer; }
.cmdk-item[aria-selected='true'] { background: var(--color-item-active); }
.ci-label { flex: 1; } .ci-hint { font: 400 0.75rem var(--font-mono); color: var(--color-text-tertiary); }
.ci-ico { display: none; }
.cmdk-empty { padding: var(--s-4); color: var(--color-text-secondary); font-size: var(--text-ui); }
.cmdk-foot { display: flex; gap: var(--s-4); padding: var(--s-2) var(--s-4); border-block-start: 1px solid var(--color-border); font-size: 0.75rem; color: var(--color-text-tertiary); }
.cmdk-foot kbd { margin-inline-end: 3px; }
.toast { position: fixed; left: 50%; bottom: var(--s-5); translate: -50% 12px; padding: var(--s-2) var(--s-3); border-radius: var(--radius-tile); background: var(--color-text); color: var(--color-bg); font-size: var(--text-caption); opacity: 0; pointer-events: none; transition: opacity 150ms ease-out, translate 150ms ease-out; z-index: 60; }
.toast.on { opacity: 1; translate: -50% 0; transition-duration: 300ms; }
@media (prefers-reduced-motion: reduce) { .toast { translate: -50% 0; } }

/* ---------- Sisyphus footer: same background, art pulled up into the column's breathing room ---------- */
footer.sis { flex: none; position: relative; z-index: 1; background: transparent !important; margin-block-start: calc(-1 * clamp(1.5rem, 10vw, 9rem)); }
/* the ground below the canvas: same surface token as the cards, so the hill runs to the page bottom */
footer.sis .sis-ground { position: relative; background-color: var(--color-surface); }
footer.sis .sis-q { position: static; display: block; max-width: none; margin: 0 auto; padding: var(--s-6) var(--gutter) var(--s-8);
  font-family: var(--font-mono); font-size: var(--text-ui); font-weight: 400; line-height: 1.5; text-align: center; color: var(--color-text-tertiary); }
footer.sis .sis-q span { display: inline; white-space: normal; }
footer.sis .sis-pause { position: absolute; inset-inline-end: var(--gutter); inset-block-end: calc(var(--s-8) - 0.75rem); color: var(--color-text-tertiary); }
.sis-pause .ti { stroke-width: 1.5; }
.sis-pause .i-play, html[data-motion='paused'] .sis-pause .i-pause { opacity: 0; scale: 0.25; filter: blur(4px); }
html[data-motion='paused'] .sis-pause .i-play { opacity: 1; scale: 1; filter: blur(0); }
@media (prefers-reduced-motion: reduce) { .sis-pause { display: none !important; } }
@media (hover: hover) { .sis-pause:hover { color: var(--color-text); } }

@media (max-width: 40rem) {
  :root { --gutter: var(--s-5); --text-body: 1.0625rem; --text-display: 2.25rem; }
  .bar { margin-block-start: var(--s-4); }
  .nav { gap: var(--s-4); font-size: 0.875rem; }
  .cmdk-btn kbd { display: none; }
  .hero { margin-block-start: var(--s-7); gap: var(--s-4); }
  .avatar { width: 5.25rem; height: 5.25rem; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card { min-height: 0; }
  .nowrow { flex-wrap: wrap; row-gap: var(--s-1); }
  .nowrow .tag { order: 2; margin-inline-start: auto; }
  .nowdesc { order: 3; flex-basis: 100%; }
  .sec { margin-block-start: var(--s-7); } .links { margin-block-start: var(--s-6); }
  footer.sis .sis-q { padding-block: var(--s-5) var(--s-7); padding-inline: calc(var(--gutter) + 2.5rem); font-size: var(--text-caption); }
  footer.sis .sis-pause { inset-block-end: calc(var(--s-7) - 0.75rem); inset-inline-end: var(--s-3); }
}
/* 320px reflow: tighten the bar so nothing scrolls sideways (WCAG 1.4.10) */
@media (max-width: 22.5rem) {
  :root { --gutter: var(--s-4); }
  .nav { gap: var(--s-3); }
  .nav a kbd { display: none; }
  .tools { gap: 0; }
}

/* ---------- staged entrance: 100ms stagger, 300ms ease-out, opacity + 4px blur + 12px rise; opacity only under reduced motion ---------- */
.rise { animation: rise-fade 300ms ease-out both; animation-delay: calc(var(--i, 0) * 100ms); }
@media (prefers-reduced-motion: no-preference) { .rise { animation-name: rise-up; } }
@keyframes rise-fade { from { opacity: 0; } }
@keyframes rise-up { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }


/* =====================================================================
   v6 · targeted edits on v5 (Jakub better-* first; Rauno + Emil + Vercel where they agree)
   ===================================================================== */

/* motion-allowed smooth anchors (Rauno) */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* focus: one ring everywhere, follows radius (Rauno: shadow-ring respects radius) */
:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

/* 6 · link underline that draws in (left → right in, exits to the right). Motion only; instant otherwise. */
.u { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 1px; background-position: 100% 100%; padding-block-end: 1px; }
@media (prefers-reduced-motion: no-preference) { .u { transition: background-size 200ms var(--ease-out-strong); } }
@media (hover: hover) {
  .nav a:hover .u, .links a:hover .u, .see:hover .u, .wrow:hover .u, .post .meta a:hover .u { background-size: 100% 1px; background-position: 0% 100%; }
}
.nav a:focus-visible .u, .links a:focus-visible .u, .see:focus-visible .u, .wrow:focus-visible .u, .post .meta a:focus-visible .u { background-size: 100% 1px; background-position: 0% 100%; }
.nav a[aria-current='page'] .u { background-size: 100% 1px; background-position: 0% 100%; } /* current page keeps its line, no hover change needed */
.post .meta a { color: var(--color-text-secondary); }

/* Rauno: no dead zones between adjacent links; padding instead of gap, optical edge kept */
.nav { gap: 0; margin-inline-start: calc(-1 * var(--s-2)); }
.nav a { padding-inline: var(--s-2); min-height: 2.5rem; align-items: center; }
.nav a + a { margin-inline-start: var(--s-2); }
.links { gap: 0; margin-inline-start: calc(-1 * var(--s-2)); flex-wrap: wrap; }
.links a { padding-inline: var(--s-2); }
.links a + a { margin-inline-start: var(--s-2); }
.tools { margin-inline-end: calc(-1 * var(--s-2)); } /* icon glyphs optically flush with the column edge */
.cmdk-btn, .icon-btn { border-radius: var(--radius-tile); }

/* 3 · tagline breaks as a pair, never an orphan */
.meta { text-wrap: balance; }

/* 1 · cards: icon row, then title right under it; no flex-pushed band */
.cards { align-items: stretch; }
.card { min-height: 0; gap: 0; }
.card-top { align-items: center; min-height: 2rem; }
.card-name { margin-block-start: var(--s-3); padding-block-start: 0; }
.card-desc { margin-block-start: var(--s-1); }

/* 5 · real project marks, monochrome in the tile */
.tile { overflow: hidden; }
.tile svg { width: 1.125rem; height: 1.125rem; }
.logo-mask { display: block; width: 1.125rem; height: 1.125rem; background-color: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.logo-img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
html[data-theme='dark'] .logo-img { filter: grayscale(1) brightness(0.9); }
.tile-initial { font-size: var(--text-ui); font-weight: 500; line-height: 1; color: var(--color-text); }

/* 2 · "now" item: same card system, full width, not a link */
.card-now { cursor: default; }
.card-now .tag { color: var(--color-text-secondary); }

/* 9 · command search: visible focus on the field itself */
.cmdk-q { transition: border-color 150ms var(--ease-out); }
.cmdk-q:focus-visible { outline: none; border-block-end-color: var(--color-text-tertiary); }
.cmdk-list { scrollbar-width: thin; }

/* 4 + A · footer: no surface at all. The page runs through; the hill is only its hairline edge + contours. */
footer.sis { margin-block-start: calc(-1 * var(--sis-pull, 0px)); }
footer.sis .sis-ground { background: transparent; }
footer.sis .sis-in { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; align-items: center; column-gap: var(--s-3);
  width: 100%; max-width: calc(var(--col) + 2 * var(--gutter)); margin-inline: auto; padding: var(--s-5) var(--gutter) var(--s-8); }
footer.sis .sis-q { padding: 0; font-size: var(--text-caption); line-height: 1.5; text-wrap: balance; color: var(--color-text-tertiary); }
footer.sis .sis-pause { position: static; inset: auto; justify-self: end; margin-inline-end: calc(-1 * var(--s-2)); color: var(--color-text-secondary); }

@media (max-width: 40rem) {
  .nav { font-size: 0.875rem; }
  .nav a + a, .links a + a { margin-inline-start: 0; }
  footer.sis .sis-in { padding-block: var(--s-4) var(--s-7); }
  footer.sis .sis-q { padding: 0; }
}
@media (max-width: 22.5rem) { .nav a { padding-inline: var(--s-1); } .nav { margin-inline-start: calc(-1 * var(--s-1)); } }

/* 8 · cross-document view transitions; quick cross-fade, header stays put. Off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 150ms ease-out both vt-out; }
  ::view-transition-new(root) { animation: 200ms var(--ease-out) both vt-in; }
  .bar { view-transition-name: bar; }
  ::view-transition-group(bar) { animation-duration: 0ms; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
.logo-noises { --m: url(icons/noises-studio.png); }
.cmdk.kb, .cmdk.kb .cmdk-panel { transition: none !important; } /* Emil: keyboard-opened menu appears instantly */
.post .meta a { text-decoration: none; }