/* One gallery wall. The reverse belongs to the painting, not another view. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.life-section { padding-top: 60px; padding-bottom: 64px; overflow: clip; }
.life-section [hidden] { display: none !important; }
.life-section > .section-label { padding-bottom: 20px; }
.life-kicker { font-size: 10px; letter-spacing: 2px; }
.painting-flip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 138px; padding: 8px 12px; border: 1px solid #eeeadb40; border-radius: 24px; background: transparent; color: var(--paper); font: 400 11px var(--sans); letter-spacing: 0; cursor: pointer; transition: border-color .2s, background .2s; }
.painting-flip > span:first-child { font-size: 20px; }
.painting-flip:hover { background: #eab48119; border-color: var(--accent); }
.hanging-gallery {
  --painting-width: clamp(300px, min(43vw, calc(100dvh - 360px)), 550px);
  --painting-height: calc(var(--painting-width) * 1.1);
  --spine-gap: 80px;
  --spine-width: 44px;
  --gallery-ease: cubic-bezier(.22, .75, .24, 1);
}
.gallery-wall { display: flex; gap: 40px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 84px 24px 32px; }
.hanging-frame {
  --frame-mat: #e4dcc9;
  --frame-edge: #b8a48a;
  --frame-text: #343931;
  --frame-side: #756449;
  flex: 0 0 var(--painting-width);
  width: var(--painting-width);
  position: relative;
  scroll-snap-align: center;
}
.frame-professional { --frame-mat: #313b37; --frame-edge: #758178; --frame-text: #eeeae2; --frame-side: #526058; }
.frame-athletic { --frame-mat: #d1b68a; --frame-edge: #8e724e; --frame-text: #32392d; --frame-side: #897149; }
.frame-personal { --frame-mat: #efe9dc; --frame-edge: #e0d3be; --frame-text: #534e43; --frame-side: #a3957e; }
.frame-gallery { --frame-mat: #202b28; --frame-edge: #807665; --frame-text: #eeeae2; --frame-side: #5b6256; }
.painting-mount { position: relative; }
.painting-hanger { position: absolute; width: 60%; height: auto; aspect-ratio: 15 / 4; left: 20%; bottom: calc(100% - 1px); overflow: visible; fill: none; stroke: #bba384; stroke-width: 1.25; }
.painting-hanger circle { fill: #e2c7a4; stroke: #675b4b; stroke-width: 1.5; filter: drop-shadow(0 3px 2px #000a); }
.painting-front {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: var(--painting-height);
  padding: 20px 20px 0;
  background: var(--frame-mat);
  border: 1px solid var(--frame-edge);
  color: var(--frame-text);
  box-shadow: inset 0 0 0 3px #ffffff1a, 0 24px 40px #0005, 0 2px 4px #0008;
  border-radius: 1px;
  user-select: none;
  -webkit-user-drag: none;
}
.painting-art { display: block; min-height: 0; flex: 1; box-shadow: 0 0 0 1px #0002; background: #2b3027; overflow: hidden; }
.painting-art img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.frame-gallery .painting-art img { object-position: 35% center; }
.painting-label { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 6px 17px; }
.painting-label > span:first-child { font: 400 26px var(--serif); letter-spacing: -.3px; }
.painting-label > span:last-child { font-size: 10px; letter-spacing: 1px; opacity: .6; }
.painting-back { margin-top: 24px; padding: 16px; background: var(--frame-side); border: 2px solid var(--frame-edge); color: #343a31; }
.painting-paper {
  min-height: 100%;
  padding: clamp(22px, 3vw, 38px);
  background: #e8e0ce;
  background-image: repeating-linear-gradient(2deg, #a8987710 0, #a8987710 1px, transparent 1px, transparent 5px);
  box-shadow: 0 1px 8px #0002;
}
.painting-provenance { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid #75684f45; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: #6e6452; }
.painting-paper h3 { font: 400 clamp(30px, 3.5vw, 46px)/1.04 var(--serif); letter-spacing: -1px; margin: 23px 0 16px; }
.painting-paper h3:focus { outline: none; }
.painting-paper a { text-decoration: underline; text-underline-offset: .18em; text-decoration-color: #75684f99; }
.painting-paper a:hover { text-decoration-color: currentColor; }
.painting-profile-link { font-size: 12px; line-height: 1.8; margin-bottom: 12px; }
.painting-intro { font-size: 14px; line-height: 1.75; margin-bottom: 24px; }
.painting-note { border-block: 1px solid #75684f45; margin-block: 6px 24px; }
.painting-note:has(+ .painting-note) { margin-bottom: 0; }
.painting-note + .painting-note { margin-top: 0; border-top: 0; }
.painting-note summary { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-block: 15px; list-style: none; cursor: pointer; font-size: 12px; font-weight: 500; }
.painting-note summary::-webkit-details-marker { display: none; }
.painting-note summary > span { font-size: 20px; font-weight: 400; transition: transform .2s; }
.painting-note[open] summary > span { transform: rotate(45deg); }
.painting-note p { font-size: 13px; line-height: 1.8; padding-bottom: 18px; }
.painting-story-space > span { font-size: 8px; letter-spacing: 1.3px; color: #776b55; }
.painting-story-space p { font-size: 12px; line-height: 1.65; margin-top: 9px; color: #766c59; max-width: 32ch; }
.painting-back-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 24px; }
.painting-art-note { font-size: 9px; color: #80745f; }

/* The enhanced carousel gives every painting its own position and depth. */
.gallery-ready .gallery-wall { display: block; overflow: visible; position: relative; height: calc(var(--painting-height) + 108px); padding: 0; touch-action: pan-y pinch-zoom; perspective: 1600px; }
.gallery-ready .hanging-frame { position: absolute; top: 90px; left: 50%; transform: translateX(calc(-50% + var(--x, 0px))); transition: transform .7s var(--gallery-ease); z-index: 1; pointer-events: none; }
.gallery-ready .hanging-frame.is-current { z-index: 5; }
.gallery-ready .hanging-frame[data-distance="1"], .gallery-ready .hanging-frame[data-distance="-1"] { z-index: 3; }
.gallery-ready .painting-mount { height: var(--painting-height); transform-style: preserve-3d; transform: rotateY(var(--turn, 0deg)) scale(var(--scale, 1)); transform-origin: center; transition: transform .7s var(--gallery-ease), opacity .5s; opacity: .65; }
.gallery-ready .is-current .painting-mount { opacity: 1; }
.gallery-ready .painting-hanger { transition: opacity .35s; }
.gallery-ready .hanging-frame:not(.is-current) .painting-hanger { opacity: 0; }
.gallery-ready .painting-rotor { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--gallery-ease); }
.gallery-ready .is-flipped .painting-rotor { transform: rotateY(180deg) scale(1.025); }
.gallery-ready .painting-front, .gallery-ready .painting-back { position: absolute; inset: 0; height: 100%; margin: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gallery-ready .painting-front { transform: translateZ(1px); }
.gallery-ready .is-current .painting-front, .gallery-ready .is-current .painting-back { pointer-events: auto; }
.gallery-ready .painting-back { transform: rotateY(180deg) translateZ(1px); padding: 12px; box-shadow: 0 24px 45px #0006; }
.gallery-ready .painting-paper { height: 100%; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #90816a77 transparent; }
.gallery-ready .painting-paper > * { flex-shrink: 0; }
.gallery-ready .painting-spine {
  position: absolute;
  top: 12%;
  left: 50%;
  width: var(--spine-width);
  height: 77%;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  border: 1px solid var(--frame-edge);
  border-inline: 3px double var(--frame-side);
  background: linear-gradient(90deg, #0007, transparent 13%, transparent 77%, #ffffff13 84%, #0006), var(--frame-mat);
  color: var(--frame-text);
  box-shadow: -5px 10px 18px #0005, inset 0 0 0 1px #ffffff15;
  transform: translateX(-50%);
  cursor: pointer;
  pointer-events: auto;
  transition: opacity .35s, box-shadow .25s;
}
.spine-title { writing-mode: vertical-rl; transform: rotate(180deg); font: 400 23px var(--serif); letter-spacing: .2px; white-space: nowrap; }
.spine-number { position: absolute; bottom: 16px; font-size: 9px; letter-spacing: .8px; opacity: .65; }
.gallery-ready .is-current .painting-spine { opacity: 0; visibility: hidden; pointer-events: none; }
.painting-spine:hover { box-shadow: 0 0 0 1px var(--accent), -5px 12px 25px #0007; }
.painting-controls { display: flex; justify-content: center; align-items: center; gap: 28px; padding-top: 24px; }
.life-arrow { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid #eeeadb40; border-radius: 50%; color: var(--paper); background: transparent; font-size: 20px; cursor: pointer; transition: border-color .2s, background .2s; }
.life-arrow:hover { background: #eab48119; border-color: var(--accent); }
.painting-guide { display: flex; align-items: center; gap: 22px; color: var(--muted); font-size: 11px; }
.painting-position { font-size: 10px; font-variant-numeric: tabular-nums; color: var(--paper); letter-spacing: 1px; }
.painting-count { color: #a8aaa273; }
.life-section :is(a, button, summary, .gallery-wall):focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.painting-back :is(a, button, summary):focus-visible { outline-color: #7a5734; outline-offset: 3px; }
.gallery-wall:focus:not(:focus-visible) { outline: none; }
.motion-off .life-section *, .motion-off .life-section *::before { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .life-section *, .life-section *::before { transition: none !important; animation: none !important; } }
@media (max-width: 1000px) {
  .hanging-gallery { --spine-gap: 62px; --spine-width: 38px; }
  .spine-title { font-size: 21px; }
}
@media (min-width: 1000px) { .life-section { scroll-margin-top: 24px; } }
@media (max-width: 760px) {
  .life-section { padding-top: 44px; padding-bottom: 56px; }
  .life-section > .section-label { padding-bottom: 10px; }
  .life-kicker { font-size: 9px; letter-spacing: 1px; }
  .painting-flip { min-width: 124px; padding-inline: 9px; font-size: 10px; }
  .hanging-gallery { --painting-width: min(470px, calc(100vw - 100px)); --spine-gap: 27px; --spine-width: 28px; }
  .gallery-ready .gallery-wall { margin-inline: calc(var(--pad) * -1); height: calc(var(--painting-height) + 100px); }
  .gallery-ready .gallery-wall:has(:is(.frame-academic, .frame-professional, .frame-athletic, .frame-personal).is-flipped) { --painting-height: max(330px, calc(var(--painting-width) * 1.1)); }
  .gallery-ready .hanging-frame[data-distance="2"], .gallery-ready .hanging-frame[data-distance="-2"] { visibility: hidden; pointer-events: none; }
  .gallery-ready .hanging-frame { top: 82px; }
  .painting-front { padding: 12px 12px 0; }
  .painting-label { padding: 11px 2px 12px; }
  .painting-label > span:first-child { font-size: 23px; }
  .painting-label > span:last-child { font-size: 9px; }
  .gallery-ready .painting-spine { padding-block: 12px; border-inline-width: 1px; }
  .spine-title { font-size: 18px; }
  .spine-number { bottom: 12px; font-size: 8px; }
  .painting-controls { gap: 18px; padding-top: 22px; }
  .painting-guide { flex-direction: column; gap: 8px; font-size: 10px; }
  .life-arrow { width: 40px; height: 40px; }
  .gallery-ready .painting-back { padding: 8px; }
  .painting-paper { padding: 20px 17px; }
  .painting-provenance { font-size: 8px; gap: 8px; padding-bottom: 13px; letter-spacing: .8px; }
  .painting-paper h3 { font-size: 32px; margin-block: 18px 12px; }
  .painting-intro { font-size: 12px; line-height: 1.65; margin-bottom: 18px; }
  .painting-note { margin-bottom: 16px; }
  .painting-note summary { font-size: 11px; padding-block: 11px; }
  .painting-note p { font-size: 12px; }
  .painting-story-space p { font-size: 11px; }
  .painting-back-bottom { padding-top: 18px; }
}