/* =========================================================================
   Teresa Lawler — site stylesheet
   Shared by every page. Page-specific bits are kept to a minimum.
   ========================================================================= */

/* ---- Fonts ------------------------------------------------------------
   Served from /assets/fonts (not from Google) so the site looks the same
   everywhere and loads faster. All three are open-licence fonts (SIL OFL).
   Karla and Caveat are variable fonts: one file covers every weight. */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/karla-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/caveat-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');
}

/* ---- Design tokens ---------------------------------------------------- */
:root {
  --bg:            #fdf7ea;
  --paper-card:    #fdfbf6;
  --paper-hi:      #f4efe4;

  --ink:           #2c2823;
  --ink-soft:      #5b5347;
  --ink-faint:     #756b5b;
  --ink-muted:     #756b5b;
  --ink-nav:       #6b6253;

  --teal:          oklch(0.66 0.09 200);
  --teal-deep:     oklch(0.60 0.11 200);
  --teal-text:     oklch(0.46 0.08 200);
  --on-teal:       #163137;
  --dark:          #10262b;

  --rule:          #e3d7c1;
  --border-card:   #ece3d2;

  --font-body:   'Karla', Helvetica, Arial, sans-serif;
  --font-display:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-hand:   'Caveat', 'Segoe Script', cursive;

  --shell-max:   80rem;
  --gutter:      3rem;

  --shadow-card: 0 0.875rem 1.875rem -1.375rem rgba(60, 45, 20, 0.45);
  --shadow-page: 0 1.875rem 3.75rem -2.5rem rgba(0, 0, 0, 0.35);
}

/* ---- Reset / base --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Everything is sized in rem, so this one rule is the site's zoom dial.
   Up to a 1536px-wide window it stays at 100% (1rem = 16px, or whatever
   size the visitor's browser is set to); from there it eases up to 125%
   by about 1920px, so a big monitor shows the page the way a laptop with
   125% display scaling does. Phone/tablet breakpoints are real px. */
html {
  -webkit-text-size-adjust: 100%;
  font-size: clamp(100%, 1.04vw, 125%);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.25rem; }

::selection { background: #d8cfc0; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; }

:focus-visible {
  outline: 0.125rem solid var(--teal-deep);
  outline-offset: 0.1875rem;
  border-radius: 0.125rem;
}

.skip-link {
  position: absolute;
  left: -624.9375rem;
  top: 0;
  background: var(--dark);
  color: var(--paper-hi);
  padding: 0.625rem 1.125rem;
  z-index: 100;
}
.skip-link:focus { left: 0.75rem; top: 0.75rem; }

/* ---- Page shell (the floating cream panel) ------------------------- */
.shell {
  width: min(var(--shell-max), 100%);
  margin: 0 auto;
  background: var(--bg);
  box-shadow: var(--shadow-page);
}

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0 var(--gutter);
}
.rule--pad-sm { margin-top: 1.25rem; }
.rule--pad-lg { margin-top: 2.75rem; }
/* Tighter footer gap on pages that end with the marquee line, so it
   doesn't float so far above the divider before the footer. */
.rule--after-marquee { margin-top: 1.375rem; }

/* =========================================================================
   Header + primary navigation
   ========================================================================= */
.site-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.125rem;
  flex-wrap: wrap;
  padding: 0.8125rem var(--gutter) 0.5625rem;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 80;
}
.site-header::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1px;
  background: var(--rule);
}

.brand {
  font-family: var(--font-hand);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--ink);
  transform: rotate(-1.2deg);
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }

.nav-toggle {
  display: none;
  border: 0;
  background: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--dark);
}
.nav-toggle__box { display: block; width: 1.5rem; height: 0.125rem; background: currentColor; position: relative; }
.nav-toggle__box::before,
.nav-toggle__box::after {
  content: "";
  position: absolute;
  left: 0;
  width: 1.5rem;
  height: 0.125rem;
  background: currentColor;
}
.nav-toggle__box::before { top: -0.4375rem; }
.nav-toggle__box::after  { top: 0.4375rem; }

.primary-nav__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0.375rem;
  display: flex;
  align-items: baseline;
  gap: 2rem;
  font-size: 0.78125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

.primary-nav__list > li { position: relative; }

.primary-nav__list a {
  display: inline-block;
  padding-bottom: 0.3125rem;
  border-bottom: 1px solid transparent;
  color: var(--ink-nav);
  white-space: nowrap;
}
.primary-nav__list a:hover { text-decoration: none; color: var(--dark); }

.primary-nav__list a[aria-current="page"] {
  color: var(--dark);
  border-bottom: 0.125rem solid var(--teal-deep);
}

/* ---- Dropdown submenu (Glass / Watercolors) ---------------------- */
.has-submenu > .submenu-row { display: flex; align-items: baseline; gap: 0.25rem; }

.submenu-toggle {
  border: 0;
  background: none;
  padding: 0 0.125rem 0.3125rem;
  cursor: pointer;
  color: var(--ink-nav);
  font: inherit;
  line-height: 1;
}
.submenu-toggle::after {
  content: "";
  display: inline-block;
  width: 0.375rem; height: 0.375rem;
  border-right: 0.09375rem solid currentColor;
  border-bottom: 0.09375rem solid currentColor;
  transform: translateY(-0.125rem) rotate(45deg);
  transition: transform 0.15s ease;
}
.has-submenu[data-open="true"] .submenu-toggle::after { transform: translateY(1px) rotate(-135deg); }

.submenu {
  list-style: none;
  margin: 0;
  padding: 0.625rem 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 15rem;
  background: var(--paper-card);
  border: 1px solid var(--border-card);
  box-shadow: 0 1.125rem 2.125rem -1.25rem rgba(60, 45, 20, 0.5);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.375rem);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s;
}

.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu,
.has-submenu[data-open="true"] .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.submenu a {
  display: block;
  padding: 0.4375rem 1.25rem;
  border: 0;
  letter-spacing: 0.10em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.submenu a:hover { background: var(--bg); color: var(--dark); }

/* Current-page cue inside a dropdown: a soft tint fill instead of the
   underline/side-bar used for the top-level nav items. */
.primary-nav__list .submenu a[aria-current="page"] {
  border-bottom: 0;
  box-shadow: none;
  padding-left: 1.25rem;
  background: oklch(0.91 0.035 200);
  color: var(--dark);
  font-weight: 600;
}
.primary-nav__list .submenu a[aria-current="page"]:hover {
  background: oklch(0.88 0.045 200);
  color: var(--dark);
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2.75rem;
  align-items: center;
  margin: 1.125rem var(--gutter) 0.875rem;
  padding: 3.5rem 4rem 3.125rem 7.375rem;
  background: var(--teal);
  border-radius: 16.25rem 2.5rem 16.25rem 2.5rem;
}

.hero__quote {
  font-size: clamp(2.1rem, 1.2rem + 3vw, 3.625rem);
  line-height: 1.06;
  margin: 0 0 1.125rem;
  color: var(--dark);
  max-width: 30ch;
  text-wrap: pretty;
}
.hero__quote em { color: var(--paper-hi); font-style: italic; }
.hero__attr {
  font-family: var(--font-hand);
  font-size: 1.625rem;
  color: var(--on-teal);
  white-space: nowrap;
  margin-left: 1rem;
}

.hero__lead {
  font-size: 1.09375rem;
  line-height: 1.7;
  color: var(--on-teal);
  margin: 0;
  max-width: 50ch;
  text-wrap: pretty;
}

.hero__figure {
  margin: 0;
  justify-self: center;
  width: min(21.25rem, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 1.625rem 3.125rem -1.5rem rgba(6, 32, 38, 0.6);
}
.hero__figure img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================================
   Section intro (label + display line)
   ========================================================================= */
.section-intro { padding: 1.5rem var(--gutter) 0; }
.eyebrow {
  font-family: var(--font-hand);
  font-size: 1.6875rem;
  color: var(--teal-text);
  margin: 0;
}
.section-intro__line {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.125rem);
  line-height: 1.2;
  max-width: 30ch;
  margin: 0.25rem 0 0;
  text-wrap: balance;   /* two even lines, never a lone "I'm after." */
}

/* =========================================================================
   Feature rows (image + text, alternating)
   ========================================================================= */
.feature {
  display: grid;
  gap: 3.25rem;
  align-items: center;
  padding: 2rem var(--gutter) 0;
}
.feature + .feature { padding-top: 4rem; }

.feature--image-left  { grid-template-columns: min(30rem, 45%) 1fr; }
.feature--image-right { grid-template-columns: 0.95fr 1.05fr; }
.feature--image-right .feature__figure { order: 2; }

.feature__figure {
  margin: 0;
  background: var(--paper-card);
  padding: 0.875rem 0.875rem 1.125rem;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-card);
}
.feature__figure img { width: 100%; object-fit: cover; }
.feature__figure--wide  img { aspect-ratio: 4 / 3; }
.feature__figure--portrait {
  max-width: 30rem;
}
.feature__figure--portrait img { aspect-ratio: 3 / 4; }

.feature__label {
  font-family: var(--font-hand);
  font-size: 1.5625rem;
  color: var(--teal-text);
}
.feature__title {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.875rem);
  line-height: 1.14;
  margin: 0.375rem 0 1rem;
  max-width: 22ch;
  text-wrap: pretty;
}
.feature__text p {
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0;
  text-wrap: pretty;
}

/* =========================================================================
   Marquee line of short phrases
   ========================================================================= */
.marquee {
  display: flex;
  gap: 1.625rem;
  flex-wrap: wrap;
  padding: 2.125rem var(--gutter) 0;
  margin-bottom: 0;
  font-family: var(--font-hand);
  font-size: 1.375rem;
  color: var(--ink-muted);
}

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
  margin: 1.625rem var(--gutter) 0;
  padding-bottom: 4rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.875rem;
  flex-wrap: wrap;
}
.site-footer__name {
  font-family: var(--font-hand);
  font-size: 1.875rem;
  color: var(--teal-text);
}
.site-footer__tag {
  font-size: 0.875rem;
  color: var(--ink-faint);
  margin-top: 0.25rem;
}
.site-footer__links {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9375rem;
  align-items: baseline;
  flex-wrap: wrap;
}
.site-footer__links a {
  color: var(--ink-nav);
  border-bottom: 1px solid #d8cbb4;
  padding-bottom: 0.1875rem;
}
.site-footer__links a:hover { text-decoration: none; color: var(--dark); }

/* =========================================================================
   About page
   ========================================================================= */
.about {
  padding: 1.75rem var(--gutter) 0;
  overflow: hidden;              /* contain the floated portrait */
}

.about__title {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(3rem, 2rem + 5vw, 4.5rem);
  line-height: 1;
  color: var(--teal-text);
  margin: 0 0 0.25rem;
  transform: rotate(-1.2deg);
}
.about__subtitle {
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  margin: 0 0 1.375rem;
}

.about__portrait {
  float: left;
  width: 45%;
  max-width: 33.375rem;
  margin: 0.375rem 2.25rem 1.625rem 0;
  padding-right: 2.25rem;
  border-right: 1px solid var(--rule);
}
.about__portrait figure {
  margin: 0;
  background: var(--paper-card);
  padding: 0.4375rem;
  border: 1px solid #e8dfcd;
  box-shadow: 0 1rem 2rem -1.625rem rgba(60, 45, 20, 0.5);
}
.about__portrait img {
  width: 100%;
  aspect-ratio: 15 / 14;
  object-fit: cover;
  object-position: left center;
}

.about__body p {
  font-size: 1.1875rem;
  line-height: 1.8;
  color: #3c362d;
  margin: 0 0 1.375rem;
  text-wrap: pretty;
}
.about__body p:last-child { margin-bottom: 0; }
.about__body p.clear { clear: left; }

@media (max-width: 820px) {
  .about__portrait {
    float: none;
    width: auto;
    max-width: 28.75rem;
    margin: 0 0 1.5rem;
    padding-right: 0;
    border-right: 0;
  }
  .about__portrait img { aspect-ratio: 4 / 3; }
  .about__body p.clear { clear: none; }
  .about__body p { font-size: 1.09375rem; }
}

/* =========================================================================
   Category pages (Glass / Watercolors landing + subcategory pages)
   ========================================================================= */

/* ---- Breadcrumb (subcategory pages only) ------------------------- */
.breadcrumb {
  margin: 0;
  padding: 1.125rem var(--gutter) 0;
}
.breadcrumb a {
  font-family: var(--font-hand);
  font-size: 1.5625rem;
  color: var(--teal-text);
}

/* ---- Plain centered hero (subcategory pages) ---------------------- */
.page-hero {
  padding: 0.375rem var(--gutter) 0;
  text-align: center;
}
.page-title {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(3rem, 2rem + 5vw, 4.5rem);
  line-height: 1;
  color: var(--teal-text);
  margin: 0 0 0.875rem;
  transform: rotate(-1.2deg);
}
/* Category, section and Events pages have no line between the title and the intro,
   so give it a little more room. The same gap on all of them. */
.page-hero .page-title,
.hub-hero .page-title { margin-bottom: 1.25rem; }
.page-subtitle {
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  margin: 0 auto 1rem;
  max-width: 46ch;
}
.page-intro {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #3c362d;
  max-width: 56ch;
  margin: 0 auto;
  text-wrap: pretty;
}

.flourish {
  width: 12.5rem;
  height: 0.1875rem;
  margin: 1.875rem auto 0;
  background: var(--teal-deep);
  border: 0;
  border-radius: 0.125rem;
}
/* Wider variant for sections with a wide content column (e.g. Events),
   so the bar reads as a break spanning the section, not a small
   underline centered beneath it. */
.flourish--wide {
  width: min(60rem, calc(100% - 2 * var(--gutter)));
  height: 0.1875rem;
  margin-top: 2.5rem;
}
/* Thin variant matching the divider line under the site header, used
   above the closing pull-quote so it reads as an echo of that line
   rather than the bolder title-underline flourish. */
.flourish--quote {
  width: min(20rem, calc(100% - 2 * var(--gutter)));
  height: 1px;
  margin-top: 2.5rem;
}

/* ---- Pull quote (closing line on category/gallery pages) -----------
   Small echo of the homepage hero quote treatment, dropped in near
   the bottom of Glass/Watercolors pages as a quiet closing note. --- */
.pull-quote {
  max-width: 40rem;
  margin: 1.625rem auto 0;
  padding: 0 var(--gutter);
  text-align: center;
}
.pull-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 0.625rem;
  text-wrap: pretty;
}
.pull-quote cite {
  display: block;
  font-family: var(--font-hand);
  font-style: normal;
  font-size: 1.375rem;
  color: var(--teal-text);
}

/* ---- Hub hero (Glass / Watercolors landing pages) ------------------
   Same centered layout and title treatment as .page-hero/.page-title
   on the subcategory pages, just without the breadcrumb above it. -- */
.hub-hero {
  padding: 1.125rem var(--gutter) 0;
  text-align: center;
}

/* ---- Category tiles ------------------------------------------------
   Deliberately different from a .gallery-card: no cream mat (that
   reads as "this is the artwork"), a photo with a dark caption
   overlay and a piece count + arrow instead — reads as a link into a
   bigger collection, not the collection itself. -------------------- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr));
  gap: 1.625rem;
  padding: 2.5rem var(--gutter) 0;
}
/* For a category with only a few subcategories (e.g. Watercolors right
   now): larger tiles with a wider gap, capped in width and centered,
   instead of stretching edge to edge or leaving them stranded on the
   left. Each subcategory added shrinks them a step (1-2 tiles: up to
   380px, 3 tiles: up to 328px), and from 4 on none of these rules apply,
   so the grid is exactly the standard one (same as Glass). They're
   counted with :has(); a browser without it just shows the standard
   grid. */
.category-grid--compact:not(:has(> :nth-child(4))) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
}
.category-grid--compact:not(:has(> :nth-child(4))) > .category-tile {
  flex: 1 1 17.5rem;
  max-width: 23.75rem;
}
.category-grid--compact:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
  gap: 2.0625rem;
}
.category-grid--compact:has(> :nth-child(3)):not(:has(> :nth-child(4))) > .category-tile {
  max-width: 20.5rem;
}
.category-tile {
  display: block;
  border-radius: 1rem;
  box-shadow: 0 1rem 2rem -1.25rem rgba(60, 45, 20, 0.5);
  transition: box-shadow 0.15s ease;
}
.category-tile:hover { box-shadow: 0 1.25rem 2.5rem -1.125rem rgba(60, 45, 20, 0.6); }

.category-tile__frame {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}
.category-tile__frame img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.category-tile:hover .category-tile__frame img { transform: scale(1.07); }

.category-tile__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1rem 1rem;
  background: linear-gradient(to top, rgba(16, 38, 43, 0.85), rgba(16, 38, 43, 0));
}
.category-tile__name {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.6875rem;
  line-height: 1.05;
  color: var(--bg);
}
.category-tile__arrow {
  margin-left: 0.4375rem;
  color: rgba(253, 247, 234, 0.85);
}

/* =========================================================================
   Piece gallery (used by category subpages) — equal-height rows
   site.js decides which pictures go in each row (using each picture's
   shape, --ar = width / height) and wraps them in .gallery-row. Photos are
   shown whole with the same thin mat on all four sides and no dead space.
   Inside a row, every card gets the mat (--card-chrome) plus a share of
   the leftover width proportional to --ar, so every picture in the row is
   the same height. site.js reads --row-h, --row-gap and --card-chrome from
   here, so change them here only (--card-chrome = mat + border: 0.75rem
   padding and a 1px border on each side; it must match
   .gallery-card__frame below).
   --row-h is the picture height rows aim for, and it changes by screen
   width: small phones use a tall value so each photo gets its own row.
   ========================================================================= */
.gallery {
  --row-h: 18.75rem;
  --row-gap: 2rem;
  --card-chrome: calc(1.5rem + 2px);
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
  padding: 2.75rem var(--gutter) 0;
}
.gallery-row {
  display: flex;
  gap: var(--row-gap);
}
.gallery-card {
  margin: 0;
  min-width: 0;
  flex: calc(var(--ar, 1) * 100) 1 var(--card-chrome);
}
/* The last row of a gallery: pictures at the same size as the rows above
   (--h, set by site.js) instead of stretching to fill the width. */
.gallery-row--short .gallery-card {
  flex: 0 0 calc(var(--ar, 1) * var(--h) + var(--card-chrome));
}
.gallery-card__frame {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--border-card);
  background: var(--paper-card);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  font: inherit;
  text-align: left;
  appearance: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gallery-card__frame:hover {
  transform: translateY(-0.1875rem);
  box-shadow: 0 1.25rem 2.25rem -1.375rem rgba(60, 45, 20, 0.55);
}
.gallery-card__frame img {
  display: block;
  width: 100%;
  background: var(--paper-card);
}

/* "View larger" arrows: fade in over the picture's top-right corner when the
   card is hovered or keyboard-focused. (No hover on touch screens, so there
   they simply don't appear; tapping the picture works as usual.) */
.gallery-card__hint {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 1.875rem;
  height: 1.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transform: translateY(0.1875rem);
  transition: opacity 0.18s ease, transform 0.18s ease;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}
.gallery-card__hint svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gallery-card__frame:hover .gallery-card__hint,
.gallery-card__frame:focus-visible .gallery-card__hint {
  opacity: 1;
  transform: none;
}
.gallery-card__title {
  font-family: var(--font-hand);
  font-size: 1.25rem;
  color: var(--teal-text);
  margin: 0.625rem 0.125rem 0;
}
.gallery-card__desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0.25rem 0.125rem 0;
}

/* A gallery of same-shaped photos (e.g. Book Illustrations) jumps between
   2 and 3 per row, so this lower desktop target keeps it at 3 per row. */
.gallery--compact { --row-h: 15rem; }
@media (max-width: 900px) {
  .gallery,
  .gallery--compact { --row-h: 13.75rem; }
}
@media (max-width: 620px) {
  .gallery,
  .gallery--compact { --row-h: 25rem; }
}

/* ---- "Show more" control under a paginated gallery ------------------ */
.gallery-more {
  text-align: center;
  padding: 2.25rem var(--gutter) 0.875rem;
}
.gallery-more__btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  color: oklch(0.52 0.10 200);   /* a touch deeper than --teal-deep so the text clears 4.5:1 */
  background: none;
  border: 0;
  padding: 0.25rem 0.125rem;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4375rem;
}
.gallery-more__btn::after {
  content: "";
  width: 0.6875rem;
  height: 0.6875rem;
  border-right: 0.15625rem solid currentColor;
  border-bottom: 0.15625rem solid currentColor;
  transform: translateY(-0.1875rem) rotate(45deg);
  transition: transform 0.15s ease;
}
.gallery-more__btn:hover { color: var(--dark); }
.gallery-more__btn:hover::after { transform: translateY(0) rotate(45deg); }

/* =========================================================================
   Events list
   — Each event is just a picture she supplies as-is (usually a flyer
     someone else designed). It's never cropped or re-touched, since
     there's no one to do that by hand every time she adds one — it's
     shown whole, like a poster pinned to a board, in a plain mat that
     works for any flyer's shape or color. No caption underneath: the
     flyer already has the title/date/venue on it. Events simply show
     in the order listed — remove the entry once a show is over.
   ========================================================================= */
.events-list {
  max-width: 56.25rem;
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 0;
}

.events-empty {
  text-align: center;
  color: var(--ink-soft);
  font-size: 1.125rem;
  padding: 1.25rem 0 0;
}
.events-empty a {
  color: var(--teal-text);
  border-bottom: 1px solid currentColor;
}
.events-empty a:hover { text-decoration: none; }

/* 404 page: a short row of links back into the site */
.notfound-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
  margin: 1.75rem 0 0;
  padding-bottom: 2rem;
  font-size: 1.125rem;
}
.notfound-links a {
  color: var(--teal-text);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.125rem;
}
.notfound-links a:hover { text-decoration: none; }

.event-card {
  margin: 0 0 2.5rem;
  background: var(--paper-card);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-card);
  padding: 0.875rem;
}

.event-card__poster {
  margin: 0;
  line-height: 0;
}
.event-card__poster img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================================
   Lightbox (used by gallery pages; harmless if unused)
   ========================================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8, 20, 24, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 5.5rem 1.5rem;
  z-index: 90;
}
.lightbox[hidden] { display: none; }
.lightbox__figure {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox { --lb-h: calc(100dvh - 10.5rem); }
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: var(--lb-h);
  box-shadow: 0 1.875rem 5rem -1.25rem rgba(0, 0, 0, 0.7);
  transition: opacity 0.15s ease;
}
/* Where the piece's real size is known, the small and the full-size file are drawn at one and the same size. */
.lightbox__img.has-size { width: min(var(--w), calc(var(--lb-h) * var(--ar))); height: auto; aspect-ratio: var(--ar); }
.lightbox__img.is-loading { opacity: 0; }
.lightbox__caption {
  margin-top: 1rem;
  min-height: 1.5rem;
  text-align: center;
  color: #f4efe4;
}
.lightbox__title:empty { display: none; }   /* pieces without a title: just the counter */
.lightbox__title {
  display: block;
  font-family: var(--font-hand);
  font-size: 1.5rem;
  line-height: 1.2;
}
.lightbox__count {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: #b9b2a3;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
}
.lightbox__close {
  top: 0.75rem; right: 1rem;
  width: 2.75rem; height: 2.75rem;
  font-size: 2.125rem;
  line-height: 1;
}
.lightbox__nav {
  top: 50%;
  width: 3rem; height: 3rem;
  margin-top: -2.25rem;   /* centre on the picture, not on the caption below it */
  background: rgba(255, 255, 255, 0.1);
}
.lightbox__nav[hidden] { display: none; }
.lightbox__nav--prev { left: 1.25rem; }
.lightbox__nav--next { right: 1.25rem; }
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Short screens (a phone held sideways): give the picture more of the height. */
@media (max-height: 500px) {
  .lightbox { padding-top: 2.5rem; padding-bottom: 0.5rem; }
  .lightbox { --lb-h: calc(100dvh - 7rem); }
  .lightbox__caption { margin-top: 0.5rem; min-height: 0; }
  .lightbox__title { font-size: 1.25rem; }
  .lightbox__close { top: 0.25rem; }
  .lightbox__nav { margin-top: -1.5rem; }
}

/* Phones: the arrows move down beside the caption so they don't cover the
   picture (swiping works too). */
@media (max-width: 620px) {
  .lightbox { padding: 3.5rem 0.75rem 1rem; }
  .lightbox { --lb-h: calc(100dvh - 9.5rem); }
  .lightbox__caption { padding-inline: 3.5rem; }
  .lightbox__nav {
    top: auto;
    bottom: 1rem;
    margin-top: 0;
    width: 2.75rem; height: 2.75rem;
  }
  .lightbox__nav--prev { left: 0.75rem; }
  .lightbox__nav--next { right: 0.75rem; }
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1040px) {
  :root { --gutter: 2rem; }
  .hero { padding: 2.5rem 2.75rem; border-radius: 11.25rem 2rem 11.25rem 2rem; }
}

@media (max-width: 860px) {
  .site-header {
    align-items: center;
    padding-block: 0.6875rem;
  }
  .nav-toggle { display: block; }

  .primary-nav {
    flex-basis: 100%;
    display: none;
  }
  /* The header is pinned, so an open menu taller than the screen (a short
     phone, or one turned sideways) would leave its bottom items out of
     reach. Cap it to the visible height, minus the header's own top row
     and padding, and let the menu scroll inside itself. dvh follows a
     phone browser's collapsing address bar; vh is the fallback. */
  .primary-nav.is-open {
    display: block;
    max-height: calc(100vh - 5.25rem);
    max-height: calc(100dvh - 5.25rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .primary-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0 0;
    font-size: 0.8125rem;
  }
  .primary-nav__list > li { border-top: 1px solid var(--rule); }
  .primary-nav__list a { padding: 0.875rem 0.25rem; }
  .primary-nav__list a[aria-current="page"] {
    border-bottom: 1px solid transparent;
    box-shadow: inset 0.1875rem 0 0 var(--teal-deep);
    padding-left: 0.75rem;
  }

  .has-submenu > .submenu-row { justify-content: space-between; padding-right: 0.25rem; }
  .submenu-toggle { padding: 0.875rem 0.625rem; }

  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    border: 0;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.03);
    padding: 0;
    display: none;
  }
  .has-submenu[data-open="true"] .submenu { display: block; }
  .submenu a { padding: 0.75rem 1.375rem; }
  .primary-nav__list .submenu a[aria-current="page"] { padding-left: 1.375rem; }

  .hero {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 2rem;
    border-radius: 7.5rem 1.75rem 7.5rem 1.75rem;
    text-align: left;
  }
  .hero__figure { order: -1; width: min(18.75rem, 80%); }
  .hero__attr { display: block; margin-left: 0; margin-top: 0.25rem; }
}

/* Touch screens: don't let the page scroll behind an open menu. Narrow
   desktop windows are left alone so the page doesn't jump sideways when
   the scrollbar disappears. */
@media (max-width: 860px) and (pointer: coarse) {
  body:has(.primary-nav.is-open) { overflow: hidden; }
}

@media (max-width: 620px) {
  body { font-size: 1rem; }
  :root { --gutter: 1.25rem; }

  .shell { box-shadow: none; }

  .feature,
  .feature--image-left,
  .feature--image-right { grid-template-columns: 1fr; gap: 1.375rem; }
  .feature + .feature { padding-top: 2.75rem; }
  .feature--image-right .feature__figure { order: -1; }
  .feature__figure { order: -1; }

  .hero { border-radius: 3.75rem 1.25rem 3.75rem 1.25rem; padding: 1.75rem 1.375rem; }
  .marquee { font-size: 1.25rem; gap: 1rem; }
  .site-footer { padding-bottom: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}