/* ============================================================================
   KERRI SINNENBERG STUDIO — "57 On Center"
   Museums hang work so the center of every piece sits on one invisible line.
   This site reproduces that line: every painting sits in an identical 540px
   bay, vertically centered, so scrolling moves the work past a fixed height.
   Nothing is centered. Everything hangs from container x = 0.
   ========================================================================= */

:root {
  color-scheme: light;

  /* GROUND — absolutely neutral. R=G=B. No hue exists in the chrome. */
  --wall:       #F7F7F7;

  /* INK — all the warmth on this site lives in these two values */
  --ink:        #1C1815;
  --label:      #6E6862;

  /* LINES — exactly two, one job each */
  --hairline:   #D9D5CE;   /* wordmark flanking rules, the footer rule, soft-edge borders */
  --rule:       #B6AFA6;   /* link underlines, field underlines, middot separators */

  --link-rest:  var(--rule);
  --link-hover: var(--ink);

  --sans:  "Jost", "Century Gothic", Futura, system-ui, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --container:  1240px;
  --pad:        100px;
  --art-max:    540px;   /* HARD CEILING on an artwork's long edge. No exception. */
  --cap:        540px;   /* the ceiling actually applied. MUST stay a plain length. */
  --bay:        540px;
  --label-col:  260px;
  --gap-col:     80px;
  --print-art:  380px;
  --studio-art: 380px;
  --measure:      480px;
  --measure-lead: 620px;

  --radius: 0;
  /* There is no --shadow token because there are no shadows on this website. */
}

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

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

body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font: 400 16px/27px var(--serif);
  font-variation-settings: "opsz" 16;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, figure, form, input, textarea, button, a, select {
  border-radius: 0;
  box-shadow: none;
}
img { display: block; max-width: 100%; height: auto; background: var(--wall); }
figure { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }

.container,
.site-head__inner,
.site-foot__inner,
main > * {
  width: min(var(--container), calc(100vw - 160px));
  margin-inline: auto;
}

/* ---------------------------------------------------------------- TYPE ROLES */

/* 1+2 — wordmark */
.wordmark { display: inline-block; width: 181px; }
.wordmark a { color: inherit; text-decoration: none; display: block; }
.wordmark__name,
.wordmark__studio {
  display: block;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 14px;
  text-transform: uppercase;
  color: var(--ink);
}
.wordmark__name { letter-spacing: 0.16em; margin-right: -0.16em; }
.wordmark__studio {
  letter-spacing: 0.42em;
  margin-right: -0.42em;
  margin-top: 8px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 181px;
}
.wordmark__studio::before,
.wordmark__studio::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--hairline);
}
.wordmark__studio > span { flex: 0 0 auto; }

/* 3 — SIGNAGE: nav, section labels, availability, form labels, footer nav */
.site-nav a, .section__label, .avail, .crumb a, .foot-nav a,
.field > label, .copyright, .pager__k, .print-status, .h1-quiet {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--label);
}

/* 4 — META: medium, dimensions, dates, venues, captions, price */
.meta, .price, .ex__meta, figcaption, .print-meta, .artwork__specs p, .announce p {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.02em;
  color: var(--label);
}

/* 5 — UI LINK */
.ui-link, .inquire, .more, .foot-contact a, .pager__t, .form button, .announce a {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--rule);
  background: transparent;
  border: 0;
  padding: 0;
  transition: text-decoration-color 0.22s ease;
}
.ui-link:hover, .inquire:hover, .more:hover, .foot-contact a:hover,
.pager__t:hover, .form button:hover, .announce a:hover {
  text-decoration-color: var(--link-hover);
}
.form button { cursor: pointer; }

/* 6 — ARTWORK TITLE. Italic appears on this site for exactly one thing. */
.work-title, .artwork__title, .print-title, .pager__t {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "opsz" 16;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--ink);
}
.year { font-style: normal; }
.ex__title { /* a show is not a work: roman */
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
}

/* 7 — BODY / VOICE */
.prose, .prose p, .art-note, .lede {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "opsz" 16;
  font-size: 16px;
  line-height: 27px;
  color: var(--ink);
  max-width: var(--measure);
}
.prose p + p { margin-top: 24px; }

/* 8 — LEAD. About's opening sentence and Contact's single line. Nowhere else. */
.lead {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 40;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: var(--measure-lead);
}

/* ------------------------------------------------------------------ HEADER */
.skip {
  position: absolute; left: -9999px;
  background: var(--wall); color: var(--ink); padding: 8px 16px; z-index: 10;
}
.skip:focus { left: 16px; top: 16px; }

.site-head { position: static; } /* the signage is at the entrance; it does not follow you */
.site-head__inner {
  height: 88px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 26px;
}
.site-nav ul { display: flex; gap: 40px; }
.site-nav a { text-decoration: none; transition: color 0.15s linear; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.nav-toggle { display: none; }

/* Announcement: signage tier, no band, no fill. Absent when she turns it off. */
.announce { margin-top: 24px; }
.announce p { margin: 0; }
.announce[hidden] { display: none; }

/* -------------------------------------------------------------- HANG UNIT */
main { padding-top: 96px; }
main > section + section { margin-top: 120px; }

.hang { display: flex; align-items: flex-start; }
.hang + .hang { margin-top: 160px; }

.bay {
  width: var(--bay);
  height: var(--bay);
  flex: 0 0 var(--bay);
  display: flex;
  align-items: center;      /* the 57-inch line */
  justify-content: flex-start;
  background: var(--wall);
}
/* ONE rule sizes every artwork, everywhere.
   --w/--h are the exact render sizes, already capped at 540px on the long edge,
   so `width` is a definite length and the image reserves its space before it
   loads. `max-width` lets a narrow screen clamp the width, and aspect-ratio with
   height:auto keeps the shape while it does.
   Do NOT rewrite this as min()/calc(): a replaced element inside a flex frame
   resolves that to 0 until the file arrives, and nothing holds its place. */
.bay img, .cell__frame img, .artwork__figure img, .print-bay img {
  width: var(--w);
  height: auto;
  max-width: 100%;
  aspect-ratio: var(--ar);
  flex: 0 1 auto;
}

.hang__label {
  width: var(--label-col);
  flex: 0 0 var(--label-col);
  margin-left: var(--gap-col);
  padding-top: calc(var(--bay) / 2 - 18px); /* first baseline on the bay's center */
}
.hang a { text-decoration: none; color: inherit; display: contents; }

/* soft-edge works only: the painted edge would otherwise dissolve into the ground */
img[data-edge="soft"] { border: 1px solid var(--hairline); }

/* wall label */
.label-line + .label-line { margin-top: 16px; }
.mid { color: var(--rule); margin: 0 6px; }
.nowrap { white-space: nowrap; }
.work-link:hover .work-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--ink);
  transition: text-decoration-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* availability is a fact about the object, set in the same register as the medium */
.avail { display: block; }
.status-price { margin-top: 8px; }

/* --------------------------------------------------------------- SECTIONS */
.section__label { display: block; margin-bottom: 64px; }
.h1-quiet { display: block; margin-bottom: 64px; } /* h1 exists for semantics, styled at 11px */

/* ---------------------------------------------------- HOME: THE GRID
   Two columns, modelled on heatherday.com's index (617px cells, 90px column gap,
   50px row gap). Hers are uniform 3:2 crops; these paintings are never cropped,
   so each one is contained and vertically centred in a fixed cell instead. Two
   works in a row still share one centreline. */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 80px;
  row-gap: 96px;
}
.cell__frame {
  display: flex;
  align-items: center;         /* the shared centreline, kept in grid form */
  justify-content: flex-start; /* left edge on the column's vertical line, so the
                                  caption beneath it aligns without being told to */
  height: var(--bay);
  width: 100%;                 /* definite, so the image's own 100% has a basis */
}
.cell__label { display: block; margin-top: 24px; }
.cell__label .work-title { display: block; }
.cell__label .meta { display: block; margin-top: 8px; }
.grid a { text-decoration: none; color: inherit; display: block; }
.grid-section .intro-link { margin-top: 96px; }

/* ------------------------------------------------- HOME: MEET KERRI
   Text left, portrait right, the arrangement Heather Day uses for her own
   portrait (text column ~768, portrait 379x502 at 3:4). */
.meet {
  display: grid;
  grid-template-columns: 1fr 420px;
  column-gap: 120px;
  align-items: start;
}
.meet__text .lead { max-width: 440px; }
.meet__text .prose { margin-top: 40px; }
.meet__figure img { width: var(--w); height: var(--h); }
.intro-meta { margin-top: 40px; display: block; }
.intro-link { margin-top: 24px; }

/* ---------------------------------------------------------- ARTWORK DETAIL */
.crumb { margin: 48px 0 0; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.artwork { margin-top: 96px; }
.artwork--beside { display: flex; align-items: flex-start; }
.artwork--beside .artwork__label {
  margin-left: 80px;
  width: 320px;
  flex: 0 0 320px;
  padding-top: calc(var(--bay) * 0.62 - 18px);
}
.artwork__label { margin-top: 40px; width: clamp(320px, 100%, 480px); }
.artwork--beside .artwork__label { margin-top: 0; }

.art-note { margin-top: 64px; }
.artwork-pager {
  display: flex;
  justify-content: space-between;
  margin-top: 120px;
}
.pager { text-decoration: none; display: block; }
.pager--next { text-align: right; }
.pager__k { display: block; }
.pager__t { display: block; margin-top: 8px; }

/* -------------------------------------------------------------- ABOUT */
.about__lead { margin-bottom: 64px; }
.about__photo { margin-top: 96px; }
.about__photo img { width: var(--w); height: var(--h); max-width: 100%; }
.about__photo figcaption { margin-top: 24px; }
.about__link { margin-top: 120px; }

/* -------------------------------------------------------- EXHIBITIONS */
.ex-block + .ex-block { margin-top: 120px; }
.ex { max-width: var(--measure); }
.ex + .ex { margin-top: 96px; }
.ex__meta { margin-top: 8px; }

/* ------------------------------------------------------------- PRINTS */
.prints__didactic { margin-bottom: 96px; }
.print-grid {
  display: grid;
  grid-template-columns: repeat(2, var(--print-art));
  column-gap: 120px;
  row-gap: 120px;
  margin-left: 180px;
}
.print-bay {
  width: var(--print-art);
  height: var(--print-art);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.print-bay img { --cap: var(--print-art); }
.print-caption { margin-top: 24px; width: var(--print-art); }
.print-meta { margin-top: 16px; }
.print-status { display: block; margin-top: 16px; }
.prints__close { margin-top: 120px; }
.prints__cta { margin-top: 24px; }
.print-original { margin-top: 24px; }
.art-print { margin-top: 64px; }
.print-grid a { text-decoration: none; color: inherit; display: block; }
.print-grid .print-title { display: block; }
.print-grid .print-meta .meta { display: block; }
.print-sizes { margin-top: 16px; }
.print-size { display: flex; gap: 16px; font: 400 14px/22px var(--sans); color: var(--label); }
.print-size__label { min-width: 120px; }
.print-size__price { margin-left: auto; }

/* --------------------------------------------------------------- FORM */
.form { width: var(--measure); margin-top: 64px; }
.field + .field { margin-top: 32px; }
.field > label { display: block; margin-bottom: 8px; }
.field input, .field textarea {
  font: 400 14px/22px var(--sans);
  letter-spacing: 0.02em;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0 0 8px;
  width: 100%;
  -webkit-appearance: none;
  transition: border-bottom-color 0.15s linear;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
.field textarea { resize: vertical; }
.field--submit { margin-top: 32px; }
.hp { position: absolute; left: -9999px; }
.contact__links { margin-top: 64px; }
.contact__links li + li { margin-top: 8px; }

/* ------------------------------------------------------------- FOOTER */
.site-foot { margin-top: 160px; }
.site-foot__inner { border-top: 1px solid var(--hairline); padding: 48px 0 96px; }
.foot-row { display: flex; justify-content: space-between; align-items: flex-start; }
.foot-right { text-align: right; }
.foot-nav { display: flex; gap: 24px; justify-content: flex-end; }
.foot-nav a { text-decoration: none; }
.foot-nav a:hover { color: var(--ink); }
.foot-contact { margin-top: 16px; }
.foot-contact li + li { margin-top: 8px; }
.copyright { margin-top: 32px; }
.wordmark--foot { display: block; }

/* -------------------------------------------------------------- A11Y */
.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;
}
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* ========================================================== RESPONSIVE
   Four states. No hamburger exists at any width. */

/* 1040–1399: the declared empty wall absorbs the entire loss. */
@media (max-width: 1399px) {
  .container, .site-head__inner, .site-foot__inner, main > * {
    width: max(880px, calc(100vw - 160px));
    width: min(var(--container), max(880px, calc(100vw - 160px)));
  }
}

/* 768–1039: the hang retires rather than degrading into a half-version. */
@media (max-width: 1039px) {
  .container, .site-head__inner, .site-foot__inner, main > * {
    width: calc(100vw - 96px);
  }
  .grid { column-gap: 48px; row-gap: 72px; }
  .cell__frame { height: auto; min-height: 320px; }
  .meet { grid-template-columns: 1fr; row-gap: 64px; }
  .meet__figure { max-width: 420px; }
  .meet__figure img { width: auto; height: auto; max-width: 100%; }
  .hang { display: block; }
  .bay { width: 100%; height: auto; flex: none; }
  /* --cap stays a plain length: calc() cannot resolve a nested min() from a
     custom property, and the width silently collapses to 0 before load. */
  .about__photo img { width: auto; height: auto; max-width: 100%; }
  .hang__label {
    width: clamp(320px, 100%, 480px);
    flex: none;
    margin-left: 0;
    padding-top: 0;
    margin-top: 32px;
  }
  .hang + .hang { margin-top: 120px; }
  .artwork--beside { display: block; }
  .artwork--beside .artwork__label {
    margin-left: 0; width: clamp(320px, 100%, 480px); flex: none;
    padding-top: 0; margin-top: 32px;
  }
  .print-grid { grid-template-columns: 1fr; margin-left: 0; row-gap: 120px; }
  .lead { max-width: 100%; }
}

/* <768: phone. Nav wraps under the wordmark. Five short words do not justify a menu. */
@media (max-width: 767px) {
  .container, .site-head__inner, .site-foot__inner, main > * {
    width: calc(100vw - 40px);
  }
  .site-head__inner {
    height: auto;
    display: block;
    padding-top: 22px;
    padding-bottom: 0;
  }
  .wordmark__name, .wordmark__studio { font-size: 13px; }
  .wordmark, .wordmark__studio { width: 168px; }
  .site-nav { margin-top: 16px; }
  .site-nav ul { flex-wrap: wrap; gap: 20px; }
  .site-nav a { font-size: 10px; }
  main { padding-top: 64px; }
  main > section + section { margin-top: 96px; }
  .hang + .hang { margin-top: 96px; }
  .hang__label, .artwork__label, .artwork--beside .artwork__label {
    width: 100%; margin-top: 24px;
  }
  .lead { font-size: 28px; line-height: 32px; }
  .hero__label, .art-note { margin-top: 24px; }
  .art-note { margin-top: 48px; }
  .artwork { margin-top: 64px; }
  .artwork-pager { margin-top: 96px; }
  .ex + .ex { margin-top: 64px; }
  .ex-block + .ex-block { margin-top: 96px; }
  .section__label, .h1-quiet { margin-bottom: 48px; }
  .about__photo, .about__link, .prints__didactic { margin-top: 64px; }
  .about__link, .prints__close { margin-top: 96px; }
  .print-bay, .print-caption { width: 100%; height: auto; }
  .grid { grid-template-columns: 1fr; row-gap: 64px; }
  .cell__frame { min-height: 0; justify-content: flex-start; }
  .cell__label { margin-top: 20px; }
  .grid-section .intro-link { margin-top: 64px; }
  .meet__text .lead { max-width: none; }
  .meet__text .prose { margin-top: 24px; }
  .art-print { margin-top: 48px; }

  .form { width: 100%; }
  .site-foot { margin-top: 96px; }
  .foot-row { display: block; }
  .foot-right { text-align: left; margin-top: 32px; }
  .foot-nav { justify-content: flex-start; flex-wrap: wrap; }
}

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

@media print {
  .site-nav, .announce, .artwork-pager, .skip { display: none; }
  body { background: #FFFFFF; }
  .bay img, .artwork__figure img { max-width: 100%; }
}