/* Staffan Redin. Simple and calm, with room around the work (Staffan, 3 Oct 2026: more air,
   some movement, the name in bold, arrows to browse the images). */
:root {
  --side: 280px;
  --pad: clamp(16px, 2.2vw, 32px);
  --gap: clamp(16px, 1.8vw, 28px);
  --ink: #000;
  --muted: #767676;
  --paper: #fff;
  --line: 1.7;
  --fade: 700ms;
  font-size: 15px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Inter, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: var(--line);
}
a { color: inherit; text-decoration: none; transition: opacity 200ms; }
a:hover { opacity: .55; }
img, video, iframe { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-size: 1rem; font-weight: normal; margin: 0; }

/* The left column: name, menu, footer. */
.side {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--side);
  padding: var(--pad);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.side .top { display: flex; flex-direction: column; margin-bottom: 2.5em; }
.side .name { font-weight: 700; }
.toggle { display: none; }
.menu, .menu ul { list-style: none; margin: 0; padding: 0; }
.menu > li { margin-bottom: .15em; }
.menu ul { padding: .2em 0 .5em 1em; }
.menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.foot { margin: auto 0 0; padding-top: 2em; font-size: .8rem; color: var(--muted); }

main {
  margin-left: var(--side);
  padding: var(--pad) var(--pad) calc(var(--pad) * 4);
  min-height: 100vh; min-height: 100svh;
}

/* Page title row: title, section, back to the index. */
.bar {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--gap);
  margin-bottom: calc(var(--pad) * 2);
}
.bar h1 { font-weight: 700; }
.bar .meta { color: var(--muted); }

.text { max-width: 36em; margin: calc(var(--pad) * 1.5) 0; }
.text p { margin: 0 0 1.1em; }
.text a { text-decoration: underline; text-underline-offset: 3px; }
.note { color: var(--muted); max-width: 36em; }

/* Grids of works and pages. */
.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--gap) * 1.6) var(--gap);
}
.grid img, .grid .noimg { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #f3f3f3; }
.grid .noimg { display: block; }
.grid .cap { display: flex; justify-content: space-between; gap: var(--gap); padding-top: .5em; }
.grid .yr { color: var(--muted); }
.list { list-style: none; margin: 0; padding: 0; }
.list li { margin-bottom: .4em; }

/* One image at a time, arrows at the sides. */
.carousel { position: relative; margin: 0 0 calc(var(--gap) * 1.5); }
.carousel .slides { list-style: none; margin: 0; padding: 0; display: grid; }
.carousel .slide {
  grid-area: 1 / 1; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity var(--fade) ease, visibility 0s linear var(--fade);
}
.carousel .slide.on { opacity: 1; visibility: visible; transition: opacity var(--fade) ease; }
.carousel .slide a:hover { opacity: 1; }
.carousel img {
  width: 100%; height: min(78vh, 78svh); object-fit: contain; object-position: left center;
  background: var(--paper);
}
.carousel .arrow {
  position: absolute; top: 0; bottom: 2.6em; width: 22%;
  display: flex; align-items: center;
  background: none; border: 0; padding: 0 var(--pad);
  font: inherit; font-size: 1.6rem; color: var(--ink); cursor: pointer;
  opacity: 0; transition: opacity 250ms;
}
.carousel .arrow.prev { left: 0; justify-content: flex-start; }
.carousel .arrow.next { right: 0; justify-content: flex-end; }
.carousel:hover .arrow, .carousel .arrow:focus-visible { opacity: 1; }
.carousel .count { margin: .6em 0 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.carousel .cap { margin: .6em 0 0; }
.carousel .cap .yr { color: var(--muted); }
.carousel.single-slide .arrow, .carousel.single-slide .count { display: none; }
/* Before the script runs (or without it): every image, stacked. */
.no-js .carousel .slide { opacity: 1; visibility: visible; grid-area: auto; margin-bottom: var(--gap); }
.no-js .carousel .arrow, .no-js .carousel .count { display: none; }

/* The welcome page: the slideshow fills the first screen. */
.carousel.hero { margin: 0; }
.carousel.hero img {
  height: calc(100vh - var(--pad) * 2 - 2.6em);
  height: calc(100svh - var(--pad) * 2 - 2.6em);
  min-height: 260px;
  object-fit: cover; object-position: center;
}
.carousel.hero .count { display: none; }
.carousel.hero .cap { display: flex; gap: .6em; }

.single { margin: 0 0 calc(var(--gap) * 1.5); }
.single img { max-height: min(78vh, 78svh); width: auto; }
.single a:hover { opacity: 1; }

/* Films. */
.film { margin: 0 0 calc(var(--gap) * 1.5); }
.film video { width: 100%; background: #000; }
.ratio { position: relative; aspect-ratio: 16 / 9; background: #000; }
.ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Images fade in as they arrive. */
.js .fade { opacity: 0; transform: translateY(8px); transition: opacity 900ms ease, transform 900ms ease; }
.js .fade.in { opacity: 1; transform: none; }

/* Full-screen viewer, arrows at the sides. */
.viewer {
  position: fixed; inset: 0; z-index: 10;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--pad) * 2.5) calc(var(--pad) * 3);
  animation: viewer-in 250ms ease;
}
@keyframes viewer-in { from { opacity: 0; } to { opacity: 1; } }
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer button { position: absolute; background: none; border: 0; padding: var(--pad); font: inherit; color: inherit; cursor: pointer; }
.viewer .close { top: 0; right: 0; }
.viewer .prev, .viewer .next { top: 50%; transform: translateY(-50%); font-size: 1.6rem; }
.viewer .prev { left: 0; }
.viewer .next { right: 0; }

@media (prefers-reduced-motion: reduce) {
  :root { --fade: 0ms; }
  .js .fade { opacity: 1; transform: none; transition: none; }
  .viewer { animation: none; }
}

/* Phones and narrow tablets: a title bar with "Menu", one column. */
@media (max-width: 767px) {
  .side { position: static; width: auto; bottom: auto; overflow: visible; }
  .side .top { display: grid; grid-template-columns: 1fr auto; margin: 0; }
  .side .tag { grid-column: 1; }
  .toggle {
    display: block; grid-column: 2; grid-row: 1;
    background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
  }
  #nav { display: none; padding-top: 2em; }
  .side.open #nav { display: block; }
  .foot { display: none; }
  main { margin-left: 0; padding-top: 0; }
  .bar { grid-template-columns: 1fr auto; }
  .bar .meta { display: none; }
  .grid { grid-template-columns: 1fr; }
  .carousel .arrow { opacity: 1; width: 30%; }
  .carousel img { height: auto; max-height: 70svh; }
  .carousel.hero img { height: calc(100vh - 7.5em); height: calc(100svh - 7.5em); }
}