/* Version A — Jurij's own 2007 theme, recovered from themes/jurijdobrila/style.css.
   Nothing here is a design choice of ours. Values are his:
     #000 ground, #b2b2b2 text, Trebuchet stack, #logo 262x92 at top:20 left:40,
     #left fixed 200px, 360px squares, line-height 1.5.
   Ours, and only this: a 14px type floor, 44px tap targets, and a reflow below
   760px. His original had zero media queries and no viewport meta. */

:root {
  --note: 0px;                            /* height of our archive banner; 0 on the real domain */
  --ink: #b2b2b2;
  --ink-dim: #858585;
  --ink-bright: #eee;
  --ground: #000;
  --rule: #2c2c2c;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: none; }
a:hover, a:focus-visible { color: var(--ink-bright); }
a:focus-visible { outline: 2px solid var(--ink-bright); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; background: var(--ink-bright); color: #000; padding: 12px 16px; z-index: 999; }
.skip:focus { left: 8px; top: 8px; }

/* our banner, not his — this is an archived copy and must say so */
body.has-note { --note: 36px; }
.exhibit-note {
  margin: 0;
  padding: 10px 16px;
  background: #141414;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-dim);
  font-size: 14px;
  text-align: center;
}
.exhibit-note a { color: var(--ink-bright); text-decoration: underline; }

/* #logo — his: absolute, top:20 left:40, 262x92. His was the h1 of every page; here the h1
   is the page's own subject, and the logo is the h1 only where the page is about him. */
#logo {
  position: absolute;
  top: calc(20px + var(--note));
  left: 40px;
  z-index: 1000;
  margin: 0;
  width: 262px;
  height: 92px;
}
#logo a, #logo img { display: block; width: 243px; height: 76px; }

/* #left — his: position fixed, width 200px */
#left {
  position: fixed;
  top: calc(139px + var(--note));
  left: 40px;
  width: 200px;
  z-index: 950;
}

#mainNav, .sub-menu { list-style: none; margin: 0; padding: 0; }

#mainNav > li > a,
#mainNav > li > .grp {
  display: block;
  padding: 11px 8px 11px 0;
  min-height: 44px;
  line-height: 22px;
  border-bottom: 1px solid var(--rule);   /* his menu rules */
  color: var(--ink-bright);
}
#mainNav > li > .grp { color: var(--ink); }

.sub-menu { margin: 0 0 8px 14px; }
.sub-menu a {
  display: block;
  padding: 10px 8px 10px 0;
  min-height: 44px;
  line-height: 22px;
  font-size: 15px;
  color: var(--ink-dim);
}
.sub-menu a:hover, .sub-menu a:focus-visible { color: var(--ink-bright); }

/* his: the current item white. Needs the selector weight of the rules it overrides. */
#mainNav a[aria-current="page"], .sub-menu a[aria-current="page"] { color: #fff; }

/* ours: the switch to the other language, set off from his menu, in his sub-menu grey */
#mainNav > li.lang { margin-top: 14px; }
#mainNav > li.lang > a { color: var(--ink-dim); border-bottom: 0; font-size: 15px; }

main { margin-left: 280px; padding: calc(20px + var(--note)) 24px 64px; }

/* home — #bigHead: his portrait, centred. This was his front door. */
body.home main { margin-left: 280px; display: flex; align-items: center; min-height: 78vh; }
/* centred in the window, as his was, but never under the fixed menu */
#bigHead { margin-left: max(0px, calc(50vw - 524px)); }
#bigHead img#head { max-width: 440px; width: 100%; }

.sec { font-size: 17px; font-weight: normal; color: var(--ink-bright); margin: 0 0 22px; }

.items { display: flex; flex-wrap: wrap; gap: 22px; }
.item { flex: 0 1 360px; max-width: 360px; min-width: 0; }
.item .img img {
  width: 100%; max-width: 360px;
  border: 1px solid #222;
  background: #222;
  transition: opacity .2s ease;
}
.item a:hover .img img { opacity: .82; }
.cap { display: block; padding: 8px 2px 0; font-size: 14px; color: var(--ink-dim); }
.cap .det { display: block; padding-top: 2px; color: #7a7a7a; }   /* his hover caption, shown always; 4.9:1 */
.item a:hover .cap { color: var(--ink); }

/* work page, in his order: title, functions, photo, thumbnails, caption */
.functions { margin: -10px 0 8px; font-size: 14px; color: var(--ink-dim); }
.functions a, address a, .exhibit-note a { display: inline-block; padding: 11px 0; line-height: 22px; }
/* a fixed square, so an upright photo chosen from the strip does not push the strip down */
.photo { width: 100%; max-width: 360px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.photo img { max-width: 100%; max-height: 100%; width: auto; height: auto; border: 1px solid #222; }
.thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; max-width: 362px; }
.thumbs a { display: block; width: 87px; height: 87px; border: 1px solid #222; }
.thumbs a[aria-current] { border-color: var(--ink-bright); }
.thumbs img { width: 85px; height: 85px; }
.caption { margin-top: 18px; max-width: 360px; }
.caption p { margin: 0 0 8px; white-space: pre-line; }

#infoCont { max-width: 62ch; }
#infoCont .sec { margin-top: 40px; }
#infoCont .sec:first-child { margin-top: 0; }
.bio { margin: 0; }
.bio dt { color: var(--ink-bright); margin-top: 18px; font-size: 15px; }
.bio dd { margin: 2px 0 0; }
address { font-style: normal; }
address a { color: var(--ink-bright); text-decoration: underline; }

@media (max-width: 760px) {
  #logo { position: static; margin: 20px 16px 0; width: auto; height: auto; }
  #mainNav > li.lang { margin-top: 0; }
  #left { position: static; width: auto; margin: 16px 16px 0; }
  #mainNav { display: flex; flex-wrap: wrap; gap: 0 18px; }
  #mainNav > li > a, #mainNav > li > .grp { border-bottom: 0; }
  #mainNav .has-children { width: 100%; }
  .sub-menu { display: flex; flex-wrap: wrap; gap: 0 16px; margin-left: 0; }
  main, body.home main { margin-left: 0; padding: 24px 16px 48px; min-height: 0; }
  #bigHead { margin-left: 0; }
}

/* a window too short for his fixed menu (a phone on its side, a small laptop): the menu scrolls with
   the page instead of staying put, so its last links, the language switch among them, can be reached */
@media (min-width: 761px) and (max-height: 660px) {
  #left { position: absolute; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }