/* Anna by Anna Vives (lletraanna) – free for social and educational organisations */
@font-face {
  font-family: 'Anna';
  src: url('fonts/AnnaBeta-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Shared width for titles and running text on every page:
     42.5rem = 680px, about 62–65 characters of 21px Arial per line.
     In rem (not px) so it grows with the visitor's browser font size. */
  --text-width: 42.5rem;

  /* Type scale after Bringhurst (in rem so it follows the browser font size).
     One job per step:
       48 page title (H1) · 36 section heading (H2), big calendar date
       21 reading text: body, intros, captions, meta (Arial)
       16 secondary info: footer, staff bios (Arial)
     Anna only ever comes in three sizes: 48, 36 and 24 (menu, artist and staff names, past events, calendar month).
     24 instead of 21 because Anna runs smaller than Arial: 24 Anna sits well next to 21 Arial.
     On phones titles drop to 36, so there are only two. */
  --size-s: 1rem;         /* 16 */
  --size-body: 1.3125rem; /* 21 */
  --size-anna-s: 1.5rem;  /* 24: Anna's small size, it runs smaller than Arial (looks like 21 Arial) */
  --size-l: 2.25rem;      /* 36 */
  --size-xl: 3rem;        /* 48 */

  /* Headings in Anna; missing glyphs (– — ’) fall back to Arial */
  --font-display: 'Anna', Arial, Helvetica, sans-serif;
  --font-text: Arial, Helvetica, sans-serif;

  /* Space between an H2 and whatever follows it, on every page */
  --space-after-heading: 12px;

  /* Desktop: menu column on the left, content in the space to its right */
  --sidebar-width: 220px;
  --page-margin-right: 40px;
}


/* BASICS
   Content columns sit in the middle of the space right of the menu.
   Page titles, the intro text under them and the logo on phones are centered;
   captions are centered under their image; everything else (sections, lists, images) is left-aligned. */

/* Automatic hyphenation in all running text (needs lang="en" on <html>), for even line lengths,
   especially on narrow phone screens. Headings, the menu and job titles are never hyphenated (below). */
body {
  margin: 0;
  -webkit-text-size-adjust: 100%; /* phones keep our font sizes, no automatic resizing */
  text-size-adjust: 100%;
  font-family: var(--font-text);
  line-height: 1.45;
  -webkit-hyphens: auto;
  hyphens: auto;
  /* only words of 8+ letters, keeping at least 4 before and 3 after the break */
  hyphenate-limit-chars: 8 4 3;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 3;
}

/* Never hyphenated: headings and everything set in Anna, the menu, job titles */
h1,
h2,
nav,
.past-title,
.event-date,
.staff-role {
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* Anna is always set in capitals */
h1,
h2,
nav,
.event-date,
.past-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em; /* capitals need a little air */
  word-spacing: -0.2em;   /* Anna's word spaces are very wide */
}

h1,
h2 {
  max-width: var(--text-width);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance; /* even line lengths in multi-line headings */
}

h1 {
  margin: 0 auto;
  font-size: var(--size-xl);
  text-align: center;
}

h2 {
  margin: 0 0 var(--space-after-heading);
  font-size: var(--size-l);
}

/* The heading's bottom margin alone sets the gap below it */
h2 + *,
h2 + * > :first-child {
  margin-top: 0;
}

p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  /* no text-wrap: pretty here: Safari then stops hyphenating */
}

/* Short text (1–3 lines): balanced lines instead of one long and one short.
   Not for intros and bios: balancing narrows every line of a longer paragraph,
   so those fill the full column and use hyphenation instead. */
.staff-role,
.caption,
.calendar-empty,
.calendar-past li {
  text-wrap: balance;
}

/* One underline style for every link that has one */
a {
  color: black;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.nowrap {
  white-space: nowrap;
}

figure {
  margin: 0;
}

/* <picture> (WebP with fallback, site/snippets/img.php) adds no box of its own */
picture {
  display: contents;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 8px;
  z-index: 1000;
  padding: 10px 16px;
  background: #fff;
  color: #000;
  border: 2px solid #000;
  text-decoration: none;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(8px);
}


/* HEADER: logo and menu in a fixed column on the left */

header {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 24px 24px 40px;
  line-height: 1.2;
}

.header-logo {
  display: block;
  width: 130px;
  margin-bottom: 24px;
}

/* Same box for every logo, so the menu below never shifts between pages */
.header-logo img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: contain;
  object-position: left top;
}

nav {
  font-size: var(--size-anna-s);
  line-height: normal;
}

nav ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav a {
  padding: 4px 0;
}

nav a[aria-current="page"] {
  text-decoration: underline;
}

/* Gap before the social media links */
#primary-menu .nav-group-start {
  margin-top: 24px;
}

/* The heart menu button only exists on phones (see MOBILE) */
.nav-toggle {
  display: none;
}


/* PAGE LAYOUT */

.page-wrapper {
  display: flex;
  justify-content: center;
  margin-left: var(--sidebar-width);
  margin-right: var(--page-margin-right);
}

.gallery-page {
  width: 100%;
  max-width: 1600px;
  padding-top: 20px;
}

.article-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 1600px;
  box-sizing: border-box;
  padding-top: 20px;
  padding-bottom: 80px;
}

/* Title and intro on Home, Artists, Staff and artist pages */
.gallery-intro {
  width: 100%;
  max-width: var(--text-width);
  margin: 64px auto 24px;
}

/* Intro under a title (and the calendar's short message): centered like the title */
.gallery-intro > p,
.page-intro > p,
.artist-bio > p,
.calendar-empty {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Running text: reading size, never wider than the text column */
.post-paragraph,
.post-paragraph > p,
.about-section > p,
.gallery-intro > p,
.page-intro > p,
.artist-bio > p {
  font-size: var(--size-body);
}

.page-intro > p,
.post-paragraph > p,
.about-section > p,
.gallery-intro > p,
.artist-bio > p {
  max-width: var(--text-width);
}

.post-paragraph > :first-child {
  margin-top: 0;
}

.post-paragraph p a {
  text-decoration: underline;
}

.caption {
  margin-top: 0;
  padding-top: 6px;
  font-size: var(--size-body);
  line-height: 1.3;
  text-align: center; /* centered under its image */
}


/* IMAGES AND VIDEOS */

/* Images are at most 450px in either direction (img.php reserves the same size before loading) */
.post-image {
  display: block;
  width: auto;
  height: auto;
  max-width: min(450px, 100%);
  max-height: 450px;
  margin: 0 auto;
}

/* a video shows a light block until its first frame has loaded */
video.post-image {
  min-width: min(300px, 100%);
  min-height: 200px;
  background: #eee;
}

/* Grid of artworks and photos (Home, Artists, artist pages) */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 48px 24px;
  padding-top: 20px;
  padding-bottom: 80px;
}

.gallery-card {
  width: 100%;
  max-width: 500px;
}

/* a card is as wide as its image, and the caption follows that width */
.gallery-card:has(.post-image) {
  width: fit-content;
}

.gallery-card:has(.post-image) .caption {
  width: 100%;
}


/* People's names are in Anna capitals: under the covers on the Artists page,
   and on their own line above the title in the home gallery */
.caption-name {
  display: block;
}

.caption-name,
.artist-names .caption {
  font-family: var(--font-display);
  font-size: var(--size-anna-s);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  word-spacing: -0.2em;
  -webkit-hyphens: manual;
  hyphens: manual;
}


/* ARTIST PAGES: long bios (over 400 characters, set in artist.php) are smaller,
   in a narrower column so lines stay around 65 characters */
.artist-bio--long {
  max-width: 34rem;
  margin: 0 auto;
}

.artist-bio--long > p {
  font-size: var(--size-s);
  text-align: left;
}


/* TEXT PAGES (About us, Donate): a centered text column; headings, text, lists and images
   all start at its left edge. A new section starts at every heading (article.php). */
.article-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 64px;
}

.about-section {
  width: 100%;
  max-width: var(--text-width);
  margin: 0 auto 3rem;
}

/* A single image spans the text column (portrait images: at most 34rem tall, at the left edge);
   images in a row share the width (.about-images below) */
.article-block figure {
  width: fit-content;
  max-width: 100%;
  margin: 2.25rem 0;
}

.article-block figure .post-image {
  max-width: 100%;
  max-height: 34rem;
}

.article-block figure .caption {
  width: 100%;
}

/* Image blocks that follow each other: side by side, sharing the text width */
.about-images {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  margin: 2.25rem 0; /* same space around a row as around a single image */
}

.article-block .about-images > figure {
  max-width: calc(50% - 10px);
  margin: 0;
}

.about-images .post-image {
  max-width: 100%;
}

/* YouTube / Vimeo block: as wide as the text */
.article-block figure.video-embed {
  width: 100%;
  max-width: var(--text-width);
}

.video-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

/* Lists (e.g. Community Partners): no bullets, two columns */
.partner-list {
  columns: 2;
  max-width: var(--text-width);
  margin: 0.5em 0;
  padding-left: 0;
  font-size: var(--size-body);
  list-style: none;
}

.partner-list a {
  text-decoration: underline;
}


/* STAFF: grid of cards with photo, name, job title and bio */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 56px 32px;
  max-width: 960px;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 80px;
}

.staff-photo {
  display: block;
  width: 100%;
  height: auto; /* the photo's own height (in the HTML) would otherwise make it huge */
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Anna's small size, like the artist names */
.staff-card .staff-name {
  margin-top: 16px;
  font-size: var(--size-anna-s);
}

.staff-role {
  margin: 0;
  font-size: var(--size-body);
  line-height: 1.3;
}

/* 16, not the 21 reading size: gives a better line length (~35 characters) in narrow cards */
.staff-bio p {
  margin-top: 12px;
  font-size: var(--size-s);
}


/* CALENDAR: big date on the left, event on the right */
.calendar {
  width: 100%;
  max-width: 760px;
  margin-top: 64px;
}

.calendar-empty {
  margin-top: 32px;
  font-size: var(--size-body);
}

.calendar-empty a {
  text-decoration: underline;
}

.event {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0 32px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid #000;
}

.event-date {
  margin: 0;
  line-height: 1;
}

.event-month {
  display: block;
  font-size: var(--size-anna-s);
}

.event-day {
  display: block;
  font-size: var(--size-l);
}

.event h2 {
  max-width: none;
}

.event-meta {
  margin: 0;
  font-size: var(--size-body);
  line-height: 1.3;
}

.event figure {
  margin: 24px 0;
}

.event .post-image {
  margin: 0;
}

.calendar-past {
  margin-top: 80px;
}

.calendar-past ul {
  max-width: var(--text-width);
  margin: 0;
  padding: 0;
  font-size: var(--size-body);
  list-style: none;
}

.calendar-past li + li {
  margin-top: 24px;
}

.past-title {
  font-size: var(--size-anna-s);
}


/* FOOTER: Visit, Contact, Follow, and Credits across two columns */
.site-footer {
  margin-left: var(--sidebar-width);
  margin-right: var(--page-margin-right);
  padding: 32px 24px 48px;
  border-top: 1px solid #000;
  font-size: var(--size-s);
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px 32px;
}

.footer-column address {
  font-style: normal;
}

.footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Footer headings are labels, set in Arial */
.site-footer .footer-heading {
  margin: 0 0 6px;
  font-family: var(--font-text);
  font-size: var(--size-s);
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  word-spacing: normal;
}

.site-footer a {
  text-decoration: underline;
}

.colophon {
  grid-column: span 2;
}

.colophon p {
  margin: 0;
}

@media (max-width: 1100px) {
  .footer-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .colophon {
    grid-column: 1 / -1;
  }
}


/* MOBILE */

@media (max-width: 768px) {
  /* Page titles the same size as the menu links and section headings (36px) */
  h1 {
    font-size: var(--size-l);
  }

  /* Logo centered above the page title; heart menu button top right */
  header {
    position: static;
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
    padding: 16px 16px 0;
    text-align: center;
  }

  .header-logo {
    display: inline-block;
    width: auto;
    margin: 0;
  }

  .header-logo img {
    width: auto;
  }

  /* the open menu is centered, like the logo */
  nav ul {
    align-items: center;
    text-align: center;
  }

  /* images that follow each other are stacked, not side by side */
  .about-images {
    flex-direction: column;
  }

  .article-block .about-images > figure {
    max-width: 100%;
  }

  /* Stays in the corner while scrolling; a bit further in from the right edge than the page text,
     because the heart's widest point is near its top */
  .nav-toggle {
    position: fixed;
    top: 16px;
    right: 22px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 56px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; /* no blue square on tap */
    touch-action: manipulation; /* two quick taps (open, close) never zoom the page */
  }

  /* the red heart (inline in the page, so it shows up together with the text); the lines sit on top of it */
  .nav-toggle svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* focus ring only for keyboard users, not after a tap */
  .nav-toggle:focus:not(:focus-visible) {
    outline: none;
  }

  /* Three lines; they turn into an X when the menu is open */
  .nav-toggle-icon,
  .nav-toggle-icon::before,
  .nav-toggle-icon::after {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 1px; /* rounded ends */
    background: #000;
    transition: transform 0.2s, background 0.2s;
  }

  .nav-toggle-icon {
    position: relative;
    z-index: 1;
    top: -3px; /* optical center of the heart */
  }

  .nav-toggle-icon::before,
  .nav-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .nav-toggle-icon::before {
    top: -7px;
  }

  .nav-toggle-icon::after {
    top: 7px;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-icon {
    background: transparent;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::before {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::after {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Heartbeat when tapped (script.js adds .beat) */
  .nav-toggle.beat {
    animation: heartbeat 0.45s ease-in-out;
  }

  @keyframes heartbeat {
    /* squash and stretch: wide and flat, then tall and narrow, then it settles */
    0%   { transform: scale(1, 1); }
    30%  { transform: scale(1.22, 0.86); }
    55%  { transform: scale(0.92, 1.12); }
    78%  { transform: scale(1.04, 0.97); }
    100% { transform: scale(1, 1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-toggle.beat {
      animation: none;
    }

    .nav-toggle-icon,
    .nav-toggle-icon::before,
    .nav-toggle-icon::after {
      transition: none;
    }
  }

  /* The open menu fills the screen, with large links */
  nav ul {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    gap: 0;
    padding: 72px 24px 32px;
    overflow-y: auto;
    background: #fff;
    /* 36px, but smaller on short screens so all 11 links always fit without scrolling:
       (screen height - 216px of padding, gaps and link padding) / 11 lines of 1.2 */
    font-size: min(var(--size-l), calc((100dvh - 216px) / 13.2));
    line-height: 1.2;
  }

  nav ul.is-open {
    display: flex;
  }

  nav ul a {
    display: block;
    padding: 4px 0;
  }

  /* no scrolling behind the open menu */
  body.nav-open {
    overflow: hidden;
  }

  .page-wrapper {
    margin-left: 0;
    margin-right: 0;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .gallery-page {
    padding-top: 16px;
  }

  .gallery-grid,
  .article-layout {
    gap: 24px;
    padding: 16px 0 60px;
  }

  .gallery-card,
  .gallery-intro,
  .article-block {
    width: 100%;
    max-width: 100%;
  }

  .gallery-intro,
  .article-block,
  .calendar {
    margin-top: 0;
  }

  .event {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .event-month,
  .event-day {
    display: inline;
  }

  /* extra room at the bottom, so the last lines clear the rounded screen corners on phones */
  .site-footer {
    margin-left: 0;
    margin-right: 0;
    padding: 24px 16px calc(48px + env(safe-area-inset-bottom, 0px));
  }

  .footer-columns {
    grid-template-columns: 1fr;
  }
}