/* Joan Mullins: a white gallery wall. Paintings carry the colour; the page stays quiet.
   Spectral (a book serif) for names and titles, Figtree for everything else. */
:root {
  --wall: #FFFFFF;
  --ink: #1F1F1D;
  --ink-soft: #3E3E39;
  --label: #5E5E58;
  --band: #F4F3EF;
  --rule: #E2E0DA;
  --hover: #4A5A55;
  --gap: #8A4B2A;      /* draft gaps, shown in [brackets] */
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wall); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); }
a:hover { color: var(--hover); }
a:focus-visible, .button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
h1, h2 { font-family: var(--serif); font-weight: 400; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(32px, 4.5vw, 44px); line-height: 1.15; }
h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.2; }
p { margin: 0; }
.gap { color: var(--gap); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--wall); padding: 8px 12px; z-index: 5; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
@media (max-width: 600px) { .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } }

/* Header */
.site-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding-block: 28px 20px; }
.brand { text-decoration: none; display: flex; flex-direction: column; }
.brand .name { font-family: var(--serif); font-size: 30px; line-height: 1.1; }
.brand .tag { font-size: 14px; color: var(--label); letter-spacing: 0.04em; }
.site-head nav { display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: 16px; }
.site-head nav a { text-decoration: none; padding-block: 10px; border-bottom: 1px solid transparent; }
.site-head nav a[aria-current="page"] { border-bottom-color: var(--ink); }

/* Home */
.hero { padding-block: 8px 0; }
.hero figure { margin: 0; }
.hero img { width: 100%; }
.hero figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding-top: 12px; font-size: 14px; color: var(--label); }
.hero figcaption a { text-decoration: none; padding-block: 6px; }
.hero em, .card .t, .work h1 { font-family: var(--serif); }
.hero em { font-size: 16px; }
.intro { max-width: 760px; padding-block: 72px 56px; display: flex; flex-direction: column; gap: 10px; }
.intro .lede { font-family: var(--serif); font-size: 22px; line-height: 1.4; }
.intro p:not(.lede) { font-size: 16px; line-height: 1.7; color: var(--label); }
.eyebrow { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--label); margin-bottom: 24px; }
.block { padding-block: 8px 80px; }
.block > h1 { margin-bottom: 8px; }
.lead { color: var(--ink-soft); max-width: 62ch; margin-bottom: 32px; }
.lead .dates { color: var(--label); }

/* Gallery tiles: one each, all the same size */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 32px; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; } }
.tile { text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
.tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: 8px; }
.tile .tn { font-family: var(--serif); font-size: 21px; line-height: 1.25; }
.tile .ts { font-size: 14px; color: var(--label); }
@media (max-width: 600px) { .tile .tn { font-size: 19px; } }

.band { background: var(--band); }
.about-strip { padding-block: 80px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.about-strip img, .about img { flex: 1 1 260px; max-width: 360px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about-strip .copy, .about .copy { flex: 999 1 360px; min-width: 0; max-width: 640px; display: flex; flex-direction: column; gap: 16px; color: var(--ink-soft); }
.about-strip h2, .about h1 { color: var(--ink); }
.ask { padding-block: 88px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ask p { color: var(--ink-soft); max-width: 640px; }
.button { display: inline-block; text-decoration: none; background: var(--ink); color: var(--wall); padding: 14px 28px; font-weight: 500; font-size: 16px; }
.button:hover { background: var(--hover); color: var(--wall); }

/* Gallery grids: pictures keep their own shape */
.crumbs { font-size: 15px; color: var(--label); padding-block: 8px 24px; }
.crumbs a { color: var(--label); }
.jump { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 8px; font-size: 16px; }
.jump a { padding-block: 6px; }
.group { margin-block: 48px 24px; }
/* Galleries: even rows. Every picture whole and uncropped, all pictures in a row the same height,
   each row filled edge to edge, like a hang along one line. One picture per row on a phone. */
.grid { display: flex; flex-wrap: wrap; gap: 44px 24px; }
.grid::after { content: ""; flex: 999 1 0; }
.card { flex: var(--r, 1) 1 calc(var(--r, 1) * 230px); min-width: 0; text-decoration: none; display: flex; flex-direction: column; gap: 4px; }
.card img { width: 100%; aspect-ratio: var(--r, 1); object-fit: cover; margin-bottom: 8px; }
.card .t { font-style: italic; font-size: 18px; line-height: 1.3; }
.card .s { font-size: 15px; color: var(--label); }
.grid.three .card { flex-basis: calc(var(--r, 1) * 200px); }
.grid.three::after { display: none; }
@media (max-width: 600px) { .grid { gap: 36px 0; } .card { flex-basis: 100%; } .grid::after { display: none; }
  .grid.three { gap: 28px 12px; } .grid.three .card { flex-basis: calc(50% - 6px); } .grid.three .card:nth-child(3) { display: none; } }
.band .block { padding-block: 64px 80px; }
.band h2 { margin-bottom: 28px; }

/* A painting's own page */
.work { padding-block: 0 80px; display: flex; flex-wrap: wrap; gap: 48px 56px; align-items: flex-start; }
.work figure { flex: 0 1 min(calc(min(80vh, 780px) * var(--r, 1)), calc(100% - 356px)); min-width: 0; margin: 0; }
.work figure img { width: 100%; }
@media (max-width: 800px) { .work figure { flex-basis: 100%; } }
.work figcaption { padding-top: 10px; font-size: 14px; color: var(--label); }
.work .info { flex: 1 1 300px; max-width: 560px; min-width: 0; display: flex; flex-direction: column; gap: 22px; color: var(--ink-soft); }
.work h1 { color: var(--ink); }
.work .no { color: var(--label); font-size: 15px; }
.work dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; font-size: 16px; color: var(--ink); }
.work dt { color: var(--label); }
.work dd { margin: 0; }
.work .button { align-self: flex-start; }
.small { font-size: 15px; color: var(--label); }
.addr { user-select: all; color: var(--ink); }

/* Text pages */
.about { padding-block: 8px 88px; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.enquire { max-width: 760px; padding-block: 8px 88px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; color: var(--ink-soft); }
.enquire h1, .enquire h2 { color: var(--ink); }
.enquire h2 { margin-top: 24px; font-size: 24px; }
.enquire ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.addrline { font-size: 20px; }

/* Footer */
.site-foot { border-top: 1px solid var(--rule); }
.site-foot .wrap { padding-block: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 14px; color: var(--label); }
.site-foot a { color: var(--label); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Exhibition layout: one painting per row, hung on a common centre line, details beside it */
.exhibition { display: flex; flex-direction: column; }
.ex { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px 56px; align-items: center; padding-block: 56px; border-top: 1px solid var(--rule); }
.ex:first-child { border-top: 0; padding-top: 8px; }
.ex-pic { justify-self: center; display: block; min-width: 0; width: 100%; }
.ex-pic .pane[data-pane="painting"] { display: flex; justify-content: center; }
.ex-pic .pane[data-pane="painting"] img { width: auto; max-width: 100%; max-height: min(70vh, 600px); cursor: zoom-in; }
.ex-pic .wall { width: min(100%, calc(66vh * var(--rw) / var(--rh))); }
.ex-pic .views { justify-content: center; }
.ex-pic .pane-note { text-align: center; margin-inline: auto; }
.ex-links .quiet { color: var(--label); }
.ex-info { min-width: 0; display: flex; flex-direction: column; gap: 16px; color: var(--ink-soft); max-width: 460px; }
.ex-info h2 { font-style: italic; font-size: clamp(24px, 2.6vw, 30px); }
.ex-info h2 a { text-decoration: none; }
.ex-info .no { color: var(--label); font-size: 15px; }
.ex-info dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; font-size: 16px; color: var(--ink); }
.ex-info dt { color: var(--label); }
.ex-info dd { margin: 0; }
.ex-links { font-size: 16px; }
.more-groups { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--rule); align-items: baseline; }
.more-groups + .more-groups { margin-top: 0; padding-top: 16px; border-top: 0; }
.more-groups span { color: var(--label); }
@media (max-width: 760px) {
  .ex { grid-template-columns: minmax(0, 1fr); padding-block: 40px; }
  .ex-pic { justify-self: stretch; }
  .ex-pic .pane[data-pane="painting"] img { width: 100%; max-height: none; }
}

/* See it on a wall: the picture at true size in one of two rooms.
   Set on .wall: --s px per cm at the wall, --rw/--rh the room picture's size in px, --cx the picture's centre from the left, --by its lowest edge from the bottom.
   --tw and --th are the hung size in cm including any mount and frame; --fw frame, --mx/--mt/--mb mount widths in cm. */
.wall-block { padding-block: 0 72px; display: flex; flex-direction: column; gap: 16px; }
.wall { container-type: inline-size; position: relative; width: min(100%, calc(78vh * var(--rw) / var(--rh))); aspect-ratio: var(--rw) / var(--rh); overflow: hidden; background: #E9E5E0; }
.wall .room { position: absolute; inset: 0; width: 100%; height: 100%; }
.wall .hang { position: absolute; box-sizing: border-box; width: calc(var(--tw) * var(--s) * 100cqw / var(--rw)); height: calc(var(--th) * var(--s) * 100cqw / var(--rw));
  left: calc((var(--cx) - var(--tw) * var(--s) / 2) * 100cqw / var(--rw)); bottom: calc(var(--by) * 100cqw / var(--rw));
  border: calc(var(--fw) * var(--s) * 100cqw / var(--rw)) solid transparent; padding: calc(var(--mt) * var(--s) * 100cqw / var(--rw)) calc(var(--mx) * var(--s) * 100cqw / var(--rw)) calc(var(--mb) * var(--s) * 100cqw / var(--rw));
  box-shadow: 0 2px 5px rgba(40,32,25,.28), 0 9px 24px rgba(40,32,25,.16); }
.wall .hang img { display: block; width: 100%; height: 100%; object-fit: fill; }
.wall .hang.mounted { border-color: #4E4B47; border-image: linear-gradient(135deg, #5A5753, #46433F) 1; background: #F6F4EF; }
.wall .hang.mounted img { box-shadow: 0 0 0 2px #FBFAF7, 0 0 0 3px rgba(0,0,0,.06); }
/* Poems, framed like Joan's own: mid-brown wood, cream mount, and 1.6 cm of white sheet round the painting inside the mount's cut edge */
.wall .hang.poem { border-color: #8A6045; border-image: linear-gradient(135deg, #A57754 0%, #8C603F 45%, #6F4B32 100%) 1; background: #F3EEE4;
  /* a slimmer moulding with some depth: light catching its top edge, and a soft shadow it casts onto the mount */
  box-shadow: 0 2px 5px rgba(40,32,25,.28), 0 9px 24px rgba(40,32,25,.16), inset 1px 2px 4px rgba(60,40,25,.22); }
.wall .hang.poem img { box-shadow: 0 0 0 calc(1.6 * var(--s) * 100cqw / var(--rw)) #FBFAF7, 0 0 0 calc(1.6 * var(--s) * 100cqw / var(--rw) + 1.5px) #E2DACB; }
.wall .hang.oak { border-color: #B8925F; border-image: linear-gradient(135deg, #C9A574, #A98352) 1; }

/* Larger picture, shown over the page */
.zoom { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: transparent; }
.zoom::backdrop { background: rgba(20, 20, 18, 0.92); }
.zoom[open] { display: flex; align-items: center; justify-content: center; }
.zoom img { max-width: calc(100vw - 32px); max-height: calc(100vh - 120px); width: auto; height: auto; cursor: zoom-out; box-shadow: 0 8px 40px rgba(0, 0, 0, .5); }
.zoom-close { position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 6px 18px 6px 14px; border: 0; border-radius: 999px; background: var(--wall); color: var(--ink); font: 500 16px/1 var(--sans); cursor: pointer; }
.zoom-close span[aria-hidden] { font-size: 28px; line-height: 1; }
.zoom-close:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.work figure a[data-zoom] { cursor: zoom-in; display: block; }

/* ---------- Added 9 Nov: painting views, previous/next, for-sale switch, enquiry form ---------- */
/* A painting's page: the painting and the wall view share one space, chosen with two thumbnail buttons */
.work .viewer { min-width: min(100%, 300px); }
.viewer .pane[hidden] { display: none; }
.viewer .pane-note { padding-top: 10px; font-size: 14px; color: var(--label); max-width: 60ch; }
.viewer .pane-title { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--label); margin-bottom: 10px; }
.js .viewer .pane-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.viewer .wall { margin-inline: auto; width: min(100%, calc(78vh * var(--rw) / var(--rh))); }
.viewer .pane[data-pane="wall"] { margin-top: 32px; }
.js .viewer .pane[data-pane="wall"] { margin-top: 0; }
.views { display: none; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.js .views { display: flex; }
.view-btn { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; min-height: 52px; border: 1px solid var(--rule); background: var(--wall);
  color: var(--ink); font: 500 15px/1.2 var(--sans); cursor: pointer; }
.view-btn img { width: 40px; height: 40px; object-fit: cover; }
.view-btn[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.view-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Previous / next within a group or gallery */
.prevnext { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 24px; padding-block: 0 56px; }
.prevnext a { text-decoration: none; display: flex; flex-direction: column; gap: 2px; padding-block: 8px; }
.prevnext span { font-size: 14px; color: var(--label); }
.prevnext em { font-family: var(--serif); font-size: 18px; }
.prevnext .next { text-align: right; align-items: flex-end; }
.prevnext .prev span::before { content: "‹ "; }
.prevnext .next span::after { content: " ›"; }
.prevnext .up { font-size: 15px; text-decoration: underline; text-align: center; }
@media (max-width: 600px) { .prevnext { grid-template-columns: 1fr 1fr; } .prevnext .up { grid-column: 1 / -1; grid-row: 2; } }

/* Show only paintings for sale */
.forsale-switch { margin-bottom: 8px; font-size: 16px; }
.forsale-switch label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.forsale-switch input { width: 20px; height: 20px; accent-color: var(--ink); }
.only-sale-on .ex:not([data-status="available"]) { display: none; }
.only-sale-on .ex:first-child, .only-sale-on .ex[data-status="available"] { border-top: 0; }
.only-sale-on .ex[data-status="available"] ~ .ex[data-status="available"] { border-top: 1px solid var(--rule); }
.after-tiles { margin-top: 40px; font-size: 17px; }
.ask-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.group .count { font-family: var(--sans); font-size: 15px; color: var(--label); margin-left: 6px; }

/* Enquiry form */
.enq { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 600px; margin-top: 8px; }
.enq label { font-weight: 500; color: var(--ink); margin-top: 12px; }
.enq input, .enq select, .enq textarea { font: 16px/1.4 var(--sans); color: var(--ink); background: var(--wall); border: 1px solid #BDB9B0; padding: 11px 12px; width: 100%; }
.enq input:focus, .enq select:focus, .enq textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.enq .button { margin-top: 18px; align-self: flex-start; border: 0; cursor: pointer; font-family: var(--sans); }
.enq-fallback { margin-top: 16px; padding: 16px; background: var(--band); display: flex; flex-direction: column; gap: 10px; }
.button-quiet { align-self: flex-start; font: 500 15px var(--sans); padding: 10px 16px; border: 1px solid var(--ink); background: var(--wall); color: var(--ink); cursor: pointer; }
.steps { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 10px; max-width: 64ch; }
.steps b { color: var(--ink); font-weight: 600; }
.cv { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.about .copy h2 { font-size: 24px; margin-top: 12px; color: var(--ink); }

/* Share button: looks like a quiet link, never takes you anywhere */
.share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; color: var(--label);
  font: 16px/1.4 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.share-btn:hover { color: var(--ink); }
.share-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.share-btn svg { flex: none; }
/* A painting you arrived at from a link is marked briefly */
.ex { scroll-margin-top: 24px; transition: background-color 1.2s ease; }
.ex.arrived { background-color: var(--band); }
@media (prefers-reduced-motion: reduce) { .ex { transition: none; } }