/* The notice shares mobile menu typography, surface colours and gallery line weight. */
html body.skn-pending-menu-page #content {
  display: grid;
  align-items: center;
  min-height: 65vh;
  min-height: 65svh;
}
html body .skn-work-in-progress {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  width: 100%;
  min-height: clamp(340px, 55svh, 560px);
  padding: 0;
}
html body .skn-progress-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 2.5vw, 32px);
  width: 100%;
}
/* Desktop follows the galleries: focus at left, two staggered rows at right. */
html body .skn-progress-tiles {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 68%;
  height: clamp(240px, 36svh, 360px);
  margin: 28px auto;
  z-index: 0;
  pointer-events: none;
}
html body .skn-progress-tiles span {
  display: block;
  min-width: 0;
  border-radius: 5px;
  background: rgb(222 222 222 / .35);
}
html[data-theme='dark'] body .skn-progress-tiles span {
  background: rgb(48 48 46 / .35);
}
html body .skn-progress-tiles span:nth-child(1) { grid-area: 1 / 1 / 2 / 6; }
html body .skn-progress-tiles span:nth-child(2) { grid-area: 1 / 7 / 2 / 10; }
html body .skn-progress-tiles span:nth-child(3) { grid-area: 1 / 10 / 2 / 12; }
html body .skn-progress-tiles span:nth-child(4) { grid-area: 2 / 7 / 3 / 9; }
html body .skn-progress-tiles span:nth-child(5) { grid-area: 2 / 9 / 3 / 12; }
html body .skn-progress-tiles span:nth-child(6) { grid-area: 2 / 12 / 3 / 13; }
html body .skn-progress-row { position: absolute; inset-inline: 0; top: 50%; transform: translateY(-50%); }
/* Touch layouts retain paired portraits and landscape rows around the centre line. */
@media (max-width: 1024px) {
  html body .skn-progress-tiles {
    width: min(58%, 300px);
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 70px 100px 100px 70px;
    gap: 12px;
    margin-block: 28px;
  }
  html body .skn-progress-tiles span:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
  html body .skn-progress-tiles span:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
  html body .skn-progress-tiles span:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
  html body .skn-progress-tiles span:nth-child(4) { grid-area: 3 / 1 / 4 / 2; }
  html body .skn-progress-tiles span:nth-child(5) { grid-area: 3 / 2 / 4 / 3; }
  html body .skn-progress-tiles span:nth-child(6) { grid-area: 4 / 1 / 5 / 3; }
}
@media (max-width: 700px) {
  html body .skn-progress-tiles { width: 72%; max-width: 240px; grid-template-rows: 48px 72px 72px 48px; gap: 12px; }
}
html body .skn-progress-row h1 {
  margin: 0;
  padding: calc(5.05em + 3pt) 2em;
  border: 0;
  border-radius: 5px;
  background: rgb(222 222 222 / .78);
  color: #000;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: clamp(15px, 2vw, 22px);
  font-weight: 600;
  line-height: calc(1em + 3pt);
  letter-spacing: .025em;
  text-align: center;
  text-transform: lowercase;
  white-space: nowrap;
}
html[data-theme='dark'] body .skn-progress-row h1 {
  color: #dedede;
  background: rgb(48 48 46 / .78);
}
html body .skn-progress-wave {
  display: block;
  width: 100%;
  height: 16px;
  overflow: visible;
  color: var(--muted);
  opacity: .4;
}
html body .skn-progress-wave path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
@media (max-width: 360px) {
  html body .skn-progress-row { gap: 8px; }
  html body .skn-progress-row h1 { padding-inline: 1.6em; }
}

/* Let the waves show through the notice surface, stopping just before the text. */
html body .skn-progress-row {
  --notice-wave-gap: clamp(10px, 2.5vw, 32px);
  --notice-text-padding: 2em;
  --notice-wave-overlap: calc(var(--notice-wave-gap) + var(--notice-text-padding) - 8px);
  font-size: clamp(15px, 2vw, 22px);
}
html body .skn-progress-row h1 { position: relative; z-index: 1; }
html body .skn-progress-row .skn-progress-wave {
  position: relative;
  z-index: 0;
  width: calc(100% + var(--notice-wave-overlap));
}
html body .skn-progress-row .skn-progress-wave:last-child {
  margin-left: calc(0px - var(--notice-wave-overlap));
}
@media (max-width: 360px) {
  html body .skn-progress-row { --notice-wave-gap: 8px; --notice-text-padding: 1.6em; }
}

/* Three-line display typography fills the notice surface. */
html body .skn-progress-row h1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  width: clamp(178px, 21vw, 280px);
  height: calc(11.1 * clamp(15px, 2vw, 22px) + 12px);
  padding: 8px;
  font-family: 'Clash Display Variable', 'Clash Display', Arial, sans-serif;
  font-weight: 900;
  font-synthesis: weight;
  font-size: clamp(34px, 4.1vw, 55px);
  line-height: .92;
  letter-spacing: -.025em;
  text-align: left;
  white-space: normal;
}
html body .skn-progress-row h1 span { display: block; }
html body .skn-progress-row { --notice-text-padding: 8px; }
@media (max-width: 360px) {
  html body .skn-progress-row { --notice-text-padding: 8px; }
  html body .skn-progress-row h1 { padding-inline: 8px; }
}

/* Tight leading keeps the three words almost touching. */
html body .skn-progress-row h1 { justify-content: center; gap: 0; line-height: .78; }

/* Distribute letters so even a single-word line reaches both edges. */
html body .skn-progress-row h1 > span { display: flex; justify-content: space-between; width: 100%; }
html body .skn-progress-row h1 > span > i { display: block; font-style: normal; }

/* Equivalent 58 percent monochrome ink in each colour mode. */
html body .skn-progress-row h1 { color: #6b6b6b; }
html[data-theme="dark"] body .skn-progress-row h1 { color: #949494; }

/* Align the middle word with the two central letters above it. */
html body .skn-progress-row h1 > span:nth-child(1),
html body .skn-progress-row h1 > span:nth-child(2) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-items: center;
}
html body .skn-progress-row h1 > span:nth-child(1) > i:first-child { justify-self: start; }
html body .skn-progress-row h1 > span:nth-child(1) > i:last-child { justify-self: end; }
html body .skn-progress-row h1 > span:nth-child(2) > i:first-child { grid-column: 2; }
html body .skn-progress-row h1 > span:nth-child(2) > i:last-child { grid-column: 3; }