/* EB Garamond, self-hosted (SIL Open Font License), latin + latin-ext only */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/eb-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/eb-garamond-italic-latin.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: 'EB Garamond';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/eb-garamond-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/eb-garamond-normal-latin.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;
}

/* Photo site. White page, EB Garamond, photos big and close. Measured from refs (Maximilian Virgili, Heidi Holma). */
:root {
  --bg: #fff;
  --ink: #141414;
  --muted: #6b6b6b;
  --gap: 28px;
  --side: 36px;
}
:root[data-theme=dark] { --bg: #111; --ink: #e8e6e3; --muted: #9a9894; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.5 "EB Garamond", Garamond, "Times New Roman", serif;
}
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
img { display: block; width: 100%; height: auto; }

/* top bar: name left, menu words right */
.top {
  display: flex; align-items: center; gap: 22px;
  padding: 26px var(--side) 34px;
}
.name { margin-right: auto; font-size: 20px; font-weight: 500; letter-spacing: .01em; }
nav { display: flex; gap: 26px; font-size: 17px; }
nav a[aria-current=page] { font-style: italic; }
.menu-btn { display: none; }
/* black / white switch: a small circle, half filled */
.theme-btn {
  width: 13px; height: 13px; padding: 0; border: 1px solid var(--ink); border-radius: 50%; cursor: pointer;
  background: linear-gradient(90deg, var(--ink) 50%, transparent 50%);
}

main { padding: 0 var(--side); }

/* home grid: 3 across, same crop so rows line up */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.cell img { aspect-ratio: 3 / 2; object-fit: cover; }
.cap { display: block; margin-top: 7px; font-size: 14px; font-style: italic; color: var(--muted); }

/* series page */
.intro { max-width: 34em; margin: 10px 0 70px; }
h1 { font-size: 30px; font-weight: 400; margin: 0 0 2px; }
.where { margin: 0 0 22px; font-style: italic; color: var(--muted); }
.intro p, .text p { margin: 0 0 1em; }
.story { display: flex; flex-direction: column; align-items: center; gap: 90px; }
.story figure { margin: 0; width: 100%; max-width: 1100px; }
.story figure img { max-height: 88vh; width: auto; max-width: 100%; margin: 0 auto; }
.text { max-width: 34em; align-self: flex-start; }
.poem { white-space: pre-line; font-style: italic; }
.next { margin: 110px 0 0; }

/* about */
.about { max-width: 34em; margin-top: 10px; }
.about h2 { font-size: 17px; font-weight: 500; margin: 2em 0 .4em; }
.about table { border-collapse: collapse; }
.about td { padding: 2px 22px 2px 0; vertical-align: top; }
.about td:first-child { color: var(--muted); white-space: nowrap; }

footer { padding: 90px var(--side) 34px; font-size: 14px; color: var(--muted); }

/* phone: one column, menu becomes one button */
@media (max-width: 700px) {
  :root { --side: 16px; --gap: 22px; }
  .top { flex-wrap: wrap; padding: 18px var(--side) 22px; }
  .menu-btn {
    display: block; background: none; border: 0; padding: 4px 0; font: inherit; color: inherit; cursor: pointer;
  }
  nav { display: none; order: 3; width: 100%; flex-direction: column; gap: 6px; padding-top: 14px; font-size: 20px; }
  nav.open { display: flex; }
  .grid { grid-template-columns: 1fr; }
  .story { gap: 48px; }
  .story figure img { max-height: none; width: 100%; }
  .intro { margin-bottom: 44px; }
}