/* kaimichael.com
   Rebuilt from the xhbtr site (November 2026). Spacing, sizes and colours are
   copied from the xhbtr page settings so the pages look the same.

   Typeface: the xhbtr site used Avenir Next through a Fonts.com licence that
   belongs to xhbtr. Macs, iPhones and iPads have Avenir Next built in, so they
   use it here. Other devices get Nunito Sans, a free (SIL Open Font
   Licence) typeface with very similar proportions, hosted with the site. */

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/nunito-sans-latin-400-normal.woff2") format("woff2");
  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: "Nunito Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/nunito-sans-latin-400-italic.woff2") format("woff2");
  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: "Nunito Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/nunito-sans-latin-500-normal.woff2") format("woff2");
  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: "Nunito Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/nunito-sans-latin-600-normal.woff2") format("woff2");
  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;
}

:root {
  --font: "Avenir Next", "Nunito Sans", Helvetica, Arial, sans-serif;
  --text: #4f4f4f;
  --link: #757575;
  --hover: #5d4285;
  --muted: #696969;
  --background: #ffffff;
}

/* ---------- Base (matches the xhbtr reset and page settings) ---------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

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

body {
  margin: 0;
  background-color: var(--background);
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: 1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, figure, ul, li, address {
  margin: 0;
  padding: 0;
  font: inherit;
}

address { font-style: normal; }
i, em { font-style: italic; }
b, strong { font-weight: 600; }
img { border: 0; }

a {
  color: var(--link);
  text-decoration: none;
  background: transparent;
}
a:hover { color: var(--hover); }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: -9999px;
  z-index: 100;
  padding: 6px 10px;
  background: var(--background);
}
.skip-link:focus { left: 8px; }

/* ---------- Navigation (desktop: fixed column, top left) ---------- */

.mobile-header { display: none; }

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  pointer-events: none;
}

.nav-group {
  list-style: none;
  padding: 30px 24px 24px 30px;
  pointer-events: none;
}

.nav-group li {
  display: block;
  margin: 22px 0;
  line-height: 0;
  pointer-events: none;
}
.nav-group li:first-child { margin-top: 0; }

.nav-group a {
  position: relative;
  font-size: 13px;
  font-weight: 400;
  line-height: 4px;
  letter-spacing: 3px;
  color: var(--link);
  pointer-events: auto;
}
.nav-group a:hover {
  font-weight: 500;
  color: var(--hover);
}

/* ---------- Series pages: one row of pictures, scrolling sideways ---------- */

/* Set per page in the HTML: --pad-top, --pad-right, --pad-bottom, --pad-left,
   --gutter (space between pictures) and --end (extra space after the last).
   --cap-reserve is extra room kept under the pictures so the captions show
   inside the window (see caption_reserve in build/build_site.py).
   --chrome is the height taken up by everything except the pictures, as xhbtr
   worked it out: top and bottom padding plus 8px. */

.layout-row .content {
  --chrome: calc(var(--pad-top) + var(--pad-bottom) + var(--cap-reserve, 0px) + 8px);
  height: 100vh;
  height: 100svh;
  width: max-content;
  min-width: 100%;
  padding: var(--pad-top) 0 calc(var(--pad-bottom) + var(--cap-reserve, 0px)) var(--pad-left);
}

/* These pages scroll sideways only. When a scroll bar shows (a mouse is
   connected, or scroll bars are set to always show), the page would otherwise
   also move up and down by the height of the bar. */
@media only screen and (min-width: 601px) {
  .page-row { overflow-y: hidden; }
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  height: 100%;
}
.align-fill .row { align-items: flex-start; }

.work {
  position: relative;
  flex: 0 0 auto;
  margin: 0 var(--gutter) 0 0;
}
.work:last-child { padding-right: var(--end); }

/* Each picture is shown at its own size (--h, its height in pixels), made
   smaller when the window is too short, and never enlarged. */
.layout-row .work img {
  display: block;
  width: auto;
  height: min(calc(var(--h) * 1px), calc(100vh - var(--chrome)));
}
@supports (height: 100svh) {
  .layout-row .work img { height: min(calc(var(--h) * 1px), calc(100svh - var(--chrome))); }
}

/* Homes: every picture fills the height, as on the xhbtr page. */
.layout-row.align-fill .work img { height: calc(100vh - var(--chrome)); }
@supports (height: 100svh) {
  .layout-row.align-fill .work img { height: calc(100svh - var(--chrome)); }
}

/* Captions hang below each picture. --gap is the number of blank lines
   before the caption (caption_gap in content/site.json, normally 0). */
.work figcaption {
  position: absolute;
  top: 100%;
  left: 0;
  /* As wide as the picture, or a little wider (into the space before the
     next picture) when the window is small, so it stays on one line. */
  width: max-content;
  min-width: 100%;
  max-width: calc(100% + var(--gutter) - 12px);
  padding-top: calc(4px + var(--gap, 0) * 17px);
}

/* Fade pictures in as they load, as xhbtr did. */
.js .work img,
.js .single-image,
.js .hero-image { opacity: 0; transition: opacity 0.4s; }
.js .work img.is-loaded,
.js .single-image.is-loaded,
.js .hero-image.is-loaded { opacity: 1; }

/* ---------- Home ----------
   On computers and tablets: the framed picture with its caption underneath,
   the name a little larger at the top of the menu, and the city and e-mail
   address at the bottom left. Phones: see the phone section at the end. */

.layout-single .content {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-top) var(--pad-right) var(--pad-bottom) var(--pad-left);
}
.single-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.home-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  max-width: 100%;
}
.home-figure picture { display: contents; }
/* Room under the picture for the caption: a 16px gap and one 17px line. */
.home-figure .single-image {
  min-height: 0;
  max-height: calc(100% - 33px);
}
.home-figure figcaption {
  flex: none;
  margin-top: 16px;
  color: var(--link);
  white-space: nowrap;
}
.home-figure figcaption a { color: var(--text); }
.home-figure figcaption a:hover { color: var(--hover); }

.page-home .nav-group:first-child a {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 4px;
  color: #3f3f3f;
}
.page-home .nav-group:first-child a:hover { color: var(--hover); }

.home-footer {
  position: fixed;
  left: 30px;
  bottom: 26px;
  z-index: 11;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 1.5px;
  color: #6f6f6f;
}
.home-footer a { color: #6f6f6f; }
.home-footer a:hover { color: var(--hover); }
/* In very short windows (a phone turned sideways) it would crowd the menu. */
@media only screen and (max-height: 420px) {
  .home-footer { display: none; }
}

/* Keep the framed picture clear of the menu. On wide windows it stays centred
   and is made a little smaller if the frame would reach the menu (the frame
   starts about a tenth of the way into the picture); on narrower windows it is
   centred in the space to the right of the menu instead. */
@media only screen and (min-width: 1101px) {
  .home-figure .single-image { max-width: min(100%, calc(124.4vw - 617px)); }
}
@media only screen and (min-width: 601px) and (max-width: 1100px) {
  .page-home .content { padding-right: 48px; padding-left: 260px; }
}

/* The full-screen phone picture is only shown on phones. */
.home-hero { display: none; }

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

/* News and CV: xhbtr placed the text by percentages of the page width. */
.layout-text .content { display: flow-root; }
.text-box {
  margin-left: var(--box-left);
  margin-top: var(--box-top);
  width: var(--box-width);
  padding-bottom: var(--gutter);
  line-height: normal;
}

/* Contact: plain text below the top padding. */
.layout-text-flow .content {
  padding: var(--pad-top) var(--pad-right) var(--pad-bottom) var(--pad-left);
}
.text-flow { color: var(--muted); max-width: 560px; }

/* ---------- Phones (600px wide and under), as on the xhbtr site ----------
   The pictures on the series pages stack in one column, each with its caption
   underneath, and the page scrolls up and down. */

@media only screen and (max-width: 600px) {
  .mobile-header {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    height: 48px;
    background-color: var(--background);
  }
  .menu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    padding: 14px 12px;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-toggle svg { display: block; width: 20px; height: 20px; margin-left: auto; }
  .menu-toggle line { stroke: var(--link); }

  .site-nav {
    display: none;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 98;
    padding: 48px 12px 24px 12px;
    overflow-y: auto;
    background-color: var(--background);
    pointer-events: auto;
  }
  .nav-open .site-nav { display: block; }
  .nav-open { overflow: hidden; }

  .nav-group { padding: 0; }
  .nav-group li { margin: 0; line-height: normal; }
  .nav-group a {
    display: block;
    padding: 7px 0;
    font-size: 12px;
    line-height: normal;
    letter-spacing: 1px;
  }
  .nav-group a:hover { font-weight: 400; }

  .content,
  .layout-row .content,
  .layout-single .content,
  .layout-text-flow .content {
    position: static;
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    margin-top: 48px;
    padding: 1rem;
  }

  .single-image {
    width: 100%;
    height: auto;
    max-height: none;
  }

  .layout-row .content {
    position: static;
    width: 100%;
    min-width: 0;
    height: auto;
    margin-top: 48px;
    padding: 1rem;
  }
  .layout-row .row { display: block; height: auto; }
  .layout-row .work,
  .layout-row .work:last-child { margin: 0 0 1rem 0; padding: 0; }
  /* Each picture spans the column. A picture file with a white margin around
     the print ("frame" in content/site.json) is placed so that the frame, not
     the file, is phone_frame_width of the column, with the same space on all
     four sides; the rest of the file's margin lies outside the .frame box and
     is cut off there. --iw is the picture's width and --il, --it and --ib its
     left, top and bottom margins, all worked out by build/build_site.py. */
  .layout-row .work .frame { overflow: hidden; }
  .layout-row .work img,
  .layout-row.align-fill .work img {
    width: var(--iw, 100%);
    max-width: none;
    height: auto;
    max-height: none;
    margin: var(--it, 0) 0 var(--ib, 0) var(--il, 0);
  }
  .layout-row .work figcaption {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .text-box { margin: 0; width: auto; padding-bottom: 0; line-height: 17px; }
  .wide-only { display: none; }

  /* Home on a phone: one of the phone pictures fills the screen, with the
     menu and the caption on it. Which pictures, how each is placed and the
     colour of the words on each are set under phone_pictures in
     content/site.json; the script on the home page picks one each visit. */
  html.page-home { background-color: var(--hero-top, #242424); }
  .page-home .mobile-header,
  .page-home .home-figure,
  .page-home .home-footer { display: none; }
  .page-home .content { margin-top: 0; padding: 0; }

  .page-home .home-hero {
    display: block;
    position: relative;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
  }
  .home-hero .hero-image {
    position: absolute;
    display: block;
    max-width: none;
  }
  /* Fill the screen, cropping the sides; --hero-pos says which part shows. */
  .home-hero.fit-cover .hero-image {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--hero-pos, 50% 50%);
  }
  /* At least --hero-min tall, with the bottom edge kept at the bottom of the
     screen, so on shorter screens the picture is enlarged and the top is
     cropped. The point --hero-ix of the way across the picture is placed
     --hero-sx across the screen. --hero-ratio is the width over the height. */
  .home-hero.fit-min .hero-image {
    bottom: 0;
    width: auto;
    height: max(100%, var(--hero-min));
    left: calc(var(--hero-sx) - var(--hero-ix) * var(--hero-ratio) * max(100vh, var(--hero-min)));
  }
  @supports (height: 100svh) {
    .home-hero.fit-min .hero-image {
      left: calc(var(--hero-sx) - var(--hero-ix) * var(--hero-ratio) * max(100svh, var(--hero-min)));
    }
  }
  /* Fill the screen, then enlarge by --hero-zoom (1 just fills it). --hero-x and
     --hero-y say which part shows, from 0 to 1: x 0 keeps the left edge of the
     picture at the left of the screen and 1 the right edge; y does the same from
     top to bottom. --hero-ratio is the width over the height. The same sums as
     the crop tool the settings were chosen with. */
  .home-hero.fit-zoom .hero-image {
    --hero-h: calc(var(--hero-zoom) * max(100vh, 100vw / var(--hero-ratio)));
    height: var(--hero-h);
    width: calc(var(--hero-h) * var(--hero-ratio));
    left: calc((100vw - var(--hero-h) * var(--hero-ratio)) * var(--hero-x));
    top: calc((100vh - var(--hero-h)) * var(--hero-y));
  }
  @supports (height: 100svh) {
    .home-hero.fit-zoom .hero-image {
      --hero-h: calc(var(--hero-zoom) * max(100svh, 100vw / var(--hero-ratio)));
      top: calc((100svh - var(--hero-h)) * var(--hero-y));
    }
  }

  .page-home .site-nav {
    display: block;
    position: absolute;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    z-index: 20;
    padding: 0 16px;
    overflow: visible;
    background: transparent;
  }
  .page-home .nav-group:nth-child(2) { margin-top: 9px; }
  .page-home .nav-group:nth-child(3) { margin-top: 24px; }
  .page-home .nav-group a,
  .page-home .nav-group a:hover,
  .page-home .nav-group:first-child a,
  .page-home .nav-group:first-child a:hover {
    display: flex;
    align-items: center;
    height: 26px;
    padding: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 3px;
    color: var(--hero-menu);
  }
  .page-home .nav-group:first-child a,
  .page-home .nav-group:first-child a:hover { height: 56px; font-weight: 500; }

  .hero-caption {
    position: absolute;
    right: 16px;
    bottom: 28px;
    left: 16px;
    font-size: 12px;
    line-height: 17px;
    letter-spacing: 1px;
    color: var(--hero-cap);
  }
  .hero-caption a,
  .hero-caption a:hover { color: var(--hero-cap-link); font-weight: 500; }

  .hero-menu-light { --hero-menu: #f2f2f2; }
  .hero-menu-dark { --hero-menu: #141414; }
  .hero-caption-light { --hero-cap: #ececec; --hero-cap-link: #ffffff; }
  .hero-caption-dark { --hero-cap: #262626; --hero-cap-link: #111111; }
}