/*
 * Look and feel of the former WordPress site, rewritten.
 * Derived from Hitchcock © Anders Norén, GPL-2.0-or-later
 * (https://github.com/andersnoren/hitchcock); this file is under the same licence.
 */

/* variable fonts: every weight in one file */
@font-face { font-family: "Vollkorn"; font-weight: 400 900; font-display: swap; src: url(fonts/vollkorn-v30-latin.woff2) format("woff2"); }
@font-face { font-family: "Vollkorn"; font-weight: 400 900; font-style: italic; font-display: swap; src: url(fonts/vollkorn-v30-latin-italic.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url(fonts/montserrat-v24-latin-regular.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url(fonts/montserrat-v24-latin-500.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url(fonts/montserrat-v24-latin-600.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url(fonts/montserrat-v24-latin-700.woff2) format("woff2"); }

:root {
  --dark: #1d1d1d;
  --dark-2: #2d2d2d;
  --dark-3: #3d3d3d;
  --grey: #999;
  --text: #333;
  --accent: #dd3333;
  --sans: "Montserrat", "Helvetica Neue", Helvetica, sans-serif;
  --serif: Vollkorn, "Times New Roman", Times, serif;
  --wide: 1040px;
  --measure: 520px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--dark);
  color: var(--dark);
  font: 16px/1.5 var(--serif);
  -webkit-text-size-adjust: 100%;
}

/*
Fonts as they were on WordPress, where the Fonts plugin and the Customizer CSS overrode Hitchcock's
(Montserrat everywhere, Droid Serif for the text): Vollkorn for everything, Montserrat only for
headings, menus and buttons; paragraphs and list items 20px unless a class sets another size.
A new element gets its font from these rules: no font-family of its own (see CLAUDE.md).
*/
h1, h2, h3, h4, h5, h6, .main-menu, .mobile-navigation, button { font-family: var(--sans); }
p, li { font-size: 20px; }

a { color: var(--accent); transition: color .1s ease-in-out, background .2s ease-in-out; }
a:hover { text-decoration: none; }

img { display: block; max-width: 100%; height: auto; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 10; padding: .5rem 1rem; background: #fff; color: var(--dark); font: 700 14px var(--sans); }

/* Navigation bar */

.navigation { background: var(--dark); position: relative; z-index: 3; }

.main-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 40px;
  margin: 0 auto;
  padding: 0;
  max-width: 90%;
  list-style: none;
}

.main-menu li { position: relative; }
.main-menu > li + li::before {
  content: "/";
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dark-3);
  font-size: 14px;
}

.main-menu a {
  display: block;
  padding: 23px 0;
  color: var(--grey);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}
.main-menu li:hover > a, .main-menu a[aria-current] { color: #fff; }

/* Drop-downs, opened on hover or keyboard focus */

.main-menu > .has-children > a { padding-right: 15px; }
.main-menu .has-children > a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -2px;
  border: 4px solid transparent;
  border-top-color: #757575;
}
.main-menu > .has-children:hover > a::after { border-top-color: #fff; }

.main-menu ul {
  position: absolute;
  z-index: 999;
  top: calc(100% + 5px);
  left: 50%;
  margin: 0 0 0 -100px;
  padding: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease-in-out, top .3s ease-in-out, visibility .3s;
}
.main-menu li:hover > ul, .main-menu li:focus-within > ul { top: 100%; opacity: 1; visibility: visible; }

.main-menu ul li { width: 200px; background: var(--dark-2); }
.main-menu ul li + li { border-top: 1px solid rgb(255 255 255 / .075); }
.main-menu ul a { padding: 16px; line-height: 1.3; text-align: center; text-transform: none; }

/* deeper levels open to the right */
.main-menu ul ul { top: 5px; left: 200px; margin: 0; }
.main-menu ul li:hover > ul, .main-menu ul li:focus-within > ul { top: 0; }
.main-menu ul ul li { background: var(--dark-3); }
.main-menu ul .has-children > a::after { right: 10px; margin-top: -4px; border-top-color: transparent; border-left-color: #757575; }

/* Small screens: the whole menu, expanded in a <details> */

.mobile-navigation { display: none; }
.mobile-navigation summary {
  padding: 18px 0;
  color: var(--grey);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.mobile-navigation summary::-webkit-details-marker { display: none; }
.mobile-navigation summary::before { content: "☰"; margin-right: .5em; }
.mobile-navigation[open] summary, .mobile-navigation summary:hover { color: #fff; }

.mobile-menu, .mobile-menu ul { margin: 0; padding: 0; list-style: none; }
.mobile-menu a {
  display: block;
  padding: 14px 5%;
  border-top: 1px solid rgb(255 255 255 / .075);
  color: var(--grey);
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}
.mobile-menu > li > a { font-weight: 600; text-transform: uppercase; }
.mobile-menu ul { background: var(--dark-2); }
.mobile-menu ul ul { background: var(--dark-3); }
.mobile-menu a:hover, .mobile-menu a[aria-current] { color: #fff; }

@media (max-width: 900px) {
  .main-menu { display: none; }
  .mobile-navigation { display: block; }
}

/* Banner: full viewport height behind the header, fading into the page background */

.header-image {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: 100vh;
  overflow: hidden;
}
.header-image img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top center; }
.header-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(29 29 29 / .2), var(--dark));
}

.header {
  position: relative;
  z-index: 2;
  width: 325px;
  max-width: 90%;
  margin: 0 auto;
  padding: 70px 0;
  text-align: center;
}

.blog-title {
  margin: 0;
  font-size: 1.75em;
  font-weight: 500;
  letter-spacing: .025em;
  line-height: 1.5;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgb(0 0 0 / .2);
}
.blog-title a { color: #fff; text-decoration: none; }

.blog-description {
  margin: 25px 0 0;
  color: #fff;
  line-height: 1.45;
  text-shadow: 0 1px 0 rgb(0 0 0 / .2);
}

.social-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
}
.social-menu a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--dark-2);
  color: #fff;
}
.social-menu a:hover { background: var(--accent); }
.social-menu svg { width: 16px; height: 16px; fill: currentColor; }

/* Content card */

/* container: lets gaps be a share of its width (cqi), in both directions */
main { position: relative; z-index: 2; width: var(--wide); max-width: 90%; margin: 0 auto; container-type: inline-size; }

.post-container { padding-bottom: 90px; background: #fff; }

.featured-media { margin: 0; }
.featured-media img { width: 100%; }

.post-header { width: 90%; margin: 0 auto; padding: 80px 0; text-align: center; }
.post-date { margin: 0 0 10px; color: #757575; font-size: .875em; font-weight: 500; text-transform: uppercase; }
.post-draft { display: inline-block; margin: 0 0 15px; padding: 4px 10px; border: 2px solid var(--accent); color: var(--accent); font-size: .75em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.post-title { margin: 0; font-size: 2.5em; font-weight: 700; line-height: 1.2; text-transform: uppercase; }

.post-content, .post-meta { width: var(--measure); max-width: 85%; margin: 0 auto; }
.post-content { color: var(--text); }

.post-content p, .post-content ul, .post-content ol, .post-content blockquote { margin: 0 0 1.25em; line-height: 1.5; }
.post-content ul, .post-content ol { padding-left: 1.5em; }
.post-content li + li { margin-top: .5em; }
.post-content > :last-child { margin-bottom: 0; }

.post-content figure { margin: 0 0 1.25em; }
.post-content figure img { width: 100%; }
.post-content figcaption { margin-top: .75em; color: #666; font: italic 14px/1.2 var(--serif); text-align: center; }

.post-content h2, .post-content h3, .post-content h4 {
  margin: 50px 0 25px;
  color: var(--dark);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
.post-content h2 { font-size: 1.875em; }
.post-content h3 { font-size: 1.5em; font-weight: 600; }
.post-content h4 { font-size: 1.25em; font-weight: 600; }

/* Post meta: tags, links to the newer and older posts */

.post-meta { margin-top: 40px; color: #757575; font-size: 14px; font-weight: 500; }
.post-meta a { color: #757575; text-decoration: none; }
.post-meta a:hover { text-decoration: underline; }
.tags { margin: 0; }
.tags a { margin-right: 5px; }

.post-navigation { display: flex; justify-content: space-between; margin-top: 30px; padding-top: 10px; border-top: 1px solid #ddd; }
.post-navigation a { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; text-transform: uppercase; }
.post-navigation a:hover { color: #666; }
.post-nav-older { margin-left: auto; }
.post-navigation svg { width: 9px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; }

/* wide screens: tabs on the sides of the window */
@media (min-width: 900px) {
  .post-navigation { display: block; margin: 0; padding: 0; border: 0; }
  .post-navigation a {
    position: fixed;
    z-index: 3;
    top: 50%;
    justify-content: center;
    width: 45px;
    height: 200px;
    margin-top: -100px;
    background: var(--dark-2);
    color: #fff;
    transition: width .1s ease-in-out;
  }
  .post-navigation a:hover { width: 50px; color: #fff; text-decoration: none; }
  .post-navigation span { position: absolute; left: -9999px; }
  .post-navigation svg { width: 18px; height: 36px; stroke-width: 2.5; }
  .post-nav-newer { left: 0; }
  .post-nav-older { right: 0; }
}

/* Blog: grid of square previews, 3 columns, then 2, then 1 */

.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.95cqi; }

.post-preview {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: #fff;
  color: #fff;
  text-decoration: none;
}
.post-preview img { width: 100%; height: 100%; object-fit: cover; }

.post-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  transition: opacity .3s ease-in-out, padding .3s ease-in-out;
}
.has-image .post-overlay { padding-bottom: 35px; background: rgb(0 0 0 / .75); opacity: 0; }
.has-image:hover .post-overlay, .has-image:focus-visible .post-overlay { padding-bottom: 30px; opacity: 1; }

.archive-post-date {
  margin: 0 0 5px;
  color: #757575;
  font-size: .875em;
  font-weight: 600;
  letter-spacing: .015em;
  text-transform: uppercase;
}
.has-image .archive-post-date { color: rgb(255 255 255 / .5); }

.archive-post-title {
  margin: 0;
  color: #222;
  font-size: 1.375em;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  word-break: break-word;
}
.has-image .archive-post-title { color: #fff; }

/* no hover on touch screens: titles always shown */
@media (hover: none) {
  .has-image .post-overlay { padding-bottom: 30px; background: rgb(0 0 0 / .6); opacity: 1; }
}

/* Galleries: justified rows wider than the text, as Jetpack tiled galleries */

/* 90% of the content card, centred on the text column */
.post-content .gallery { display: flex; flex-direction: column; gap: 4px; width: 90cqi; margin: 0 0 1.25em calc(50% - 45cqi); }
.gallery-row { display: flex; gap: 4px; }
/* widths in proportion to aspect ratios (set by the template): the photos of a row share a height;
   scaled up, as flex-grow values summing to less than 1 leave part of the row empty */
.post-content .gallery-row figure { position: relative; flex: calc(var(--ratio) * 1000) 1 0; min-width: 0; margin: 0; }
/* a photo alone in its row (a portrait) is at most 90% of the screen high, centred */
.post-content .gallery-row figure:only-child { flex: none; width: min(100%, 90vh * var(--ratio)); margin: 0 auto; }
/* with caption="...", under the whole gallery, as the caption of a single photo */
.post-content .gallery > figcaption { margin-top: calc(.75em - 4px); }
/* in the page only with captions=true; always in the full-screen viewer */
.gallery-row figcaption { display: none; }
.post-content .has-captions .gallery-row figcaption {
  position: absolute;
  inset: auto 0 0;
  display: block;
  margin: 0;
  padding: 30px 10px 8px;
  background: linear-gradient(to top, rgb(0 0 0 / .4), transparent);
  color: #fff;
  font: italic 13px/1.4 var(--serif);
  text-align: center;
  pointer-events: none;
}
.has-captions .gallery-row figcaption a { color: #fff; pointer-events: auto; }

/* Galleries page: pages as tiles in justified rows, as the Visual Portfolio blocks on WordPress */

.tiles { display: flex; flex-wrap: wrap; gap: 15px; margin: 0 0 1.25em; }
/* widths grow from the row height in proportion to aspect ratios (set by the template): the tiles of a row share a height */
.tile { position: relative; flex: calc(var(--ratio) * 1000) 1 calc(var(--ratio) * var(--row-height)); min-width: 0; overflow: hidden; color: #fff; text-decoration: none; }
.tile img { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio); object-fit: cover; }
.tile .post-overlay { align-items: center; justify-content: center; padding: 15px; text-align: center; }
.tile:hover .post-overlay, .tile:focus-visible .post-overlay { padding: 15px; }
.tiles .tile-title { margin: 0; color: #fff; font-size: 1em; font-weight: 700; word-break: break-word; }

/* Full-screen viewer of gallery photos (assets/gallery.js) */

html:has(.lightbox[open]) { overflow: hidden; }
.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: #000;
}
.lightbox[open] { display: flex; }
.lightbox::backdrop { background: transparent; }
/* the photo above a bar of 64px at the bottom, whether it holds a caption or not */
.lightbox figure { position: relative; display: grid; grid-template-rows: 1fr 64px; place-items: center; width: 100%; margin: 0; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 64px); object-fit: contain; }
/* as on WordPress (Jetpack): one line in the middle two thirds of the bar, cut if too long */
.lightbox figcaption {
  grid-row: 2;
  width: calc(100% * 2 / 3);
  overflow: hidden;
  color: var(--grey);
  /* Jetpack's font, overridden on WordPress by the paragraph style of the Customizer CSS */
  font: 20px/1.5 var(--serif);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lightbox figcaption a { color: #fff; }
/* a cut caption opens on a click, over the bottom of the photo */
.lightbox figcaption.is-cut { cursor: pointer; }
.lightbox figcaption.is-open {
  /* positioned in the whole figure rather than in its row */
  grid-row: auto;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 50%;
  max-height: 60%;
  overflow-y: auto;
  padding: 20px 30px;
  background: rgb(0 0 0 / .85);
  color: #ccc;
  text-align: left;
  white-space: pre-line;
  transform: translateX(-50%);
}
/* as on WordPress (Jetpack): small black squares, faded until hovered or focused */
.lightbox button {
  position: absolute;
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  opacity: .5;
  transition: opacity .5s ease-out;
}
.lightbox button:hover, .lightbox button:focus-visible { opacity: 1; }
.lightbox button[hidden] { display: none; }
.lightbox svg { width: 28px; height: 28px; padding: 4px; border-radius: 4px; background: #000; fill: none; stroke: currentColor; stroke-width: 2; }
/* click areas larger than the squares */
.lightbox-prev, .lightbox-next { top: 50%; width: 108px; height: 70px; margin-top: -35px; }
.lightbox-prev { left: 0; }
.lightbox-next { right: 0; justify-content: flex-end; }
.lightbox-prev svg { margin-left: 40px; }
.lightbox-next svg { margin-right: 40px; }
.lightbox-close { top: 18px; right: 30px; justify-content: center; width: 45px; height: 45px; }

/* Tag pages */

.archive-header { margin-bottom: 70px; color: #fff; text-align: center; text-shadow: 0 1px 0 rgb(0 0 0 / .1); }
.archive-title-prefix { margin: 0 0 10px; font-size: .875em; font-weight: 500; text-transform: uppercase; }
.archive-title { margin: 0; font-size: 1.375em; font-weight: 600; text-transform: uppercase; }
.archive-description { max-width: 640px; margin: 20px auto 0; padding: 0 20px; }
.archive-description p:last-child { margin-bottom: 0; }

.post-content .term-list { padding: 0; list-style: none; text-align: center; }
.term-list li { display: inline-block; margin: 0 .5em .5em 0; font: inherit; }
.term-list a { text-decoration: none; }
.term-list a::before, .tags a::before { content: "#"; }
.term-list span { color: var(--grey); font-size: .8em; }

/* Pagination */

.archive-nav { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 60px; color: var(--dark-2); }
.archive-nav a { color: #fff; }
.archive-nav a:hover { color: var(--accent); }
.archive-nav svg { display: block; width: 16px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.5; }
/* Hitchcock's own font for it, a light Helvetica */
.archive-nav .sep { font: 300 40px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* Footer */

.credits { position: relative; z-index: 2; padding: 60px 16px; text-align: center; text-transform: uppercase; }
.credits p { margin: 0; }
.credits a { text-decoration: none; }
.credits p:first-child { color: #fff; font-size: 1.175em; font-weight: 600; letter-spacing: .025em; }
.credits p:first-child a { color: #fff; }
.credits p:first-child a:hover { color: var(--accent); }
.credits p + p { margin-top: 12px; color: #666; font-size: .825em; font-weight: 500; }
.credits p + p a { color: #666; }
.credits p + p a:hover { color: var(--grey); }

/* Small screens */

@media (max-width: 1154px) {
  .posts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .main-menu { gap: 0 30px; }
  .main-menu li + li::before { left: -19px; }
  .main-menu a { padding: 18px 0; }
  .header { padding: 30px 0; }
  .credits { padding: 30px 16px; }
  .blog-title { font-size: 1.5em; }
  .blog-description { margin-top: 15px; font-size: .875em; }
  .social-menu { margin-top: 15px; }
  main { max-width: 100%; }
  .post-header { padding: 40px 0; max-width: 85%; }
  .post-title { font-size: 2em; }
  .post-container { padding-bottom: 50px; }
  .posts { grid-template-columns: 1fr; gap: 4.5cqi; max-width: 90%; margin: 0 auto; }
  .post-overlay, .has-image:hover .post-overlay, .has-image:focus-visible .post-overlay { padding: 20px; }
  .has-image .post-overlay { padding-bottom: 25px; }
  .archive-header { margin-bottom: 40px; }
  .archive-nav { margin-top: 40px; }
  /* arrows closer to the edges, over the photo */
  .lightbox figure { padding-top: 50px; }
  .lightbox img { max-height: calc(100dvh - 114px); }
  .lightbox figcaption { width: 100%; padding: 0 16px; }
  .lightbox figcaption.is-open { padding: 20px 16px; }
  .lightbox-prev, .lightbox-next { width: 60px; }
  .lightbox-prev svg { margin-left: 10px; }
  .lightbox-next svg { margin-right: 10px; }
  .lightbox-close { top: 0; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  a, .post-overlay, .post-navigation a, .lightbox button { transition: none; }
}