:root {
  --bg: #000;
  --fg: #fff;
  --muted: #a8a8a8;
  --line: 1px solid #fff;
  --gutter: 34px;
  --header-h: 72px;
  --arrow-blue: #0d4f73;   /* Antwerp blue */
  --arrow-lemon: #fbf6bd;  /* pale lemon */
  --arrow-size: 48px;
  --arrow-space: 34px;     /* added to the gutter so media clears the arrows */
  --caption-h: 0px;       /* space reserved under the media */
  --arrow-inset: -22px;    /* pulls the arrows into the gutter, near the page edge */
  --font: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-underline-offset: 3px; }
@media (hover: hover) {
  a:hover { color: var(--muted); }
}

:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

h1, h2, p { margin: 0; font-size: inherit; font-weight: 400; }

/* Header + hamburger ------------------------------------------------ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: calc(var(--gutter) - 12px);
  background: var(--bg);
}

.home .site-header { background: none; }

.menu-toggle {
  width: 44px;
  height: 44px;
  padding: 12px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.menu-toggle svg { display: block; width: 100%; height: 100%; }

.site-name { text-decoration: none; }

.site-menu {
  position: absolute;
  top: calc(var(--header-h) - 6px);
  left: var(--gutter);
  padding: 30px 47px 32px 13px;
  background: var(--bg);
  border: var(--line);
  white-space: nowrap;
  /* Scrolls on short screens, such as a phone held sideways. */
  max-height: calc(100vh - var(--header-h) - 6px);
  max-height: calc(100svh - var(--header-h) - 6px);
  overflow-y: auto;
}

.site-menu[hidden] { display: none; }

.site-menu ul { margin: 0; padding: 0; list-style: none; }

.site-menu > ul { display: grid; gap: 16px; }

.site-menu li { position: relative; padding-left: 30px; }

.site-menu [aria-current="page"]::before {
  content: "👉";
  position: absolute;
  left: 0;
  width: 30px;
}

.menu-sub { display: grid; gap: 10px; margin-top: 10px !important; }

.menu-sub[hidden] { display: none; }

.menu-group {
  display: flex;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

@media (hover: hover) {
  .menu-group:hover { color: var(--muted); }
}

.menu-group-label { text-decoration: underline; text-underline-offset: 3px; }

/* Only shown when JavaScript is off. */
.noscript-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 12px var(--gutter);
  background: var(--bg);
}

/* Home -------------------------------------------------------------- */

.hero {
  position: fixed;
  inset: 0;
  margin: 0;
}

.hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keeps Cristian in frame when a tall phone screen crops the sides. */
  object-position: 24% 30%;
}

/* Text pages -------------------------------------------------------- */

.page {
  max-width: calc(640px + var(--gutter) * 2);
  margin: 0 auto;
  padding: calc(var(--header-h) + 40px) var(--gutter) 96px;
}

.page-title { margin-bottom: 40px; color: var(--muted); }

/* Sized against the window as well as the column so the text below it stays
   visible without scrolling. 0.75 is the photo's width divided by its height. */
.page-photo {
  display: block;
  width: min(68.75%, calc(61.875vh * 0.75), calc((100vh - 340px) * 0.75));
  height: auto;
  margin: 0 auto 40px;
}

/* 404 photo. 1.118 is its width divided by its height. */
.page-photo--wide { width: min(100%, calc((100vh - 310px) * 1.118)); }

.page--contact { text-align: center; }

.page p + p { margin-top: 1em; }

.entries { display: grid; gap: 56px; }

.entry .year { color: var(--muted); }

.entry .media { margin-top: 16px; }

/* Slideshows (Editing + Writing) ------------------------------------ */

.slideshow {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100vh;
  height: 100svh;
  padding: var(--header-h) var(--gutter) 20px;
}

/* Writing: video only, nothing under it. */
.slideshow--bare { grid-template-rows: minmax(0, 1fr); padding-bottom: 24px; }

/* Editing: the still fills the space between the arrows, and the credits run
   as one centered line underneath. */
.slideshow--stills {
  --caption-h: 2.75rem;
  grid-template-rows: minmax(0, 1fr);
  padding-bottom: 8px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.slides { position: relative; min-height: 0; touch-action: pan-y; }

.slide {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  margin: 0;
}

.slide[hidden] { display: none; }

.slide img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding-inline: var(--arrow-space);
  object-fit: contain;
}

.slide figcaption {
  min-height: var(--caption-h);
  padding-top: 0.75em;
  /* The longest credit is about 57 times the type size wide, so this keeps it
     on one line right down to the breakpoint below. */
  font-size: min(17px, calc((100vw - var(--gutter) * 2) / 57));
  text-align: center;
  white-space: nowrap;
}

.slide-media {
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 100%;
  margin-inline: var(--arrow-space);
}

/* --ratio is the media's width divided by its height. */
.embed {
  position: relative;
  flex: none;
  width: min(100cqw, calc(100cqh * var(--ratio)));
  aspect-ratio: var(--ratio);
  overflow: hidden;
  background: #111;
}

.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Sits in a text column rather than a slide (News). */
.embed--block { width: 100%; }

.video-poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}

.embed .video-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
}

/* Same circle as the slide arrows. */
.video-poster span {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--arrow-lemon);
  color: var(--arrow-blue);
}

.video-poster svg { display: block; width: 32px; height: 32px; }

@media (hover: hover) {
  .video-poster:hover span { background: #fff; }
}

/* Instagram draws its interface inside the embed, where a site can't restyle
   it, so the frame is pushed past the crop: 54px of header above the media,
   155px of footer below it. If Instagram changes its layout, adjust these. */
.embed--instagram iframe {
  inset: -54px auto auto 0;
  height: calc(100% + 209px);
}

/* Trims hairlines of Instagram's header and footer left visible by rounding. */
.embed--instagram { clip-path: inset(2px 0); }

.slide-arrow {
  position: absolute;
  z-index: 1;
  top: calc((100% - var(--caption-h)) / 2);
  display: grid;
  place-items: center;
  width: var(--arrow-size);
  height: var(--arrow-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--arrow-lemon);
  color: var(--arrow-blue);
  font: inherit;
  cursor: pointer;
  transform: translateY(-50%);
}

.slide-arrow svg { display: block; width: 24px; height: 24px; }

@media (hover: hover) {
  .slide-arrow:hover { background: #fff; }
}

.slide-arrow--prev { left: var(--arrow-inset); }
.slide-arrow--prev svg { transform: scaleX(-1); }
.slide-arrow--next { right: var(--arrow-inset); }

/* Phones: the longest credits can't fit on one line at a readable size, so
   they wrap and sit directly under the still. */
@media (max-width: 700px) {
  .slideshow--stills { --caption-h: 5.5rem; }
  .slideshow--stills .slide { grid-template-rows: auto auto; align-content: center; }
  .slide img {
    height: auto;
    max-height: calc(100vh - var(--header-h) - 7rem);
    max-height: calc(100svh - var(--header-h) - 7rem);
  }
  .slide figcaption { font-size: 15px; white-space: normal; }
}

@media (max-width: 600px) {
  :root {
    --gutter: 20px;
    --header-h: 64px;
    --arrow-size: 34px;
    --arrow-space: 24px;
    --arrow-inset: -14px;
  }
  .site-menu { left: 12px; }
  /* Invisible padding brings the small arrows up to a 44px tap target. */
  .slide-arrow::after { content: ""; position: absolute; inset: -5px; }
  /* Text wraps to more lines here, so the photo leaves it a little more room. */
  .page-photo { width: min(68.75%, calc((100vh - 372px) * 0.75)); }
  .page-photo--wide { width: min(100%, calc((100vh - 340px) * 1.118)); }
}