/* ------------------------------------------------------------------
   Minimal, text-first theme: white page, neutral greys, one serif for
   the name. Dark mode is the `dark` class on <html> (toggle or press D).
   ------------------------------------------------------------------ */

:root {
  --bg:        #ffffff;
  --fg:        #0a0a0a;
  --text:      #404040;   /* body copy            neutral-700 */
  --strong:    #171717;   /* links, titles        neutral-900 */
  --muted:     #5f5f5f;   /* secondary text — darker than the reference's  */
  --faint:     #858585;   /* #737373/#a3a3a3 so it holds up over the shader */
  --hover:     #f5f5f5;   /* row highlight        neutral-100 */
  --hover-ink: #e5e5e5;   /* inline-link hover    neutral-200 */
  --border:    #e5e5e5;
  --tile-bg:   #fafafa;
  --tile-bd:   rgba(229, 229, 229, 0.6);
  --tile-bar:  rgba(212, 212, 212, 0.8);
  --underline: rgba(23, 23, 23, 0.15);
  --underline-hover: rgba(23, 23, 23, 0.4);
  --switch-bg: #f5f5f5;
  --switch-bd: rgba(229, 229, 229, 0.8);
  --knob:      #a3a3a3;

  /* liquid glass */
  --glass-tint:   rgba(255, 255, 255, 0.30);
  --glass-solid:  rgba(255, 255, 255, 0.55);   /* bars that sit over text */
  --glass-rim-hi: rgba(255, 255, 255, 0.95);
  --glass-rim-lo: rgba(0, 0, 0, 0.07);
  --glass-ring:   rgba(0, 0, 0, 0.06);
  --glass-sheen:  rgba(255, 255, 255, 0.55);
  --glass-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);

  --sans:  "Google Sans Flex", ui-sans-serif, system-ui, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sign:  "Herr Von Muellerhoff", cursive;

  --ease: cubic-bezier(.4, 0, .2, 1);
  color-scheme: light;
}

html.dark {
  --bg:        #0b0b0b;
  --fg:        #fafafa;
  --text:      #a3a3a3;
  --strong:    #f5f5f5;
  --muted:     #a3a3a3;
  --faint:     #737373;
  --hover:     rgba(23, 23, 23, 0.6);
  --hover-ink: #262626;
  --border:    #262626;
  --tile-bg:   rgba(23, 23, 23, 0.4);
  --tile-bd:   rgba(38, 38, 38, 0.5);
  --tile-bar:  rgba(64, 64, 64, 0.8);
  --underline: rgba(245, 245, 245, 0.15);
  --underline-hover: rgba(245, 245, 245, 0.4);
  --switch-bg: rgba(23, 23, 23, 0.8);
  --switch-bd: #262626;
  --knob:      #737373;
  --muted:     #ababab;
  --faint:     #8a8a8a;

  --glass-tint:   rgba(255, 255, 255, 0.05);
  --glass-solid:  rgba(11, 11, 11, 0.55);
  --glass-rim-hi: rgba(255, 255, 255, 0.22);
  --glass-rim-lo: rgba(0, 0, 0, 0.55);
  --glass-ring:   rgba(255, 255, 255, 0.07);
  --glass-sheen:  rgba(255, 255, 255, 0.10);
  --glass-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

::selection { background: #e5e5e5; color: #171717; }
html.dark ::selection { background: #404040; color: #fafafa; }

:focus-visible { outline: 2px solid var(--strong); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; left: 16px; top: 16px; z-index: 100; width: auto; height: auto;
  clip: auto; margin: 0; padding: 8px 14px; border-radius: 8px;
  background: var(--strong); color: var(--bg); font-size: 13px;
}

/* Frosted strip at the top of the viewport: content blurs as it scrolls under. */
.top-blur {
  pointer-events: none;
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 80px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent);
  mask-image: linear-gradient(to bottom, #000 25%, transparent);
}

/* ---------------- layout ---------------- */

.page { min-height: 100vh; display: flex; flex-direction: column; }
main  { flex: 1; padding-top: 64px; }

.wrap {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding-inline: 40px;      /* px-6 + px-4 on phones, as on the reference */
  min-width: 0;
}
@media (min-width: 768px) {
  .wrap { padding-inline: 24px; }
}

.sec-intro    { padding-top: 20px; padding-bottom: 20px; }
.sec-exp      { padding-top: 32px; }
.sec-projects { padding-top: 60px; }
.sec-note     { padding-top: 40px; }
.sec-footer   { padding-top: 60px; }

/* ---------------- header: avatar, name, theme switch ---------------- */

.profile { position: relative; display: flex; align-items: center; gap: 16px; }

.avatar {
  position: relative; width: 56px; height: 56px; flex: none;
  overflow: hidden; border-radius: 12px; background: var(--hover);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.avatar .initials {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-family: var(--serif); font-size: 22px; color: var(--strong);
}
button.avatar img { transition: opacity .3s var(--ease), transform .3s var(--ease); }

.name {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--serif); font-size: 20px; line-height: 1.4; font-weight: 400; color: var(--fg);
}
.subpage .wrap { padding-inline: 20px; }
@media (min-width: 640px) { .subpage .wrap { padding-inline: 32px; } }
@media (min-width: 768px) { .name { font-size: 24px; line-height: 1.33; } }

.role-line { font-size: 14px; line-height: 20px; color: var(--muted); }

.theme-ctl { margin-left: auto; display: flex; align-items: center; gap: 8px; }

kbd {
  border: 1px solid var(--border); border-radius: 4px;
  padding: 2px 6px; font-family: var(--sans); font-size: 10px; line-height: 1;
  color: var(--faint);
}
html.dark kbd { color: #525252; }

.switch {
  display: flex; align-items: center; flex: none;
  width: 36px; height: 20px; padding: 2px; border-radius: 999px;
  border: 1px solid var(--switch-bd); background: var(--switch-bg);
  transition: border-color .15s var(--ease);
}
.switch:hover { border-color: #d4d4d4; }
html.dark .switch:hover { border-color: #404040; }
.switch .knob {
  width: 14px; height: 14px; border-radius: 999px; background: var(--knob);
  transition: transform .2s var(--ease);
}
html.dark .switch .knob { transform: translateX(16px); }

/* ---------------- prose ---------------- */

.prose { margin-top: 24px; font-size: 14px; line-height: 1.625; color: var(--text); }
.prose > * + * { margin-top: 16px; }
.prose strong { font-weight: 500; color: var(--strong); }

/* underlined text link */
.link {
  border-radius: 4px; padding: 0 4px; margin: 0 -4px;
  color: var(--strong);
  text-decoration: underline; text-decoration-color: var(--underline);
  text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: background-color .15s var(--ease), text-decoration-color .15s var(--ease);
}
.link:hover { background: var(--hover-ink); text-decoration-color: var(--underline-hover); }

/* icon + label link, no underline */
.ilink {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: baseline;
  border-radius: 4px; padding: 0 4px; margin: 0 -4px;
  color: var(--strong); transition: background-color .15s var(--ease);
}
.ilink:hover { background: var(--hover-ink); }
.ilink svg { display: inline; flex: none; }

.findme { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; }

/* ---------------- section headings ---------------- */

.h2 { font-size: 20px; line-height: 1.4; font-weight: 400; color: var(--fg); }
.sec-exp .h2      { margin-bottom: 24px; }
.sec-projects .h2 { margin-bottom: 14px; }
.h2-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.h2-row .aside { font-size: 11px; color: var(--faint); }

/* ---------------- sliding hover highlight (shared by lists) ---------------- */

.hl-list { position: relative; }
.hl {
  pointer-events: none; position: absolute; top: 0; left: -10px; right: -10px;
  height: 0; opacity: 0; border-radius: 12px; background: var(--hover);
  transition: transform .25s var(--ease), height .25s var(--ease), opacity .2s var(--ease);
  z-index: 0;
}
.hl-list > :not(.hl) { position: relative; z-index: 1; }
@media (hover: none) { .hl { display: none; } }

/* ---------------- experience (accordion) ---------------- */

.exp-list { display: grid; gap: 24px; }

.exp-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 0; text-align: left; font-size: 14px;
}
.exp-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }

.logo {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 8px; overflow: hidden;
  background: var(--strong); color: var(--bg);
  font-family: var(--serif); font-size: 17px; line-height: 1;
}
.logo img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 768px) { .logo { width: 36px; height: 36px; font-size: 19px; } }

.exp-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.exp-title {
  display: flex; align-items: baseline; gap: 8px; white-space: nowrap;
  font-weight: 600; line-height: 1; color: var(--fg);
}
.exp-sub { margin-left: -4px; flex: none; font-size: 11px; font-weight: 400; color: var(--faint); }
a.exp-sub:hover { color: var(--strong); }
.chev {
  display: none; width: 14px; height: 14px; flex: none; align-self: center;
  color: var(--muted); transition: transform .2s ease-out;
}
.exp-trigger:hover .chev,
.exp-item.open .chev { display: block; }
.exp-item.open .chev { transform: rotate(90deg); }

.exp-role { font-size: 12px; line-height: 16px; color: var(--muted); }
.exp-date { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; text-transform: lowercase; }
.exp-date--side { display: none; flex: none; font-size: 12px; text-align: right; }
@media (min-width: 640px) {
  .exp-date--inline { display: none; }
  .exp-date--side { display: block; }
}

.exp-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .25s var(--ease);
}
.exp-item.open .exp-body { grid-template-rows: 1fr; }
.exp-body > div { overflow: hidden; }
.exp-detail {
  padding: 12px 0 4px 44px;
  font-size: 14px; line-height: 1.625; color: var(--text);
}
@media (min-width: 768px) { .exp-detail { padding-left: 48px; } }
.exp-detail ul { margin-top: 10px; display: grid; gap: 6px; }
.exp-detail li { display: flex; gap: 10px; }
.exp-detail li::before { content: '–'; color: var(--faint); flex: none; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 1px 7px; font-size: 11px; line-height: 18px; color: var(--muted);
}

/* ---------------- projects ---------------- */

.proj-list { display: grid; gap: 4px; }
.proj { position: relative; min-width: 0; }
.proj-link {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  margin: 0 -10px; padding: 10px 48px 10px 10px; border-radius: 12px;
}
@media (min-width: 768px) { .proj-link { align-items: center; } }

.doc {
  display: flex; flex-direction: column; flex: none;
  width: 40px; height: 44px; padding: 10px 8px 0;
  border-radius: 8px; border: 1px solid var(--tile-bd); background: var(--tile-bg);
}
.doc i { display: block; height: 2px; border-radius: 999px; background: var(--tile-bar); }
.doc i:nth-child(1) { width: 8px; }
.doc i:nth-child(2) { width: 16px; margin-top: 8px; }
.doc i:nth-child(3) { width: 12px; margin-top: 3px; }

.proj-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.proj-name {
  display: flex; align-items: baseline; gap: 8px;
  font-weight: 600; line-height: 1; color: var(--fg);
}
.proj-year { font-size: 11px; font-weight: 400; color: var(--faint); font-variant-numeric: tabular-nums; }
.proj-desc { font-size: 13px; line-height: 1.625; color: var(--muted); }
@media (min-width: 768px) {
  .exp-title, .proj-name { font-size: 14px; }
  .proj-desc { font-size: 14px; }
}
.proj .tags { margin-top: 6px; }

.proj-icon {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  padding: 4px; color: var(--faint); transition: color .15s var(--ease); z-index: 2;
}
.proj-icon:hover { color: var(--strong); }

.after-list { margin-top: 16px; font-size: 14px; color: var(--muted); }

/* ---------------- note line (pixel heart) ---------------- */

.note {
  display: flex; align-items: center; gap: 8px; width: fit-content;
  margin: 0 -10px; padding: 6px 10px; border-radius: 8px;
  font-size: 14px; color: #525252;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
html.dark .note { color: #a3a3a3; }
.note:hover { background: var(--hover); color: var(--strong); }
.note svg { height: 14px; width: auto; flex: none; fill: currentColor; }
.note .u {
  color: var(--strong); text-decoration: underline; text-decoration-color: var(--underline);
  text-decoration-thickness: 1px; text-underline-offset: 5px;
}

/* ---------------- footer ---------------- */

.footer { padding: 32px 0; margin-bottom: 40px; font-size: 12px; color: var(--muted); }
.footer-row {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 40px;
}
.footer-meta {
  display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
  font-variant-numeric: tabular-nums;
}
.footer-meta .fg { color: var(--fg); font-weight: 600; }
.signature {
  font-family: var(--sign); font-size: 38px; line-height: 56px; height: 56px;
  color: var(--fg); user-select: none; white-space: nowrap; transform: rotate(-4deg);
}
@media (min-width: 640px) {
  .footer-row { flex-direction: row; }
  .footer-meta { align-items: flex-start; text-align: left; }
}

/* ---------------- sub-pages ---------------- */

.subpage main { padding-top: 40px; }
@media (min-width: 640px) { .subpage main { padding-top: 56px; } }

.subnav {
  position: sticky; top: 12px; z-index: 60;
  padding-top: 12px; padding-bottom: 12px; background: var(--bg);
}
@media (min-width: 640px) { .subnav { top: 16px; } }
.subnav-row { display: flex; align-items: center; justify-content: space-between; }
.back {
  border-radius: 8px; padding: 4px 10px; font-size: 12px; color: var(--muted);
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.back:hover, .icon-btn:hover { background: var(--hover); color: var(--strong); }
.icon-btn {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  color: var(--muted); transition: background-color .15s var(--ease), color .15s var(--ease);
}

.page-head { padding-top: 32px; padding-bottom: 12px; }
@media (min-width: 640px) { .page-head { padding-top: 48px; } }
.page-head .lede { margin-top: 12px; font-size: 14px; line-height: 1.625; color: var(--muted); }

.sub-sec { margin-top: 60px; }
.sub-sec .h2-row, .sub-sec > .h2 { margin-bottom: 24px; }

/* simple title/date rows (writing, education) */
.rows {
  position: relative; display: flex; flex-direction: column;
  margin: -10px -10px 0; font-size: 14px; line-height: 1.625; color: var(--text);
}
.rows .hl { left: 0; right: 0; border-radius: 8px; }
.row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-radius: 8px; padding: 10px; transition: color .15s var(--ease);
}
a.row:hover { color: var(--strong); }
.row .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .meta  { flex: none; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
html.dark .row .meta { color: var(--faint); }
.row .sub { display: block; font-size: 12px; color: var(--muted); }
.row.wrap-ok .title { white-space: normal; }

.empty { font-size: 14px; line-height: 1.625; color: var(--muted); }

/* work page: experience shown expanded */
.role-block + .role-block { margin-top: 40px; }
.role-block .exp-detail { padding-left: 0; padding-top: 14px; }

.stack-line { font-size: 14px; line-height: 1.8; color: var(--text); }

@media (min-width: 768px) { .subpage .wrap { padding-inline: 0; } }

/* ---------------- music toggle ---------------- */

.eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.eq i { display: block; width: 2px; height: 4px; border-radius: 1px; background: currentColor; }
[aria-pressed="true"] > .eq i { animation: eq 1s ease-in-out infinite; }
[aria-pressed="true"] > .eq i:nth-child(2) { animation-delay: -.4s; }
[aria-pressed="true"] > .eq i:nth-child(3) { animation-delay: -.7s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 12px; } }

/* ---------------- toast ---------------- */

.toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 80;
  transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  border-radius: 8px; padding: 8px 14px; font-size: 12px;
  background: var(--strong); color: var(--bg);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- liquid glass ----------------
   .glass is the material: a thin tint, a bright rim where light hits the top
   edge, a darker rim underneath, a soft drop shadow and a diagonal sheen.
   js/glass.js adds real edge refraction in Chromium (html.lg-refract);
   other browsers get the frosted fallback below.                          */

.glass {
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(10px) saturate(1.6);
  backdrop-filter: blur(10px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 var(--glass-rim-hi),
    inset 1px 0 0 color-mix(in srgb, var(--glass-rim-hi) 50%, transparent),
    inset 0 -1px 0 var(--glass-rim-lo),
    inset 0 0 0 1px var(--glass-ring),
    var(--glass-shadow);
  border-color: transparent !important;
}
.glass::after {
  content: ''; pointer-events: none; position: absolute; inset: 0; border-radius: inherit;
  background:
    linear-gradient(135deg, var(--glass-sheen) 0%, transparent 38%),
    radial-gradient(120% 80% at 50% 120%, color-mix(in srgb, var(--glass-sheen) 60%, transparent), transparent 60%);
  mix-blend-mode: soft-light;
}

/* in-flow glass needs a containing block for the sheen; .hl, .bgm and
   .toast are already absolute/fixed and must stay that way */
.switch.glass, kbd.glass, .doc.glass, .subnav-row.glass { position: relative; }

/* the sliding hover highlight is a glass slab *behind* the row: it frosts
   and bends the animated background; the row's text stays on top, crisp. */
.hl.glass { background: var(--glass-tint); }

/* theme switch: glass track, a glossy droplet for the knob */
.switch.glass { height: 22px; width: 40px; padding: 3px; }
.switch.glass .knob {
  position: relative; z-index: 1;
  width: 16px; height: 16px;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #f5f5f5 45%, #d4d4d4 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 1px rgba(0, 0, 0, 0.08);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), width .2s var(--ease);
}
.switch.glass:active .knob { width: 20px; }
html.dark .switch.glass .knob {
  transform: translateX(16px);
  background: radial-gradient(circle at 35% 30%, #e5e5e5 0%, #a3a3a3 55%, #737373 100%);
}
html.dark .switch.glass:active .knob { transform: translateX(12px); }

kbd.glass { border: 0; }

/* the photo gets a glass rim */
.avatar { box-shadow: var(--glass-shadow); }
.avatar::after {
  content: ''; pointer-events: none; position: absolute; inset: 0; border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, transparent 35%);
  mix-blend-mode: soft-light;
}

/* project tiles: small glass slabs */
.doc.glass { background: var(--glass-tint); }
.doc.glass i { position: relative; z-index: 1; }

/* sub-page bar floats as a glass pill over the scrolling page */
.subnav { background: transparent; }
.subnav-row.glass {
  margin-inline: -6px; padding: 4px; border-radius: 14px;
  background: var(--glass-solid);
}
.subnav-row.glass > * { position: relative; z-index: 1; }


.toast.glass {
  background: var(--glass-solid); color: var(--fg);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  backdrop-filter: blur(16px) saturate(1.8);
}

@media (prefers-reduced-transparency: reduce) {
  .glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
  .glass::after, .avatar::after { display: none; }
}

/* ---------------- animated background ----------------
   js/shader.js paints a slow mesh gradient into the canvas; a faint grid
   sits over it, fading out towards the bottom. Both are what the glass
   blurs and bends: grid lines visibly kink at a glass edge.            */

.bg-shader, .bg-grid {
  position: fixed; left: 0; top: 0; width: 100%; height: 100lvh;
  pointer-events: none;
}
.bg-shader { z-index: -2; opacity: 0; transition: opacity .8s var(--ease); }
html.shader-ready .bg-shader { opacity: 1; }
.bg-grid {
  z-index: -1;
  --grid-line: rgba(0, 0, 0, 0.055);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 30%, transparent 100%);
}
html.dark .bg-grid { --grid-line: rgba(255, 255, 255, 0.05); }

/* no WebGL: a still CSS version of the same palette */
html.no-shader body {
  background:
    radial-gradient(45% 40% at 18% 12%, rgba(199, 204, 255, .7), transparent 70%),
    radial-gradient(40% 40% at 85% 28%, rgba(255, 212, 179, .6), transparent 70%),
    radial-gradient(45% 45% at 55% 80%, rgba(184, 240, 217, .55), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
html.dark.no-shader body {
  background:
    radial-gradient(45% 40% at 18% 12%, rgba(56, 46, 153, .35), transparent 70%),
    radial-gradient(40% 40% at 85% 28%, rgba(107, 26, 107, .3), transparent 70%),
    radial-gradient(45% 45% at 55% 80%, rgba(10, 87, 82, .3), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}

/* ---------------- floating dock ----------------
   A liquid-glass tab bar: page links, résumé, music. On phones it's the
   main navigation; it also gives touch screens (no hover lens) a large
   piece of glass sitting over the moving background.                  */

.dock {
  position: fixed; z-index: 70; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px;
  padding: 5px; border-radius: 22px;
}
.dock > * { position: relative; z-index: 1; }
.dock-item {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 38px; border-radius: 16px;
  color: var(--muted);
  transition: color .15s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.dock-item svg { width: 18px; height: 18px; }
.dock-item:active { transform: scale(.92); }
@media (hover: hover) {
  .dock-item:hover { color: var(--strong); background: rgba(255, 255, 255, .35); }
  html.dark .dock-item:hover { background: rgba(255, 255, 255, .07); }
}
/* the current page: a brighter droplet inside the glass */
.dock-item[aria-current="page"] {
  color: var(--strong);
  background: rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 4px rgba(0, 0, 0, .08);
}
html.dark .dock-item[aria-current="page"] {
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 4px rgba(0, 0, 0, .4);
}
.dock-item[aria-pressed="true"] { color: var(--strong); }
.dock-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--border); opacity: .8; }
.dock .eq { height: 14px; }

/* leave room so the dock never covers the footer */
.page { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

/* ---------------- mobile ---------------- */

/* tighter gutters than the reference's 40px: more room for text on phones */
@media (max-width: 767px) {
  .wrap, .subpage .wrap { padding-inline: 24px; }
  main { padding-top: 40px; }
}
@media (max-width: 380px) {
  .wrap, .subpage .wrap { padding-inline: 18px; }
}

/* long company names: truncate instead of pushing the row off-screen */
.exp-title > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) {
  .exp-sub { display: none; }
  .signature { font-size: 32px; }
  .proj-link { padding-right: 40px; }
}

/* touch: no keyboard hint, bigger tap targets */
@media (pointer: coarse) {
  kbd { display: none; }
  .ilink { padding: 2px 6px; margin: -2px -6px; }
  .findme { row-gap: 6px; column-gap: 8px; }
  .switch.glass { width: 46px; height: 28px; padding: 4px; }
  .switch.glass .knob { width: 20px; height: 20px; }
  html.dark .switch.glass .knob { transform: translateX(18px); }
  .dock-item { width: 46px; height: 42px; }
  /* frosted glass is cheaper with a smaller blur radius */
  .glass { -webkit-backdrop-filter: blur(8px) saturate(1.5); backdrop-filter: blur(8px) saturate(1.5); }
  .top-blur { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}

/* hover colours shouldn't stick after a tap */
@media (hover: none) {
  .link:hover, .ilink:hover { background: transparent; }
  .note:hover { background: transparent; color: inherit; }
}

/* ---------------- motion & print ---------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  html.dark { --bg: #fff; --fg: #000; --text: #333; --strong: #000; --muted: #555; --faint: #777; }
  .top-blur, .theme-ctl, .dock, .toast, .subnav, .hl, .bg-shader, .bg-grid, #oneko { display: none !important; }
  body { background: #fff !important; }
  .glass, .avatar { box-shadow: none !important; }
  .exp-body { grid-template-rows: 1fr !important; }
}

.aside-link { font-size: 12px; }
.sub-sec--tight { margin-top: 32px; }
.proj-list--full .proj-link { align-items: flex-start; }
.proj-list--full .proj-icon { top: 10px; transform: none; }
.exp-title { min-width: 0; max-width: 100%; }