/*
 * Static chrome and layout for Johnny Miller Photography. Loaded before behavior.css
 * (base.njk), which owns runtime states (page fade, lightbox, back-to-top
 * visibility toggling, grid spacer). This file never duplicates those rules.
 * Breakpoints: 932px (tablet) and 540px (phone), both max-width, matching
 * the measured live site (work/layout-values.txt).
 */

/* ---------------------------------------------------------------------- *
 * Custom properties
 * ---------------------------------------------------------------------- */
:root {
  --font-head: "futura-pt", "ftnk", "Futura PT", Futura, "Century Gothic", sans-serif;
  --font-body: "proxima-nova", "vcsm", "Proxima Nova", "Helvetica Neue", Arial, sans-serif;
  --c-dark: #222222;
  --c-mid: #999999;
  --c-hover: #666666;
  --c-btn: #2a9d8f;
  --c-btn-hover: rgba(33, 134, 122, 0.75);
  /* "Buy the book" in the menu: the red of the containers in the Manila
     photograph, white type on it has a contrast of 4.6 */
  --c-buy: #d63a4c;
  --c-buy-hover: #b92a3c;
  --max-content: 1400px;
  --max-text: 800px;
  /* Site styles (content/site/styles.yml) arrive as --s-bg, --s-text,
     --s-heading, --s-menu and --s-menu-active, and as new values of
     --c-btn, --c-btn-hover, --font-head, --font-body, --max-content and
     --max-text. Where a style is not set, the value written in this file
     applies. */
}

/* ---------------------------------------------------------------------- *
 * Reset / base
 * ---------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}
html {
  text-rendering: optimizeLegibility;
}
body {
  margin: 0;
  background: var(--s-bg, #fff);
  font-family: var(--font-body);
  color: var(--s-text, #000);
}
/* Texts taken over from the old site name their fonts by Adobe Portfolio's
   internal names: "vcsm" is Proxima Nova, "ftnk" is Futura PT. No other font
   service knows those names, and without this rule such text falls back to
   the browser's serif font. */
[style*="font-family:vcsm"],
[style*="font-family: vcsm"] {
  font-family: var(--font-body) !important;
}
[style*="font-family:ftnk"],
[style*="font-family: ftnk"] {
  font-family: var(--font-head) !important;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  vertical-align: top;
  border: 0;
  max-width: 100%;
}
p {
  margin: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
button {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
}
h1, h2 {
  margin: 0;
  font-weight: 400;
}

/* ---------------------------------------------------------------------- *
 * Accessibility: skip link and focus rings
 * ---------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: var(--s-bg, #fff);
  color: var(--c-dark);
  padding: 14px 20px;
  font: 14px/1.4 var(--font-body);
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-btn);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------- *
 * Frame / layout
 * ---------------------------------------------------------------------- */
.frame {
  max-width: var(--max-content);
  margin: 0 auto;
}
.inner {
  width: 97%;
  margin: 0 1.5%;
}
.inner::after {
  content: "";
  display: table;
  clear: both;
}
.side {
  float: right;
  width: 25.5%;
  margin-left: 1.5%;
}
.main {
  float: right;
  width: 73%;
  position: relative;
}

@media (max-width: 932px) {
  /* The live site drops the 1.5% side gutter here (.site-content: margin 0,
     width 100%), so blocks run edge to edge on tablet and phone. */
  .inner {
    width: 100%;
    margin: 0;
  }
  .side {
    float: none;
    width: 100%;
    margin-left: 0;
  }
  .main {
    float: none;
    width: 100%;
  }
}

/* ---------------------------------------------------------------------- *
 * Masthead: logo + burger
 * ---------------------------------------------------------------------- */
.masthead {
  text-align: center;
}
/* The logo sits near the top of the page, its upper edge close to the first
   line of the home page's news strip. The distance to the menu is unchanged. */
.logo-wrap {
  width: 80%;
  margin: 0 auto;
  padding: 18px 0 50px;
  text-align: center;
}
/* The logo is centered on the same line as the menu entries below it. The
   space at its sides is equal (it was 1.5% on the right only, which kept the
   image two pixels left of the center), and the image is moved by
   --logo-shift, the value the build measures in the logo file, so that the
   visible logo and not the file's box sits in the middle. */
.logo {
  display: inline-block;
  /* Top alignment leaves no gap for descenders under the logo image. */
  vertical-align: top;
  font: 700 30px/35px var(--font-head);
  text-transform: uppercase;
  color: #333333;
  padding: 0 0.75%;
}
.logo:hover {
  color: var(--c-mid);
}
.logo img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  transform: translateX(var(--logo-shift, 0));
}
/* Text wordmark, used while settings.logo is empty. Matches the
   unequalscenes.com wordmark as measured in its header: heading font
   (Futura), weight 400, uppercase, about 20px with 0.4em tracking, black.
   A name of three or more words breaks before its last word. The negative
   right margin takes back the tracking after the last letter, so the line
   is centred on its letters. */
.logo .wordmark {
  display: block;
  /* On desktop the sidebar is 25.5% of the page, so the size follows the
     window: 20px from about 1300px down to 14px at the 932px breakpoint,
     where "PHOTOGRAPHY" with its tracking still fits the 80% logo box. */
  font: 400 clamp(14px, 1.5vw, 20px)/1.5 var(--font-head);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #000000;
  transition: color 0.2s ease;
}
.logo:hover .wordmark {
  color: var(--c-hover);
}
.wordmark-line {
  display: block;
  margin-right: -0.4em;
  white-space: nowrap;
}
.burger {
  display: none;
}
.burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #000;
}
.burger span + span {
  margin-top: 4px;
}

@media (max-width: 932px) {
  /* As on the live site: the logo is centered in the full width with 39px
     kept free on both sides, and the burger sits on top at the right edge
     without taking space in the row. Live header height: 130px at an 800px
     screen, 90.4px at 390px. */
  .masthead {
    position: relative;
    padding: 40px 5%;
  }
  .logo-wrap {
    width: 100%;
    padding: 0;
  }
  .logo {
    display: block;
    padding: 0 39px;
    margin: -5px 0;
  }
  .logo img {
    max-height: 60px;
    width: auto;
  }
  .logo .wordmark {
    margin: 5px 0;
    /* Full-width masthead here, so the fixed size fits. */
    font-size: 20px;
    line-height: 30px;
  }
  .burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: content-box;
    width: 24px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    /* Tap area reaches the screen edge (63px wide at a 390px screen). */
    padding: 30px 5%;
  }
}
@media (max-width: 540px) {
  .masthead {
    padding: 30px 5%;
  }
  .logo .wordmark {
    font-size: 17px;
    line-height: 26px;
    letter-spacing: 0.32em;
  }
  .wordmark-line {
    margin-right: -0.32em;
  }
}

/* ---------------------------------------------------------------------- *
 * Sidebar nav (desktop)
 * ---------------------------------------------------------------------- */
.nav {
  width: 80%;
  margin: 0 auto;
}
.nav .group {
  padding-bottom: 40px;
}
/* top links ("Buy the book") above the groups: the link's own 20px plus
   these 20px give the same 40px as between two groups */
.nav .group.nav-top {
  padding-bottom: 20px;
}
.group-title > a,
.item > a,
.nav-link > a {
  display: block;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.group-title > a {
  font: 700 14px/14px var(--font-head);
  text-transform: uppercase;
  color: var(--s-menu-active, var(--c-dark));
  padding-bottom: 20px;
}
.group-title > a:hover,
.group-title > a.active {
  color: var(--s-menu, var(--c-mid));
}
.item > a {
  font: 400 16px/20px var(--font-body);
  color: var(--s-menu, var(--c-mid));
  padding-bottom: 10px;
}
.item > a:hover,
.item > a.active {
  color: var(--s-menu-active, var(--c-dark));
}
.nav-link > a {
  font: 400 16px/16px var(--font-body);
  color: var(--s-menu, var(--c-mid));
  padding-bottom: 20px;
}
.nav-link > a:hover {
  color: var(--s-menu-active, var(--c-dark));
}
/* "Buy the book" is a filled button so it stands out from the groups.
   The 20px under the link moved to the list item, the distance to the
   first group stays 40px. */
.nav .group.nav-top .group-title {
  text-align: center;
  padding-bottom: 20px;
}
.nav .group.nav-top .group-title > a {
  display: inline-block;
  padding: 12px 18px;
  border: 1px solid var(--c-buy);
  background: var(--c-buy);
  color: #ffffff;
}
.nav .group.nav-top .group-title > a:hover,
.nav .group.nav-top .group-title > a:focus-visible {
  border-color: var(--c-buy-hover);
  background: var(--c-buy-hover);
  color: #ffffff;
}

@media (max-width: 932px) {
  .side .nav {
    display: none;
  }
}

/* "Buy the book" under the logo on phones and tablets, where the burger
   replaces the sidebar menu. About as wide as a line of the news strip on
   a phone, in the red of the menu button. The desktop layout does not show
   it, and the button in the menu stays. */
.buy-bar {
  display: none;
}
@media (max-width: 932px) {
  .buy-bar {
    display: block;
    padding: 0 20px 28px;
  }
  .buy-bar a {
    display: block;
    max-width: 358px;
    margin: 0 auto;
    padding: 15px 18px;
    border: 1px solid var(--c-buy);
    background: var(--c-buy);
    font: 700 14px/14px var(--font-head);
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .buy-bar a + a {
    margin-top: 10px;
  }
  .buy-bar a:hover,
  .buy-bar a:focus-visible {
    border-color: var(--c-buy-hover);
    background: var(--c-buy-hover);
    color: #ffffff;
  }
}
@media (max-width: 540px) {
  .buy-bar {
    padding: 0 16px 24px;
  }
}

/* ---------------------------------------------------------------------- *
 * Social icons (shared by sidebar nav and the mobile overlay menu)
 * ---------------------------------------------------------------------- */
.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.social li {
  padding-bottom: 15px;
  padding-right: 15px;
}
.social li:first-child {
  padding-left: 0;
}
.social li:last-child {
  padding-right: 0;
}
.social svg,
.social .icon {
  width: 30px;
  height: 30px;
  fill: var(--s-menu, var(--c-mid));
  transition: fill 0.2s ease;
}
.social a:hover svg,
.social a:hover .icon {
  fill: var(--s-menu-active, var(--c-dark));
}

@media (max-width: 932px) {
  .social li {
    padding-right: 12px;
  }
}
@media (max-width: 540px) {
  .social li {
    padding-right: 10px;
  }
}

/* ---------------------------------------------------------------------- *
 * Mobile overlay menu
 * ---------------------------------------------------------------------- */
.menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--s-bg, #fff);
  flex-direction: column;
  padding: 50px 5% 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}
html.menu-open {
  overflow: hidden;
}
html.menu-open body {
  overflow: hidden;
}
html.menu-open .menu {
  display: flex;
  opacity: 1;
}
html.menu-open .site {
  visibility: hidden;
}

.menu-close {
  position: fixed;
  top: 40px;
  right: 5%;
  width: 20px;
  height: 20px;
  padding: 30px 6%;
  margin: -30px -6% 0 0;
}
.menu-close::before,
.menu-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: #000;
}
.menu-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.menu-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.menu-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-bottom: 80px;
}
.menu-nav .group {
  padding-bottom: 0;
}
.menu-nav .group-title > a,
.menu-nav .item > a,
.menu-nav .nav-link > a {
  text-align: left;
  font: 400 22px/32px var(--font-body);
  color: var(--s-menu-active, var(--c-dark));
  padding-bottom: 30px;
}
.menu-nav .group-title > a {
  font-weight: 700;
  text-transform: uppercase;
}
.menu-nav .group.nav-top .group-title {
  padding-bottom: 30px;
}
.menu-nav .group.nav-top .group-title > a {
  display: inline-block;
  padding: 6px 18px;
  border: 1px solid var(--c-buy);
  background: var(--c-buy);
  color: #ffffff;
}
.menu-nav .group.nav-top .group-title > a:hover,
.menu-nav .group.nav-top .group-title > a:focus-visible {
  border-color: var(--c-buy-hover);
  background: var(--c-buy-hover);
  color: #ffffff;
}
.menu-nav .social {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  min-height: 80px;
  padding: 5%;
  background: var(--s-bg, #fff);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.menu-nav .social li {
  flex: 0 0 auto;
  padding-bottom: 0;
  padding-right: 20px;
}
.menu-nav .social li:last-child {
  padding-right: 0;
}
.menu-nav .social svg,
.menu-nav .social .icon {
  width: 42px;
  height: 30px;
}

@media (max-width: 540px) {
  .menu-close {
    top: 30px;
    padding: 40px 10%;
    margin: -40px -10% 0 0;
  }
}

/* ---------------------------------------------------------------------- *
 * Page header
 * ---------------------------------------------------------------------- */
.page-head {
  max-width: var(--max-text);
  margin: 0 auto;
  padding: 52px 0 12px;
  text-align: center;
}
.page-title {
  font: 400 50px/50px var(--font-head);
  text-transform: uppercase;
  color: var(--s-heading, var(--c-dark));
  padding-bottom: 20px;
  white-space: pre-wrap;
}
.page.narrow .page-head {
  max-width: none;
  width: 61%;
  padding-top: 65px;
  padding-bottom: 9px;
}

@media (max-width: 932px) {
  .page-head {
    padding: 24px 5% 10px;
  }
  .page-title {
    font-size: 31px;
    line-height: 31px;
    padding-bottom: 14px;
  }
  .page.narrow .page-head {
    width: 100%;
    padding: 29px 5% 8px;
  }
}
@media (max-width: 540px) {
  .page-head {
    padding-top: 21px;
  }
  .page-title {
    font-size: 25px;
    line-height: 25px;
    padding-bottom: 13px;
  }
  .page.narrow .page-head {
    padding-top: 25px;
    padding-bottom: 7px;
  }
}

/* ---------------------------------------------------------------------- *
 * Rich text (BUILD-SPEC 2.4: legacy vs clean default color)
 * ---------------------------------------------------------------------- */
.rich {
  font: 400 18px/26px var(--font-body);
  text-align: var(--align, center);
}
.rich.legacy {
  color: var(--c-mid);
}
.rich.clean {
  color: var(--s-text, #000000);
}
/* Every paragraph keeps the space below it, the last one too, as on the
   live site. Each line also carries the full body style itself. The old
   editor often put body lines inside a heading block, and there they must
   not take over its capitals, weight and font. Styles set on a single line
   or word in the editor still win. */
.rich p,
.rich div {
  margin: 0;
  padding: 0 0 20px;
  font: normal 400 18px/26px var(--font-body);
  letter-spacing: normal;
  text-transform: none;
  text-align: var(--align, center);
}
/* :where keeps these two rules weaker than the heading styles below. */
.rich:where(.legacy) p,
.rich:where(.legacy) div {
  color: var(--c-mid);
}
.rich:where(.clean) p,
.rich:where(.clean) div {
  color: var(--s-text, #000000);
}
/* Links in page text and captions are always underlined. */
.rich a {
  color: inherit;
  text-transform: none;
}
.rich a[href],
.caption a[href] {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rich a[href]:hover,
.caption a[href]:hover {
  filter: brightness(70%) saturate(120%) hue-rotate(5deg);
}
.rich .title {
  display: block;
  font: 400 70px/70px var(--font-head);
  text-transform: uppercase;
  color: var(--s-heading, var(--c-dark));
  padding: 5px 0;
}
.rich .sub-title {
  display: block;
  font: 500 20px/20px var(--font-head);
  text-transform: uppercase;
  color: var(--s-heading, var(--c-dark));
  padding: 20px 0 10px;
}
.rich .italic {
  font-style: italic;
}
.rich .underline {
  text-decoration: underline;
}
.rich .strikethrough {
  text-decoration: line-through;
}
.rich .bold {
  font-weight: 700;
}

.caption {
  font: 400 14px/18px var(--font-body);
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding-top: 15px;
}
/* As on the live site, each paragraph of a caption has the space above it
   and none below. The first one takes it from the caption box, so a caption
   typed as plain text has the same space. */
.caption.rich p,
.caption.rich div {
  padding: 15px 0 0;
  font-size: 14px;
  line-height: 18px;
}
.caption.rich > p:first-child,
.caption.rich > div:first-child {
  padding-top: 0;
}
.caption.legacy,
.caption.clean,
.caption.rich p,
.caption.rich div {
  color: var(--c-mid);
}

@media (max-width: 932px) {
  .rich,
  .rich p,
  .rich div {
    font-size: 14px;
    line-height: 20px;
  }
  .rich p,
  .rich div {
    padding-bottom: 14px;
  }
  .rich .title {
    font-size: 39px;
    line-height: 39px;
  }
  .rich .sub-title {
    font-size: 17px;
    line-height: 17px;
    padding-top: 14px;
    padding-bottom: 8px;
  }
  .caption {
    font-size: 14px;
    line-height: 20px;
    padding-top: 11px;
  }
  .caption.rich p,
  .caption.rich div {
    padding: 11px 0 0;
    font-size: 14px;
    line-height: 20px;
  }
  .caption.rich > p:first-child,
  .caption.rich > div:first-child {
    padding-top: 0;
  }
}
@media (max-width: 540px) {
  .rich,
  .rich p,
  .rich div,
  .rich span {
    font-size: 14px !important;
    line-height: 20px !important;
  }
  .rich p,
  .rich div {
    padding-bottom: 13px;
  }
  .rich .title,
  .rich .title span {
    font-size: 32px !important;
    line-height: 32px !important;
  }
  .rich .sub-title {
    padding-top: 13px;
    padding-bottom: 7px;
  }
  /* As on the live site, a heading and the words inside it share one size
     on phones, whatever was set on single words in the editor. */
  .rich .sub-title,
  .rich .sub-title span {
    font-size: 14px !important;
    line-height: 14px !important;
  }
  /* Body lines that sit inside a heading block keep the body spacing. */
  .rich .main-text span {
    line-height: 20px !important;
  }
  .caption {
    padding-top: 10px;
  }
  .caption.rich p,
  .caption.rich div {
    padding: 10px 0 0;
  }
  .caption.rich > p:first-child,
  .caption.rich > div:first-child {
    padding-top: 0;
  }
}

/* Narrow-header pages (about, exhibitions, honors, press, research):
   the "Title" rich-text style is re-tuned to a short, wide banner. */
.page.narrow .rich .title {
  font-size: 18px;
  line-height: 70px;
}
@media (max-width: 932px) {
  .page.narrow .rich .title {
    font-size: 14px;
    line-height: 54px;
  }
}
@media (max-width: 540px) {
  .page.narrow .rich .title,
  .page.narrow .rich .title span {
    font-size: 14px !important;
    line-height: 20px !important;
  }
}

/* ---------------------------------------------------------------------- *
 * Blocks
 * ---------------------------------------------------------------------- */
.blocks {
  overflow: hidden;
}

/* Photo */
figure {
  margin: 0;
}
.block.photo {
  margin: 0 auto;
  padding-bottom: 40px;
  max-width: 100%;
}
.photo img {
  display: block;
  width: 100%;
  height: auto;
  background: rgba(0, 0, 0, 0.03);
}
.photo .shot {
  display: block;
  position: relative;
}
.photo .js-zoom {
  cursor: zoom-in;
}

@media (max-width: 932px) {
  .block.photo {
    padding-bottom: 20px;
  }
}
@media (max-width: 540px) {
  .block.photo {
    padding-bottom: 18px;
  }
}

/* Text */
.block.text {
  max-width: var(--max-text);
  margin: 0 auto;
  padding: 20px 0 40px;
}
@media (max-width: 932px) {
  .block.text {
    max-width: none;
    padding: 14px 5% 20px;
  }
}
@media (max-width: 540px) {
  .block.text {
    padding: 13px 5% 18px;
  }
}

/* Button */
.block.button {
  text-align: center;
  padding: 20px 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  color: #ffffff;
  background-color: var(--c-btn);
  font: 700 18px var(--font-body);
  line-height: 40px;
  padding: 0 30px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  transition: background 0.2s ease;
}
.btn:hover {
  background: var(--c-btn-hover) !important;
}
@media (max-width: 932px) {
  .block.button {
    padding: 14px 5%;
  }
  .btn {
    font-size: 14px;
    line-height: 38px;
    padding: 0 29px;
  }
}
@media (max-width: 540px) {
  .btn {
    line-height: 35px;
    padding: 0 26px;
  }
}

/* Embed */
.block.embed {
  margin: 0 auto;
  padding-bottom: 40px;
  max-width: 100%;
}
.embed-size {
  margin: 0 auto;
}
.embed-box {
  position: relative;
}
/* A pasted iframe in an html block, wrapped in .embed-box by the build. */
.rich .embed-box {
  margin: 0 0 20px;
}
/* Native video in text, blocks and embeds never runs wider than its column. */
.rich video,
.block video,
.embed-box video {
  display: block;
  max-width: 100%;
  height: auto;
}
.embed-box iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 932px) {
  .block.embed {
    padding-bottom: 20px;
  }
}
@media (max-width: 540px) {
  .block.embed {
    padding-bottom: 18px;
  }
}

/* Row (flex "tree"). All cells are as tall as the tallest one and their
   content starts at the top, as on the live site. */
.block.row {
  display: flex;
}
.cell {
  flex-basis: 0;
  flex-shrink: 1;
  min-width: 1px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  /* Same space below as a photo or video outside a row. */
  padding-bottom: 40px;
}
.cell:first-child {
  border-left: 0;
}
.cell:last-child {
  border-right: 0;
}
.cell img {
  display: block;
  width: 100%;
  height: auto;
}
.cell .rich {
  padding-bottom: 0;
}

@media (max-width: 932px) {
  .cell {
    padding-bottom: 20px;
  }
}
@media (max-width: 540px) {
  .block.row {
    display: block;
  }
  .cell {
    flex: none !important;
    border: 0;
    padding-bottom: 18px;
  }
}

/* Grid (justified gallery) */
.block.grid {
  padding-bottom: 40px;
  overflow: hidden;
}
.grid-main {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px;
}
.tile {
  /* The width set on a tile is the width of the photo; borders come on top. */
  box-sizing: content-box;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  border-bottom: 8px solid transparent;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.tile img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.filler {
  display: block;
  width: 100%;
}
.tile-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 15px 15px 10px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) 20px, rgba(0, 0, 0, 0.5));
  color: #fff;
  font: 400 14px/17px var(--font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.tile:hover .tile-caption {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------------------- *
 * News strip (top of the home page and /projects)
 * ---------------------------------------------------------------------- */
.news {
  display: flex;
  align-items: baseline;
  margin: 0 0 3%;
  padding: 16px 0 14px;
  border-bottom: 1px solid #dddddd;
}
.news [hidden],
.news[hidden] {
  display: none;
}
.news-title {
  flex: none;
  width: 110px;
  margin: 0;
  font: 500 17px/24px var(--font-head);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-heading, var(--c-dark));
}
.news-body {
  flex: 1;
  min-width: 0;
}
.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.news-item {
  display: flex;
  align-items: baseline;
  padding: 0 0 6px;
  font: 400 16px/24px var(--font-body);
  color: var(--c-dark);
}
.news-label {
  flex: none;
  width: 96px;
  font: 500 13px/24px var(--font-head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #666666;
}
.news-text {
  color: inherit;
}
a.news-text,
.news-more {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a.news-text:hover,
.news-more:hover {
  color: var(--c-hover);
}
.news-more {
  position: relative;
  margin: 0 0 0 96px;
  padding: 0;
  border: 0;
  background: none;
  font: 400 14px/24px var(--font-body);
  color: #666666;
  cursor: pointer;
}
/* A finger needs more room than the 24px line. The area that reacts to a
   tap is 44px tall, the layout stays as it is. */
.news-more::after {
  content: "";
  position: absolute;
  top: -10px;
  right: 0;
  bottom: -10px;
  left: 0;
}
/* Below the desktop width the photos run to the edge of the screen, text
   does not. The line above separates the strip from the logo. */
@media (max-width: 932px) {
  .news {
    margin: 0 0 5%;
    padding-left: 20px;
    padding-right: 20px;
    border-top: 1px solid #dddddd;
  }
}
@media (max-width: 540px) {
  .news {
    display: block;
    margin: 0 0 6%;
    padding: 14px 16px 8px;
  }
  .news-title {
    width: auto;
    padding-bottom: 6px;
  }
  .news-item {
    display: block;
    padding-bottom: 8px;
    font-size: 15px;
    line-height: 21px;
  }
  .news-label {
    display: inline;
    width: auto;
    margin-right: 8px;
    line-height: 21px;
  }
  .news-more {
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------------- *
 * Gallery covers (home, /projects, and "related")
 * ---------------------------------------------------------------------- */
.covers {
  display: flex;
  flex-wrap: wrap;
  padding: 3px 0 14px;
}
.cover {
  display: block;
  position: relative;
  width: 49.25%;
  margin-right: 1.5%;
  margin-bottom: 3%;
  overflow: hidden;
}
.cover:nth-child(2n) {
  margin-right: 0;
}
.cover-box {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.cover-img {
  position: absolute;
  inset: 0;
}
.cover-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  transform: translate(-50%, -50%);
}
.cover-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cover:hover .cover-img::after {
  opacity: 0.3;
}
.cover-info {
  position: absolute;
  inset: 0;
  width: 91%;
  left: 50%;
  transform: translateX(-50%);
  padding: 5% 0;
  display: flex;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.cover:hover .cover-info {
  opacity: 1;
}
.cover-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
}
.cover-text {
  width: 90%;
  text-align: center;
}
.cover-date {
  font: 400 20px/20px var(--font-head);
  text-transform: uppercase;
  color: var(--c-mid);
  padding-bottom: 20px;
}
.cover-title {
  font: 400 50px/50px var(--font-head);
  text-transform: uppercase;
  color: var(--s-heading, var(--c-dark));
}

@media (max-width: 932px) {
  .covers {
    padding: 5px 0 11px;
  }
  .cover {
    margin-bottom: 5%;
  }
  .cover-date {
    font-size: 17px;
    line-height: 17px;
    padding-bottom: 14px;
  }
  .cover-title {
    font-size: 31px;
    line-height: 31px;
  }
}
@media (max-width: 540px) {
  .covers {
    padding: 4px 0 10px;
  }
  .cover,
  .cover:nth-child(2n) {
    width: 100%;
    margin-right: 0;
    margin-bottom: 4%;
  }
  .cover-date {
    font-size: 14px;
    line-height: 14px;
    padding-bottom: 13px;
  }
  .cover-title {
    font-size: 25px;
    line-height: 25px;
  }
}

/* ---------------------------------------------------------------------- *
 * Related ("You may also like")
 * ---------------------------------------------------------------------- */
.related {
  padding-top: 40px;
}
.related-title {
  max-width: var(--max-text);
  margin: 0 auto 40px;
  font: 700 24px/24px var(--font-head);
  text-transform: uppercase;
  color: var(--s-heading, var(--c-dark));
  text-align: center;
}
.related-covers {
  display: flex;
  flex-wrap: wrap;
}
.related-covers .cover {
  width: 50%;
  margin-right: 0;
  margin-bottom: 0;
}
.related-covers .cover:nth-child(n+3) {
  display: none;
}
.related-covers .cover-info {
  width: 90%;
}
.related-covers .cover:hover .cover-img::after {
  opacity: 0;
}

@media (max-width: 932px) {
  .related {
    padding-top: 20px;
  }
  .related-title {
    font-size: 18px;
    line-height: 18px;
    margin-bottom: 20px;
    padding: 0 5%;
  }
}
@media (max-width: 540px) {
  .related {
    padding-top: 18px;
  }
  .related-title {
    font-size: 15px;
    line-height: 15px;
    min-height: 17px;
    margin-bottom: 18px;
  }
  /* One cover, as wide as the screen. */
  .related-covers .cover {
    width: 100%;
  }
  .related-covers .cover:nth-child(n+2) {
    display: none;
  }
}

/* ---------------------------------------------------------------------- *
 * Back to top (in-page link)
 * ---------------------------------------------------------------------- */
.to-top {
  padding: 60px 0;
  text-align: center;
}
.to-top .js-top {
  display: inline-block;
  font: 400 18px/18px var(--font-body);
  color: var(--c-mid);
}
.to-top .js-top:hover {
  color: var(--c-hover);
}
.to-top .arrow {
  margin-right: 10px;
}
@media (max-width: 932px) {
  .to-top {
    padding: 28px 0;
  }
  .to-top .js-top {
    font-size: 14px;
    line-height: 14px;
  }
}
@media (max-width: 540px) {
  .to-top {
    padding: 25px 0;
  }
  .to-top .js-top {
    font-size: 14px;
    line-height: 20px;
  }
}

/* ---------------------------------------------------------------------- *
 * Shared helper: text for screen readers only
 * ---------------------------------------------------------------------- */
.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;
}

/* ---------------------------------------------------------------------- *
 * Menu: section groups, Writing and About, Contact link
 * The four section groups show their title and a small chevron button.
 * The chevron opens the group's list of projects in place (accordion):
 * the open list pushes the entries below it down, and only one group is
 * open at a time (site.js). The title itself is a link to the section
 * page. The group of the current page is open when the page loads
 * (nav.njk writes is-open). The same markup and behaviour are used in the
 * sidebar (wide screens) and in the burger menu (932px and narrower).
 * Type follows the reference site (unequalscenes.com): section titles in
 * the heading font, uppercase, weight 400, grey; projects in the body font,
 * weight 400, grey; the current page in the dark colour.
 * ---------------------------------------------------------------------- */
.group-items-wrap,
.group-items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav .group.has-drop,
.nav .group.group-plain {
  padding-bottom: 20px;
}
.nav .group.group-plain .group-title + .group-title {
  padding-top: 20px;
}
.nav .group.group-plain .group-title > a,
.nav .group.has-drop .group-title > a {
  padding-bottom: 0;
}
.nav .group.has-drop .group-title > a,
.nav .group.group-plain .group-title > a {
  font: 400 14px/18px var(--font-head);
  letter-spacing: 0.1em;
  color: var(--s-menu, var(--c-mid));
}
.nav .group.has-drop .group-title > a:hover,
.nav .group.group-plain .group-title > a:hover,
.nav .group .group-title > a.active,
.nav .group .group-title > a[aria-current="page"] {
  color: var(--s-menu-active, var(--c-dark));
}
.has-drop .group-title {
  position: relative;
}
.drop-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  width: 32px;
  height: 32px;
  margin-top: -16px;
}
.drop-toggle::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 13px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--s-menu, var(--c-mid));
  border-bottom: 1.5px solid var(--s-menu, var(--c-mid));
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.drop-toggle:hover::before {
  border-color: var(--s-menu-active, var(--c-dark));
}
.drop-toggle[aria-expanded="true"]::before {
  transform: translateY(3px) rotate(-135deg);
}
.has-drop .group-items-wrap {
  display: none;
}
.has-drop.is-open .group-items-wrap {
  display: block;
}
.nav .group-items {
  padding-top: 16px;
}
.nav .group-items .item:last-child > a {
  padding-bottom: 0;
}
/* The current page in the list of projects: dark and underlined, in the
   sidebar and in the burger menu. */
.item > a[aria-current="page"] {
  color: var(--s-menu-active, var(--c-dark));
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.nav-foot {
  padding-top: 20px;
}
.nav-contact {
  text-align: center;
  padding-bottom: 20px;
}
.nav-contact > a {
  font: 400 16px/16px var(--font-body);
  color: var(--s-menu, var(--c-mid));
  transition: color 0.2s ease;
}
.nav-contact > a:hover,
.nav-contact > a.active {
  color: var(--s-menu-active, var(--c-dark));
}
/* Burger menu: titles left aligned with the chevron right after them, the
   list of projects indented under its title. */
.menu-nav .has-drop .group-title {
  display: flex;
  align-items: center;
  padding-bottom: 24px;
}
.menu-nav .has-drop .group-title > a,
.menu-nav .group-plain .group-title > a {
  padding-bottom: 0;
}
.menu-nav .group-plain .group-title {
  padding-bottom: 24px;
}
.menu-nav .group-title > a {
  font: 400 20px/28px var(--font-head);
  letter-spacing: 0.08em;
  color: var(--s-menu-active, var(--c-dark));
}
.menu-nav .group-title > a.active,
.menu-nav .group-title > a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.menu-nav .drop-toggle {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: -8px 0 -8px 4px;
}
.menu-nav .drop-toggle::before {
  top: 16px;
  left: 19px;
  width: 8px;
  height: 8px;
  border-width: 0 2px 2px 0;
  border-color: var(--s-menu-active, var(--c-dark));
}
.menu-nav .group-items {
  padding: 0 0 12px 16px;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  margin-bottom: 24px;
}
.menu-nav .group-items .item > a {
  font: 400 18px/26px var(--font-body);
  color: var(--s-menu, #666666);
  padding-bottom: 14px;
}
.menu-nav .group-items .item > a[aria-current="page"] {
  color: var(--s-menu-active, var(--c-dark));
  font-weight: 700;
}
.menu-nav .nav-foot {
  padding-top: 0;
}
.menu-nav .nav-contact {
  text-align: left;
}
.menu-nav .nav-contact > a {
  font: 400 20px/28px var(--font-body);
  color: var(--s-menu-active, var(--c-dark));
}

/* ---------------------------------------------------------------------- *
 * Project pages: section kicker and previous / next links
 * ---------------------------------------------------------------------- */
.page-kicker {
  font: 700 12px/14px var(--font-head);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-mid);
  padding-bottom: 16px;
}
.page-kicker a:hover {
  color: var(--c-hover);
}
.pager {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--max-text);
  margin: 0 auto;
  padding: 40px 0 0;
}
.pager-prev,
.pager-next {
  flex: 1 1 0;
  min-width: 0;
}
.pager-next {
  text-align: right;
}
.pager a {
  display: block;
}
.pager-dir {
  display: block;
  font: 700 12px/14px var(--font-head);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-mid);
  padding-bottom: 6px;
}
.pager-prev .pager-dir::before {
  content: "\2190\00a0";
}
.pager-next .pager-dir::after {
  content: "\00a0\2192";
}
.pager-title {
  display: block;
  font: 400 18px/24px var(--font-body);
  color: var(--s-text, var(--c-dark));
}
.pager a:hover .pager-title {
  color: var(--c-hover);
}
@media (max-width: 932px) {
  .pager {
    padding: 24px 5% 0;
  }
  .pager-title {
    font-size: 14px;
    line-height: 20px;
  }
}

/* ---------------------------------------------------------------------- *
 * Home page
 * ---------------------------------------------------------------------- */
.home-tagline {
  font: 400 18px/26px var(--font-body);
  color: var(--c-mid);
  text-align: center;
  padding: 52px 0 32px;
}
.home-section-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0 0;
}
.home-section-title {
  font: 700 14px/14px var(--font-head);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--s-heading, var(--c-dark));
}
.home-section-count {
  font: 400 14px/14px var(--font-body);
  color: var(--c-mid);
}
.home-section:hover .home-section-title {
  color: var(--c-hover);
}
.home-featured {
  padding-top: 40px;
}
.tile-link {
  cursor: pointer;
}
.tile-link:focus-visible .tile-caption,
.tile-link:hover .tile-caption {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: none) {
  .tile-link .tile-caption {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 932px) {
  .home-tagline {
    font-size: 14px;
    line-height: 20px;
    padding: 0 5% 20px;
  }
  .home-section-label {
    padding: 10px 5% 0;
  }
  .home-featured {
    padding-top: 20px;
  }
}

/* ---------------------------------------------------------------------- *
 * 404 page
 * ---------------------------------------------------------------------- */
.notfound-body {
  max-width: var(--max-text);
  margin: 0 auto;
  text-align: center;
  padding: 0 5% 80px;
}
.notfound-line {
  font: 400 18px/26px var(--font-body);
  color: var(--c-mid);
  padding-bottom: 32px;
}
.notfound-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
}
.notfound-links a {
  font: 700 14px/14px var(--font-head);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--s-heading, var(--c-dark));
}
.notfound-links a:hover {
  color: var(--c-mid);
}

/* ---------------------------------------------------------------------- *
 * Contact form
 * ---------------------------------------------------------------------- */
.contact {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 0 40px;
}
.contact-field {
  padding-bottom: 20px;
}
.contact-field label {
  display: block;
  font: 700 12px/14px var(--font-head);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-mid);
  padding-bottom: 8px;
}
.contact-field input,
.contact-field textarea {
  display: block;
  width: 100%;
  font: 400 16px/24px var(--font-body);
  color: var(--s-text, #000);
  background: var(--s-bg, #fff);
  border: 1px solid #cccccc;
  border-radius: 0;
  padding: 10px 12px;
}
.contact-field textarea {
  resize: vertical;
  min-height: 160px;
}
.contact-field input:focus-visible,
.contact-field textarea:focus-visible {
  outline: 2px solid var(--c-btn);
  outline-offset: 0;
}
.contact-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact .cf-turnstile {
  padding-bottom: 20px;
}
.contact-actions {
  text-align: center;
}
.contact-submit[disabled] {
  opacity: 0.6;
  cursor: default;
}
.contact-status {
  font: 400 16px/24px var(--font-body);
  text-align: center;
  padding: 0 0 20px;
}
.contact-live {
  padding: 20px 0 0;
}
.contact-sent,
.contact-error {
  display: none;
}
.contact-sent:target,
.contact-error:target,
.contact-status.is-shown {
  display: block;
}
.contact-error,
.contact-live.is-error {
  color: #b3261e;
}
.contact-error a {
  text-decoration: underline;
}
@media (max-width: 932px) {
  .contact {
    padding: 14px 5% 28px;
  }
}

/* ---------------------------------------------------------------------- *
 * Cards block (project cards, e.g. /ai)
 * The grid is the gallery .covers / .cover layout (two columns, one on
 * phones); only the heading, the label under each box and the static
 * variant are added here. The label type follows .home-section-label.
 * ---------------------------------------------------------------------- */
.block.cards {
  padding-bottom: 40px;
}
.cards-heading {
  max-width: var(--max-text);
  margin: 0 auto 40px;
  font: 700 24px/24px var(--font-head);
  text-transform: uppercase;
  color: var(--s-heading, var(--c-dark));
  text-align: center;
}
.cards-grid .cover-box {
  padding-bottom: 62.5%;
}
.card-static .card-label {
  padding-top: 0;
}
a.card:focus-visible {
  outline: 2px solid var(--s-heading, var(--c-dark));
  outline-offset: -2px;
}
.card-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0 0;
}
.card-title {
  margin: 0;
  font: 700 14px/14px var(--font-head);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--s-heading, var(--c-dark));
}
.card-text {
  font: 400 15px/22px var(--font-body);
  color: #666;
}
.card-url {
  font: 400 12px/12px var(--font-head);
  letter-spacing: 0.1em;
  color: var(--c-mid);
}
a.card:hover .card-title {
  color: var(--c-hover);
}
.card-static {
  cursor: default;
}
.card-static:hover .cover-img::after {
  opacity: 0;
}
@media (max-width: 932px) {
  .block.cards {
    padding-bottom: 20px;
  }
  .cards-heading {
    font-size: 18px;
    line-height: 18px;
    margin-bottom: 20px;
    padding: 0 5%;
  }
  .card-label {
    padding: 10px 5% 0;
  }
}
@media (max-width: 540px) {
  .block.cards {
    padding-bottom: 18px;
  }
  .cards-heading {
    font-size: 15px;
    line-height: 15px;
    margin-bottom: 18px;
  }
}