/* Beau Hunter — recreation of the WordPress.com "Storia" theme as it ran on beau-hunter.com:
   white page, #212121 ink, Nimbus Sans, black-and-white photos, 520px reading column. */
@font-face { font-family: "Nimbus Sans"; font-style: normal; font-weight: 400; font-display: fallback; src: url(fonts/nimbus-sans_normal_400.woff) format("woff"); }
@font-face { font-family: "Nimbus Sans"; font-style: normal; font-weight: 700; font-display: fallback; src: url(fonts/nimbus-sans_normal_700.woff) format("woff"); }
@font-face { font-family: "Nimbus Sans"; font-style: italic; font-weight: 400; font-display: fallback; src: url(fonts/nimbus-sans_italic_400.woff) format("woff"); }
@font-face { font-family: "Nimbus Sans"; font-style: italic; font-weight: 700; font-display: fallback; src: url(fonts/nimbus-sans_italic_700.woff) format("woff"); }

:root {
  --ink: #212121;
  --paper: #ffffff;
  --muted: #757575;
  --line: #e0e0e0;
  --font: "Nimbus Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gap: 24px;
  --content: 520px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .2em; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-weight: 700; line-height: 1.125; margin: 0; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 8px 16px; z-index: 10; }
.skip:focus { left: 16px; }

/* Photos are shown in black and white, as the theme's duotone filter did. */
.img { margin: 0; }
.img img { width: 100%; filter: grayscale(1); }

/* ---------------------------------------------------------------- home */
.home { padding-top: 64px; }
.home-grid { display: grid; gap: var(--gap); }
.home-photos { display: grid; gap: var(--gap); }
.col-wide, .col-narrow { display: grid; gap: var(--gap); align-content: start; }
.home-text { padding-inline: max(var(--gap), env(safe-area-inset-left, 0px)) max(var(--gap), env(safe-area-inset-right, 0px)); }
/* Tablets in portrait: keep the photo collage side by side, text below it. */
@media (min-width: 600px) { .home-photos { grid-template-columns: 2fr 1fr; } }
@media (min-width: 782px) {
  .home-grid { grid-template-columns: 3fr 1fr; }
  .home-text { padding-inline: 0 max(var(--gap), env(safe-area-inset-right, 0px)); }
}
.kicker { font-size: 14px; margin: 0; }
.home-title { font-size: clamp(18.4px, 1.152rem + ((1vw - 3.2px) * 1.554), 29px); line-height: 1.2; margin: 0; }
.intro { font-size: 14px; line-height: 1.7; margin: var(--gap) 0 0; max-width: 640px; }

.band { background: var(--ink); color: var(--paper); margin-top: var(--gap); text-align: center;
  padding: 48px max(var(--gap), env(safe-area-inset-right, 0px)); display: grid; justify-items: center; gap: 0; }
.band h2 { font-size: 27.648px; line-height: 1.125; }
.band p { margin: 16px 0 24px; }
.button { display: inline-block; background: var(--paper); color: var(--ink); text-decoration: none;
  font-size: 13.328px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 14px 28px; }
.button:hover { background: #f2f2f2; }

/* ---------------------------------------------------------------- header */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
  padding: 24px max(var(--gap), env(safe-area-inset-right, 0px)) 24px max(var(--gap), env(safe-area-inset-left, 0px)); position: relative; }
.site-title { margin: 0; font-size: 19.2px; font-weight: 700; line-height: 1.125; }
.site-title a { text-decoration: none; }
.site-title a:hover { text-decoration: underline; }
.menu summary { list-style: none; cursor: pointer; width: 24px; height: 24px; display: grid; align-content: center; gap: 5px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; height: 1.5px; background: var(--ink); width: 16px; justify-self: center; }
.menu summary span + span { width: 16px; }
.menu[open] summary span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu[open] summary span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.menu nav { position: absolute; right: max(var(--gap), env(safe-area-inset-right, 0px)); top: 64px; background: var(--paper);
  border: 1px solid var(--line); display: grid; padding: 8px 0; min-width: 180px; z-index: 5; }
.menu nav a { text-decoration: none; padding: 8px 20px; }
.menu nav a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- content column */
.content { padding: 24px max(var(--gap), env(safe-area-inset-right, 0px)) 80px max(var(--gap), env(safe-area-inset-left, 0px)); }
.content > * { max-width: var(--content); margin-inline: auto; }
.page-title, .post-title { font-size: clamp(22px, 1.4rem + 1vw, 29px); }
.page-title { margin-bottom: 48px; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 20px; color: var(--muted); font-size: 13.328px; margin: 0; }
.meta .flag { color: var(--ink); font-weight: 700; }

/* list of posts */
.entries { list-style: none; padding: 0; display: grid; gap: 72px; }
.entry { display: grid; gap: 0; }
.list-img { display: block; margin-bottom: 20px; }
.list-img img { aspect-ratio: 3 / 2; object-fit: cover; transition: filter .3s ease; }
.list-img:hover img { filter: grayscale(0); }
.entry-title { font-size: clamp(22px, 1.4rem + 1vw, 29px); margin-top: 6px; }
.entry-title a { text-decoration: none; }
.entry-title a:hover { text-decoration: underline; }
.entry-sub { font-style: italic; margin: 8px 0 0; }
.entry-dek { margin: 16px 0 0; }
.places { color: var(--muted); font-size: 13.328px; margin: 12px 0 0; }
.more { justify-self: start; margin-top: 20px; }

/* story page */
.post-title { margin-bottom: 16px; }
.subtitle { font-size: 23.04px; margin-top: 32px; }
article > .img { margin-top: 24px; }
.note { color: var(--muted); font-size: 13.328px; margin: 24px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.toc { margin-top: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toc summary { cursor: pointer; padding: 12px 0; font-weight: 700; }
.toc ol { margin: 0 0 16px; padding-left: 20px; font-size: 15px; line-height: 1.7; }
.post-body h3 { font-size: 23.04px; margin-top: 48px; scroll-margin-top: 24px; }
.post-body p { margin: 24px 0 0; }

.post-nav { display: grid; gap: 40px; margin-top: 80px; padding-top: 24px; border-top: 1px solid var(--line); }
@media (min-width: 600px) { .post-nav { grid-template-columns: 1fr 1fr; } .pn.next { text-align: right; } }
.pn-label { color: var(--muted); font-size: 13.328px; margin: 0 0 8px; }
.pn h2 { font-size: 20px; }
.pn h2 a { text-decoration: none; }
.pn h2 a:hover { text-decoration: underline; }
.pn p:last-child { font-size: 14px; line-height: 1.6; margin: 8px 0 0; color: var(--muted); }