/* Shared base styles for index, cv and portfolio. Page <style> blocks load after this. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: light;
  --font-sans: 'Timeless Sans Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: 'Newsreader', ui-serif, Georgia, serif;
  --bg: #fafaf9;
  --surface: #ffffff;
  --fg: #292524;
  --muted: #78716c;
  --border: color-mix(in oklab, #1c1917 10%, transparent);
  --co: #57534e;
  --green: #4ade80;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --measure: min(100vw - 2.5rem, 48rem);
  --accent: #ff8a5c;
  --radius-pill: 1.6rem;
  --radius-squircle: 1rem;
}

.dark {
  color-scheme: dark;
  --bg: #121214;
  --surface: #1c1c20;
  --fg: #f4f4f5;
  --muted: #a1a1aa;
  --border: color-mix(in oklab, #fafafa 10%, transparent);
  --co: #d4d4d8;
}

html {
  scroll-behavior: smooth;
  font-size: 14px;
  --book-w: min(34rem, 92vw);
  overflow-x: hidden;
}

@media (min-width: 481px) {
  html { font-size: 16px; }
}

body {
  font-family: var(--font-sans);
  font-weight: 500;
  background: var(--bg);
  color: var(--fg);
  min-height: 100dvh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 7.5rem;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 640px) {
  :root { --measure: min(100vw - 4rem, 48rem); }

  body {
    padding-top: 10rem;
    padding-bottom: 6rem;
  }
}

::selection {
  background: var(--fg);
  color: var(--bg);
}

a { color: inherit; text-decoration: none; }
a[target="_blank"] { cursor: alias; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
strong { font-weight: 600; color: var(--fg); }

/* Blur veil behind the masthead */
.top-veil {
  pointer-events: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 40;
  height: 7rem;
  display: block;
  transition: right 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.top-veil span {
  position: absolute;
  inset: 0;
}

.top-veil .v1 {
  background: linear-gradient(to bottom, var(--bg), transparent);
}

.top-veil .v2 {
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  mask-image: linear-gradient(to bottom, black 0%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 85%, transparent 100%);
}

.top-veil .v3 {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 80%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 80%);
}

.top-veil .v4 {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 55%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 55%);
}

.top-veil .v5 {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  mask-image: linear-gradient(to bottom, black 0%, black 12%, transparent 32%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 12%, transparent 32%);
}