/* =====================================================================
   Seppo — Art
   Theme: Finnish forest and lake. Calm greens, lake blues, earth tones.
   ===================================================================== */

:root {
  --paper: #f4efe4;
  --paper-deep: #ebe4d3;
  --ink: #25332d;
  --ink-soft: #55645c;
  --spruce: #1f342b;
  --spruce-mid: #2f4c40;
  --moss: #6f8460;
  --lichen: #a9b693;
  --lake: #3d83a8;
  --lake-deep: #2b6689;
  --lake-light: #a9d2e4;
  --bark: #7a5c45;
  --cream: #f3ecdc;

  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Jost", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;

  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

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

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

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  background-color: var(--paper);
  /* a faint paper grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32  0 0 0 0 .27  0 0 0 0 .2  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; }
h1, h2, p, figure { margin: 0; }
button { font: inherit; color: inherit; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  padding: .6rem 1rem; border-radius: 4px;
  background: var(--spruce); color: var(--cream); text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--lake); outline-offset: 4px; border-radius: 2px; }

.eyebrow {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .36em;
  text-transform: uppercase;
}

/* =====================================================================
   Opening scene
   ===================================================================== */

.hero {
  --tile-h: clamp(250px, 49vh, 560px);   /* height of the forest layers */
  --lake-h: 20%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 92vh;
  min-height: 520px;
  max-height: 1100px;
  background: linear-gradient(180deg, #c3d8da 0%, #d9e5df 34%, #efe9d8 58%, #f6e7cc 80%);
  /* the lake ends in a soft, wavy shoreline cut out of the bottom edge */
  --shore-h: clamp(26px, 4.6vw, 62px);
  --shore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,26 C200,10 380,30 560,36 C680,40 760,46 860,38 C1040,24 1280,10 1440,24 L1440,0 Z'/%3E%3C/svg%3E");
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--shore-h) + 1px) no-repeat, var(--shore) bottom / 100% var(--shore-h) no-repeat;
          mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--shore-h) + 1px) no-repeat, var(--shore) bottom / 100% var(--shore-h) no-repeat;
}
@supports (height: 1svh) {
  .hero { height: 92svh; --tile-h: clamp(250px, 49svh, 560px); }
}

.hero__sun {
  position: absolute;
  left: 66%;
  bottom: calc(var(--lake-h) + var(--tile-h) * .3);
  width: 78vmin; height: 78vmin;
  transform: translate(-50%, 50%);
  background: radial-gradient(closest-side, rgba(255, 249, 230, .95), rgba(255, 241, 208, .55) 32%, rgba(255, 238, 200, 0) 70%);
}

.layer {
  position: absolute;
  left: -2%; right: -2%;
  bottom: calc(var(--lake-h) - 1px);
  height: var(--tile-h);
  background-repeat: repeat-x;
  background-position: 50% 100%;
  background-size: calc(var(--tile-h) * 3.75) 100%;
}
.layer--far   { background-image: url("../images/forest-far.svg"); }
.layer--mid   { background-image: url("../images/forest-mid.svg"); }
.layer--near  { background-image: url("../images/forest-near.svg"); }
.layer--front { background-image: url("../images/forest-front.svg"); }

.mist {
  position: absolute;
  left: -25%;
  width: 150%;
  height: calc(var(--tile-h) * .26);
  background:
    radial-gradient(ellipse 34% 50% at 24% 50%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 30% 44% at 62% 56%, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 22% 40% at 90% 44%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%);
  filter: blur(8px);
  animation: drift 80s ease-in-out infinite alternate;
}
.mist--1 { bottom: calc(var(--lake-h) + var(--tile-h) * .34); opacity: .9; }
.mist--2 { bottom: calc(var(--lake-h) + var(--tile-h) * .19); opacity: .8; animation-duration: 110s; animation-direction: alternate-reverse; }
.mist--3 { bottom: calc(var(--lake-h) + var(--tile-h) * .04); opacity: .7; animation-duration: 95s; }

@keyframes drift {
  from { transform: translateX(-6%); }
  to   { transform: translateX(6%); }
}

.lake {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--lake-h);
  overflow: hidden;
  background: linear-gradient(180deg, #b4d0d4 0%, #86b4c5 26%, #5f9bb6 62%, #4a89a9 100%);
}
.lake__reflection {
  position: absolute;
  left: -2%; right: -2%; top: 0;
  height: calc(var(--tile-h) * .5);
  transform: scaleY(-1);
  background-image: url("../images/forest-front.svg"), url("../images/forest-near.svg"), url("../images/forest-mid.svg"), url("../images/forest-far.svg");
  background-repeat: repeat-x;
  background-position: 50% 100%;
  background-size: calc(var(--tile-h) * 3.75) 100%;
  opacity: .42;
  filter: blur(1.2px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 88%);
          mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 88%);
}
/* light on the water */
.lake::after {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0 5px, rgba(255, 255, 255, .13) 5px 6px, rgba(255, 255, 255, 0) 6px 13px),
    radial-gradient(ellipse 26% 130% at 66% 0%, rgba(255, 246, 222, .55), rgba(255, 246, 222, 0) 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 140% at 66% 0%, #000 20%, transparent 80%);
          mask-image: radial-gradient(ellipse 60% 140% at 66% 0%, #000 20%, transparent 80%);
  animation: shimmer 9s ease-in-out infinite alternate;
}
@keyframes shimmer {
  from { opacity: .65; transform: translateX(-.4%); }
  to   { opacity: 1;   transform: translateX(.4%); }
}

.hero__text {
  position: absolute;
  left: 0; right: 0;
  top: clamp(2.6rem, 10.5vh, 8rem);
  padding: 0 1.25rem;
  text-align: center;
  color: var(--spruce);
}
.hero__text .eyebrow { color: #46635a; margin-bottom: .2rem; padding-left: .36em; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(4.4rem, min(17vw, 21vh), 10.5rem);
  line-height: .95;
  letter-spacing: .015em;
  text-shadow: 0 0 46px rgba(246, 240, 224, .9);
}
.hero__sub {
  margin-top: .7rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  color: #3c5a4d;
  text-shadow: 0 0 22px rgba(246, 240, 224, 1);
}

.js .hero__text > * {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 1.6s var(--ease-out) forwards;
}
.js .hero__text > :nth-child(2) { animation-delay: .18s; }
.js .hero__text > :nth-child(3) { animation-delay: .42s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* =====================================================================
   The trail: gallery + about, with the paint line behind
   ===================================================================== */

.trail { position: relative; }

/* the stretch of page that holds the artworks */
.walk {
  position: relative;
  overflow: hidden;            /* older browsers */
  overflow-x: clip; overflow-y: visible;   /* keep the washes from widening the page, but let them spill downwards */
  padding-top: clamp(5.5rem, 17vh, 11rem);
}

/* ---- pale trees in the margins, drifting more slowly than the page (moved by js/main.js) ---- */
.woods {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 17rem, #000 calc(100% - 15rem), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 17rem, #000 calc(100% - 15rem), transparent 100%);
}
.woods__layer {
  position: absolute;
  width: clamp(96px, 20vw, 340px);
  background-repeat: repeat-y;
  background-position: 0 0;
  will-change: translate;
}
.woods__layer--left  { left: 0; }
.woods__layer--right { right: 0; scale: -1 1; }
.woods__layer--far {
  top: -46%; height: 146%;
  background-image: url("../images/woods-far.svg");
  background-size: 74% auto;
  opacity: .3;
}
.woods__layer--near {
  top: -24%; height: 124%;
  background-image: url("../images/woods-near.svg");
  background-size: 100% auto;
  opacity: .2;
}
.woods__layer--right.woods__layer--far  { background-position: 0 -520px; }
.woods__layer--right.woods__layer--near { background-position: 0 -900px; }

.paint {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.paint__drip {
  transform-box: fill-box;
  transform-origin: 50% 0;
  transform: scaleY(0);
  transition: transform 2.6s cubic-bezier(.25, .6, .3, 1);
}
.paint__drip.is-on { transform: scaleY(1); }
.paint__bead { transition: opacity .5s; }

.gallery {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  counter-reset: piece;
}

.piece {
  /* never wider than the column, never taller than about two-thirds of the screen */
  --art-w: min(100%, 460px, calc(min(66vh, 580px) * var(--ar, 1)));
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 6vw, 5.5rem);
  align-items: end;
  margin-bottom: clamp(9rem, 27vh, 15rem);
  counter-increment: piece;
}
.piece:last-child { margin-bottom: 0; }

/* ---- a watercolour wash that blooms on the paper behind each artwork ---- */
.piece__art::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%; top: 50%;
  width: calc(var(--art-w) * 2 + 7rem);
  aspect-ratio: calc(var(--ar, 1) * 1.07);
  translate: -50% calc(-50% + var(--drift, 0px));   /* --drift is nudged by js/main.js while scrolling */
  pointer-events: none;
  background: var(--wash, #86b3c8);
  -webkit-mask: var(--wash-shape) center / 100% 100% no-repeat;
          mask: var(--wash-shape) center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  opacity: var(--wash-strength, .36);
}
.piece:nth-child(3n+1) { --wash-shape: url("../images/wash-1.svg"); }
.piece:nth-child(3n+2) { --wash-shape: url("../images/wash-2.svg"); }
.piece:nth-child(3n)   { --wash-shape: url("../images/wash-3.svg"); }
.piece:nth-child(4n+1) { --wash: #86b3c8; }                          /* lake */
.piece:nth-child(4n+2) { --wash: #9db287; }                          /* moss */
.piece:nth-child(4n+3) { --wash: #9cc4bd; }                          /* mist */
.piece:nth-child(4n)   { --wash: #b4c3a0; }                          /* sage */

.js .piece__art::before {
  opacity: 0;
  scale: .76;
  transition: opacity 2.6s ease .1s, scale 3.6s var(--ease-out) .1s;
}
.js .piece.is-in .piece__art::before { opacity: var(--wash-strength, .36); scale: 1; }

.piece__art {
  position: relative;
  grid-column: 1;
  grid-row: 1;
}
.piece:nth-child(even) .piece__art { grid-column: 2; }

.piece__open {
  display: block;
  position: relative;
  z-index: 2;
  width: var(--art-w);
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  filter: drop-shadow(0 22px 26px rgba(37, 51, 45, .2)) drop-shadow(0 3px 5px rgba(37, 51, 45, .2));
  -webkit-tap-highlight-color: transparent;
}
.piece__open img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.5px;
  background: var(--paper-deep);
  transition: transform .7s var(--ease-out);
}
.piece__open:hover img,
.piece__open:focus-visible img { transform: translateY(-5px) scale(1.012); }
.piece__open:focus-visible { outline-offset: 8px; }

.piece__text {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  max-width: 24rem;
  padding-bottom: 2.4rem;
}
.piece:nth-child(even) .piece__text {
  grid-column: 1;
  justify-self: end;
  text-align: right;
}
.piece__text::before {
  content: counter(piece, decimal-leading-zero);
  display: block;
  margin-bottom: .5rem;
  font-weight: 400;
  font-size: .8rem;
  letter-spacing: .3em;
  color: var(--moss);
}
.piece__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  color: var(--spruce);
}
.piece__note {
  margin-top: .85rem;
  color: var(--ink-soft);
}
.piece__note [lang="fi"] {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.22em;
  line-height: 1.3;
  display: inline-block;
  margin-bottom: .35rem;
  color: var(--ink);
}
.piece__hint {
  margin-top: 1.1rem;
  padding: 0 0 .2rem;
  border: 0;
  border-bottom: 1px solid rgba(111, 132, 96, .55);
  background: none;
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--moss);
  cursor: zoom-in;
  transition: color .3s, border-color .3s;
}
.piece__hint:hover { color: var(--lake-deep); border-color: var(--lake); }

/* ---- Cut-out shapes ---- */
/* round artworks */
.piece--round .piece__open img { border-radius: 50%; }
/* Autumn bloom: the painted shape, traced by tools/process-images.ps1 */
.piece--autumn-bloom .piece__open img {
  border-radius: 0;
  background: none;
  -webkit-clip-path: polygon(97.9% 50.0%, 97.7% 52.9%, 97.3% 55.8%, 96.6% 58.7%, 95.7% 61.5%, 94.5% 64.2%, 93.2% 66.8%, 91.8% 69.3%, 90.1% 71.7%, 88.3% 74.0%, 86.6% 76.3%, 84.7% 78.6%, 82.7% 80.6%, 80.6% 82.8%, 78.5% 84.9%, 76.3% 86.9%, 73.9% 88.9%, 71.4% 90.7%, 68.8% 92.7%, 66.1% 94.4%, 63.1% 95.9%, 60.0% 97.1%, 56.8% 98.4%, 53.4% 99.1%, 50.0% 99.7%, 46.5% 100.0%, 43.0% 100.2%, 39.4% 99.8%, 36.0% 99.0%, 32.7% 97.9%, 29.5% 96.5%, 26.4% 94.8%, 23.6% 92.9%, 21.0% 90.8%, 18.6% 88.4%, 16.6% 85.8%, 14.7% 83.1%, 12.9% 80.5%, 11.2% 77.9%, 9.6% 75.4%, 7.9% 72.8%, 6.3% 70.2%, 4.8% 67.6%, 3.5% 64.8%, 2.3% 62.0%, 1.5% 59.1%, 0.9% 56.1%, 0.6% 53.0%, 0.6% 50.0%, 0.7% 47.0%, 1.0% 43.9%, 1.6% 41.0%, 2.3% 38.0%, 3.2% 35.1%, 4.4% 32.3%, 5.8% 29.5%, 7.3% 26.9%, 9.2% 24.4%, 11.1% 22.0%, 13.3% 19.8%, 15.6% 17.7%, 18.0% 15.8%, 20.7% 14.1%, 23.4% 12.6%, 26.1% 11.2%, 28.8% 9.7%, 31.7% 8.4%, 34.5% 7.2%, 37.4% 5.8%, 40.4% 4.7%, 43.5% 3.8%, 46.7% 3.0%, 50.0% 2.4%, 53.3% 2.2%, 56.7% 2.2%, 60.1% 2.5%, 63.4% 3.1%, 66.6% 4.1%, 69.5% 5.8%, 72.2% 7.7%, 74.7% 9.9%, 76.9% 12.2%, 79.0% 14.5%, 81.3% 16.5%, 83.4% 18.7%, 85.3% 21.0%, 86.9% 23.4%, 88.4% 25.9%, 89.8% 28.5%, 91.0% 31.0%, 92.4% 33.5%, 93.8% 36.0%, 95.2% 38.6%, 96.3% 41.4%, 97.2% 44.2%, 97.8% 47.1%);
          clip-path: polygon(97.9% 50.0%, 97.7% 52.9%, 97.3% 55.8%, 96.6% 58.7%, 95.7% 61.5%, 94.5% 64.2%, 93.2% 66.8%, 91.8% 69.3%, 90.1% 71.7%, 88.3% 74.0%, 86.6% 76.3%, 84.7% 78.6%, 82.7% 80.6%, 80.6% 82.8%, 78.5% 84.9%, 76.3% 86.9%, 73.9% 88.9%, 71.4% 90.7%, 68.8% 92.7%, 66.1% 94.4%, 63.1% 95.9%, 60.0% 97.1%, 56.8% 98.4%, 53.4% 99.1%, 50.0% 99.7%, 46.5% 100.0%, 43.0% 100.2%, 39.4% 99.8%, 36.0% 99.0%, 32.7% 97.9%, 29.5% 96.5%, 26.4% 94.8%, 23.6% 92.9%, 21.0% 90.8%, 18.6% 88.4%, 16.6% 85.8%, 14.7% 83.1%, 12.9% 80.5%, 11.2% 77.9%, 9.6% 75.4%, 7.9% 72.8%, 6.3% 70.2%, 4.8% 67.6%, 3.5% 64.8%, 2.3% 62.0%, 1.5% 59.1%, 0.9% 56.1%, 0.6% 53.0%, 0.6% 50.0%, 0.7% 47.0%, 1.0% 43.9%, 1.6% 41.0%, 2.3% 38.0%, 3.2% 35.1%, 4.4% 32.3%, 5.8% 29.5%, 7.3% 26.9%, 9.2% 24.4%, 11.1% 22.0%, 13.3% 19.8%, 15.6% 17.7%, 18.0% 15.8%, 20.7% 14.1%, 23.4% 12.6%, 26.1% 11.2%, 28.8% 9.7%, 31.7% 8.4%, 34.5% 7.2%, 37.4% 5.8%, 40.4% 4.7%, 43.5% 3.8%, 46.7% 3.0%, 50.0% 2.4%, 53.3% 2.2%, 56.7% 2.2%, 60.1% 2.5%, 63.4% 3.1%, 66.6% 4.1%, 69.5% 5.8%, 72.2% 7.7%, 74.7% 9.9%, 76.9% 12.2%, 79.0% 14.5%, 81.3% 16.5%, 83.4% 18.7%, 85.3% 21.0%, 86.9% 23.4%, 88.4% 25.9%, 89.8% 28.5%, 91.0% 31.0%, 92.4% 33.5%, 93.8% 36.0%, 95.2% 38.6%, 96.3% 41.4%, 97.2% 44.2%, 97.8% 47.1%);
}

/* ---- gentle appear-on-scroll ---- */
.js .piece__open,
.js .piece__text,
.js .print,
.js .about__text {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease, transform 1.3s var(--ease-out);
}
.js .piece__text, .js .about__text { transition-delay: .18s; }
.js .is-in .piece__open,
.js .is-in .piece__text,
.js .is-in .about__text { opacity: 1; transform: none; }
.js .is-in .print { opacity: 1; transform: rotate(-2.2deg); }

/* =====================================================================
   About the artist
   ===================================================================== */

.about {
  position: relative;
  margin-top: clamp(12rem, 30vh, 17rem);
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem) clamp(4rem, 9vw, 6.5rem);
  background: var(--spruce);
  color: var(--cream);
}
/* a line of spruces growing up out of the section */
.about::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% - 1px);
  height: clamp(84px, 13vw, 168px);
  background: url("../images/treeline.svg") repeat-x 50% 100% / auto 100%;
}

.about__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

/* the photograph, as an old print */
.print {
  position: relative;
  z-index: 2;
  padding: 12px 12px 0;
  background: #f8f3e7;
  transform: rotate(-2.2deg);
  box-shadow: 0 26px 40px rgba(0, 0, 0, .38), 0 2px 6px rgba(0, 0, 0, .3);
}
.print img {
  display: block;
  width: 100%;
  height: auto;
  background: #3a3a2c;
}
.print figcaption {
  padding: .5rem .2rem .6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.4;
  text-align: center;
  color: #5d4c3c;
}

.about__text { position: relative; z-index: 2; }
.about__text .eyebrow { color: var(--lichen); }
.about__text h2 {
  margin: .3rem 0 1.2rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.8rem, 6vw, 4.2rem);
  line-height: 1;
}
.about__text p + p { margin-top: 1rem; }
.about__text p:not(.eyebrow) { color: rgba(243, 236, 220, .86); max-width: 30rem; }

/* =====================================================================
   Footer
   ===================================================================== */

.footer {
  padding: 0 1.25rem 2.6rem;
  background: var(--spruce);
  color: rgba(243, 236, 220, .58);
  text-align: center;
  font-size: .86rem;
  letter-spacing: .04em;
}
.footer__mark { width: 18px; height: 24px; fill: var(--lichen); opacity: .7; margin-bottom: .5rem; }
.footer a {
  color: rgba(243, 236, 220, .78);
  text-decoration: none;
  border-bottom: 1px solid rgba(243, 236, 220, .3);
  transition: color .3s, border-color .3s;
}
.footer a:hover { color: var(--cream); border-color: var(--lake-light); }
.footer p + p { margin-top: .5rem; }

/* =====================================================================
   Enlarged view
   ===================================================================== */

.lightbox {
  width: 100vw; height: 100vh;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: #0e1713;
  color: var(--cream);
  overflow: hidden;
}
@supports (height: 1dvh) { .lightbox { height: 100dvh; } }
.lightbox::backdrop { background: #0e1713; }
/* while it is open: stop the page scrolling behind, and keep the scrollbar strip dark */
html.lightbox-open { overflow: hidden; background: #0e1713; }
.lightbox[open] { animation: lb-in .45s ease; }
@keyframes lb-in { from { opacity: 0; } }

.lightbox__stage {
  position: absolute;
  inset: 0 0 4.4rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.6rem clamp(.75rem, 6vw, 5.5rem) .5rem;
  overflow: hidden;
  touch-action: pan-y;
}
.lightbox__img {
  display: block;
  width: min(100%, 1500px, calc((100vh - 9.5rem) * var(--ar, 1)));
  height: auto;
  aspect-ratio: var(--ar, 1);
  cursor: zoom-in;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .5));
  transition: transform .45s var(--ease-out), opacity .35s ease;
  user-select: none;
  -webkit-user-drag: none;
}
@supports (height: 1dvh) {
  .lightbox__img { width: min(100%, 1500px, calc((100dvh - 9.5rem) * var(--ar, 1))); }
}
.lightbox[open] .lightbox__img { animation: lb-img .6s var(--ease-out); }
@keyframes lb-img { from { opacity: 0; transform: scale(.965); } }
.lightbox__stage.is-zoomed { touch-action: none; }
.lightbox__stage.is-zoomed .lightbox__img { transform: scale(2.3); cursor: zoom-out; transition: transform .45s var(--ease-out); }
.lightbox__img.is-swapping { opacity: 0; }

.lightbox__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 4rem;
}
.lightbox__title {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.15;
}
.lightbox__count {
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .28em;
  color: var(--lichen);
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid rgba(243, 236, 220, .22);
  border-radius: 50%;
  background: rgba(14, 23, 19, .55);
  color: var(--cream);
  cursor: pointer;
  transition: background .3s, border-color .3s, transform .3s;
}
.lightbox__btn:hover { background: rgba(61, 131, 168, .5); border-color: rgba(169, 210, 228, .7); }
.lightbox__btn:focus-visible { outline-color: var(--lake-light); outline-offset: 3px; border-radius: 50%; }
.lightbox__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: 1rem; top: calc(50% - 2.2rem); transform: translateY(-50%); }
.lightbox__next { right: 1rem; top: calc(50% - 2.2rem); transform: translateY(-50%); }

/* =====================================================================
   Smaller screens
   ===================================================================== */

@media (max-width: 760px) {
  body { font-size: 1rem; }

  .walk { padding-top: clamp(4.5rem, 12vh, 7rem); }
  .woods__layer--far { opacity: .22; }
  .woods__layer--near { opacity: .13; }

  .piece {
    display: block;
    margin-bottom: clamp(6.5rem, 17vh, 9rem);
    --art-w: min(100%, calc(62vh * var(--ar, 1)));
  }
  /* art sits to one side, leaving a strip free for the paint line */
  .piece__art, .piece__text { width: min(76%, 420px); }
  .piece:nth-child(even) .piece__art,
  .piece:nth-child(even) .piece__text { margin-left: auto; }
  .piece__open { margin: 0; }
  /* the wash, centred on the artwork */
  .piece__art::before { left: calc(var(--art-w) / 2); width: calc(var(--art-w) * 1.78 + 3rem); }
  .piece:nth-child(even) .piece__art::before { left: calc(100% - var(--art-w) / 2); }
  .piece:nth-child(even) .piece__open { margin-left: auto; }
  .piece__text { max-width: none; padding: 1.3rem 0 0; }

  .about { margin-top: clamp(10rem, 24vh, 13rem); padding-top: 1rem; }
  .about__inner { grid-template-columns: 1fr; gap: 2.6rem; }
  .print { width: min(88%, 420px); margin: 0 auto; }

  .lightbox__stage { padding: 4.2rem .6rem .5rem; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: .9rem; transform: none; width: 42px; height: 42px; }
  .lightbox__close { width: 42px; height: 42px; top: .8rem; right: .8rem; }
  .lightbox__bar { padding: 0 3.8rem; }
  .lightbox__title { font-size: 1.3rem; }
}

/* =====================================================================
   For visitors who prefer less motion
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mist, .lake::after { animation: none; }
  .js .hero__text > * { animation: none; opacity: 1; transform: none; }
  .js .piece__open, .js .piece__text, .js .about__text { opacity: 1; transform: none; transition: none; }
  .js .print { opacity: 1; transform: rotate(-2.2deg); transition: none; }
  .piece__open img, .lightbox__img, .paint__drip { transition: none; }
  .js .piece__art::before { opacity: var(--wash-strength, .36); scale: 1; transition: none; }
  .lightbox[open], .lightbox[open] .lightbox__img { animation: none; }
}