/* ---- legal-pages.css ---- */
/* site-kit section: legal-pages. Ported 2026-10-21 from suzannedolanart.com public/assets/p-pages.css ("legal"
   150-152). Everything else (.prose, .mono, .muted, .wrap--narrow, .section--first) comes from base/base.css. */
.kit-legal .legal__prose h2 { font-size: var(--step-1); line-height: 1.25; }
.kit-legal .legal__prose > h1 + p { margin-top: var(--space-2); }

/* inline links keep a 44px tap height without moving the line (SPEC section 9) */
.kit-legal a:not(.btn) {
  display: inline-block;
  --kit-legal-pad: max(0px, calc((45px - 1lh) / 2));
  padding-block: var(--kit-legal-pad);
  margin-block: calc(-1 * var(--kit-legal-pad));
  overflow-wrap: anywhere;
}

/* ---- 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; }