/* nazarova.net
   Decisions, one line each:
   - Suisse Int'l in four cuts: Light (300) for running text and the top line, Regular (400) for interface text, Book (450) for the home strips, Medium (500) for titles.
   - Interface text is 12px on a 16px line (ratio 1.32, borrowed from the reference), running text 14px on 24px for reading comfort.
   - Near-black #111 for text, #777 for secondary text, 1px hairlines in #d9d9d9. One grey panel (#f5f5f5) on the home rows. No accent colour; hover is a shift from grey to black.
   - Home rows: full-bleed images with a thin title strip pinned top-right, kept from the previous site because it is the identity of the home page.
   - Sizes are fluid (vw, clamp), so phone, tablet, laptop and large screens keep the same proportions.
   - Motion: the top line loops, the project strips and the phone menu slide open, carousels slide. All with one curve and one duration. Nothing fades in on scroll.
*/

@font-face { font-family: 'suisse'; src: url('/assets/fonts/SuisseIntl-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'suisse'; src: url('/assets/fonts/SuisseIntl-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'suisse'; src: url('/assets/fonts/SuisseIntl-Book.woff2') format('woff2'); font-weight: 450; font-style: normal; font-display: swap; }
@font-face { font-family: 'suisse'; src: url('/assets/fonts/SuisseIntl-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --font: 'suisse', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --black: #111;
  --text: #676767;     /* running text, 5.7:1 on white */
  --muted: #767676;    /* secondary text, 4.5:1 on white */
  --rule: #e6e6e6;     /* hairlines, half a pixel on Retina screens */
  --rule-w: 1px;
  --panel: #f5f5f5;
  --ticker-h: 24px;
  --header-h: clamp(48px, 4.6vw, 66px);   /* header grows with the window; everything in it is sized from it */
  --side: clamp(16px, 6.8vw, 98px);
  --page-w: 1244px;
  --row-h: clamp(420px, 48.6vw, 820px);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: .35s;
  --ui: 12px;
  --ui-lh: 16px;
}

/* One look only, light. Hosts that apply a dark theme (preview viewers, reader modes) get the same values. */
:root { --bg: #fff; --fg: #111; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #fff; --fg: #111; color-scheme: light; } }
:root[data-theme="dark"] { --bg: #fff; --fg: #111; color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ticker-h) + 10px); background: var(--bg) !important; color: var(--fg); }

body {
  margin: 0; padding-top: var(--ticker-h);
  font-family: var(--font); font-size: 14px; line-height: 24px; font-weight: 400;
  color: var(--fg) !important; background: var(--bg) !important;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
strong, b { font-weight: 500; }

img { display: block; max-width: 100%; height: auto; }
/* photos: a tiny blurred version sits behind each image while the real one loads, then the image fades in */
img[data-lqip] { background-size: cover; background-position: center; }
img.fade { opacity: 0; transition: opacity .6s var(--ease); }
img.fade.is-loaded { opacity: 1; }
a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2 { font-weight: inherit; margin: 0; }
button { font: inherit; appearance: none; -webkit-appearance: none; border-radius: 0; }
button:focus:not(:focus-visible) { outline: none; }

:focus-visible { outline: 1px solid var(--black); outline-offset: 3px; }
.work-link:focus-visible { outline-offset: -4px; }
.work-toggle:focus-visible { outline: 1px solid var(--black); outline-offset: -4px; }

.skip-link { position: absolute; left: -999px; top: calc(var(--ticker-h) + 8px); z-index: 50; background: var(--black); color: #fff; padding: 8px 12px; font-size: var(--ui); }
.skip-link:focus { left: 8px; }

/* ---------- top line: black band, white links, looping continuously ---------- */

.ticker {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--ticker-h); overflow: hidden;
  background: #000; color: #f2f2f2; font-size: 9.5px; line-height: 1; text-transform: lowercase;
}
.ticker-track { display: flex; width: 200vw; height: var(--ticker-h); animation: loop 95s linear infinite; font-weight: 400; letter-spacing: .04em; }
.ticker-half, .ticker-set { display: flex; flex: none; width: 100vw; }
.ticker-set a { display: flex; align-items: center; justify-content: center; width: calc(100vw / 3); height: var(--ticker-h); white-space: nowrap; }
.ticker-set a:hover { color: #39ff14; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
@keyframes loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- header ---------- */

.site-header {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); padding: 0 clamp(12px, 5.5vw, 80px);
}
.site-logo { display: flex; align-items: center; height: var(--header-h); }
.site-logo img { width: auto; height: clamp(7px, 0.72vw, 10.5px); }
.header-left { display: flex; align-items: center; }
.header-right { display: flex; align-items: center; gap: 4px; order: 3; }

.lang-switch { display: flex; align-items: center; height: var(--header-h); font-size: clamp(10px, 0.85vw, 12px); line-height: var(--ui-lh); }
.lang-switch a, .lang-current { display: inline-flex; align-items: center; height: var(--header-h); padding: 0 4px; }
.lang-switch a { color: var(--muted); }
.lang-switch a:hover { color: var(--black); }
.lang-current { color: var(--black); }
.lang-sep { color: var(--muted); }

.menu-toggle { display: none; width: 44px; height: var(--header-h); padding: 0; margin-right: -10px; border: 0; background: none; color: var(--black); cursor: pointer; }
.menu-toggle svg { display: block; margin: auto; }

.site-nav { order: 2; margin-left: auto; margin-right: clamp(16px, 3.5vw, 48px); }
.site-nav ul { display: flex; gap: clamp(20px, 3vw, 40px); }
.site-nav a { position: relative; display: flex; align-items: center; height: var(--header-h); font-size: clamp(10px, 0.85vw, 12px); line-height: var(--ui-lh); text-transform: uppercase; color: var(--muted); }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--black); }
/* a hairline that draws itself from the left on hover */
.site-nav a::after, .footer-cols a:not(.footer-logo)::after, .lang-switch a::after, .pager-all::after, .plain-button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(50% - 10px); height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
.site-nav a:hover::after, .footer-cols a:not(.footer-logo):hover::after, .lang-switch a:hover::after, .pager-all:hover::after, .plain-button:hover::after { transform: scaleX(1); }
.footer-cols a, .lang-switch a, .pager-all, .plain-button { position: relative; }
.footer-cols a:not(.footer-logo)::after { bottom: 1px; }
.pager-all::after { bottom: 10px; }
.plain-button::after { bottom: -1px; }
.lang-switch a::after { bottom: calc(50% - 10px); left: 4px; right: 4px; }
.pager-all::after { bottom: 10px; }
.plain-button::after { bottom: -1px; }

@media (max-width: 900px) {
  :root { --header-h: 48px; }
  .site-logo img { height: 7.4px; }
  .site-nav a { height: auto; font-size: var(--ui); }
  .menu-toggle { display: block; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: var(--header-h); z-index: 40; margin: 0;
    background: #fff; border-bottom: var(--rule-w) solid var(--rule);
    display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease);
  }
  .site-nav > ul { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear var(--dur); }
  .site-nav.open > ul { visibility: visible; transition-delay: 0s; }
  .site-nav.open { grid-template-rows: 1fr; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li { border-top: var(--rule-w) solid var(--rule); }
  .site-nav a { display: inline-block; padding: 12px 12px; min-height: 44px; color: var(--black); }
  .site-nav a::after { left: 12px; right: 12px; bottom: 10px; }
  .site-nav a:hover, .site-nav a[aria-current] { color: var(--muted); }
}

/* ---------- home: project rows ---------- */

.work-row { position: relative; height: var(--row-h); }
.work-link { display: block; height: 100%; }
.work-link picture, .work-link img { width: 100%; height: 100%; }
.work-link img { object-fit: cover; }

/* thin strip: 12px text, + icon the same size, opens with a slide */
.work-panel { position: absolute; top: 0; right: 0; z-index: 2; width: clamp(320px, 30%, 480px); background: var(--panel); }
.work-toggle {
  display: flex; align-items: center; width: 100%; min-height: 44px;
  padding: 14px 16px 14px 18px; border: 0; background: transparent !important; box-shadow: none; outline: none; user-select: none; -webkit-tap-highlight-color: transparent;
  font-size: 13px; line-height: 18px; font-weight: 450; color: var(--black); text-align: left; cursor: pointer;
}
.work-year { margin-left: auto; padding-left: 12px; color: var(--muted); }
.work-icon { flex: none; width: 10px; height: 10px; margin-left: 14px; margin-top: -1px; transition: transform var(--dur) var(--ease); }
.work-toggle[aria-expanded="true"] .work-icon { transform: rotate(45deg); }
.work-toggle:hover .work-year { color: var(--black); }

.work-text { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.work-text > div { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear var(--dur); }
.work-text[data-open] > div { visibility: visible; transition-delay: 0s; }
.work-text[data-open] { grid-template-rows: 1fr; }
.work-text p { padding: 2px 18px 18px; font-size: 13px; line-height: 20px; font-weight: 300; color: var(--text); text-align: left; text-wrap: pretty; hyphens: none; -webkit-hyphens: none; word-spacing: normal; letter-spacing: 0; }
.work-text p a:last-child { display: inline-block; margin-top: 10px; }
.work-text a { color: var(--black); border-bottom: 1px solid var(--rule); }
.work-text a:hover { border-color: var(--black); }

@media (max-width: 767px) {
  .work-row { height: auto; display: flex; flex-direction: column; }
  .work-panel { position: static; width: auto; }
  .work-toggle { padding: 12px 12px 12px 12px; }
  /* phones: a ~45-character line is too short to justify; ragged right, no hyphens, a touch larger */
  .work-text p { padding: 2px 12px 16px; font-size: 14px; line-height: 22px; text-align: left; hyphens: none; -webkit-hyphens: none; word-spacing: normal; }
  .work-link { order: 2; height: clamp(300px, 113vw, 520px); }
  .work-link { overflow: hidden; }
  .work-link img { object-position: var(--mobile-position, center center) !important; transform: scale(var(--mobile-zoom, 1)); transform-origin: var(--mobile-origin, center center); }
}

/* ---------- content pages ---------- */

.page { width: calc(100% - 2 * var(--side)); max-width: var(--page-w); margin: 0 auto; padding: 32px 0 24px; }
.project > * + * { margin-top: 28px; }
/* back arrow above the first image of a project */
.page.project { padding-top: 10px; }
.back { display: inline-flex; align-items: center; height: 24px; margin: 0 0 0 -1px; color: #39ff14; }
.back svg { width: 15px; height: 10px; overflow: visible; }
.back:hover { color: var(--black); }
.project .back + * { margin-top: 6px; }
/* arrow row on info, contact and 404 */
.back-row { padding: 10px 0 0; }
.back-row + .page-band { padding-top: 10px; }
.back-row + .page { padding-top: 6px; }
.project .columns { margin-top: 20px; }

.project-title { font-size: 13px; line-height: 20px; color: var(--black); }
.project-title strong { font-weight: 500; }
.body-text { font-size: 14px; line-height: 24px; font-weight: 300; color: var(--text); text-align: justify; text-wrap: pretty; hyphens: none; -webkit-hyphens: none; word-spacing: -0.02em; }
.body-text p + p { margin-top: 20px; }
.body-text a, .cv-list a, .info-bio a { color: var(--black); border-bottom: 1px solid var(--rule); }
.body-text a:hover, .cv-list a:hover, .info-bio a:hover { border-color: var(--black); }
.project-title + .columns, .project-title + .body-text { margin-top: 16px; }

.columns { display: flex; gap: 20px; }
.columns .col:first-child { flex: 0 0 60.5%; padding-right: 30px; }
.columns .col:last-child { flex: 1 1 auto; min-width: 0; }
.columns .col > * + * { margin-top: 20px; }
@media (max-width: 767px) {
  .body-text, .info-bio p { text-align: left; word-spacing: normal; font-size: 14px; line-height: 22px; }
  .body-text p + p { margin-top: 16px; }
  .project-title { font-size: 14px; line-height: 21px; }
  .columns { flex-direction: column; gap: 28px; }
  .columns .col:first-child { flex: none; padding-right: 0; }
}

/* carousel: a strip of slides moved with one transform; clones at both ends make the loop continuous */
.carousel { position: relative; }
.carousel-track { display: flex; align-items: flex-start; }
.carousel-viewport { overflow: hidden; }
.slide { flex: 0 0 100%; margin: 0; min-width: 0; }
.slide img { width: 100%; }
.slide figcaption, .single-image figcaption { font-size: var(--ui); line-height: var(--ui-lh); color: var(--muted); margin-top: 6px; }
.carousel-btn {
  -webkit-tap-highlight-color: transparent;
  position: absolute; top: calc(50% - 22px); z-index: 2; width: 44px; height: 44px; padding: 0; border: 0;
  background: transparent !important; box-shadow: none; color: #fff; cursor: pointer; filter: drop-shadow(0 0 2px rgba(0,0,0,.6));
  opacity: .85; transition: opacity var(--dur) var(--ease);
}
.carousel-btn:hover { opacity: 1; }
.carousel-btn svg { display: block; margin: auto; }
.carousel-btn.prev { left: -4px; }
.carousel-btn.next { right: -4px; }
.carousel-single { margin: 0; }
.carousel.crop-16-10 .slide img { aspect-ratio: 16 / 10; height: auto; object-fit: cover; }

.video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-link { font-size: var(--ui); line-height: var(--ui-lh); color: var(--muted); margin-top: 6px; }
.video-link a { color: var(--black); border-bottom: 1px solid var(--rule); }
.video-link a:hover { border-color: var(--black); }
.video iframe, .audio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.audio { position: relative; height: 407px; }
.single-image { margin: 0; }

/* previous / next project */
.project-pager {
  width: calc(100% - 2 * var(--side)); max-width: var(--page-w); margin: 8px auto 32px;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center;
  padding-top: 14px; border-top: var(--rule-w) solid var(--rule); font-size: var(--ui); line-height: var(--ui-lh);
}
.project-pager a { display: flex; flex-direction: column; min-height: 44px; justify-content: center; }
.pager-next { text-align: right; }
.pager-all { text-transform: uppercase; color: var(--muted); }
.pager-all:hover { color: var(--black); }
.pager-label { color: var(--muted); }
.pager-title { color: var(--black); font-weight: 400; }
.project-pager a:hover .pager-title { color: var(--muted); }

/* ---------- info and contact ---------- */

.page-band { width: calc(100% - 2 * var(--side)); max-width: var(--page-w); margin: 0 auto; padding: 24px 0 10px; border-bottom: 1px solid #a6a6a6; }
.page-band h1 { font-size: var(--ui); line-height: var(--ui-lh); text-transform: uppercase; font-weight: 400; }

.info { padding: clamp(24px, 3vw, 40px) 0 40px; }
.info-bio p { font-size: 14px; line-height: 24px; font-weight: 300; color: var(--black); max-width: 1260px; text-align: justify; text-wrap: pretty; hyphens: none; -webkit-hyphens: none; word-spacing: -0.02em; }
@media (max-width: 767px) {
  .info-bio p { text-align: left; word-spacing: normal; font-size: 14px; line-height: 22px; }
}
.info-bio p + p { margin-top: 20px; }
.info-actions { margin-top: 20px; }
.plain-button { font-size: var(--ui); line-height: var(--ui-lh); color: var(--black); }

.cv-section { margin-top: clamp(32px, 4.5vw, 56px); }
.cv-section h2 { font-size: var(--ui); line-height: var(--ui-lh); font-weight: 300; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid #a6a6a6; }
.cv-list li { display: grid; grid-template-columns: 110px 1fr; gap: 0 20px; padding: 10px 0; border-bottom: var(--rule-w) solid var(--rule); font-size: 13px; line-height: 19px; font-weight: 300; }
.cv-year { color: var(--muted); }
.cv-body { display: flex; flex-direction: column; }
.cv-title { color: var(--black); font-weight: 400; }
.cv-venue { color: var(--text); }
.cv-detail { color: var(--muted); }
@media (max-width: 600px) {
  .cv-list li { grid-template-columns: 1fr; gap: 2px; }
}

.contact { padding: clamp(24px, 3vw, 40px) 0 48px; }
.contact-rows li { display: grid; grid-template-columns: 160px 1fr; gap: 0 20px; align-items: center; min-height: 44px; padding: 10px 0; border-bottom: var(--rule-w) solid var(--rule); font-size: 13px; line-height: 19px; font-weight: 300; }
.contact-rows li:first-child { border-top: 0; }
.row-label { color: var(--muted); }
.row-value { color: var(--black); }
a.row-value:hover { color: var(--muted); }
.page-empty { min-height: 40vh; }
.credits p { margin-bottom: 12px; }
.cred-label { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pub-list { margin-top: 0; }
.contact-note { margin-top: clamp(56px, 8vw, 110px); font-size: 13px; line-height: 19px; font-weight: 300; color: var(--muted); }
@media (max-width: 600px) {
  .contact-rows li { grid-template-columns: 1fr; gap: 2px; }
}

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

.site-footer { padding: 32px clamp(12px, 3.5vw, 50px) 20px; }
/* name on its own row, then two equal columns on every screen size */
.footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.footer-logo { grid-column: 1 / -1; padding: 20px 0; }
.footer-logo img { width: auto; height: clamp(7px, 0.72vw, 10.5px); }
.footer-nav li + li, .footer-contact li + li { margin-top: 6px; }
.footer-cols a { font-size: 13px; line-height: 19px; display: inline-block; padding: 3px 0; color: var(--text); width: auto; }
.footer-cols a:hover { color: var(--black); }
.footer-copy { margin-top: 24px; padding-top: 12px; border-top: var(--rule-w) solid var(--rule); font-size: var(--ui); line-height: var(--ui-lh); color: var(--muted); text-align: center; }

@media (max-width: 767px) {
  .footer-cols { gap: 16px; }
  .footer-logo { padding: 12px 0 16px; }
  .footer-logo img { height: 7.4px; }
  .footer-copy { font-size: 11px; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .work-icon, .work-text, .site-nav, a, .carousel-btn { transition: none; }
}

@media print {
  .ticker, .menu-toggle, .carousel-btn, .project-pager { display: none; }
  body { padding-top: 0; }
}
.video-block { margin: 0; }
.project .video-block { margin-top: 36px; }
@media (max-width: 1024px) { .project .video-block { margin-top: 52px; } }

/* phones: no back arrow */
@media (max-width: 767px) { .back, .back-row { display: none; } .pub-list { margin-top: 0; } }