/* eliparesky.com
   Inter only. Text #1a1a1a on #fafafa. One accent (links and hover only).
   Motion: rolling hero, section fade-up, tile lift. When in doubt, remove. */

/* Inter (from Google Fonts, latin subset), self-hosted so nothing blocks first paint.
   One variable file covers both weights: 400 and 700. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
}

:root {
  --text: #1a1a1a;
  --bg: #fafafa;
  --gray: #5f5f5f;
  --accent: #1a4fd6;
  --placeholder: #e8e8e6;
  --fill-in: #f0f0ee;
  --radius: 2px;
  --gap: 12px;
  --pad: 20px;
  --max: 1100px;
  --content: min(var(--max), calc(100vw - 2 * var(--pad)));
  /* The one image treatment, decided once. Applies to every photo on the site. */
  --img-filter: saturate(0.9);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); filter: var(--img-filter); }

/* Skeleton loading: every photo reserves its exact shape (from its width/height) and shows a soft gray
   box with a slow shimmer until the file arrives, then fades in. Logos and the fly drawing are transparent, so they skip it. */
img:not(.logo):not(.art) { background-color: var(--placeholder); }
img.is-loaded { background: none; }
@media (prefers-reduced-motion: no-preference) {
  .js img:not(.logo):not(.art):not(.is-loaded) {
    background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    background-size: 200% 100%; background-repeat: no-repeat;
    animation: shimmer 1.4s ease-in-out infinite;
  }
  .js img.fade.is-loaded { animation: img-in 450ms ease both; }
}
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes img-in { from { opacity: 0; } to { opacity: 1; } }

h1, h2, h3 { font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
p { margin: 0 0 1em; max-width: 65ch; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

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

.wrap { width: var(--content); margin-inline: auto; }

.caption, .meta { color: var(--gray); font-size: 15px; line-height: 1.4; }

.skip {
  position: absolute; left: var(--pad); top: -100px;
  background: var(--bg); padding: 8px 12px; z-index: 20;
}
.skip:focus { top: 8px; }

/* Nav: a floating glass pill, centered. The bar itself is see-through so the page shows behind the glass. */
.nav { position: sticky; top: 0; z-index: 10; padding: 10px 0; pointer-events: none; }
.nav .wrap { display: flex; justify-content: center; }
.nav ul {
  pointer-events: auto; display: flex; gap: 2px; list-style: none; padding: 5px;
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
  border-radius: 999px;
  background: rgba(250, 250, 250, 0.68);
  -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.9) inset, 0 8px 28px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.nav ul::-webkit-scrollbar { display: none; }
.nav a {
  display: block; padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  color: var(--text); text-decoration: none; font-size: 15px; line-height: 1.3;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
/* The bubble: a brighter lens of glass under the cursor */
.nav a:hover, .nav a:focus-visible {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.nav a[aria-current="page"] { font-weight: 700; background: rgba(26, 26, 26, 0.07); }
.nav a[aria-current="page"]:hover { background: rgba(255, 255, 255, 0.92); }
@media (max-width: 520px) {
  .nav .wrap { width: calc(100vw - 16px); } /* the pill may run closer to the screen edge than page content */
  .nav ul { gap: 0; padding: 4px; }
  .nav a { padding: 8px 5px; font-size: 13px; letter-spacing: -0.01em; }
}
@media (max-width: 380px) { .nav a { padding: 8px 3px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .nav a { transition: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav ul { background: rgba(250, 250, 250, 0.96); } }

.page-head { padding: 56px 0 8px; }
.page-head h1 { font-size: clamp(40px, 7vw, 64px); letter-spacing: -0.03em; }
.page-head .meta { margin-top: 14px; }

/* Home hero: two rows of images rolling right to left, name plaque in front.
   Rows are full-bleed. main.js clones each .set so the loop is seamless;
   without JS (or with reduced motion) the rows sit still and scroll by hand. */
.hero {
  --row: clamp(180px, 20vw, 280px); --hero-pad: 32px;
  position: relative; padding: var(--hero-pad) 0 0; margin-bottom: 96px;
}
.marquee {
  max-width: 2000px; margin-inline: auto;
  overflow-x: auto; overflow-y: hidden;
  display: grid; gap: var(--gap);
}
.js .marquee.rolling { overflow: hidden; }
.track { display: flex; width: max-content; padding-top: 4px; }
.set { display: flex; gap: var(--gap); padding-right: var(--gap); }

.rolling .track { animation: roll 55s linear infinite; }
.rolling .track + .track { animation-duration: 68s; }
.rolling:has(:focus-visible) .track,
.hero.paused .track { animation-play-state: paused; }
@keyframes roll { to { transform: translateX(-50%); } }

.tile {
  position: relative; display: block; overflow: hidden; flex: none;
  height: var(--row); aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  color: var(--text); text-decoration: none;
}
.tile.wide   { aspect-ratio: 16 / 9; }
.tile.square { aspect-ratio: 1; }
.tile.tall   { aspect-ratio: 4 / 5; }
.tile img, .tile .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Every tile carries a small tag, always visible */
.tile-label {
  position: absolute; left: 0; bottom: 0; max-width: 100%;
  background: var(--bg); color: var(--gray);
  padding: 6px 10px 5px; font-size: 13px; line-height: 1.35;
  border-top-right-radius: var(--radius);
}

/* Clickable tiles lift 2px on hover */
a.tile { transition: transform 150ms ease; }
a.tile:hover, a.tile:focus-visible { transform: translateY(-2px); }
a.tile:hover .tile-label, a.tile:focus-visible .tile-label { color: var(--accent); }

/* Name plaque: solid block so the name reads over anything rolling behind it */
.plaque {
  position: absolute; z-index: 2;
  left: max(var(--pad), calc((100vw - var(--max)) / 2));
  /* centered on the seam between the two rows */
  top: calc(var(--hero-pad) + 4px + var(--row) + var(--gap) / 2);
  transform: translateY(-50%);
  background: var(--bg); border-radius: var(--radius);
  padding: clamp(16px, 2.4vw, 28px) clamp(18px, 3vw, 36px);
  max-width: calc(100vw - 2 * var(--pad));
}
.plaque h1 { font-size: clamp(34px, 6vw, 72px); letter-spacing: -0.04em; line-height: 1; }
.plaque p { font-size: clamp(15px, 1.6vw, 19px); line-height: 1.4; margin: 10px 0 0; }

.marquee-toggle {
  display: none; margin: 10px 0 0 auto;
  background: none; border: 0; padding: 8px 0; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--gray);
}
.marquee-toggle:hover { color: var(--accent); }
.js .rolling ~ .wrap .marquee-toggle { display: block; }

@media (min-width: 900px) {
  :root { --pad: 32px; }
  .page-head { padding: 88px 0 16px; }
  .hero { --hero-pad: 48px; margin-bottom: 140px; }
}

/* Missing-asset placeholder: solid block with the asset name */
.ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--placeholder); color: var(--text);
  border-radius: var(--radius);
  font-size: 13px; line-height: 1.3; text-align: center; padding: 12px;
  overflow-wrap: anywhere;
}
figure { margin: 0; }
figure .ph, figure img { width: 100%; object-fit: cover; }
/* Case-study visuals crop to 16:9 unless marked .natural. Photos elsewhere keep the shape from their
   width/height attributes, which also reserves their space so lazy loading works. */
figure .ph, :where(.case figure:not(.narrow)) img:where(:not(.natural)) { aspect-ratio: 16 / 9; }
figcaption { margin-top: 8px; }
figure.narrow img { max-width: 420px; }
.pair.square img { aspect-ratio: 1; }
.pair { display: grid; gap: var(--gap); grid-template-columns: 1fr 1fr; }
.pair .ph, .pair img { aspect-ratio: 3 / 4; }

/* Crop wrapper the editor adds around a photo when it is zoomed inside its box */
.crop { display: block; position: relative; overflow: hidden; border-radius: var(--radius); }
.crop > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile .crop { position: absolute; inset: 0; }

/* Fill-in slot: impossible to miss. grep "[ELI:" */
.fill-in {
  border: 1px dashed var(--text);
  background: var(--fill-in);
  padding: 16px 18px; margin: 0 0 1em; max-width: 65ch;
  font-size: 16px; border-radius: var(--radius);
}
.fill-in .slot-title { display: block; font-weight: 700; margin-bottom: 4px; }

/* Work */
.case {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap);
  padding: 56px 0;
}
.case > * { grid-column: 1 / -1; }
.case h2 { font-size: clamp(30px, 4.5vw, 44px); }
.case .meta { margin-top: 10px; margin-bottom: 28px; }
.case h3 {
  font-size: 15px; font-weight: 400; color: var(--gray);
  letter-spacing: 0; margin-bottom: 4px;
}
.case figure { margin: 20px 0 28px; }

/* Work entries: images on top, one short description under them */
.mosaic { display: grid; gap: var(--gap); margin-bottom: 24px; }
.mosaic > * { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.mosaic.one > * { aspect-ratio: 16 / 9; height: auto; }
.mosaic.two { grid-template-columns: 1fr 1fr; }
.mosaic.two > * { aspect-ratio: 4 / 5; height: auto; }
.mosaic.three { grid-template-columns: 5fr 4fr; grid-template-rows: 2fr 3fr; aspect-ratio: 16 / 11; }
.mosaic.three > :nth-child(1) { grid-area: 1 / 1; }
.mosaic.three > :nth-child(2) { grid-area: 2 / 1; }
.mosaic.three > :nth-child(3) { grid-area: 1 / 2 / 3 / 3; }
.mosaic .pos-top { object-position: top; }
.mosaic .pos-left { object-position: left; }
.mosaic .pos-model { object-position: 5% center; }
/* A screenshot shown whole: the box is filled with the screenshot's own navy, so it reads as one image edge to edge.
   (Written to beat the gray skeleton background, and to stay after the image has loaded.) */
.mosaic img.fit, .mosaic img.fit.is-loaded, .js .mosaic img.fit:not(.is-loaded) {
  object-fit: contain; background: #00051c; animation: none; border-radius: var(--radius);
}
.js .mosaic img.fit.fade.is-loaded { animation: img-in 450ms ease both; }
.desc { margin: 0; }
.desc strong { font-weight: 700; }
.metric { font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 28px 0 0; max-width: 24ch; }
.case-body > .block { margin-bottom: 20px; }

@media (min-width: 900px) {
  .case { padding: 88px 0; }
  .case-head { grid-column: 1 / 5; }
  .case-body { grid-column: 5 / 13; }
  .case .meta { margin-bottom: 0; }
}

/* Research: small fly beside the page title, turned on its side.
   Negative block margins keep it from adding any height, so the header sits exactly where it would without it. */
.page-head.with-art { display: flex; align-items: center; gap: 28px; }
.page-head .art { width: 64px; height: auto; margin-block: -40px; transform: rotate(90deg); filter: none; border-radius: 0; }
@media (min-width: 768px) {
  .page-head.with-art { gap: 48px; }
  .page-head .art { width: 96px; margin-block: -60px; }
}

/* Research: the organization's logo stands in for the entry title; one small line sits under it */
.case-head .logo-title { margin: 0; line-height: 0; }
.case-head .logo { display: block; height: auto; max-width: 100%; filter: none; border-radius: 0; }
.case-head .logo-title + .meta { margin-top: 16px; font-size: 17px; color: var(--text); }

/* Research: the publication leads, full width */
.pub { padding: 40px 0 72px; }
.pub h2 { font-size: clamp(24px, 3.2vw, 34px); line-height: 1.2; letter-spacing: -0.015em; max-width: 26em; margin: 10px 0 14px; }
.pub h2 i { font-weight: 700; }
.pub .meta { max-width: 75ch; }
.pub .meta strong { color: var(--text); font-weight: 700; }
.pub p { margin-top: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn {
  display: inline-block; padding: 11px 22px; border-radius: 999px;
  background: var(--text); color: var(--bg); border: 1px solid var(--text);
  text-decoration: none; font-size: 15px; line-height: 1.2;
}
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn.quiet { background: none; color: var(--text); }
.btn.quiet:hover { background: none; color: var(--accent); border-color: var(--accent); }

/* Text-only diagrams for Veev and LenX. Nothing internal, ever. */
.flow { list-style: none; display: grid; gap: 20px; counter-reset: step; }
.flow li { counter-increment: step; font-weight: 700; line-height: 1.3; }
.flow li::before { content: "0" counter(step); display: block; font-weight: 400; color: var(--gray); font-size: 15px; margin-bottom: 4px; }
.flow li span { display: block; font-weight: 400; color: var(--gray); font-size: 15px; margin-top: 4px; }
@media (min-width: 640px) {
  .flow { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 28px; }
}

/* About */
.prose { padding: 40px 0 56px; }
.about-intro .headshot { width: 160px; height: auto; aspect-ratio: 1; object-fit: cover; margin-bottom: 24px; }
@media (min-width: 768px) {
  .about-intro { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start; }
  .about-intro .headshot { width: 280px; margin: 0; }
}
.strip { display: grid; grid-template-columns: 1fr 1fr; gap: 20px var(--gap); padding-bottom: 96px; }
.strip .ph, .strip img { aspect-ratio: 4 / 5; }
@media (min-width: 768px) { .strip { grid-template-columns: repeat(4, 1fr); } }

/* Photography: set buttons beside the title */
.page-head.with-nav { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; padding-bottom: 32px; }
.set-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.set-nav a {
  display: inline-block; padding: 10px 20px; min-width: 96px; text-align: center;
  border: 1px solid var(--text); border-radius: 4px;
  color: var(--text); text-decoration: none; font-size: 15px; line-height: 1.2;
}
.set-nav a:hover { border-color: var(--accent); color: var(--accent); }
.set-nav a[aria-current="true"] { background: var(--text); color: var(--bg); }
.set-nav a[aria-current="true"]:hover { border-color: var(--text); color: var(--bg); }

/* Photography: photos keep their own proportions, in columns */
.photo-set { padding-bottom: 96px; }
.photo-set h2 { font-size: clamp(30px, 4.5vw, 44px); margin-bottom: 28px; }
.gallery { columns: 1; column-gap: var(--gap); }
.gallery figure { break-inside: avoid; margin-bottom: var(--gap); }
.gallery a { display: block; cursor: zoom-in; }
@media (min-width: 640px) { .gallery { columns: 2; } }
@media (min-width: 1000px) { .gallery { columns: 3; } .gallery.big { columns: 2; } }

/* Photography lightbox */
.lb { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(17, 17, 17, 0.96); }
.lb[hidden] { display: none; }
.lb img { max-width: calc(100vw - 32px); max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); width: auto; height: auto; object-fit: contain; filter: none; cursor: default; }
.lb button, .lb-bar, .lb-bar a { color: #fafafa; font: inherit; font-size: 15px; }
.lb button { position: absolute; background: none; border: 0; padding: 16px 20px; cursor: pointer; }
.lb button:hover, .lb-bar a:hover { color: #9db8ff; }
.lb :focus-visible { outline-color: #fafafa; }
.lb-close { top: 4px; right: 4px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font-size: 22px; }
.lb-prev { left: 0; } .lb-next { right: 0; }
.lb-bar { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; max-width: none; display: flex; justify-content: center; gap: 24px; }
@media (prefers-reduced-motion: no-preference) { .lb:not([hidden]) { animation: img-in 160ms ease both; } }

/* Now */
.now-list { list-style: none; padding: 40px 0 96px; display: grid; gap: 16px; }
.now-list .fill-in { margin: 0; }

/* Footer */
.footer { padding: 72px 0 56px; font-size: 16px; }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.footer a { display: inline-block; padding: 6px 0; }

/* Sections fade up once. Only when JS is on and motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 600ms ease; }
  .js .reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  a.tile { transition: none; }
  .track { animation: none !important; }
  a.tile:hover, a.tile:focus-visible { transform: none; }
}

/* Written by the local editor (_editor/). Text size and nudges are kept separately
   for desktop and phone so a change on one never breaks the other. */
@media (min-width: 900px) {
  [data-fs-d] { font-size: var(--fs-d) !important; }
  [data-mv-d] { translate: var(--dx, 0) var(--dy, 0); }
}
@media (max-width: 899px) {
  [data-fs-m] { font-size: var(--fs-m) !important; }
  [data-mv-m] { translate: var(--mx, 0) var(--my, 0); }
}