/* ==========================================================================
   kateholiday.com

   One deliberate light ground. The paintings carry every colour on the page;
   the interface stays out of the way. See docs/04-artwork-standards.md.
   ========================================================================== */

:root {
  /* Palette — a near-neutral gallery ground. Low chroma on purpose: a warm
     ground pushes the cool canvases (Mirrored 1/2, the Supernatural panels)
     colder by contrast, which misrepresents the paint. Slightly off white so
     the bright passages don't blow out against it.

     There is no accent hue anywhere in this file. Four series, four unrelated
     palettes — any interface colour would agree with one of them and fight the
     other three. Interaction is carried by weight, rule, and position instead. */
  --paper:      #edecea;
  --paper-deep: #e2e1de;
  --ink:        #191817;
  --ink-soft:   #5b5854;   /* 5.7:1 on paper */
  --ink-faint:  #67645f;   /* 4.7:1 on paper — the floor, captions run at 12px */
  --rule:       rgba(25, 24, 23, 0.14);

  --font-display: "Helvetica Neue", Helvetica, Inter, system-ui, -apple-system, sans-serif;
  --font-title:   "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --gutter:  clamp(1.25rem, 4vw, 4.5rem);
  --gap:     clamp(0.75rem, 1.5vw, 1.75rem);
  --rhythm:  clamp(4.5rem, 11vh, 9rem);

  --measure: 34rem;
  --shell:   118rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -------------------------------------------------------------- reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 0.82rem + 0.2vw, 0.9375rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

a { color: inherit; }

h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }

button {
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

:focus-visible {
  /* Offset puts the ring on the paper rather than on the artwork, so it stays
     visible even around a near-black canvas. */
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* -------------------------------------------------------------- utilities */

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transition: top 0.15s var(--ease);
}
.skip:focus { top: 0.75rem; }

/* -------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding: clamp(1rem, 2.2vw, 1.6rem) var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.125rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.4vw, 2.25rem);
}

.site-nav a {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding-bottom: 0.15rem;
  border-bottom: 1px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.site-nav a:hover,
.site-nav a:focus-visible { color: var(--ink); }

.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: currentColor;
}

/* On a phone the nav drops to its own full-width line rather than hiding
   behind a menu button — four links do not need a drawer. */
@media (max-width: 30rem) {
  .site-header { justify-content: center; text-align: center; }
  .site-nav { flex-basis: 100%; }
  .site-nav ul { justify-content: center; }
}

/* -------------------------------------------------------------- work grid */

main {
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vh, 5rem) var(--gutter) 0;
}

.lede {
  max-width: var(--measure);
  margin-bottom: var(--rhythm);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.series + .series { margin-top: var(--rhythm); }
.series:last-of-type { margin-bottom: var(--rhythm); }

.series__header {
  margin-bottom: clamp(1.5rem, 3.5vh, 2.75rem);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--rule);
}

.series__title {
  font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.series__statement {
  max-width: var(--measure);
  margin-top: 0.9rem;
  color: var(--ink-soft);
}

/* A row's items are given `flex-grow: <aspect ratio>` with a zero basis, so
   their widths come out proportional to their aspect ratios and every image
   in the row lands on the same height. No JavaScript, no fixed columns. */
.row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gap);
}

.row + .row { margin-top: var(--gap); }

.work {
  flex: var(--aspect) 1 0%;
  min-width: 0;
}

/* A work sitting alone on a row would otherwise stretch the full page width.
   Cap it by implied height instead, so tall canvases stay on one screen. */
.row--single .work { max-width: min(100%, calc(var(--aspect) * 78vh)); }

.work__trigger {
  display: block;
  width: 100%;
  background: var(--paper-deep);
}

.work__image {
  display: block;
  width: 100%;
  height: auto;
  background-size: cover;
  background-position: center;
  transition: opacity 0.25s var(--ease);
}

.work__trigger:hover .work__image,
.work__trigger:focus-visible .work__image { opacity: 0.88; }

/* Museum wall label: italic serif title, smaller roman detail in parentheses.
   Centred rather than baseline-aligned — with the two sizes this far apart a
   shared baseline leaves the detail line looking like it has floated up. */
.work__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.5ch;
  margin-top: 0.7rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.work__title {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--ink);
}

.work__meta { color: var(--ink-faint); }

/* Phones: one work per row, full width, captions underneath. */
@media (max-width: 48rem) {
  .row { flex-direction: column; gap: 2.25rem; }
  .row--single .work,
  .work { max-width: 100%; }
  .series + .series { margin-top: clamp(3.5rem, 9vh, 6rem); }
}

/* -------------------------------------------------------------- text pages */

.page-text main { padding-top: clamp(3.5rem, 12vh, 8rem); }

.prose {
  max-width: var(--measure);
  padding-bottom: var(--rhythm);
  font-size: 1rem;
  line-height: 1.75;
}

.prose h1 {
  margin-bottom: 1.75rem;
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.0625rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.prose p + p { margin-top: 1.15rem; }

.prose .statement {
  font-family: var(--font-title);
  font-size: 1.125rem;
  line-height: 1.7;
}

.prose a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.prose a:hover { border-bottom-color: currentColor; }

.contact-lines { line-height: 2.1; }

.cv { margin-top: 2.75rem; }

.cv h2 {
  margin-bottom: 0.85rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cv li + li { margin-top: 0.35rem; }

/* -------------------------------------------------------------- footer */

.site-footer {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 2rem var(--gutter) 2.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* -------------------------------------------------------------- lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vh, 3rem);
  background: rgba(12, 10, 8, 0.96);
  color: #efeae2;
  opacity: 0;
  transition: opacity 0.22s var(--ease);
}

.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 100%;
  max-height: 100%;
}

.lightbox__image {
  max-width: min(100%, 92vw);
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox__caption {
  max-width: 44rem;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(239, 234, 226, 0.72);
}

.lightbox__caption .t {
  display: block;
  font-family: var(--font-title);
  font-style: italic;
  font-size: 0.9375rem;
  color: #efeae2;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  color: rgba(239, 234, 226, 0.62);
  transition: color 0.18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.lightbox__close:hover,
.lightbox__nav:hover { color: #efeae2; }

.lightbox__close {
  top: 0.5rem; right: 0.75rem;
  width: 3rem; height: 3rem;
  font-size: 2rem;
  line-height: 1;
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 3.5rem; height: 5rem;
  font-size: 2.75rem;
  line-height: 1;
}

.lightbox__nav--prev { left: 0.25rem; }
.lightbox__nav--next { right: 0.25rem; }
.lightbox__nav[disabled] { opacity: 0.2; cursor: default; }

body.lightbox-open { overflow: hidden; }

@media (max-width: 48rem) {
  .lightbox__image { max-height: 68vh; }
  .lightbox__nav { width: 2.75rem; font-size: 2rem; }
}

/* -------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* -------------------------------------------------------------- print */

@media print {
  .site-header, .site-footer, .skip, .lightbox { display: none !important; }
  .row { display: block; }
  .work { break-inside: avoid; margin-bottom: 1.5rem; }
}