/* ---- work-detail.css ---- */
/* site-kit section: work-detail. Ported 2026-10-21 from suzannedolanart.com public/assets/p-work.css (whole file
   minus the walk-around rules), lightbox.css (whole file, renamed .lb -> .work-lb so it collides with nothing) and
   site.css "the label schema" + ".photo" + ".credit" (components block, 491-530). .split, .split__sticky, .section,
   .prose, .btn and .actions are base.css. Tokens from tokens.css + the theme; the viewer's own ground and type are
   the --kit-work-detail-* variables: the lightbox is a dark room in every theme. */

/* round 13: the page opens straight on the photograph column, no hero, no colour field, no turntable stage */
.work-detail .work__body { padding-top: var(--space-4); }
@media (min-width: 900px) {
  .work-detail .work__body { padding-top: var(--space-6); }
}
/* round 13, council pass 2: the label (the h1, the status) is its own grid item so that on a phone it comes BEFORE
   the photograph (the work is named on the first screen) while from 900px it heads the text column beside the sticky
   photograph column: columns 7fr 5fr from base.css .split, the media column spanning both rows */
.work-detail .work__split { align-items: start; row-gap: var(--space-2); }
.work-detail .work__head { min-width: 0; }
.work-detail .work__text { margin-top: var(--space-2); }
@media (min-width: 900px) {
  .work-detail .work__split { grid-template-rows: auto 1fr; row-gap: var(--space-3); }
  .work-detail .work__head { grid-column: 2; grid-row: 1; }
  .work-detail .work__media { grid-column: 1; grid-row: 1 / span 2; }
  .work-detail .work__text { grid-column: 2; grid-row: 2; margin-top: 0; }
}

/* photograph column: cover and stills strip, centred under one another */
.work-detail .work__media {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  --kit-work-detail-max: 82vh;
}
@supports (height: 1dvh) {
  .work-detail .work__media { --kit-work-detail-max: 82dvh; }
}
/* phones (< 760px): the photograph no taller than 70vh; the title still follows within the first scroll */
@media (max-width: 759.98px) {
  .work-detail .work__media { --kit-work-detail-max: 70vh; }
  @supports (height: 1svh) {
    .work-detail .work__media { --kit-work-detail-max: 70svh; }
  }
}
@media (min-width: 900px) {
  /* header height + 16px; set --site-head-h on :root when the header sticks */
  .work-detail .work__media.split__sticky { top: calc(var(--site-head-h, 0px) + var(--space-2)); }
  /* with a strip under it, the cover leaves room so the whole column fits the viewport while stuck */
  .work-detail .work__media--extras { --kit-work-detail-max: min(82vh, calc(100vh - 14rem)); }
}

.work-detail .work__figure {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  width: 100%;
}
.work-detail .work__figure[hidden] { display: none; }
.work-detail .work__cover { display: block; max-width: 100%; }
.work-detail .work__cover:focus-visible { outline-offset: 4px; }
/* the cover: complete, uncropped, at most 82vh tall (70vh on a phone), centred on the ground */
.work-detail .photo { display: block; width: 100%; height: auto; border-radius: 0; }
.work-detail .work__cover .photo {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--kit-work-detail-max);
  object-fit: contain;
  cursor: zoom-in;
}
.work-detail .credit, .work-detail figcaption {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--fg-soft);
}
.work-detail .work__figure .credit { margin-top: 0; text-align: center; }

/* stills strip: every photograph, the current one carries the same 1.5px underline as the active nav link */
.work-detail .stills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-2);
}
.work-detail .stills__item { margin: 0; }
.work-detail .stills__link {
  display: block;
  width: 64px;
  padding-bottom: 5px;
  border-bottom: 1.5px solid transparent;
}
.work-detail .stills__link[aria-current="true"] { border-bottom-color: var(--fg); }
.work-detail .stills__link:hover { border-bottom-color: var(--fg-soft); }
.work-detail .stills__link[aria-current="true"]:hover { border-bottom-color: var(--fg); }
.work-detail .stills__link:focus-visible { outline-offset: 3px; }
.work-detail .stills__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: contain;
  background: var(--bg);
}
@media (min-width: 900px) {
  .work-detail .stills__link { width: 72px; }
}

/* the label: the h1 in the display face 500, the facts and the status under it */
.work-detail .label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--fg);
}
.work-detail .label__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
  text-wrap: balance;
  color: var(--fg);
}
.work-detail .label__title cite { font-style: normal; font-weight: 500; }
.work-detail .label__meta { margin: 0; }
.work-detail .label__status { margin: 4px 0 0; color: var(--fg-soft); }
.work-detail .work__text { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.work-detail .work__rule { margin: 0; border: 0; border-top: 1px solid var(--rule); }
.work-detail .work__actions { margin-top: var(--space-1); }
@media (max-width: 479.98px) {
  .work-detail .work__actions .btn { width: 100%; }
}

/* previous / next by curated order, then the archive */
.work-detail .work__nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}
.work-detail .work__nav-link {
  display: grid;
  gap: 4px;
  align-content: start;
  min-height: 44px;
  color: var(--fg);
  text-decoration: none;
  min-width: 0;
}
.work-detail .work__nav-link--next { text-align: right; }
.work-detail .work__nav-link.is-empty { visibility: hidden; }
.work-detail .work__nav-dir {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.work-detail .work__nav-link cite {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: var(--step-1);
  line-height: 1.25;
  letter-spacing: -0.004em;
  text-wrap: balance;
}
.work-detail .work__nav-link:hover cite {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
  text-decoration-color: var(--fg-soft);
}
.work-detail .work__nav-all { grid-column: 1 / -1; font-size: var(--step--1); display: inline-flex; align-items: center; min-height: 44px; justify-self: start; }

@media print {
  .work-detail .stills, .work-detail .work__nav { display: none; }
  .work-detail .work__cover .photo { max-height: none; }
}

/* the full-screen viewer moved to lightbox.css (kit section `lightbox`, 2026-10-23) */

/* ---- lightbox.css ---- */
/* site-kit section: lightbox. The full-screen viewer built by lightbox.js and appended to <body>: ink at 96 percent
   over the page, the photograph at its largest, round Previous / Next arrows on its sides (a row of two labelled
   buttons under it below 768px, so nothing covers the painting on a phone), Close and Zoom as text buttons. In grid
   mode (the JSON block) the groups sit under the top bar (tabs; a native select below 768px) and the title, the
   facts, "Ask about this work" and "Details" sit under the photograph. Moved out of work-detail.css on 2026-10-23 (it was the
   .work-lb block, lightbox.css from suzannedolanart.com). Always paper type on a dark ground, whatever the theme
   (a viewer is a dark room); hence its own variables, not --bg/--fg. The ground is solid since 2026-10-23: at 96
   percent the grid's cards and the header showed through as ghosts behind the painting. */
:root {
  --kit-lb-bg: rgb(30, 26, 23);
  --kit-lb-fg: #F4F4F1;
  --kit-lb-fg-soft: rgba(244, 238, 230, 0.78);
  --kit-lb-line: rgba(244, 238, 230, 0.42);
  --kit-lb-fg-on: #1A1A1A;
  --kit-lb-arrow-bg: rgba(0, 0, 0, 0.35);
  --kit-lb-arrow-ring: rgba(244, 238, 230, 0.22);
}
.lb {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  /* named areas: a hidden row (no group tabs on a work page) must not pull the stage into an auto row, where the
     absolutely placed photograph has no height and the viewer showed only the dark ground (2026-10-24) */
  grid-template-areas: "bar" "groups" "stage" "nav" "foot";
  background: var(--kit-lb-bg);
  color-scheme: dark;
  color: var(--kit-lb-fg);
  opacity: 0;
  transition: opacity 160ms var(--ease);
}
.lb.is-open { opacity: 1; }
.lb[hidden] { display: none; }
html.lb-open { overflow: hidden; }

.lb__bar,
.lb__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--pad);
}
.lb__bar { grid-area: bar; justify-content: space-between; padding-top: max(10px, env(safe-area-inset-top)); }
.lb__group { display: flex; align-items: center; gap: 8px; flex: none; }

.lb__count,
.lb__meta,
.lb__loading {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: 0.01em;
  color: var(--kit-lb-fg-soft);
}
.lb__count { font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the groups: a row of tabs from 768px, a native select on a phone (a tab row there was cut off mid-word) */
.lb__groups { grid-area: groups; padding: 0 var(--pad) 8px; }
.lb__groups[hidden] { display: none; }
.lb__tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.lb__tabs::-webkit-scrollbar { display: none; }
.lb__picker { display: none; }
@media (max-width: 767px) {
  .lb__tabs { display: none; }
  .lb__picker {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid var(--kit-lb-line);
    border-radius: 2px;
    background: var(--kit-lb-bg);
    color: var(--kit-lb-fg);
    font-family: var(--font-body);
    font-size: 16px;   /* 16px or iOS zooms the page on focus */
  }
  .lb__picker:focus-visible { outline: 2px solid var(--kit-lb-fg); outline-offset: 2px; }
}

.lb__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--kit-lb-line);
  border-radius: 2px;
  background: transparent;
  color: var(--kit-lb-fg);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.lb__btn:hover { border-color: var(--kit-lb-fg); }
.lb__btn:focus-visible { outline: 2px solid var(--kit-lb-fg); outline-offset: 2px; }
.lb__btn[aria-pressed="true"],
.lb__btn--solid { background: var(--kit-lb-fg); color: var(--kit-lb-fg-on); border-color: var(--kit-lb-fg); }
.lb__btn--solid:hover { background: transparent; color: var(--kit-lb-fg); }
.lb__btn[hidden] { display: none; }

.lb__stage {
  grid-area: stage;
  position: relative;
  min-height: 0;
  overflow: hidden;
  /* two-finger pinch stays with the browser; one finger is ours (pan when zoomed, swipe otherwise) */
  touch-action: pinch-zoom;
}
/* absolutely positioned so the percentage limits resolve against the stage; margin auto centres */
.lb__img {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  transform-origin: center center;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  opacity: 1;
  transition: opacity 160ms var(--ease);
}
.lb.is-loading .lb__img { opacity: 0; }
.lb.is-zoomed .lb__img { cursor: grab; }
.lb.is-panning .lb__img { cursor: grabbing; }
.lb__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.lb__loading[hidden] { display: none; }

/* Previous / Next. Phone: a row of two labelled buttons under the photograph. From 768px: round arrows on the
   photograph's sides (the row becomes display: contents, so they place against the whole viewer), the words kept
   for screen readers only. */
.lb__nav {
  grid-area: nav;
  display: flex;
  gap: 8px;
  padding: 8px var(--pad) 0;
}
.lb__nav[hidden] { display: none; }
.lb__btn.lb__arrow { flex: 1; gap: 6px; min-height: 48px; }
.lb__arrow svg { flex: none; }
@media (min-width: 768px) {
  .lb__nav { display: contents; }
  .lb__btn.lb__arrow {
    position: absolute;
    top: 50%;
    width: 56px;
    height: 56px;
    min-height: 56px;
    padding: 0;
    margin-top: -28px;
    border-radius: 50%;
    border-color: var(--kit-lb-arrow-ring);
    background: var(--kit-lb-arrow-bg);
  }
  .lb__btn.lb__arrow:hover { border-color: var(--kit-lb-line); background: var(--kit-lb-bg); }
  .lb__prev { left: var(--pad); }
  .lb__next { right: var(--pad); }
  .lb__arrow-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .lb.is-zoomed .lb__arrow { opacity: 0; pointer-events: none; }
}

/* under the photograph: the title and the facts, then the two actions */
.lb__foot {
  grid-area: foot;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.lb__foot[hidden] { display: none; }
.lb__info { min-width: 0; flex: 1 1 16rem; }
.lb__title {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.2;
  color: var(--kit-lb-fg);
}
.lb__title[hidden],
.lb__meta[hidden] { display: none; }
.lb__actions { display: flex; gap: 8px; flex: none; }
@media (max-width: 559px) {
  .lb__actions { width: 100%; }
  .lb__actions .lb__btn { flex: 1; padding: 0 10px; }
}
/* a phone: larger caption type (council 2026-10-23: the buyer reads it at arm's length) */
@media (max-width: 767px) {
  .lb__title { font-size: 22px; }
  .lb__meta { font-size: 16px; line-height: 24px; }
  .lb__count { font-size: 15px; }
  .lb__btn { font-size: 16px; min-height: 48px; }
}

.lb__btn.lb__tab {
  flex: none;
  min-height: 40px;
  padding: 0 12px;
  border-color: transparent;
  font-weight: 400;
  color: var(--kit-lb-fg-soft);
  white-space: nowrap;
}
.lb__btn.lb__tab:hover { color: var(--kit-lb-fg); }
.lb__btn.lb__tab[aria-current="true"] { color: var(--kit-lb-fg); font-weight: 500; border-color: var(--kit-lb-line); }

@media (prefers-reduced-motion: reduce) {
  .lb, .lb__img { transition: none; }
}
@media print {
  .lb { display: none !important; }
}

/* ---- becca-site.css ---- */
/* Becca Thorne Art: this instance's own CSS, loaded LAST (after tokens, theme, base, the kit sections and the page's
   own file; src/views/layout.ts INSTANCE_STYLES). Four jobs: the header (the mockup's bar), the type (no mono face in
   this theme, so the kit's mono labels use Jost), the loading frames for work photographs, and the Work / About /
   Contact details the kit does not cover. Nothing here changes the kit files. */

:root { --font-mono: var(--font-body); }

/* ------------------------------------------------------------- header -- */
/* the mockup bar: 76 px, the wordmark in Cormorant at 27 px, four small tracked nav links, a hairline under it.
   No subline in the bar (it is in the footer and in Home's eyebrow), no CTA button (site.json cta = null). */
.kit-header { --kit-header-h: 61px; --kit-header-h-desk: 76px; }
.kit-header.top, html:not(.js) .kit-header.top { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.kit-header .brand__sub { display: none; }
.kit-header .brand__name { font: 500 20px/1 var(--font-display); letter-spacing: 0.2px; text-transform: none; white-space: nowrap; overflow: visible; text-overflow: clip; }
@media (min-width: 900px) {
  .kit-header.top {
    --bt-edge: max(0px, calc((100vw - 1440px) / 2));
    min-height: 76px; gap: 20px;
    padding: 0 calc(var(--bt-edge) + clamp(18px, 10vw, 144px)) 0 calc(var(--bt-edge) + clamp(18px, 9.1vw, 131px));
  }
  .kit-header .brand__name { font-size: 27px; }
  .kit-header .nav { margin-right: 0; }
  .kit-header .nav ul { gap: 32px; }
  .kit-header .nav a[aria-current="page"] { color: var(--fg); }
  .kit-header .nav a { font: 400 12.5px/1 var(--font-body); letter-spacing: 0.12em; color: var(--fg-soft); }
  .kit-header .nav a:hover { color: var(--fg); }
  .kit-header .nav a::after { right: 0.139em; bottom: 9px; height: 1.5px; }
}

/* ------------------------------------------------------ loading frames -- */
/* A work photograph sits in .ph-frame (src/views/ui.ts photoFrame): the real image over a blurred placeholder image
   (the lqip, or a flat plate of the average colour, or nothing on --bg-deep). Both carry the photograph's width/height,
   so the frame holds its size while the file loads. The real image is hidden only while html.js is set and fades in
   (250 ms) when becca-photos.js adds .is-loaded; with JavaScript off it is simply shown. A 6 s fallback shows it anyway. */
.ph-frame { position: relative; display: block; overflow: hidden; background: var(--bg-deep); line-height: 0; }
.ph-lqip { display: block; width: 100%; height: auto; filter: blur(8px); transform: scale(1.1); }
.ph-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }   /* z-index: the blurred placeholder (filter + transform) would otherwise paint over it */
.ph-frame--bare .ph-img { position: relative; height: auto; }
.ph-frame--crop { aspect-ratio: 3 / 2; }
.ph-frame--crop .ph-lqip { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.ph-frame--crop.ph-frame--bare .ph-img { position: absolute; height: 100%; }
html.js .ph-img { opacity: 0; transition: opacity 250ms ease; }
html.js .ph-img.is-loaded { opacity: 1; }
html.js .ph-img:not(.is-loaded) { animation: ph-show 0s linear 6s forwards; }
/* once the photograph is shown the blurred placeholder goes (after the fade), so its halo never shows beside a photograph that is letterboxed */
html.js .ph-img.is-loaded + .ph-lqip { opacity: 0; transition: opacity 0s 300ms; }
@keyframes ph-show { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.js .ph-img { transition: none; } }

/* ----------------------------------------------------------- Work page -- */
.works-grid .arch-card__photo .ph-frame { width: 100%; }
.works-grid .label { font-family: var(--font-body); }
.works-grid .archive__head { padding-bottom: var(--space-6); }
.works-grid .archive__jump { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin-top: var(--space-3); }
.works-grid .archive__jump a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 500 12.5px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg); text-decoration: none; border-bottom: 1px solid transparent;
}
.works-grid .archive__jump a:hover { border-bottom-color: var(--fg); }
.works-grid .archive__group { scroll-margin-top: 96px; }
.works-grid .archive__group + .archive__group { margin-top: var(--space-8); }
.works-grid .archive__group > h2 { margin-bottom: var(--space-4); }
.works-grid .archive__group > h2 + .archive__note { margin-top: calc(-1 * var(--space-2)); margin-bottom: var(--space-4); }
.works-grid .archive__note { color: var(--fg-soft); font-family: var(--font-body); font-size: var(--step--1); letter-spacing: 0; }
.works-grid .archive__sub { font-size: var(--step-2); margin: var(--space-6) 0 var(--space-4); }
.works-grid .archive__group > h2 + .archive__sub, .works-grid .archive__group > h2 + .archive__note + .archive__sub { margin-top: 0; }
/* round 1 (3): titles sit right under each picture (align-items: start), 64 px between rows, her order kept (CSS Grid, not
   columns). One column under 700 px (long titles and panoramic works need the width), two to 999 px, three from 1000 px. */
.works-grid .archive__grid { align-items: start; row-gap: 64px; }
.works-grid .arch-card { display: block; }
.works-grid .arch-card__photo { display: block; }
@media (min-width: 620px) and (max-width: 699.98px) {
  .works-grid .grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699.98px) {
  .works-grid .archive__grid { row-gap: 48px; }
}

/* ------------------------------------------------------- work detail -- */
/* the cover frame takes the photograph's displayed size: the placeholder is the in-flow image (same rules as the kit's
   .photo), the real photograph covers it */
.work-detail .work__cover { cursor: zoom-in; }
.work-detail .work__cover .ph-frame { width: fit-content; max-width: 100%; margin-inline: auto; background: transparent; }
.work-detail .work__cover .ph-lqip { width: auto; max-width: 100%; max-height: var(--kit-work-detail-max); }
.work-detail .work__cover .ph-frame--bare .ph-img { width: auto; max-width: 100%; max-height: var(--kit-work-detail-max); }
.work-detail .label { font-family: var(--font-body); }
.work-detail .label__meta { color: var(--fg-soft); }

/* ------------------------------------------------------------- About -- */
.about__portrait-figure .ph-frame { width: 100%; }
.about__cv { margin-top: var(--space-8); }
.about__cv > h2 { margin-bottom: var(--space-4); }
.kit-about .about > section + section.about__cv { margin-top: var(--space-8); }
.kit-cv .cv__row { padding-block: var(--space-2); }
#exhibitions { scroll-margin-top: 96px; }
/* exhibition photographs: whole photo (fit frame, own proportions), 1 column on a phone, 3 from 700px */
.about__gallery { margin-top: var(--space-8); }
.about__gallery > h2 { margin-bottom: var(--space-4); }
.about__gallery-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.about__gallery-fig { margin: 0; max-width: 360px; }
.about__gallery-fig .ph-frame { width: 100%; }
.about__gallery-fig figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--fg-soft); }
@media (min-width: 700px) {
  .about__gallery-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
  .about__gallery-fig { max-width: none; }
}

/* ----------------------------------------------------------- Contact -- */
/* round 1 (8): heading, lead, form and direct lines are 32 px apart; on a desktop the form is the left column and the
   painting (content/home.json contactArt, uncropped) the right one; on a phone the form comes first, then the direct
   lines, then the painting */
.kit-contact .contact__lead { margin-top: 0; max-width: 40ch; }
.kit-contact .contact__layout { margin-top: 32px; gap: 32px; }
.kit-contact .contact-form { margin-top: 0; }
.kit-contact .contact__direct { margin-top: 32px; }
.kit-contact .contact__art { margin: 0; }
.kit-contact .contact__art-link { display: block; }
.kit-contact .contact__art .ph-frame { width: fit-content; max-width: 100%; }
/* 2026-10-24: a tall painting (a charcoal portrait) stops at min(70vh, 640px) high, still whole and uncropped: the
   placeholder image sizes the frame from its own proportions within both limits, the frame shrinks to it and the
   photograph covers exactly that box; a landscape still fills the column */
.kit-contact .contact__art .ph-lqip { width: auto; max-width: 100%; max-height: min(70vh, 640px); }
.kit-contact .contact__art .ph-frame--bare .ph-img { width: auto; max-width: 100%; max-height: min(70vh, 640px); }
.kit-contact .contact__art-cap { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--fg-soft); }
.kit-contact .contact__art-cap a { color: inherit; text-decoration: none; display: grid; gap: 4px; }
.kit-contact .contact__art-cap a:hover cite { text-decoration: underline; }
.kit-contact .contact__art-cap cite { font-style: normal; font-weight: 400; color: var(--fg); }
@media (min-width: 760px) {
  .kit-contact .contact__layout--art { grid-template-columns: minmax(0, 35rem) minmax(0, 1fr); column-gap: 64px; align-items: start; justify-content: start; }
}

/* ------------------------------------------------------------- footer -- */
/* fix round 1 (4): no wordmark band (site.json brandBand = false); "Becca Thorne Art" in Cormorant, mixed case, 32 px
   (26 px on a phone), with 32-48 px of air above and below */
.foot { padding-block: 32px; }
.foot[data-brand-band="off"] .foot__name { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: 0.01em; text-transform: none; }
@media (min-width: 600px) { .foot { padding-block: 48px 40px; } .foot[data-brand-band="off"] .foot__name { font-size: 32px; } }

/* --------------------------------------------- primary buttons (round 1, 5) */
/* "Enquire about this work" and "Send": the Home's dark button (becca-home.css .bt-btn--dark) */
.bt-arrow { font-size: 1.25em; line-height: 0; letter-spacing: 0; }
.work-detail .work__actions .btn, .kit-contact .contact-form__submit .btn {
  min-height: 48px; padding: 0 32px; gap: 0.7em;
  background: var(--fg); color: var(--bg); border: 1px solid var(--fg); border-radius: 0;
  font: 500 12.5px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase;
}
.work-detail .work__actions .btn:hover, .kit-contact .contact-form__submit .btn:hover { background: transparent; color: var(--fg); }
@media (max-width: 479.98px) { .kit-contact .contact-form__submit .btn { width: 100%; } }

/* ------------------------------------------------------ supporting type -- */
/* round 1 (6): metadata 14 px / 1.5, body copy 16 px / 1.6, nothing lighter than --fg-soft */
.works-grid .label__meta, .work-detail .label__meta { font-size: 14px; line-height: 1.5; color: var(--fg-soft); }
.works-grid .label__materials, .works-grid .label__dims { font-size: inherit; }
.kit-about .prose, .kit-about .prose p { font-size: 16px; line-height: 1.6; }
.work-detail .work__words, .work-detail .work__words p { font-size: 16px; line-height: 1.6; }
.kit-contact .field__label, .kit-contact .contact__direct { font-size: 16px; line-height: 1.6; }

/* page heads (round 1, 8 and 9): heading to the next block is 32 px on About and Contact */
.kit-about .page-head, .kit-contact .page-head { padding-bottom: 0; }
.kit-about .section--first, .kit-contact .section--first { padding-top: 32px; }

/* ------------------------------------- previous / next preview cards (work page) -- */
/* a card per neighbour: square thumbnail frame (the whole painting, never cropped), label, title (2 lines), medium. One link each. */
.work-detail .work__nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.work-detail .work__nav-link { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; min-height: 44px; }   /* the work column is narrow: thumbnail on top, words under it */
.work-detail .work__nav-link--prev { grid-column: 1; justify-self: start; }
.work-detail .work__nav-link--next { grid-column: 2; justify-self: end; align-items: flex-end; text-align: right; }
.work-detail .work__nav-thumb { flex: none; display: block; width: 120px; }
.work-detail .work__nav-frame { display: block; width: 100%; aspect-ratio: 1; background: var(--bg-deep); }
.work-detail .work__nav-frame.ph-frame--crop { aspect-ratio: 1; }
.work-detail .work__nav-frame .ph-img { object-fit: contain; }   /* the whole painting inside the square */
.work-detail .work__nav-frame .ph-lqip { object-fit: cover; }
.work-detail .work__nav-text { display: grid; gap: 4px; align-content: center; min-width: 0; }
.work-detail .work__nav-link cite {
  font-size: var(--step-0); line-height: 1.22;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: auto; overflow-wrap: anywhere;
}
.work-detail .work__nav-medium { font-size: 14px; line-height: 1.4; color: var(--fg-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.work-detail .work__nav-link:focus-visible { outline-offset: 6px; }
@media (max-width: 699.98px) {
  .work-detail .work__nav { gap: 16px; }
  .work-detail .work__nav-link, .work-detail .work__nav-link--next { align-items: stretch; text-align: left; justify-self: stretch; }
  .work-detail .work__nav-thumb { width: 100%; }
}

/* =============================================================== Package I (2026-10-22) ===========================
   Typography + readability pass. Measured before/after in build/typography-{before,after}.md. Rule of the pass: the
   look stays (Cormorant display, Jost body, ivory ground); sizes that were below a comfortable reading size go up,
   labels stay small caps but readable (11-12.5 px, tracking 0.12-0.16em), body copy is 16 px on a phone and 17-18 px
   on a desktop, and every colour stays inside the existing palette. */

/* ------------------------------------------------------------------ Home -- */
.bt-eyebrow { font-size: 11.5px; letter-spacing: 0.16em; }
.bt-label { font-size: 11.5px; letter-spacing: 0.16em; }
.bt-enq .bt-label { font-size: 11.5px; }
.bt-btn, .bt-btn--line, .bt-enq .bt-btn { font-size: 12.5px; letter-spacing: 0.12em; }
.bt-viewall { font-size: 12.5px; letter-spacing: 0.12em; }
.bt-hero__cap { font-size: 14px; line-height: 1.45; }
.bt-card__title { font-size: 20px; }
.bt-card__meta { font-size: 14.5px; font-weight: 400; }
.bt-about__text { font-size: 16.5px; line-height: 1.65; font-weight: 400; max-width: 46ch; }
.bt-enq__text { font-size: 16px; line-height: 1.6; font-weight: 400; }
.bt-enq { padding-right: 32px; }
@media (max-width: 899px) {
  .bt-eyebrow { font-size: 11px; letter-spacing: 0.15em; }
  .bt-home h1 { font-size: 2.375rem; line-height: 1.02; }
  .bt-lede { font-size: 16px; line-height: 1.6; }
  .bt-btn { font-size: 12px; letter-spacing: 0.1em; padding: 0 10px; }
  .bt-viewall { font-size: 12px; letter-spacing: 0.1em; }
  .bt-hero__cap a { font-size: 14px; }
  .bt-feat h2 { font-size: 28px; }
  .bt-card__title { font-size: 18px; }
  .bt-about__text { font-size: 16px; max-width: none; }
}

/* ---------------------------------------------- footer + labels (all pages) */
.foot__h { font: 500 12px/1.2 var(--font-body); letter-spacing: 0.14em; color: var(--fg-soft); }

/* ----------------------------------------------------------------- Work --- */
.works-grid .archive__jump a { font-size: 12.5px; letter-spacing: 0.12em; }
.works-grid .label__meta { letter-spacing: 0; }

/* ------------------------------------------------------- Work detail ----- */
.work-detail .label__title { font-size: clamp(2.375rem, 1.8rem + 1.5vw, 3rem); }   /* 38 px on a phone (long titles), 48 px on a desktop */
.work-detail .label__meta, .work-detail .work__nav-medium { font-size: 14.5px; letter-spacing: 0; }
.work-detail .work__words, .work-detail .work__words p { font-size: 17px; line-height: 1.65; }
.work-detail .work__nav-dir { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-soft); }
.work-detail .work__nav-link cite { font-size: 19px; line-height: 1.2; font-weight: 500; color: var(--fg); }
.work-detail .work__nav-all { font-size: 15px; }

/* ----------------------------------------------------------------- About -- */
/* a modest widening of the narrow column (820 -> 920 px of content) so the exhibition entries sit on one line and the
   portrait carries more; the bio keeps a 66 ch measure. */
.kit-about .wrap--narrow { max-width: calc(57.5rem + 2 * var(--pad)); }
.kit-about .prose, .kit-about .prose p { font-size: 16px; line-height: 1.65; }
@media (min-width: 900px) { .kit-about .prose, .kit-about .prose p { font-size: 18px; line-height: 1.7; } }
.kit-about .about__statement { max-width: 66ch; }
/* section headings: larger, set off by a hairline and air above */
.kit-about .about__cv > h2, .kit-about .about__gallery > h2 { font-size: clamp(1.9375rem, 1.5rem + 1.2vw, 2.5rem); line-height: 1.1; margin-bottom: var(--space-5); }
.kit-about .about__cv, .kit-about .about__gallery { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--rule); }
/* year label: small tracked Jost over its own rows, with the air between years (80 px) larger than inside a year */
.kit-cv .cv__h { font: 500 14px/1.2 var(--font-body); letter-spacing: 0.14em; color: var(--fg); margin-bottom: var(--space-1); }
.kit-cv .cv__year + .cv__year { margin-top: 5rem; }
.kit-cv .cv__row { padding-block: 18px; }
.kit-cv .cv__title { text-wrap: pretty; }
.about__gallery-fig figcaption { font-size: 15px; line-height: 1.5; margin-top: 12px; }

/* --------------------------------------------------------------- Contact -- */
.kit-contact .field__label { font-size: 16px; }
.kit-contact .contact__art-cap { font-size: 15px; }
.kit-contact .field__error { font-size: 15px; margin-top: 8px; }