/* ==========================================================================
   Counted salt (projects/salt.html)

   The case page borrows the WoodBerg page's bones (styles/woodberg.css) and
   only adds what this project needs: an object on a plain stage instead of a
   photographic hero, boards that have to stay readable, and the dose sums.
   ========================================================================== */

/* ---------- The opening: the film behind, the words in front ---------- */
.sx-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding: 128px var(--wb-pad) 64px;
  overflow: hidden;
}
.sx-hero__film {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Dark at the bottom, so the words have something to sit on */
.sx-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgb(10 10 9 / 0.92) 0%, rgb(10 10 9 / 0.62) 32%, rgb(10 10 9 / 0.08) 62%),
    linear-gradient(to right, rgb(10 10 9 / 0.6), rgb(10 10 9 / 0) 58%);
}
.sx-hero__say {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 18px;
  max-width: 34ch;
  color: #f4f1ea;
}
.sx-kicker {
  margin: 0;
  color: var(--portfolio-accent-text, #c6f432);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sx-hero__title {
  margin: 0;
  font-size: clamp(52px, 9vw, 112px);
  line-height: 0.94;
  letter-spacing: -0.03em;
}
.sx-hero__line {
  margin: 0;
  max-width: 26ch;
  color: rgb(244 241 234 / 0.78);
  font-size: clamp(18px, 2.1vw, 23px);
  line-height: 1.45;
}

/* Three facts, the way a spec plate reads */
.sx-spec {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0 32px;
  margin: 10px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgb(244 241 234 / 0.22);
}
.sx-spec dt {
  color: rgb(244 241 234 / 0.6);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sx-spec dd {
  margin: 6px 0 0;
  font-size: 17px;
  line-height: 24px;
}

/* ---------- Two columns of plain reading ---------- */
.sx-why__grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  max-width: 94ch;
}
.sx-why__grid p { margin: 0; font-size: 20px; line-height: 32px; }

/* ---------- Boards and object shots ---------- */
.sx-figure {
  position: relative;
  margin: 48px 0 0;
  overflow: hidden;
  border-radius: 6px;
}
.sx-figure img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}
/* The rendered parts sit on nothing, so they keep the page behind them */
.sx-figure img[src$=".png"] { background: transparent; }

/* The caption lies on the picture, on frosted glass, and only when you look at it */
.sx-figure figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 18px 20px;
  color: #f2efe8;
  background: rgb(10 10 9 / 0.52);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  font-size: 14px;
  line-height: 24px;
}
@media (hover: hover) and (pointer: fine) {
  .sx-figure figcaption {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 260ms var(--wb-ease, cubic-bezier(0.16, 1, 0.3, 1)),
      transform 260ms var(--wb-ease, cubic-bezier(0.16, 1, 0.3, 1));
  }
  .sx-figure:hover figcaption,
  .sx-figure:focus-within figcaption {
    opacity: 1;
    transform: none;
  }
}
.sx-pair {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
.sx-figure--wide img { max-width: 100%; }
/* the two prototypes, one picture cut at the gap between them */
.sx-duo { display: grid; grid-template-columns: 835fr 865fr; overflow: visible; }
.sx-duo img { width: 100%; }

/* ---------- Long lines light as you scroll (scripts/say.js) ---------- */
.say-word { display: inline-block; will-change: opacity, transform; }
.say-on .wb-position__answer .say-word,
.say-on [data-say] .say-word { opacity: 0.26; transform: translateY(14px); }

/* ---------- The first version, in four renders and a film ---------- */
.sx-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  margin-top: 48px;
}
.sx-figure--tight { margin: 0; }
.sx-film { margin: 48px 0 0; }
.sx-film video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #0d0d0c;
}
.sx-film figcaption {
  margin-top: 16px;
  color: var(--wb-muted);
  font-size: 14px;
  line-height: 24px;
  max-width: 62ch;
}

/* ---------- The four parts, which assemble when you point at them ---------- */
.sx-build { cursor: default; background: none; }
.sx-build:focus-visible { outline: 2px solid var(--portfolio-accent-text, #c6f432); outline-offset: 4px; }
.sx-build__view {
  display: block;
  width: 100%;
  aspect-ratio: 360 / 480;
  background-repeat: no-repeat;
  background-size: 100% 2400%;   /* 24 frames, stacked */
  background-position: 0 0;      /* the first frame: apart */
}

/* ---------- The sums ---------- */
.sx-sums {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 48px;
}
.sx-sum {
  padding: 28px;
  border: 1px solid var(--wb-line);
  border-radius: 6px;
}
.sx-sum b {
  display: block;
  font-family: var(--f-display, inherit);
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.sx-sum span {
  display: block;
  margin-top: 12px;
  color: var(--wb-muted);
  font-size: 15px;
  line-height: 24px;
}
.sx-sum--lit {
  border-color: rgb(198 244 50 / 0.45);
  background: rgb(198 244 50 / 0.06);
}
.sx-sum--lit b { color: var(--portfolio-accent-text, #c6f432); }
.sx-note {
  margin-top: 24px;
  max-width: 62ch;
  color: var(--wb-muted);
  font-size: 16px;
  line-height: 28px;
}

/* ---------- What it does not do ---------- */
/* ---------- Limits: the claims it does not make, struck out ---------- */
.sx-nots {
  margin: clamp(40px, 6vh, 72px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 64px);
}
.sx-nots li {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(24px, 3.4vh, 36px) 0;
  border-top: 1px solid var(--wb-line, currentColor);
}
.sx-not__claim {
  position: relative;
  justify-self: start;
  text-decoration: none;
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-weight: 780;
  font-size: clamp(34px, 3.6vw, 60px);
  line-height: 1;
  letter-spacing: -0.02em;
  opacity: 0.32;
}
/* the strike, drawn in when the section arrives */
.sx-not__claim::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  top: 54%;
  height: max(3px, 0.07em);
  background: var(--portfolio-accent-text, #c6f432);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--wb-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.sx-nots li:nth-child(2) .sx-not__claim::after { transition-delay: 120ms; }
.sx-nots li:nth-child(3) .sx-not__claim::after { transition-delay: 240ms; }
.is-visible .sx-not__claim::after,
html:not(.js) .sx-not__claim::after { transform: scaleX(1); }
.sx-not__why {
  max-width: 32ch;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.45;
}
@media (max-width: 899px) {
  .sx-nots { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-not__claim::after { transition: none; transform: scaleX(1); }
}

/* ---------- The end: one block, one axis ---------- */
.sx-outcome { padding-block: clamp(96px, 16vh, 184px); grid-template-columns: minmax(0, 1fr); }
.sx-end {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 24px;
  grid-column: 1 / -1;
  justify-self: stretch;
  width: 100%;
  max-width: var(--wb-max);
  margin-inline: auto;
}
.sx-end__mark {
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(237 234 227 / 0.3);
  color: rgb(237 234 227 / 0.66);
  font: 400 13px/1 var(--f-mono, ui-monospace, monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sx-end__title {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(40px, 11vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.sx-end__line {
  margin: 0;
  max-width: 48ch;
  color: rgb(237 234 227 / 0.72);
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.55;
}

@media (min-width: 768px) {
  .sx-why__grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .sx-pair { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
  .sx-sums { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .sx-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .sx-hero { padding-top: 144px; }
  .sx-hero__say { max-width: 40ch; }
  /* the last line sits on one line, centred */
  .sx-end__title { max-width: none; white-space: nowrap; font-size: clamp(30px, 4.6vw, 80px); }
}

/* ---------- A shorter way in ----------
   The pictures start sooner: the problem carries its one-line why, the idea
   is set smaller, and the four people cards hug their words. */
.sx-why__one { max-width: 46ch; margin: 24px 0 0; color: var(--wb-muted); font-size: 20px; line-height: 1.5; }
.wb-position.sx-position { padding-top: clamp(64px, 10vh, 112px); padding-bottom: clamp(64px, 10vh, 112px); }
.sx-position .wb-position__answer { font-size: clamp(30px, 4.4vw, 60px); }
.sx-people .wb-phases li { min-height: 0; }
/* the opening sections sit closer together, so the first board arrives sooner */
.wb-section.sx-intro, .wb-section.sx-people { padding-top: clamp(56px, 9vh, 96px); padding-bottom: clamp(56px, 9vh, 96px); }
.wb-section.sx-people + .sx-board { padding-top: clamp(56px, 9vh, 96px); }