/* ============================================================
   vilevi.ch — shared stylesheet for the new site
   (Work, Resume, Photography and the case studies).
   Geist, light only. Studio-Lenzing-style reveals: snappy fades,
   left→right image wipes, line-by-line text.
   ============================================================ */

:root {
  --bg: #fff;
  --text: #000;
  --muted: #505050;
  --surface: #f7f7f7;
  --hairline: #e6e6e6;
  --link: #006fff;             /* accent blue — from the current site */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* snappy ease-out */
  --rvT: 0.72s;                              /* reveal duration */
  --col: 800px;
  --tile: #efefef;             /* empty work tile */
  --link-deep: #123d8b;        /* "Back to projects" */
  color-scheme: light;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 4px;
}
.skip-link:focus { left: 16px; top: 16px; }

.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;
}

.page {
  --pad: 40px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
/* text pages keep their reading column; Work and case studies run full width */
.page > main { width: 100%; max-width: calc(var(--col) - 48px); margin-left: auto; margin-right: auto; }
.page > main.wk,
.page > main.cs { max-width: none; }

/* ---------- Nav ---------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 0;
  gap: 24px;
}
.nav-id { display: inline-flex; align-items: center; }
.nav-mark { display: block; width: 71px; height: 32px; }
.nav-links { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; }
.nav-links a { padding: 8px 16px; border-radius: 20px; color: var(--muted); transition: color .2s, background-color .2s; }
.nav-links a:hover { color: var(--text); background: var(--surface); }
.nav-links a[aria-current="page"] { color: #202020; background: #f5f5f5; }

/* ---- Hamburger toggle + full-screen mobile menu (built by resume.js) ---- */
.menu-toggle { display: none; }
.menu-toggle-bars { display: block; position: relative; width: 24px; height: 14px; }
.menu-toggle-bars span {
  position: absolute; left: 0; width: 24px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .3s var(--ease), top .3s var(--ease), opacity .2s;
}
.menu-toggle-bars span:nth-child(1) { top: 3px; }
.menu-toggle-bars span:nth-child(2) { top: 11px; }
.menu-open .menu-toggle-bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.menu-open .menu-toggle-bars span:nth-child(2) { top: 7px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; justify-content: center;
  padding: 32px;
  background: #0a0a0a;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.mobile-menu[hidden] { display: none; }
.menu-open .mobile-menu { opacity: 1; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu a {
  color: #fff; font-size: 34px; font-weight: 500; line-height: 1.25;
  letter-spacing: -0.01em; padding: 6px 0;
  opacity: 0; transform: translateY(24px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .2s;
  transition-delay: calc(var(--i, 0) * 0.06s);
}
.menu-open .mobile-menu a { opacity: 1; transform: none; }
.mobile-menu a[aria-current="page"] { color: var(--link-on-dark, #8aa0ff); }
.mobile-menu a:hover { color: #b9b9b9; }

/* ============================================================
   Reveal system (Studio-Lenzing style)
   Only active when JS is present (html.js). Falls back to fully
   visible without JS or with reduced-motion.
   ============================================================ */

/* fade + rise */
.js [data-rv="up"] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--rvT) var(--ease), transform var(--rvT) var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-rv="up"].in { opacity: 1; transform: none; }

/* left → right image wipe (+ gentle inner push) */
.js [data-rv="img"] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-rv="img"].in { clip-path: inset(0 0 0 0); }
.js [data-rv="img"] > img {
  transform: scale(1.06);
  transition: transform 1s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-rv="img"].in > img { transform: none; }

/* masked line reveal (line-by-line for "lines", single for "mask") */
.js [data-rv="lines"] .ln,
.js [data-rv="mask"] .ln { display: block; overflow: hidden; }
.js [data-rv="lines"] .ln-i,
.js [data-rv="mask"] .ln-i {
  display: block;
  transform: translateY(112%);
  transition: transform var(--rvT) var(--ease);
  transition-delay: var(--ld, 0s);
}
.js [data-rv="lines"].in .ln-i,
.js [data-rv="mask"].in .ln-i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-rv] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .js [data-rv] .ln-i { transform: none !important; transition: none !important; }
  .js [data-rv="img"] > img { transform: none !important; }
}

/* page scroll lock while the mobile menu is open */
body.no-scroll { overflow: hidden; }

/* ============================================================
   Photography page (gallery)
   ============================================================ */
.page > main.photo { max-width: none; }
.photo { display: flex; flex-direction: column; gap: 64px; padding-top: 128px; padding-bottom: 64px; }
.photo-head { display: flex; flex-direction: column; gap: 16px; max-width: 668px; }
.photo-title { font-size: 24px; line-height: 32px; font-weight: 500; color: #202020; }
.photo-desc { font-size: 16px; line-height: 25px; color: var(--muted); }
/* same grid as the Work tiles: three columns, 24px gutters, square corners */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.photo-shot {
  display: block;
  aspect-ratio: 2 / 3;                 /* reserve height so scroll-reveal works before load */
  overflow: hidden; background: var(--tile);
}
.photo-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 720px) {
  .page { --pad: 20px; padding: 0 var(--pad); }
  .nav { padding: 20px 0; }
  .nav-links { display: none; }
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; top: 18px; right: 18px; z-index: 100;
    width: 40px; height: 40px; padding: 0;
    background: none; border: 0; cursor: pointer; color: var(--text);
  }
  .menu-open .menu-toggle { color: #fff; }

  .photo { gap: 48px; padding-top: 128px; padding-bottom: 48px; }
  .photo-title { font-size: 20px; line-height: 28px; }
  .photo-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ============================================================
   Case study page (Figma 386-22275, after acolorbright.com/work)
   Full-width figures, text held to the left half of the page.
   ============================================================ */
.cs { padding-bottom: 0; }

/* head — title, then intro, in the left half */
.cs-head {
  display: flex; flex-direction: column; gap: 40px;
  max-width: 50%;
  padding-top: 144px;
}
.cs-title { font-size: 22px; font-weight: 500; line-height: 28px; letter-spacing: -0.01em; color: var(--text); }
.cs-intro { font-size: 16px; line-height: 25px; color: var(--muted); }

/* text section — headline + body, left half only */
.cs-sec { max-width: 50%; margin-top: 144px; }
.cs-sec h2 { font-size: 20px; font-weight: 500; line-height: 26px; letter-spacing: -0.01em; color: var(--text); margin-bottom: 16px; }
.cs-sec p { font-size: 16px; line-height: 25px; color: var(--muted); }
.cs-sec p + p { margin-top: 20px; }
.cs-sec p a { color: var(--link); }
.cs-sec p a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* boxless stat callouts, two up inside the text column */
.cs-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin-top: 64px; }
.cs-stat b { display: block; font-size: 36px; font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--text); }
.cs-stat span { display: block; margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--muted); }

/* figures — full page width, square corners, no frame */
.cs-fig, .cs-pair { margin-top: 48px; }
.cs-fig + .cs-fig, .cs-fig + .cs-pair,
.cs-pair + .cs-fig, .cs-pair + .cs-pair { margin-top: 16px; }
figure.cs-fig { display: block; }
.cs-fig img, .cs-pair img { display: block; width: 100%; height: auto; }

/* two visuals side by side */
.cs-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cs-pair > figure { display: block; margin: 0; }
/* two short visuals stacked in one pair cell */
.cs-stack { display: flex; flex-direction: column; gap: 16px; }
.cs-stack > figure { display: block; margin: 0; }

/* back to projects, on the hairline above the footer */
.cs-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
  margin-top: 56px; padding-bottom: 24px;
  border-bottom: 1px solid var(--hairline);
  font-size: 16px; line-height: 20px;
}
.cs-foot a { color: var(--link-deep); transition: color .2s; }
.cs-foot a:hover { color: var(--link); }

@media (max-width: 720px) {
  .cs-head { max-width: none; gap: 16px; padding-top: 56px; }
  .cs-title { font-size: 20px; line-height: 26px; }
  .cs-sec { max-width: none; margin-top: 80px; }
  .cs-sec h2 { font-size: 18px; line-height: 24px; margin-bottom: 20px; }
  .cs-stats { gap: 16px 20px; margin-top: 48px; }
  .cs-stat b { font-size: 30px; }
  .cs-fig, .cs-pair { margin-top: 32px; }
  .cs-fig + .cs-fig, .cs-fig + .cs-pair,
  .cs-pair + .cs-fig, .cs-pair + .cs-pair { margin-top: 8px; }
  .cs-pair { grid-template-columns: 1fr; gap: 8px; }
  .cs-stack { gap: 8px; }
  .cs-foot { margin-top: 40px; }
}

/* =========================================================
   Work page — project rows (Figma 195-3329, after acolorbright.com/work)
   ========================================================= */
.wk { display: flex; flex-direction: column; gap: 128px; padding-top: 128px; }

.wk-list { display: flex; flex-direction: column; gap: 64px; }
.wk-proj { display: flex; flex-direction: column; gap: 32px; color: var(--text); }
.wk-head { display: flex; flex-direction: column; gap: 8px; max-width: 668px; }
.wk-title { font-size: 20px; line-height: 24px; font-weight: 500; transition: color .2s; }
.wk-desc { font-size: 14px; line-height: 20px; color: var(--muted); }
.wk-proj:hover .wk-title { color: var(--link); }
.wk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.wk-tile { position: relative; display: block; aspect-ratio: 437 / 640; overflow: hidden; background: var(--tile); container-type: inline-size; }
.wk-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* layered tiles — UI cards float over a background, placed as in Figma.
   Same specificity as `.wk-tile > img` (+1 class) and declared after it, so these win. */
.wk-tile > img.wk-layer { inset: auto; height: auto; object-fit: fill; }
/* ---------- Endpoint menu-bar widget, rebuilt in DOM (Figma 286:10910) ----------
   The Figma card is 400px wide and sits at 73.06% of the tile, so one design pixel
   is 73.06/400 = 0.18265 container-query width units. Every length below is a
   multiple of --u, which makes the whole card scale with the tile at any breakpoint. */
.wk-widget {
  --u: 0.18265cqw;
  position: absolute; left: 13.47%; top: 25.56%; width: 73.06%;
  display: flex; flex-direction: column; gap: calc(12 * var(--u));
  padding: calc(20 * var(--u));
  border-radius: calc(8 * var(--u));
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 calc(4 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .12);
  font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u));
  color: #131313;
}
.wk-widget img { display: block; }

.wg-head { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
.wg-brand { display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0; }
.wg-logo { width: calc(16.07 * var(--u)); height: calc(16 * var(--u)); flex: none; }
.wg-name { font-weight: 500; white-space: nowrap; }
.wg-avatar { position: relative; flex: none; width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.wg-face { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* the 8px dot ships as a 12px svg (it carries a white ring), so overhang it by 2 */
.wg-dot { position: absolute; right: calc(-2 * var(--u)); bottom: calc(-2 * var(--u)); width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; }

.wg-stack { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.wg-tabs { display: flex; gap: calc(4 * var(--u)); padding: calc(2 * var(--u)); border-radius: calc(6 * var(--u)); background: #f5f5f5; }
.wg-tab { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(4 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(16 * var(--u)); color: #837f7c; white-space: nowrap; }
.wg-tab.is-on { background: #131313; color: #fff; font-weight: 500; }

.wg-net { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(4 * var(--u)); background: #f5f5f5; }
.wg-wifi { flex: none; width: calc(24 * var(--u)); height: calc(24 * var(--u)); }

.wg-txt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.wg-txt b { font-weight: 500; color: #131313; }
.wg-txt i { font-style: normal; color: #837f7c; }

.wg-rows { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.wg-row { position: relative; display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); }
.wg-row > * { position: relative; }
.wg-ico { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.wg-chev { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.wg-chev--alt { width: calc(14.75 * var(--u)); height: calc(15.98 * var(--u)); }

.wg-foot { display: flex; align-items: flex-start; gap: calc(6 * var(--u)); color: #837f7c; }
.wg-foot img { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
/* `left` is derived from the width so the card cannot drift off centre */
.wk-tile > img.wk-notif { --w: 73.23%; width: var(--w); left: calc((100% - var(--w)) / 2); filter: drop-shadow(0 3px 28px rgba(0, 0, 0, .12)); }
/* Three different cards (Figma 439-29909 / 29925 / 29940), stacked 16px apart.
   The stack is 328px of a 640px tile, so centring it leaves 155.8px top and bottom
   — these tops were 9.34% higher, which left a visibly empty band under the third card. */
.wk-tile > img.wk-n1 { top: 24.34%; }
.wk-tile > img.wk-n2 { top: 44.02%; }
.wk-tile > img.wk-n3 { top: 63.70%; }

/* moving accents — run only while the tile is on screen (.is-live from resume.js) */
@keyframes wk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes wk-drift { from { transform: scale(1.14) translate3d(-3%, 1.5%, 0); } to { transform: scale(1.14) translate3d(3%, -1.5%, 0); } }
@keyframes wk-card { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.wk-anim.is-live .wk-widget { animation: wk-float 6s ease-in-out infinite; }
.wk-anim.is-live .wk-sky { animation: wk-drift 24s ease-in-out infinite alternate; }

/* Widget: the card floats (above), its contents arrive once, and then two loops keep
   it alive — the presence dot breathes and a highlight walks down the three rows,
   which is the product's own hover state rather than invented data. */
@keyframes wg-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
@keyframes wg-scan { 0%, 18%, 100% { opacity: 0; } 5%, 13% { opacity: 1; } }
.js .wk-anim .wg-net,
.js .wk-anim .wg-row,
.js .wk-anim .wg-foot { opacity: 0; }
.wk-anim.is-seen .wg-net { animation: wk-card .7s var(--ease) .25s both; }
.wk-anim.is-seen .wg-row { animation: wk-card .7s var(--ease) both; }
.wk-anim.is-seen .wg-row:nth-child(1) { animation-delay: .45s; }
.wk-anim.is-seen .wg-row:nth-child(2) { animation-delay: .6s; }
.wk-anim.is-seen .wg-row:nth-child(3) { animation-delay: .75s; }
.wk-anim.is-seen .wg-foot { animation: wk-card .7s var(--ease) .95s both; }
.wk-anim.is-live .wg-dot { animation: wg-pulse 2.4s ease-in-out infinite; }
.wg-row::before { content: ""; position: absolute; inset: 0; border-radius: calc(4 * var(--u)); background: #f5f5f5; opacity: 0; }
.wk-anim.is-live .wg-row::before { animation: wg-scan 6s ease-in-out 1.5s infinite; }
.wk-anim.is-live .wg-row:nth-child(2)::before { animation-delay: 3.5s; }
.wk-anim.is-live .wg-row:nth-child(3)::before { animation-delay: 5.5s; }
/* notifications arrive once, one after another, and stay (.is-seen is never removed) */
.js .wk-anim .wk-notif { opacity: 0; }
.wk-anim.is-seen .wk-notif { animation: wk-card .9s var(--ease) .4s both; }
.wk-anim.is-seen .wk-n2 { animation-delay: 1.4s; }
.wk-anim.is-seen .wk-n3 { animation-delay: 2.4s; }
@media (prefers-reduced-motion: reduce) {
  .wk-anim.is-live .wk-widget, .wk-anim.is-live .wk-sky { animation: none; }
  .js .wk-anim .wk-notif, .wk-anim.is-seen .wk-notif { opacity: 1; animation: none; }
  .js .wk-anim .wg-net, .js .wk-anim .wg-row, .js .wk-anim .wg-foot,
  .wk-anim.is-seen .wg-net, .wk-anim.is-seen .wg-row, .wk-anim.is-seen .wg-foot { opacity: 1; animation: none; }
  .wk-anim.is-live .wg-dot, .wk-anim.is-live .wg-row::before { animation: none; }
}

/* ---------- Site footer ---------- */
.site-foot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 64px 0; font-size: 14px; }
.foot-col { display: flex; flex-direction: column; gap: 12px; }
.foot-val { line-height: 22px; color: var(--text); }
.foot-val a { transition: color .2s; }
.foot-val a:hover { color: var(--link); }

@media (max-width: 720px) {
  .page { --pad: 20px; padding: 0 var(--pad); }
  .wk { gap: 80px; padding-top: 128px; }

  .wk-list { gap: 56px; }
  .wk-proj { gap: 20px; }
  .wk-title { font-size: 18px; line-height: 22px; }
  /* tiles become a swipeable row */
  .wk-tiles {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -20px; padding: 0 20px; scroll-padding: 0 20px; scrollbar-width: none;
  }
  .wk-tiles::-webkit-scrollbar { display: none; }
  .wk-tile { scroll-snap-align: start; }
  .site-foot { grid-template-columns: 1fr; gap: 28px; padding: 48px 0; }
}

/* =========================================================
   Resume page (Figma 354-4454) — wide, two columns + lists
   ========================================================= */
.page > main.rs { max-width: none; }
.rs { display: flex; flex-direction: column; gap: 64px; padding-top: 128px; padding-bottom: 64px; }

.rs-intro { display: flex; flex-direction: column; gap: 32px; max-width: 668px; }
.rs-lead { font-size: 24px; line-height: 32px; font-weight: 400; color: #202020; }
/* same quiet underline the body copy uses — keeps the headline from going blue */
.rs-lead a { color: inherit; text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.rs-lead a:hover { text-decoration-color: currentColor; }
.rs-pills { display: flex; gap: 4px; font-size: 14px; line-height: 20px; }
/* Handwritten note pointing at the contact pills; offsets match Figma 481:30227. */
.rs-pills a { padding: 8px 16px; border-radius: 20px; background: #f5f5f5; color: #202020; transition: background-color .2s; }
.rs-pills a:hover { background: #ebebeb; }

/* single centred column (Figma 477-29925) */
.page > main.rs { max-width: 648px; margin-left: auto; margin-right: auto; }

/* round portrait, with the handwritten note reaching over it */
.rs-hero { display: block; }
.rs-avatar { display: block; width: 200px; height: 200px; border-radius: 50%; overflow: hidden; background: var(--tile); }
.rs-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

.rs-h { font-size: 13px; font-weight: 400; line-height: 18px; color: #767676; }

.rs-col { display: flex; flex-direction: column; gap: 48px; }
/* Education and Languages: plain columns, no logos */
.rs-block { display: flex; flex-direction: column; gap: 32px; }
.rs-grid { display: grid; gap: 24px 32px; align-items: start; }
.rs-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.rs-jobs { display: flex; flex-direction: column; gap: 64px; }
.rs-item { display: flex; gap: 16px; align-items: flex-start; }
.rs-logo { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: block; }
.rs-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.rs-name { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 16px; }
.rs-name b { font-weight: 500; color: #000; }
.rs-name span { color: var(--muted); }
.rs-text { display: flex; flex-direction: column; gap: 20px; font-size: 14px; line-height: 20px; color: var(--muted); }
.rs-text a { color: var(--text); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.rs-text a:hover { text-decoration-color: currentColor; }

.rs-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

@media (max-width: 900px) {
}
.rs-list { display: flex; flex-direction: column; gap: 12px; }
/* footer is full width again, on its own hairline */
main.rs + .site-foot { border-top: 1px solid #ebecee; padding: 48px 0; }
.rs-list ul { list-style: none; }
.rs-list li { padding: 12px 0; border-bottom: 1px solid #ebecee; font-size: 14px; line-height: 16px; color: var(--muted); }


@media (max-width: 720px) {
  .rs { gap: 48px; padding-top: 128px; padding-bottom: 48px; }
  .rs-lead { font-size: 20px; line-height: 28px; }
  .rs-jobs { gap: 48px; }
  .rs-lists { grid-template-columns: 1fr; gap: 32px; }
  .rs-avatar { width: 160px; height: 160px; }
  .rs-grid--2, .rs-grid--3 { grid-template-columns: 1fr; }
}

/* =========================================================
   404
   ========================================================= */
.page > main.nf { max-width: 648px; margin-left: auto; margin-right: auto; }
.nf { display: flex; flex-direction: column; gap: 24px; padding-top: 128px; padding-bottom: 128px; }
.nf-title { font-size: 24px; line-height: 32px; font-weight: 500; color: #202020; }
.nf-text { font-size: 16px; line-height: 25px; color: var(--muted); }
.nf-links { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; font-size: 16px; line-height: 24px; }
.nf-links a { color: var(--link); }
.nf-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 720px) {
  .nf { padding-top: 64px; padding-bottom: 64px; }
  .nf-title { font-size: 20px; line-height: 28px; }
}

/* =========================================================
   Privacy
   ========================================================= */
.page > main.pv { max-width: 648px; margin-left: auto; margin-right: auto; }
.pv { display: flex; flex-direction: column; gap: 48px; padding-top: 128px; padding-bottom: 96px; }
.pv-title { font-size: 24px; line-height: 32px; font-weight: 500; color: #202020; }
.pv-sec { display: flex; flex-direction: column; gap: 12px; }
.pv-sec p { font-size: 16px; line-height: 25px; color: var(--muted); }
.pv-sec b { color: var(--text); font-weight: 500; }
.pv-sec a { color: var(--link); }

@media (max-width: 720px) {
  .pv { gap: 40px; padding-top: 64px; padding-bottom: 64px; }
  .pv-title { font-size: 20px; line-height: 28px; }
}

/* employment / study years, right-aligned on the name row */
.rs-name-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.rs-year { font-style: normal; font-size: 13px; line-height: 16px; color: #767676; white-space: nowrap; }
/* in the narrow Education columns the year goes under the name instead of beside it */
.rs-grid .rs-name > .rs-year { margin-top: 4px; }
.rs-grid .rs-name { gap: 4px; }