@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

/* ---------------------------------------------------------------
   Kathy Wood Fine Art
   A quiet plate book: parchment ground, sepia ink, hairline rules.
   Palette lifted from the paintings themselves - ochre, umber,
   the dusty blue of the shepherd girl's skirt.
   --------------------------------------------------------------- */

:root {
  --paper:      #f7f3ea;
  --paper-warm: #f0e9db;
  --paper-deep: #e8dfcd;
  --ink:        #221c16;
  --ink-soft:   #6a5f52;
  --ink-faint:  #9b9082;
  --rule:       #d7ccb8;
  --ochre:      #a9763c;
  --blue:       #4b6076;

  --measure: 34rem;
  --page: 74rem;
  --gap: clamp(1.5rem, 4vw, 3.25rem);

  --lift: 0 1px 2px rgba(58, 44, 28, .10),
          0 8px 22px -8px rgba(58, 44, 28, .22),
          0 26px 48px -28px rgba(58, 44, 28, .30);
  --lift-hi: 0 2px 4px rgba(58, 44, 28, .12),
             0 14px 34px -10px rgba(58, 44, 28, .28),
             0 40px 70px -34px rgba(58, 44, 28, .34);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::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: 'EB Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.02rem, .38vw + .95rem, 1.16rem);
  line-height: 1.72;
  font-feature-settings: 'onum' 1, 'kern' 1, 'liga' 1;
  text-rendering: optimizeLegibility;
}

/* Paper grain. Fixed, multiplied, barely there. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 1px solid var(--ochre);
  outline-offset: 4px;
}

::selection { background: rgba(169, 118, 60, .22); }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--paper-warm); }
::-webkit-scrollbar-thumb { background: #cdc0a9; border: 3px solid var(--paper-warm); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--ochre); }

.wrap { width: min(100% - 2.5rem, var(--page)); margin-inline: auto; }
.narrow { width: min(100% - 2.5rem, var(--measure)); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; z-index: 10000;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- typography ---------- */

h1, h2, h3 {
  font-family: 'Cormorant Garamond', 'Cormorant', Garamond, Georgia, serif;
  font-weight: 300;
  line-height: 1.12;
  margin: 0;
}

.display {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  letter-spacing: .005em;
}

.section-title {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  text-align: center;
}

.eyebrow {
  font-size: .74rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.1rem;
  font-feature-settings: 'lnum' 1;
}
.eyebrow.center { text-align: center; }

.lede {
  font-size: clamp(1.14rem, .5vw + 1.05rem, 1.34rem);
  line-height: 1.66;
  color: var(--ink-soft);
}

.prose p { margin: 0 0 1.35em; }
.prose p:last-child { margin-bottom: 0; }

.prose.dropcap > p:first-of-type::first-letter {
  font-family: 'Cormorant Garamond', Garamond, serif;
  font-weight: 300;
  float: left;
  font-size: 4.1em;
  line-height: .78;
  padding: .06em .1em 0 0;
  color: var(--ochre);
}

em, .italic { font-style: italic; }

/* Kathy in her own words. Set large and quiet, with a hairline down the left
   rather than quote marks - the words carry it. */
.quote {
  margin: clamp(2.2rem, 5vw, 3.4rem) 0;
  padding-left: clamp(1.2rem, 3vw, 2.2rem);
  border-left: 1px solid var(--ochre);
}
.quote p {
  font-family: 'Cormorant Garamond', Garamond, serif;
  font-size: clamp(1.35rem, 1.5vw + 1.05rem, 1.95rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 .7em;
}
.quote p:last-of-type { margin-bottom: 0; }
.quote cite {
  display: block;
  margin-top: 1.1rem;
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Placeholder copy awaiting Kathy's own words. Deliberately visible so nothing
   invented ever goes live by accident. Delete the class once the text is real. */
.todo {
  font-style: italic;
  color: var(--ink-faint);
  background: linear-gradient(rgba(169,118,60,.07), rgba(169,118,60,.07));
  box-shadow: inset 0 -1px 0 rgba(169,118,60,.35);
  padding: .1em .15em;
}

/* Ornamental rule with a lozenge at the centre. */
.ornament {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: clamp(3.5rem, 8vw, 6rem) auto;
  color: var(--rule);
}
.ornament::before, .ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
}
.ornament span {
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: var(--ochre);
  opacity: .55;
}

/* ---------- masthead ---------- */

.masthead {
  padding: clamp(2.4rem, 5vw, 3.8rem) 0 0;
  text-align: center;
}

.wordmark {
  display: inline-block;
  font-family: 'Cormorant Garamond', Garamond, serif;
  font-weight: 300;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  line-height: 1;
}
.wordmark-sub {
  margin: .85rem 0 0;
  font-size: .7rem;
  letter-spacing: .38em;
  text-indent: .38em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.nav {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.1rem, 3.4vw, 2.9rem);
  margin: 0;
  padding: .95rem 0;
  list-style: none;
}
.nav a {
  font-size: .74rem;
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  color: var(--ink-soft);
  position: relative;
  padding-bottom: 2px;
  transition: color .35s var(--ease);
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -1px;
  height: 1px;
  background: var(--ochre);
  transition: right .45s var(--ease);
}
.nav a:hover, .nav a[aria-current='page'] { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current='page']::after { right: 0; }

/* ---------- plates ---------- */

/* A painting sits on the paper with one hairline and a soft shadow.
   No mat, no frame - the picture is the object. */
.plate figure { margin: 0; }

.plate img {
  width: 100%;
  border: 1px solid rgba(94, 76, 52, .22);
  box-shadow: var(--lift);
  background: var(--paper-warm);
  transition: box-shadow .6s var(--ease), transform .6s var(--ease);
}

.plate figcaption {
  margin-top: 1.05rem;
  font-size: .94rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.plate .num {
  display: block;
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .4rem;
  font-feature-settings: 'lnum' 1;
}
.plate .name {
  font-family: 'Cormorant Garamond', Garamond, serif;
  font-size: 1.32rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .01em;
  transition: color .4s var(--ease);
}
.plate .meta {
  display: block;
  margin-top: .15rem;
  font-style: italic;
  font-size: .92rem;
  color: var(--ink-faint);
}

a.plate { display: block; cursor: pointer; }
a.plate:hover img { box-shadow: var(--lift-hi); transform: translateY(-3px); }
a.plate:hover .name { color: var(--ochre); }

/* Hero plate on the home page */
.hero { padding: clamp(2.2rem, 5vw, 3.6rem) 0 0; }

/* Centred on the plate itself. A grid with justify-items:center resolves the
   holder to fit-content, which the image's huge max-content width blows past. */
.hero .plate {
  max-width: min(100%, 40rem);
  width: 100%;
  margin-inline: auto;
}
.hero figcaption { text-align: center; }

/* Gallery masonry. Built from explicit column elements rather than CSS
   `columns`, because multicol fills column-major: with 52 works, column one
   held plates I-XVII and column two started at XVIII, so reading across the
   top row gave I, XVIII, XXXVI and the numbering looked full of gaps.
   site.js deals the plates round-robin instead, so each row reads in order. */
.plates {
  display: flex;
  gap: var(--gap);
  align-items: flex-start;
}
.plates-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* Three-across row, used on the home and about pages. Bottom-aligned so the
   captions sit on one line the way pictures sit on a shelf, whatever their
   proportions. */
.row3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--gap);
  align-items: end;
}

/* Cap the height once there is room for a real row. A tall charcoal beside a
   wide landscape used to run half again as high and made the landscape look
   like a postage stamp; capped, the three read as one shelf. Below the
   breakpoint they stack, one per row, and the cap would only shrink them. */
@media (min-width: 40rem) {
  .row3 .plate img {
    max-height: 21rem;
    width: auto;
    margin-inline: auto;
  }
  .row3 figcaption { text-align: center; }
}

/* ---------- filters ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem 1.6rem;
  margin: 0 0 clamp(2.4rem, 5vw, 3.4rem);
  padding: 0;
  list-style: none;
}
.filters button {
  font: inherit;
  font-size: .74rem;
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  background: none;
  border: 0;
  padding: .3rem 0;
  color: var(--ink-faint);
  cursor: pointer;
  position: relative;
  transition: color .35s var(--ease);
}
.filters button::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--ochre);
  transition: right .45s var(--ease);
}
.filters button:hover { color: var(--ink-soft); }
.filters button[aria-pressed='true'] { color: var(--ink); }
.filters button[aria-pressed='true']::after { right: 0; }

/* ---------- process ---------- */

.stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  margin-bottom: clamp(3.2rem, 7vw, 5.5rem);
}
@media (min-width: 52rem) {
  .stage {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(2.2rem, 5vw, 4rem);
    align-items: center;
  }
  .stage:nth-child(even) .stage-img { order: 2; }
}

/* Capped so seven tall canvases read as a sequence rather than a marathon. */
.stage-img img {
  width: auto;
  max-width: 100%;
  max-height: 68vh;
  margin-inline: auto;
  border: 1px solid rgba(94, 76, 52, .22);
  box-shadow: var(--lift);
}

.stage-body { position: relative; }
.stage-date {
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ochre);
  margin: 0 0 .7rem;
  font-feature-settings: 'lnum' 1;
}
.stage-step {
  font-family: 'Cormorant Garamond', Garamond, serif;
  font-size: clamp(3rem, 7vw, 4.6rem);
  font-weight: 300;
  line-height: 1;
  color: var(--rule);
  margin: 0 0 .5rem;
  font-feature-settings: 'lnum' 1;
}
.stage-body p { margin: 0; color: var(--ink-soft); }

/* Small strip of a whole series, used as a teaser */
.strip {
  display: grid;
  grid-template-columns: repeat(var(--frames, 7), 1fr);
  gap: .55rem;
}
.strip img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid rgba(94, 76, 52, .18);
  filter: saturate(.92);
  transition: filter .5s var(--ease), transform .5s var(--ease);
}
.strip img:hover { filter: none; transform: translateY(-3px); }

/* Below the breakpoint the seven frames would be postage stamps, so the strip
   becomes a swipeable rail instead of squeezing. */
@media (max-width: 44rem) {
  .strip {
    display: flex;
    gap: .6rem;
    overflow-x: auto;
    padding-bottom: .8rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .strip img {
    flex: 0 0 38%;
    scroll-snap-align: start;
  }
}

/* ---------- panels ---------- */

.panel {
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(3.2rem, 7vw, 5.5rem) 0;
  margin: clamp(3.5rem, 8vw, 6rem) 0;
}

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 52rem) {
  .split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}

.portrait-slot {
  aspect-ratio: 4 / 5;
  background:
    repeating-linear-gradient(-45deg, rgba(169,118,60,.05) 0 10px, transparent 10px 20px),
    var(--paper-deep);
  border: 1px solid var(--rule);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 2rem;
  color: var(--ink-faint);
  font-style: italic;
  font-size: .92rem;
}
.portrait-slot img { border: 0; }

/* ---------- buttons & forms ---------- */

.btn {
  display: inline-block;
  font-size: .74rem;
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  padding: .95rem 1.9rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background .45s var(--ease), color .45s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }

.field { margin-bottom: 1.5rem; }
.field label {
  display: block;
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .5rem;
}
.field input, .field textarea, .field select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: .8rem .9rem;
  transition: border-color .35s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--ochre);
  outline: none;
}
.field textarea { min-height: 9rem; resize: vertical; }

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

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  place-items: center;
  background: rgba(28, 22, 16, .94);
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[open], .lightbox.is-open { display: grid; }
.lightbox figure {
  margin: 0;
  display: grid;
  gap: 1.1rem;
  justify-items: center;
  max-height: 100%;
  animation: lb .5s var(--ease) both;
}
@keyframes lb { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.lightbox img {
  max-height: 78vh;
  max-width: 100%;
  width: auto;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
}
.lightbox figcaption {
  text-align: center;
  color: #e6ddcd;
  font-size: .95rem;
}
.lightbox figcaption .name {
  font-family: 'Cormorant Garamond', Garamond, serif;
  font-size: 1.45rem;
  display: block;
}
.lightbox figcaption .meta { font-style: italic; color: #a2968a; }

.lb-btn {
  position: absolute;
  background: none;
  border: 0;
  color: #cbbfae;
  font-family: 'Cormorant Garamond', Garamond, serif;
  font-size: 2.4rem;
  line-height: 1;
  padding: .6rem 1rem;
  cursor: pointer;
  transition: color .3s var(--ease);
}
.lb-btn:hover { color: #fff; }
.lb-close { top: .6rem; right: .8rem; font-size: 1.9rem; }
.lb-prev { left: .3rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: .3rem; top: 50%; transform: translateY(-50%); }

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

.foot {
  border-top: 1px solid var(--rule);
  margin-top: clamp(4rem, 9vw, 7rem);
  padding: clamp(2.4rem, 5vw, 3.6rem) 0;
  text-align: center;
  color: var(--ink-faint);
  font-size: .88rem;
}
.foot .wordmark { font-size: 1.05rem; letter-spacing: .3em; text-indent: .3em; color: var(--ink-soft); }
.foot p { margin: 1rem 0 0; }
.foot a { border-bottom: 1px solid var(--rule); }
.foot a:hover { color: var(--ochre); border-color: var(--ochre); }

/* ---------- reveal ---------- */

/* Fade-in-on-scroll is an ENHANCEMENT, never a precondition for seeing a
   painting. The work is visible by default and only hidden once site.js has
   added .reveal-ready to <html>, which it does only when it has a working
   IntersectionObserver to un-hide it again. Previously .reveal was opacity:0
   in the stylesheet, so anything that stopped the observer firing left the
   whole gallery permanently blank. */
.reveal { opacity: 1; }

.reveal-ready .reveal { opacity: 0; transform: translateY(18px); }
.reveal-ready .reveal.seen {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.stagger > * { opacity: 0; transform: translateY(16px); animation: rise .95s var(--ease) forwards; }
.stagger > *:nth-child(1) { animation-delay: .05s; }
.stagger > *:nth-child(2) { animation-delay: .17s; }
.stagger > *:nth-child(3) { animation-delay: .29s; }
.stagger > *:nth-child(4) { animation-delay: .41s; }
@keyframes rise { to { opacity: 1; transform: none; } }

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