/* ===========================================================================
   Clare Shepherd — portfolio stylesheet
   Plain CSS, no preprocessor, no framework. Organised as:
     1. Tokens          2. Reset & base      3. Layout primitives
     4. Header & nav    5. Home              6. Gallery
     7. Lightbox        8. About             9. Blog
    10. Contact        11. Workshops      12. Footer
   13. Utilities & print
   =========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */

:root {
  /* Paper and ink. Tuned warm-neutral so artwork colour reads true. */
  --paper: #fbfbf9;
  --paper-2: #f4f3ef;
  --paper-3: #eae8e2;
  --ink: #1a1917;
  --ink-2: #46443f;
  --ink-3: #8a8781;
  --rule: #e2e0da;
  --rule-strong: #cfccc4;
  --accent: #a8442c;
  --accent-soft: rgba(168, 68, 44, 0.1);

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --step--2: 0.75rem;
  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: clamp(1.12rem, 0.4vw + 1.02rem, 1.25rem);
  --step-2: clamp(1.35rem, 0.8vw + 1.15rem, 1.7rem);
  --step-3: clamp(1.7rem, 1.6vw + 1.3rem, 2.5rem);
  --step-4: clamp(2.1rem, 3.4vw + 1.2rem, 4rem);

  --measure: 34rem;      /* comfortable reading width */
  --measure-wide: 52rem;
  --page: 1440px;        /* max content width */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section: clamp(3.5rem, 8vw, 8rem);

  --radius: 2px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --speed: 260ms;
}

/* A very pale coffee ground. Applied per page by naming the page's tone in
   site.config.mjs (`pageTone`); the header, cards and rules re-tint with it
   because they are all derived from these same tokens. */
.tones-coffee {
  --paper: #ede4d8;
  --paper-2: #e6dbcb;
  --paper-3: #dbcebb;
  --rule: #d6c9b6;
  --rule-strong: #c1b29c;
  --accent-soft: rgba(168, 68, 44, 0.13);
}

/* On a tinted ground the cards sit lighter than the page, so they read as
   objects placed on it rather than holes cut into it. */
.tones-coffee .group-card,
.tones-coffee .work-note,
.tones-coffee .fact-box {
  background: #f7f1e8;
}

/* ------------------------------------------------------------ 2. Reset/base */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset for the sticky header when jumping to an anchor. */
  scroll-padding-top: 6rem;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100%;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

a:hover { text-decoration: underline; }

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

::selection {
  background: var(--accent);
  color: #fff;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
}

/* ------------------------------------------------------- 3. Layout helpers */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 820px; }

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

.stack > * + * { margin-top: var(--flow, 1.15rem); }

.eyebrow {
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

/* An eyebrow that names the artist on the work pages, linking back to the index. */
.eyebrow a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.eyebrow a:hover {
  text-decoration: none;
  color: var(--ink);
  border-bottom-color: var(--rule-strong);
}

/* The artist's name above a page heading, slightly larger than a plain eyebrow. */
.section-head .eyebrow:first-child {
  font-size: var(--step-0);
  letter-spacing: 0.1em;
  color: var(--ink-2);
}

.lede {
  font-size: var(--step-1);
  color: var(--ink-2);
  max-width: var(--measure-wide);
}

.rule {
  border-top: 1px solid var(--rule);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------- 4. Header & nav */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--rule);
}

@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--paper); }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.75rem;
  padding-block: 0.75rem;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  min-width: 0;
}
.brand:hover { text-decoration: none; }

.brand__name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand__tagline {
  font-size: var(--step--1);
  color: var(--ink-3);
  border-left: 1px solid var(--rule-strong);
  padding-left: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  list-style: none;
  padding: 0;
}

.site-nav a {
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
  position: relative;
  padding-block: 0.25rem;
  transition: color var(--speed) var(--ease);
}
.site-nav a:hover { color: var(--ink); text-decoration: none; }

/* Understated current-page indicator. */
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.25rem;
  height: 1px;
  background: var(--ink);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .brand__tagline { display: none; }
  .nav-toggle { display: inline-block; }

  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
  }
  .site-nav li { width: 100%; }
  .site-nav a {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: var(--step-0);
    text-transform: none;
    letter-spacing: 0;
  }
  .site-nav a[aria-current="page"]::after { display: none; }
  .site-nav a[aria-current="page"] { font-weight: 600; }
}

/* ----------------------------------------------------------------- 5. Home */

.hero {
  padding-block: clamp(3rem, 9vw, 7.5rem) clamp(2.5rem, 6vw, 5rem);
}

.hero__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
}

/* The artist's name leads the home page, above the statement. */
.hero__name {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin-top: 0.75rem;
  text-wrap: balance;
}

.hero__statement {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 1.7vw + 0.85rem, 2.05rem);
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  max-width: 28ch;
  margin-top: clamp(1rem, 2.2vw, 1.5rem);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.5rem;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  font-size: var(--step--1);
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.hero__figure {
  position: relative;
  background: var(--paper-2);
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 1rem 1.1rem;
  background: linear-gradient(to top, rgba(20, 19, 17, 0.55), transparent);
  color: #fff;
  font-size: var(--step--1);
}

@media (max-width: 880px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__statement { max-width: 100%; }
  .hero__figure { aspect-ratio: 4 / 3; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.5rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.btn:hover {
  background: transparent;
  color: var(--ink);
  text-decoration: none;
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Section heading with a hairline rule and optional link */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.section-head p {
  color: var(--ink-3);
  font-size: var(--step--1);
  max-width: 40ch;
}
.section-head__link {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--rule-strong);
}
.section-head__link:hover { text-decoration: none; border-color: var(--ink); }

@media (max-width: 640px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* -------------------------------------------------------------- 6. Gallery */

.gallery__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}

.filter {
  border: 1px solid var(--rule-strong);
  background: transparent;
  border-radius: 999px;
  padding: 0.42rem 1rem;
  font-size: var(--step--1);
  letter-spacing: 0.05em;
  color: var(--ink-2);
  transition: all var(--speed) var(--ease);
}
.filter:hover { border-color: var(--ink-3); color: var(--ink); }
.filter[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.gallery__count {
  font-size: var(--step--1);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Masonry via CSS columns — no JS, no layout shift, graceful fallback. */
.gallery__grid {
  columns: 3;
  column-gap: clamp(1rem, 2vw, 1.75rem);
}

/* Works hidden by a filter must also leave the column flow. */
.work[hidden] { display: none; }

@media (max-width: 1100px) { .gallery__grid { columns: 2; } }
@media (max-width: 620px)  { .gallery__grid { columns: 1; } }

.work {
  break-inside: avoid;
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
}

.work__frame {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  /* Matches the artwork's own average tone on load. */
  background-color: var(--matte, var(--paper-2));
}

/* The image is a button so the lightbox is keyboard reachable; the card itself
   is an article, because on the Work page its title is a link. */
.work__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.work__frame img {
  width: 100%;
  height: auto;
  transition: transform 700ms var(--ease), opacity 500ms var(--ease);
  opacity: 1;
}

/* Fade in once decoded. */
.work__frame img[data-loaded="false"] { opacity: 0; }

.work:hover .work__frame img,
.work:focus-visible .work__frame img {
  transform: scale(1.028);
}

.work__badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  color: var(--ink-2);
  backdrop-filter: blur(6px);
}
.work__badge--sold { background: var(--ink); color: var(--paper); }

/* On a query-less device we hide "available" badges to reduce noise. */
.work[data-status="available"] .work__badge { display: none; }

.work__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.85rem;
  margin: 0;
}

.work__title {
  font-size: var(--step-0);
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.3;
}

/* On the Work page the title links through to its group page. */
.work__title a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.work__title a:hover {
  border-bottom-color: currentColor;
  color: var(--accent);
}

.work__go {
  color: var(--ink-3);
  font-size: 0.9em;
  margin-left: 0.3em;
  display: inline-block;
  transition: transform var(--speed) var(--ease), color var(--speed) var(--ease);
}
.work__title a:hover + .work__go {
  transform: translateX(3px);
  color: var(--accent);
}

.work__meta {
  font-size: var(--step--1);
  color: var(--ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.work__detail {
  font-size: var(--step--1);
  color: var(--ink-3);
  margin-top: 0.15rem;
}

/* Gallery empty state */
.gallery__empty {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--ink-3);
  columns: 1;
}

/* ------------------------------------------- 6b. Work page: group index */

/* Collection cards sit beside the note about how the work is made. */
.work-layout {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}

/* Collection cards. Each card is a bordered box holding the lead image and,
   underneath, everything that links through to that gallery. */
.group-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.75rem);
  flex: 1 1 32rem;
  min-width: 0;
  /* Keeps the cards compact rather than stretching across the full page. */
  max-width: 48rem;
}

@media (max-width: 620px) { .group-list { grid-template-columns: 1fr; } }

/* The note beside the collections: how the work gets made. */
.work-note {
  flex: 1 1 20rem;
  min-width: 0;
  max-width: 30rem;
  position: sticky;
  top: 6rem;
  /* No top padding: the photograph takes that edge and runs to the border. */
  padding: 0 clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.5rem, 2.5vw, 2.25rem);
  border: 1px solid var(--rule-strong);
  background: var(--paper-2);
  overflow: hidden;
}

/* Photograph at the top of the box, edge to edge. */
.work-note__figure {
  margin: 0 calc(-1 * clamp(1.5rem, 2.5vw, 2.25rem)) clamp(1.25rem, 2.5vw, 1.75rem);
}

.work-note__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--paper-3);
}

/* The label under the photograph, aligned to the same edge as the text. */
.work-note__caption {
  display: block;
  padding: 0.55rem clamp(1.5rem, 2.5vw, 2.25rem) 0.7rem;
  border-bottom: 1px solid var(--rule-strong);
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
}

.work-note__lead {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--ink);
}

.work-note__quotes {
  margin: 1.35rem 0 0;
}

.work-note__quotes p {
  position: relative;
  padding-left: 1.5rem;
  font-family: var(--font-heading);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink-2);
}

.work-note__quotes p + p { margin-top: 1.1rem; }

/* A quiet rule in place of a quotation mark, in a dark coffee rather than the
   page accent — it belongs with the browns on this page, not with the reds. */
.work-note__quotes p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.75rem;
  height: 1px;
  background: #6b4f33;
}

/* On a narrow screen the note follows the cards instead of sitting beside them. */
@media (max-width: 960px) {
  .work-note { position: static; max-width: none; }
}

.group-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule-strong);
  background: var(--paper-2);
  transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease);
}
.group-card:hover {
  text-decoration: none;
  border-color: var(--ink-3);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(26, 25, 23, 0.08);
}

.group-card__frame {
  display: block;
  overflow: hidden;
  background: var(--paper-3);
  /* Shorter than the old 4:3 box, so the image takes less of the card. */
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--rule);
}
.group-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.group-card:hover .group-card__frame img { transform: scale(1.04); }

.group-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.15rem 1.25rem;
  flex: 1;
}

.group-card__title {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  line-height: 1.15;
  color: var(--ink);
}

.group-card__count {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.group-card__intro {
  font-size: var(--step--1);
  color: var(--ink-2);
  line-height: 1.55;
  margin-top: 0.25rem;
}

.group-card__go {
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: var(--step--1);
  color: var(--accent);
}
.group-card__go span {
  display: inline-block;
  transition: transform var(--speed) var(--ease);
}
.group-card:hover .group-card__go span { transform: translateX(4px); }

/* Cross-links between the medium groups, shown under a group page. */.group-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.75rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
}

.group-links > span {
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.group-links a {
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule-strong);
}
.group-links a:hover {
  text-decoration: none;
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.group-links a span { color: var(--ink-3); }

/* On the work pages the coffee runs above the rule only. Everything below it —
   the paintings — sits on plain paper, so their colour reads true rather than
   being cast by the ground behind them. The negative margins let each block
   bleed to the edges of the screen while the text stays on the page gutter. */
.page-head-band,
.page-body {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}

.page-head-band {
  background: #ede4d8;
  /* The band is the first thing in the section, so it supplies the top space. */
  padding-block: var(--section) clamp(1.25rem, 2.5vw, 2rem);
}

/* A section that opens with a band hands its top spacing to the band, so the
   band reaches the header rather than floating below a gap of page background. */
.section:has(> .wrap > .page-head-band) {
  padding-top: 0;
}

/* The heading's own rule closes the band; no extra margin needed inside it. */
.page-head-band .section-head { margin-bottom: 0; }

.page-body {
  background: var(--paper);
  padding-block: clamp(1.75rem, 4vw, 3rem) 0;
}

/* ------------------------------------------------------------- 7. Lightbox */

.lightbox {
  border: 0;
  padding: 0;
  margin: 0;
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100vh;
  background: transparent;
  overflow: hidden;
}
@supports (height: 100dvh) {
  .lightbox { height: 100dvh; }
}
.lightbox:not([open]) { display: none; }

.lightbox::backdrop {
  background: rgba(16, 15, 14, 0.9);
  backdrop-filter: blur(4px);
}

/*
  Fixed bar and caption heights, declared once so the stage can be told exactly
  how much room it has. Percentages are avoided throughout: on a <dialog> a
  height:100% chain does not always resolve, which previously let the stage grow
  past the bottom of the screen and clip the painting.
*/
.lightbox {
  --lb-bar: 3.4rem;
  --lb-foot: 7rem;
}

.lightbox__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  /* The dialog itself is 100vh, so fill it directly rather than via 100%. */
  height: 100vh;
  overflow: hidden;
  color: #f4f3ef;
}
@supports (height: 100dvh) {
  .lightbox__inner { height: 100dvh; }
}

.lightbox__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--lb-bar);
  padding: 0 clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
}

.lightbox__index {
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: rgba(244, 243, 239, 0.6);
  font-variant-numeric: tabular-nums;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid rgba(244, 243, 239, 0.28);
  background: rgba(244, 243, 239, 0.06);
  color: #f4f3ef;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.icon-btn:hover { background: rgba(244, 243, 239, 0.16); border-color: rgba(244, 243, 239, 0.5); }
.icon-btn svg { width: 1.05rem; height: 1.05rem; }

.lightbox__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  /* Told exactly how much height is left below the caption bar. Percentages are
     avoided here: on a <dialog> they do not reliably resolve, which let the
     painting overflow the bottom of the screen. */
  height: calc(100vh - var(--lb-bar));
  display: grid;
  place-items: center;
  /* Sides only — the height above already includes the space we want. */
  padding: 0 clamp(1.5rem, 6vw, 6rem);
  overflow: hidden;
}
@supports (height: 100dvh) {
  .lightbox__stage { height: calc(100dvh - var(--lb-bar)); }
}

.lightbox__img {
  display: block;
  max-width: 100%;
  /* Sized from the viewport rather than from the parent, so it cannot overflow
     however the dialog lays out. 0.8 gives the ~20% reduction asked for. */
  max-height: 80%;
  max-height: calc((100vh - var(--lb-bar)) * 0.8);
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  background: #26241f;
  cursor: zoom-in;
  transition: transform 320ms var(--ease);
}
@supports (height: 100dvh) {
  .lightbox__img { max-height: calc((100dvh - var(--lb-bar)) * 0.8); }
}

.lightbox.is-zoomed .lightbox__img {
  cursor: zoom-out;
  transform: scale(1.35);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 1.75rem); }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 1.75rem); }
.lightbox__nav[disabled] { opacity: 0.25; pointer-events: none; }

@media (max-width: 700px) {
  .lightbox__nav { top: auto; bottom: 0.5rem; transform: none; }
  .lightbox__stage { padding: 0 clamp(1rem, 12vw, 3rem); }
}

/* ---------------------------------------------------------------- 8. About */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

@media (max-width: 880px) { .about__grid { grid-template-columns: 1fr; } }

.portrait {
  background: var(--paper-2);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

/* A smaller framed image that carries a caption underneath. */
.portrait--framed {
  max-width: 30rem;
  margin-inline: auto;
}

.portrait--framed img {
  display: block;
  width: 100%;
  height: auto;
  /* Padding inside the border, so the work sits in a mount. */
  padding: clamp(0.6rem, 1.2vw, 1rem);
  border: 1px solid var(--rule-strong);
  background: var(--paper-2);
  /* Preserve the drawn line: no smoothing beyond a light, high-quality
     downscale. The intrinsic width/height attributes already hold the
     aspect ratio, so no aspect-ratio box is needed. */
  image-rendering: auto;
}

.tones-coffee .portrait--framed img {
  background: #f7f1e8;
}

.portrait__caption {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
}

.facts {
  list-style: none;
  padding: 0;
  margin-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
.facts li {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--step--1);
}
.facts dt, .facts__label { color: var(--ink-3); }
.facts__value { text-align: right; }

/* A bordered box for a run of prose, matching the note box on the Work page. */
.text-box {
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
  border: 1px solid var(--rule-strong);
  background: var(--paper-2);
}

.tones-coffee .text-box {
  background: #f7f1e8;
}

/* The heading inside a text box leads the box, so it needs no top margin. */
.text-box > .eyebrow:first-child { margin-top: 0; }

/* A box around a form, so the enquiry forms sit on the page like the cards. */
.form-box {
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid var(--rule-strong);
  background: var(--paper-2);
}

.tones-coffee .form-box {
  background: #f7f1e8;
}

/* A quiet link under the facts list, pointing at the older site. */
.archive-link {
  margin-top: 1.25rem;
  font-size: var(--step--1);
}

.archive-link__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  align-items: baseline;
}

.archive-link__label {
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.archive-link a {
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule-strong);
}
.archive-link a:hover {
  text-decoration: none;
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* A caution about the older site's connection. */
.archive-link__note {
  margin-top: 0.4rem;
  color: var(--ink-3);
  font-style: italic;
  max-width: 30ch;
}

.prose {
  max-width: var(--measure);
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--ink-2);
}
.prose > * + * { margin-top: 1.35em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; }
.prose a { border-bottom: 1px solid var(--rule-strong); }
.prose a:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.prose blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 1.25rem;
  font-family: var(--font-heading);
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--ink);
}
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li + li { margin-top: 0.5rem; }
.prose img { margin-block: 2rem; }
.prose figcaption {
  font-size: var(--step--1);
  color: var(--ink-3);
  margin-top: 0.6rem;
}

/* An image with a caption sits in a figure, so the image's own margins do not
   double up with the figure's. */
.prose figure { margin-block: 2rem; }
.prose figure img { margin-block: 0; }
.prose figure figcaption {
  margin-top: 0.75rem;
  font-family: var(--font-heading);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: var(--measure);
}

/* CV list */
.cv {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
  max-width: var(--measure-wide);
}
.cv li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.5rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--step-0);
  color: var(--ink-2);
}
.cv__year {
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  font-size: var(--step--1);
  padding-top: 0.15rem;
}

/* An entry may carry a second line — an exhibition's dates, for instance. */
.cv__entry {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.cv__place { color: var(--ink-3); }

.cv__date {
  font-size: var(--step--1);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .cv li { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ----------------------------------------------------------------- 9. Blog */

.post-list {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--rule);
}

/* The journal index's list is a box, so it supplies its own padding and the
   rule comes from the box border instead of the list itself. */
.post-list.text-box {
  border-top: 1px solid var(--rule-strong);
  padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem);
}

/* Inside a box, the first and last rows should not add their own rules. */
.post-list.text-box .post-item:last-child { border-bottom: 0; }
.post-list.text-box .post-item__link { padding-block: 1.15rem; }

.post-item { border-bottom: 1px solid var(--rule); }

.post-item__link {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.6rem 0;
  transition: opacity var(--speed) var(--ease);
}
.post-item__link:hover { text-decoration: none; }
.post-item__link:hover .post-item__title { color: var(--accent); }

.post-item__date {
  font-size: var(--step--1);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.post-item__title {
  font-family: var(--font-heading);
  font-size: var(--step-2);
  line-height: 1.2;
  transition: color var(--speed) var(--ease);
}
.post-item__excerpt {
  color: var(--ink-2);
  font-size: var(--step-0);
  max-width: 52ch;
  margin-top: 0.5rem;
}
.post-item__arrow {
  color: var(--ink-3);
  font-size: var(--step-1);
  transition: transform var(--speed) var(--ease), color var(--speed) var(--ease);
}
.post-item__link:hover .post-item__arrow { transform: translateX(4px); color: var(--ink); }

@media (max-width: 720px) {
  .post-item__link { grid-template-columns: 1fr; gap: 0.4rem; padding: 1.4rem 0; }
  .post-item__arrow { display: none; }
}

/* Single post */
.post-header { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--rule); }
.post-header__meta {
  display: flex;
  gap: 1rem;
  font-size: var(--step--1);
  color: var(--ink-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.post-body { padding-block: clamp(2.5rem, 5vw, 4rem); }
.post-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
}

/* -------------------------------------------------------------- 10. Contact */

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 880px) { .contact__grid { grid-template-columns: 1fr; } }

.form { display: grid; gap: 1.25rem; }

.field { display: grid; gap: 0.45rem; }

.field label {
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.8rem 0.95rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: var(--step-0);
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.field input:hover,
.field textarea:hover,
.field select:hover { border-color: var(--rule-strong); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field textarea { min-height: 8.5rem; resize: vertical; }

.field--row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 560px) { .field--row { grid-template-columns: 1fr; } }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}

.form__note { font-size: var(--step--1); color: var(--ink-3); }

.form__status {
  font-size: var(--step--1);
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--paper-2);
}
.form__status[data-state="ok"] { border-color: #6f8f5f; background: #f2f6ee; }
.form__status[data-state="error"] { border-color: var(--accent); background: #fbf1ee; }
.form__status[hidden] { display: none; }

/* Honeypot — hidden from humans, tempting to bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------ 11. Workshops */

.workshop-list {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.workshop {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule);
}

.workshop__date {
  font-size: var(--step--1);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.workshop__title {
  font-family: var(--font-heading);
  font-size: var(--step-2);
  line-height: 1.2;
}

.workshop__status {
  font-size: var(--step--1);
  margin-top: 0.35rem;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.workshop__status::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #6f8f5f;
  flex: none;
}

.workshop__status[data-state="waiting"]::before { background: #c08a3e; }

@media (max-width: 620px) {
  .workshop { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* Booking panel: what to bring beside the form. */
.workshop-booking {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

@media (max-width: 880px) {
  .workshop-booking { grid-template-columns: 1fr; }
}

.bring-list {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
}

.bring-list li {
  position: relative;
  padding: 0.65rem 0 0.65rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--step-0);
  color: var(--ink-2);
}

.bring-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* --------------------------------------------------------------- 12. Footer */

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: var(--section);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  font-size: var(--step--1);
  color: var(--ink-3);
}

.site-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
}

.site-footer__brand {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  color: var(--ink);
}

.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--accent); }

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  padding: 0;
}

.site-footer__legal {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

/* --------------------------------------------------- 13. Utilities & print */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .lightbox, .hero__actions, .filters, .gallery__bar { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .gallery__grid { columns: 2; }
  a { text-decoration: none; }
  .work__frame img { opacity: 1 !important; }
}