/* Tigran Hovhannisyan - site styles
   Layout: darkroom contact sheet. Prints lie on a dark table, every caption is set like
   the edge print on a sheet of film. Photographs carry all colour; the interface stays achromatic. */

@font-face { font-family: "Geist"; src: url("fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; src: url("fonts/geist-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; src: url("fonts/geist-cyrillic-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Courier Prime"; src: url("fonts/courier-prime-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/courier-prime-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  color-scheme: dark;
  /* colour: dark is the house look (darkroom) */
  --table: #0d0d0c;            /* page ground */
  --sheet: #171716;            /* placeholders, raised surfaces */
  --print: #ebeae5;            /* primary text, focus, active states */
  --ash: #8f8e88;              /* secondary text */
  --seam: rgb(235 234 229 / 0.13);   /* 1px structural lines */
  --veil: rgb(13 13 12 / 0.78);      /* header and viewer backdrop */
  /* type */
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Courier Prime", "Courier New", ui-monospace, Menlo, Consolas, monospace;
  --t-edge: 11.5px;            /* film-edge captions */
  --t-ui: 13px;
  --t-body: 15.5px;
  --t-lead: clamp(19px, 1.6vw, 23px);
  --t-quote: clamp(28px, 3.9vw, 58px);
  --t-title: clamp(44px, 8.4vw, 132px);
  /* space + motion */
  --gutter: clamp(16px, 2.8vw, 44px);
  --header-h: 64px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* house look is dark; light mode only by choice */
:root[data-theme="light"] {
  color-scheme: light;
  --table: #f0f0ed; --sheet: #e2e2de; --print: #141413; --ash: #5d5c57;
  --seam: rgb(20 20 19 / 0.14); --veil: rgb(240 240 237 / 0.82);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --table: #0d0d0c; --sheet: #171716; --print: #ebeae5; --ash: #8f8e88;
  --seam: rgb(235 234 229 / 0.13); --veil: rgb(13 13 12 / 0.78);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  padding-inline: var(--gutter);
  padding-block: 0;
  background: var(--table);
  color: var(--print);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--print); color: var(--table); }
:focus-visible { outline: 1px solid var(--print); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: var(--gutter); top: -60px; z-index: 50; padding: 8px 12px; background: var(--print); color: var(--table); font-size: var(--t-ui); }
.skip-link:focus { top: 12px; }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  background: var(--veil);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .5s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--seam); }
.wordmark { font-weight: 500; font-size: 15px; letter-spacing: -0.012em; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); font-size: var(--t-ui); }
.nav a { color: var(--ash); transition: color .2s var(--ease); white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--print); }
.mode { display: inline-flex; align-items: center; gap: 2px; font-family: var(--mono); font-size: 12px; color: var(--ash); }
.mode button { padding: 4px 6px; color: var(--ash); transition: color .2s var(--ease); }
.mode button[aria-pressed="true"] { color: var(--print); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mode button:hover { color: var(--print); }
.menu-toggle { display: none; font-size: var(--t-ui); }

.page-top { height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }

/* mobile menu */
.menu-panel {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 28px);
  background: var(--table);
}
.menu-panel-head { display: flex; justify-content: space-between; align-items: center; }
.menu-panel nav { display: grid; gap: 6px; }
.menu-panel nav a { font-size: clamp(40px, 12vw, 64px); font-weight: 300; letter-spacing: -0.04em; line-height: 1.05; }
.menu-panel .mode { font-size: 13px; }

@media (max-width: 760px) {
  .nav { display: none; }
  .menu-toggle { display: inline-block; }
}

/* ---------- hero: one print at a time, developing in the tray ---------- */
.hero { padding-top: 8px; }
.hero-stage {
  position: relative;
  height: min(clamp(380px, calc(100svh - var(--header-h) - 132px), 980px), calc((100vw - 2 * var(--gutter)) * 1.34));
  overflow: hidden;
}
.hero-frame {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity 1s var(--ease), visibility 0s linear 1s;
}
.hero-frame.is-active { opacity: 1; visibility: visible; transition: opacity 1s var(--ease), visibility 0s; }
.hero-frame a { display: contents; }
.hero-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: contain;
}
.hero-frame.is-active img { animation: develop 2.2s var(--ease) both; }
@keyframes develop {
  from { filter: brightness(1.55) contrast(0.42) saturate(0.6); }
  to   { filter: none; }
}
.hero-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 24px;
  padding-block: 18px 6px;
}
.hero-caption { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-width: 0; }
.hero-caption a { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.hero-caption a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.edge { font-family: var(--mono); font-size: var(--t-edge); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ash); }
.hero-line { margin: 4px 0 0; color: var(--ash); font-size: var(--t-ui); grid-column: 1 / -1; }
.hero-controls { display: flex; align-items: center; gap: 4px; }
.hero-controls button { font-family: var(--mono); font-size: 12px; color: var(--ash); padding: 6px 8px; transition: color .2s var(--ease); }
.hero-controls button:hover { color: var(--print); }
.hero-count { font-family: var(--mono); font-size: 12px; color: var(--ash); font-variant-numeric: tabular-nums; min-width: 6ch; text-align: center; }
.hero-progress { height: 1px; background: var(--seam); overflow: hidden; }
.hero-progress span { display: block; height: 100%; background: var(--print); transform-origin: left; transform: scaleX(0); }
.hero-progress span.is-running { animation: progress var(--slide-ms, 6000ms) linear forwards; }
.hero.is-paused .hero-progress span { animation-play-state: paused; }
@keyframes progress { to { transform: scaleX(1); } }

/* ---------- section titles ---------- */
.section { padding-block: clamp(72px, 10vw, 150px) 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(20px, 2.6vw, 36px); }
.section-title { margin: 0; font-size: clamp(26px, 2.6vw, 38px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }

/* ---------- intro ---------- */
.intro { padding-block: clamp(64px, 9vw, 140px) 0; }
.intro p { margin: 0; max-width: 34ch; font-size: clamp(24px, 2.7vw, 40px); font-weight: 300; letter-spacing: -0.03em; line-height: 1.2; text-wrap: pretty; }
.press-head { align-items: end; }
.press-line { margin: 0; max-width: 46ch; color: var(--ash); font-size: var(--t-ui); }

/* ---------- contact sheet ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--t-ui); }
.filters button { color: var(--ash); padding: 4px 0; transition: color .2s var(--ease); }
.filters button:hover { color: var(--print); }
.filters button[aria-pressed="true"] { color: var(--print); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.filters .n { font-family: var(--mono); font-size: 11px; margin-left: 3px; color: var(--ash); }

.sheet {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  padding: 1px;
}
@media (max-width: 520px) { .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.frame { background: var(--table); outline: 1px solid var(--seam); transition: background-color .5s var(--ease); min-width: 0; }
.frame[hidden] { display: none !important; }
.frame a { display: flex; flex-direction: column; gap: 9px; padding: clamp(8px, 0.9vw, 12px) clamp(8px, 0.9vw, 12px) 10px; height: 100%; }
.frame-img { position: relative; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; background: var(--sheet) var(--lqip) center / cover no-repeat; }
.frame-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .5s var(--ease), opacity .6s var(--ease); }
.frame a:hover .frame-img img, .frame a:focus-visible .frame-img img { transform: scale(1.025); filter: brightness(0.84); }
.frame-edge { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0; min-width: 0; }
.frame-edge .t { min-width: 0; color: var(--print); overflow-wrap: anywhere; }
.frame-edge .y { flex: none; }
.frame a:hover .frame-edge .t { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sheet-empty { margin: 24px 0 0; color: var(--ash); }

/* ---------- publications: covers on a shelf ---------- */
.shelf { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--seam) transparent; padding-bottom: 14px; }
.covers { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(150px, 17vw, 236px); gap: clamp(14px, 1.8vw, 26px); }
.covers li { scroll-snap-align: start; min-width: 0; }
.covers a { display: grid; gap: 10px; }
.cover-img { aspect-ratio: 3 / 4; max-width: 100%; overflow: hidden; background: var(--sheet) var(--lqip) center / cover no-repeat; box-shadow: 0 0 0 1px var(--seam); }
.cover-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.covers a:hover .cover-img img { transform: scale(1.03); }
.cover-name { margin: 0; display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-ui); }
.cover-name span:last-child { font-family: var(--mono); font-size: var(--t-edge); color: var(--ash); letter-spacing: 0.04em; }

/* ---------- statement ---------- */
.statement { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: end; }
.statement blockquote { margin: 0; }
.statement blockquote p { margin: 0; font-size: var(--t-quote); font-weight: 300; letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; }
.statement-body { display: grid; gap: 22px; max-width: 60ch; margin-top: clamp(24px, 3vw, 40px); }
.statement-body p { margin: 0; color: var(--ash); }
.statement-portrait { margin: 0; justify-self: end; width: min(100%, 380px); }
.statement-portrait .ph { aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; background: var(--sheet) var(--lqip) center / cover no-repeat; }
.statement-portrait img { width: 100%; height: 100%; object-fit: cover; }
.statement-portrait figcaption { margin-top: 10px; }
@media (max-width: 760px) { .statement { grid-template-columns: 1fr; } .statement-portrait { justify-self: start; width: min(78%, 320px); } }

.text-link { justify-self: start; display: inline-flex; gap: 10px; align-items: baseline; font-size: var(--t-ui); padding-bottom: 3px; border-bottom: 1px solid var(--print); transition: gap .3s var(--ease); }
.text-link:hover { gap: 16px; }

/* ---------- footer / contact ---------- */
.site-footer { margin-top: clamp(96px, 13vw, 200px); padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--seam); }
.contact { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px clamp(28px, 5vw, 96px); padding-block: clamp(28px, 4vw, 56px) clamp(48px, 7vw, 110px); }
.contact h2 { margin: 0; font-size: clamp(34px, 5.4vw, 84px); font-weight: 300; letter-spacing: -0.045em; line-height: 1; text-wrap: balance; }
.contact dl { margin: 0; display: grid; gap: 18px; align-content: end; }
.contact dl div { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 12px; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--seam); }
.contact dt { font-family: var(--mono); font-size: var(--t-edge); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ash); }
.contact dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; min-width: 0; font-size: 17px; }
.contact dd a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.copy-btn { font-family: var(--mono); font-size: var(--t-edge); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ash); }
.copy-btn:hover { color: var(--print); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; color: var(--ash); font-size: 12.5px; }
.footer-base nav { display: flex; gap: 20px; }
.footer-base a:hover { color: var(--print); }
@media (max-width: 760px) { .contact { grid-template-columns: 1fr; } .contact dl div { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- story page ---------- */
.story-head { padding-block: clamp(36px, 6vw, 96px) clamp(36px, 5vw, 80px); display: grid; gap: clamp(18px, 2vw, 28px); }
.story-kicker { margin: 0; }
.story-kicker a:hover { color: var(--print); }
.story-title { margin: 0; font-size: var(--t-title); font-weight: 200; letter-spacing: -0.055em; line-height: 0.92; text-wrap: balance; overflow-wrap: anywhere; }
.story-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 14px clamp(28px, 4vw, 64px); }
.story-meta div { display: grid; gap: 4px; min-width: 0; }
.story-meta dt { font-family: var(--mono); font-size: var(--t-edge); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ash); }
.story-meta dd { margin: 0; font-size: var(--t-ui); }
.story-note { margin: 0; max-width: 62ch; color: var(--ash); white-space: pre-line; font-size: 14px; }

.sequence { display: grid; gap: clamp(56px, 9vw, 150px); }
.seq-row { margin: 0; display: grid; gap: clamp(10px, 1.4vw, 22px); }
.seq-wide { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.seq-pair { grid-template-columns: var(--cols); align-items: end; width: 100%; max-width: calc((100svh - var(--header-h) - 64px) * var(--sum) + clamp(10px, 1.4vw, 22px)); margin-inline: auto; }
.seq-single { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.seq-single .shot { grid-column: var(--span, 2 / span 7); justify-self: start; }
.shot { position: relative; display: block; width: 100%; padding: 0; cursor: zoom-in; background: var(--sheet) var(--lqip) center / cover no-repeat; max-width: 100%; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: opacity .6s var(--ease); }
.seq-wide .shot { width: auto; max-width: 100%; max-height: calc(100svh - var(--header-h) - 64px); aspect-ratio: var(--ar); height: min(calc(100svh - var(--header-h) - 64px), calc((100vw - 2 * var(--gutter)) / var(--ar))); }
.seq-single .shot { max-height: calc(100svh - var(--header-h) - 64px); aspect-ratio: var(--ar); width: min(100%, calc((100svh - var(--header-h) - 64px) * var(--ar))); }
.seq-single.is-right .shot { justify-self: end; }
.seq-pair .shot { aspect-ratio: var(--ar); }
.shot-cap { margin-top: 10px; }
@media (max-width: 760px) {
  .seq-pair { grid-template-columns: 1fr; max-width: none; }
  .seq-single .shot { grid-column: 1 / -1; width: 100%; }
  .seq-wide .shot { height: auto; width: 100%; }
}

.story-next { margin-top: clamp(96px, 12vw, 180px); border-top: 1px solid var(--seam); padding-top: 26px; }
.story-next a { display: grid; grid-template-columns: minmax(0, 1fr) clamp(120px, 18vw, 260px); gap: 24px; align-items: end; }
.story-next .label { display: block; margin-bottom: 8px; }
.story-next strong { display: block; font-size: clamp(34px, 6.2vw, 96px); font-weight: 200; letter-spacing: -0.05em; line-height: 0.95; overflow-wrap: anywhere; transition: letter-spacing .6s var(--ease); }
.story-next a:hover strong { letter-spacing: -0.035em; }
.story-next .ph { aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; background: var(--sheet) var(--lqip) center / cover no-repeat; }
.story-next .ph img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- about ---------- */
.about-head { padding-block: clamp(36px, 6vw, 96px) clamp(28px, 4vw, 64px); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.about-portrait { margin: 0; position: sticky; top: calc(var(--header-h) + 24px); }
.about-portrait .ph { aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; background: var(--sheet) var(--lqip) center / cover no-repeat; }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-portrait figcaption { margin-top: 10px; }
.chapters { display: grid; gap: clamp(48px, 6vw, 88px); }
.chapter h2 { margin: 0 0 18px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.chapter p { margin: 0 0 1em; max-width: 62ch; }
.chapter p.lead { font-size: var(--t-lead); line-height: 1.5; letter-spacing: -0.01em; }
.screenplay { font-family: var(--mono); font-size: 15px; line-height: 1.75; color: var(--ash); max-width: 58ch; }
.press-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 0 28px; }
.press-list li { display: flex; justify-content: space-between; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--seam); font-size: 14px; min-width: 0; }
.press-list li span:last-child { font-family: var(--mono); font-size: var(--t-edge); color: var(--ash); }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } .about-portrait { position: static; width: min(100%, 420px); } }

/* ---------- story extras ---------- */
.story-sub { margin: -4px 0 0; font-size: var(--t-lead); font-weight: 300; letter-spacing: -0.01em; color: var(--ash); }
.story-quote { margin: 6px 0 0; max-width: 64ch; display: grid; gap: 10px; }
.story-quote p { margin: 0; font-family: var(--mono); font-size: 15px; line-height: 1.75; }
.in-print { margin-top: clamp(96px, 12vw, 180px); display: grid; gap: clamp(28px, 4vw, 56px); padding-top: 26px; border-top: 1px solid var(--seam); }
.viewer-nav { display: flex; gap: 4px; }
.shot:focus-visible { outline-offset: 6px; }

/* ---------- legal ---------- */
.legal-body { max-width: 72ch; padding-bottom: 24px; }
.legal-body h2 { margin: 36px 0 8px; font-size: 19px; font-weight: 500; letter-spacing: -0.015em; }
.legal-body h2.big { margin-top: 72px; font-size: clamp(30px, 3.4vw, 46px); font-weight: 300; letter-spacing: -0.035em; }
.legal-body p, .legal-body li { margin: 0 0 10px; }
.legal-body ul { padding-left: 1.1em; margin: 0 0 10px; }
.legal-flag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ash); border: 1px solid var(--seam); padding: 10px 12px; margin: 0 0 8px; }

/* ---------- viewer (lightbox) ---------- */
.viewer { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--table); padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 12px); }
.viewer-top, .viewer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; }
.viewer-stage { position: relative; display: grid; place-items: center; min-height: 0; touch-action: pan-y; }
.viewer-stage img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; user-select: none; -webkit-user-drag: none; transition: opacity .35s var(--ease); }
.viewer-stage img.is-swapping { opacity: 0; }
.viewer button { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ash); padding: 10px 6px; min-width: 44px; min-height: 44px; transition: color .2s var(--ease); }
.viewer button:hover { color: var(--print); }
.viewer .hit { position: absolute; top: 0; bottom: 0; width: 34%; min-width: 0; padding: 0; cursor: w-resize; }
.viewer .hit.prev { left: 0; } .viewer .hit.next { right: 0; cursor: e-resize; }
.viewer-count { font-variant-numeric: tabular-nums; }
.viewer-exif { color: var(--ash); text-transform: none; letter-spacing: 0.02em; }
html.is-locked, html.is-locked body { overflow: hidden; }

/* ---------- image loading (only once JS is present, so the page is complete without it) ---------- */
.js .fade img { opacity: 0; }
.js .fade img.is-loaded { opacity: 1; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .hero-frame.is-active img { animation: none; }
}