/* renevs.nl — frosted white cards on a pale pastel haze, a bento grid, soft
   blurred artwork. No script and no inline style: the artwork is layered CSS
   gradients with an SVG grain, the orb is a radial gradient. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("/web/fonts/poppins-300.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/web/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/web/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/web/fonts/poppins-600.woff2") format("woff2"); }

:root {
  --bg: #efeef3;
  --ink: #1d1b29;
  --ink-soft: #57546a;
  --ink-faint: #8f8ba1;
  --accent: #ff6a3d;
  --card: rgba(255, 255, 255, 0.52);
  --card-strong: rgba(255, 255, 255, 0.78);
  --rim: rgba(255, 255, 255, 0.95);
  --shadow: 0 18px 40px -22px rgba(72, 52, 110, 0.35), 0 4px 12px -6px rgba(72, 52, 110, 0.12);
  --radius: 26px;
  --gap: 18px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 400 0.98rem/1.7 "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; }
h1, h2, p { margin: 0; }

/* ── the haze behind everything ──────────────────────────────────────── */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(180deg, #f1f0f4 0%, #efedf2 55%, #ece4ee 100%);
}
.haze { position: absolute; border-radius: 50%; filter: blur(90px); }
.h1 { width: 60vmax; height: 40vmax; left: -15vmax; bottom: -22vmax; background: #f7c6d6; opacity: 0.8; }
.h2 { width: 55vmax; height: 45vmax; right: -18vmax; bottom: -18vmax; background: #d7c6f2; opacity: 0.9; }
.h3 { width: 40vmax; height: 30vmax; left: 30vw; top: -18vmax; background: #ffe3d3; opacity: 0.55; }

/* ── the card: frosted white with a bright rim ───────────────────────── */

.card {
  position: relative;
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--card-strong), var(--card) 55%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border: 1.5px solid var(--rim);
  box-shadow: var(--shadow), inset 0 1px 0 #fff;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card { background: rgba(255, 255, 255, 0.9); }
}

/* ── layout ──────────────────────────────────────────────────────────── */

.shell {
  display: grid;
  gap: var(--gap);
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 36px) clamp(16px, 3vw, 36px) 0;
}
@media (min-width: 1000px) {
  .shell { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
  .shell-solo { grid-template-columns: minmax(0, 720px); justify-content: center; }
}
.main { display: grid; gap: var(--gap); min-width: 0; }

.skip {
  position: absolute; left: -9999px; top: 12px; z-index: 10;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff;
}
.skip:focus { left: 12px; }

.label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; margin: 4px 0 14px; }

/* ── side card ───────────────────────────────────────────────────────── */

.side { padding: 26px 16px 22px; }
@media (min-width: 1000px) { .side { position: sticky; top: 24px; } }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; text-decoration: none; font-weight: 600; font-size: 1.05rem; line-height: 1.25; }
.side .label { margin: 30px 10px 10px; }
.menu { display: grid; gap: 4px; }
.item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: 16px;
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--ink-soft);
  transition: background 0.2s, color 0.2s;
}
.item svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.item:hover { background: rgba(255, 255, 255, 0.6); color: var(--ink); }
.item.is-on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 8px 18px -10px rgba(72, 52, 110, 0.3); }
.item.is-on svg { stroke: var(--accent); }
@media (max-width: 999px) {
  .side { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px; }
  .side .label, .side .menu[aria-label="Elsewhere"] { display: none; }
  .menu { display: flex; flex-wrap: wrap; gap: 4px; }
  .item { padding: 8px 12px; }
  .brand { flex: 1 1 100%; padding: 4px 6px 6px; }
}

/* ── the orb ─────────────────────────────────────────────────────────── */

.orb {
  display: inline-block;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffe6dc 0%, #ffab8e 22%, #ff6a5a 52%, #e24763 82%, #c73a63 100%);
  box-shadow: inset -5px -7px 14px rgba(150, 30, 70, 0.3), inset 4px 5px 10px rgba(255, 255, 255, 0.45), 0 14px 30px -10px rgba(255, 90, 80, 0.6);
}
.orb-xs { width: 16px; height: 16px; box-shadow: 0 4px 10px -3px rgba(255, 90, 80, 0.6); }
.orb-sm { width: 40px; height: 40px; }
.orb-lg { width: 76px; height: 76px; margin: 0 auto 22px; display: block; filter: saturate(1.05); }

/* ── pastel artwork ──────────────────────────────────────────────────── */
/* Four soft colour fields, a silky light streak, then grain on top. Each
   project sets --a --b --c --d; the named arts below set their own. */

.art {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(62% 58% at 16% 20%, var(--a), transparent 72%),
    radial-gradient(58% 62% at 88% 22%, var(--b), transparent 70%),
    radial-gradient(95% 70% at 50% 112%, var(--c), transparent 74%),
    var(--d);
}
/* a soft diagonal band of the accent colour, and silk lines across it */
.art::before {
  content: "";
  position: absolute;
  inset: -35%;
  background:
    repeating-linear-gradient(128deg, transparent 0 13px, rgba(255, 255, 255, 0.5) 14px, transparent 16.5px),
    linear-gradient(128deg, transparent 36%, var(--e) 45%, var(--e) 51%, transparent 62%),
    radial-gradient(40% 30% at 62% 40%, rgba(255, 255, 255, 0.75), transparent 70%);
  filter: blur(6px);
  opacity: 0.85;
  transform: rotate(-5deg) translate(2%, 6%);
}
.art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grain);
  opacity: 0.4;
  mix-blend-mode: overlay;
}

.art-silk   { --a: #ff7fb4; --b: #a98bff; --c: #ffb08f; --d: #f3c7e6; --e: #ffd6ec; }
.art-meadow { --a: #ffa06b; --b: #7fc7ff; --c: #8fd8ff; --d: #ffe0c7; --e: #5fd08e; }
.art-sunset { --a: #ff7a6b; --b: #6f9dff; --c: #ffc27a; --d: #f6d3e3; --e: #ffe2b8; }

.p-rual         { --a: #9d7bff; --b: #56c3ff; --c: #ff9ccf; --d: #e3dbff; --e: #ffffff; }
.p-deverence    { --a: #7f9bff; --b: #c1a4ff; --c: #ffc0dc; --d: #e6e8ff; --e: #dff1ff; }
.p-mssgs        { --a: #ffa574; --b: #6fc4ff; --c: #8fe0c0; --d: #ffe6d4; --e: #52cf86; }
.p-brismania    { --a: #ff7fae; --b: #ffb066; --c: #ffd98a; --d: #ffe3ea; --e: #fff0c9; }
.p-cozycity     { --a: #ffc55c; --b: #9fdc7f; --c: #ff9f84; --d: #fff0cf; --e: #fff6d8; }
.p-eualt        { --a: #6f98ff; --b: #ffd65c; --c: #a9d8ff; --d: #e4edff; --e: #fff3c4; }
.p-pixelcity    { --a: #ff9fd2; --b: #8f8bff; --c: #ffc7a8; --d: #f3e6ff; --e: #ffffff; }
.p-lanternwilds { --a: #ffb35c; --b: #7ccf98; --c: #ffd98a; --d: #eef8e6; --e: #fff1c9; }
.p-mssgsmail    { --a: #6fd6ec; --b: #ad8fff; --c: #ffbfdc; --d: #e4f7ff; --e: #ffffff; }
.p-mssgswork    { --a: #6f9fff; --b: #8fdcff; --c: #c6bdff; --d: #e4efff; --e: #ffffff; }
.p-autorie      { --a: #ff7f6b; --b: #ffb86b; --c: #ffc4d2; --d: #ffe6dd; --e: #fff0d6; }

/* the round arrow in a corner */
.go {
  position: absolute;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 14px -6px rgba(72, 52, 110, 0.45);
  transition: transform 0.25s;
}
.go svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── the intro bento ─────────────────────────────────────────────────── */

.bento {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "chips chips"
    "hero  hero"
    "pill  pill"
    "story projects";
}
@media (min-width: 760px) {
  .bento {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
    grid-template-areas:
      "chips pill     pill"
      "hero  story    projects"
      "hero  story    projects";
  }
}
.chips { grid-area: chips; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.9);
}
.chip.is-on { background: #fff; color: var(--ink); box-shadow: 0 6px 14px -8px rgba(72, 52, 110, 0.35); }

.pill { grid-area: pill; display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 999px; text-decoration: none; }
.thumb { width: 46px; height: 46px; border-radius: 50%; flex: none; border: 2px solid #fff; }
.pill-text { display: grid; line-height: 1.35; min-width: 0; }
.pill-text strong { font-weight: 600; font-size: 0.9rem; }
.pill-text span { font-size: 0.78rem; color: var(--ink-faint); }
.play { margin-left: auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: 0 6px 14px -6px rgba(255, 106, 61, 0.55); }
.play svg { width: 16px; height: 16px; fill: var(--accent); }

.hero {
  grid-area: hero;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  min-height: 360px;
  padding: clamp(28px, 5vw, 56px) clamp(22px, 4vw, 48px);
  overflow: hidden;
}
/* the dotted field behind the greeting, fading out toward the edges */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(96, 86, 130, 0.22) 1px, transparent 1.3px);
  background-size: 13px 13px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, #000 20%, transparent 75%);
  pointer-events: none;
}
.hero > * { position: relative; }
h1 {
  max-width: 19ch;
  font-size: clamp(1.6rem, 2.7vw, 2.15rem);
  line-height: 1.22;
  font-weight: 400;
  letter-spacing: -0.015em;
}
h1 strong { font-weight: 600; }
.lede { max-width: 38ch; margin-top: 16px; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6; }
.lede strong { color: var(--ink); font-weight: 500; }
.hero .chip { margin-top: 22px; }

.tile { display: block; min-height: 160px; padding: 6px; text-decoration: none; overflow: hidden; }
.tile-story { grid-area: story; }
.tile-projects { grid-area: projects; }
.tile .art { position: absolute; inset: 6px; }
/* a soft shade at the foot of the artwork so the white label reads */
.tile::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 20px;
  background: linear-gradient(0deg, rgba(58, 28, 88, 0.34), transparent 42%);
  pointer-events: none;
}
.tile-name { position: absolute; z-index: 1; left: 22px; bottom: 18px; font-size: 1.15rem; font-weight: 500; color: #fff; text-shadow: 0 2px 10px rgba(50, 20, 70, 0.35); }
.tile .go { z-index: 1; right: 16px; bottom: 16px; }
.tile:hover .go, .project:hover .go { transform: rotate(45deg); }

/* ── story + book ────────────────────────────────────────────────────── */

.duo { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .duo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }

.prose, .chat { padding: clamp(24px, 3.4vw, 36px); scroll-margin-top: 24px; }
.prose p + p { margin-top: 1em; }
.prose p:not(.label) { color: var(--ink-soft); }

.msg { max-width: 92%; padding: 14px 16px; border-radius: 20px; font-size: 0.9rem; line-height: 1.65; }
.msg p + p { margin-top: 0.6em; }
.msg p:not(.who) { color: var(--ink-soft); }
.who { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 0.8rem; font-weight: 600; }
.dot { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, #c9b6ff, #86d3ff); }
.msg-you { margin: 6px 0 12px auto; background: rgba(255, 255, 255, 0.75); border-bottom-right-radius: 6px; text-align: right; }
.msg-you .who { justify-content: flex-end; }
.msg-him { background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.85); border-bottom-left-radius: 6px; }

blockquote {
  margin: 18px 0 0;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(255, 159, 196, 0.22), rgba(185, 163, 255, 0.2) 55%, rgba(255, 208, 184, 0.24));
  border: 1px solid rgba(255, 255, 255, 0.9);
}
blockquote p { font-size: 0.98rem; font-weight: 500; color: var(--ink); line-height: 1.5; }
blockquote .tr { margin-top: 4px; font-size: 0.82rem; font-weight: 400; color: var(--ink-faint); }

/* ── projects ────────────────────────────────────────────────────────── */

.projects { display: grid; gap: var(--gap); scroll-margin-top: 24px; }
.projects-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 18px 6px 0; }
.projects-head h2 { margin-bottom: 0; }
.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}
.project {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 6px 6px 20px;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s;
}
.project .art { height: 150px; flex: none; }
.project .go { top: 16px; right: 16px; }
.project strong { margin: 14px 14px 0; font-size: 1rem; font-weight: 600; }
.project .domain { margin: 0 14px; font-size: 0.78rem; color: var(--ink-faint); }
.project .what { margin: 8px 14px 0; font-size: 0.85rem; line-height: 1.55; color: var(--ink-soft); }
.project:hover, .project:focus-visible, .tile:hover, .pill:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 46px -24px rgba(72, 52, 110, 0.45), inset 0 1px 0 #fff;
}
.tile, .pill { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s; }

/* ── footer ──────────────────────────────────────────────────────────── */

.foot { padding: 28px 0 40px; text-align: center; font-size: 0.8rem; color: var(--ink-faint); }

a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .project, .tile, .pill, .go, .item { transition: none; }
}