/* In their words.

   A mosaic rather than a column: the hero takes two rows on the left, the
   on-camera tile sits under it, and the rest fill two columns beside them at
   whatever height their words come to.

   The comp's own note was that its first pass ran too playful -- six hues,
   a gradient hero, a glow. What is here keeps the part doing the work: mixed
   tile sizes, condensed caps for the short quotes against Barlow for the long
   ones, and one accent. Every tile but the hero is the same neutral glass as
   the rest of the page. */

.nst-words {
  --w-seam: 10px;
}

/* The hero on the left, a masonry of tiles on the right.

   A three-column grid was the obvious read of the comp and the wrong one:
   quote tiles are whatever height their words come to, so a grid row padded
   the short ones out to the tallest and the wall filled with holes -- a
   half-column of black beside the hero and another under it.

   The right-hand side is columns instead, so a tile ends where its words end
   and the next one starts there. The hero keeps a column of its own because
   it is the one tile with a fixed shape. */
.nst-words__wall {
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: var(--w-seam);
  padding-top: 16px;
  /* Not `start`. The two sides are different lengths -- the hero is one fixed
     tile and the right is a run of quotes -- so aligning to the top left the
     hero ending at 660 against columns running to 1290, and half the section
     was black. Stretching squares the bottom edge. */
  align-items: stretch;
}

/* Hero and the on-camera tile stack down the left, and the hero takes up
   whatever the right-hand columns come to. */
.nst-words__left {
  display: flex;
  flex-direction: column;
  gap: var(--w-seam);
}
.nst-words__left > .nst-words__hero { flex: 1; }

/* Two real columns, not CSS columns. `column-fill: balance` has nothing to
   balance inside a fixed height -- the wall is stretched to the hero -- so it
   filled the first to the bottom and left the second 250px short. The script
   decides which column each tile goes in; these just stack them. */
.nst-words__rest {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--w-seam);
  align-items: start;
}

.nst-words__col {
  display: flex;
  flex-direction: column;
  gap: var(--w-seam);
}

/* --- the hero ------------------------------------------------------------- */

.nst-words__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Flat orange, not a gradient. The one tile carrying colour on the page, so
     the quote inside it is the loudest thing in the section by construction
     rather than by decoration. */
  background: var(--orange, #ff4a15);
  color: #08080a;
  border-radius: var(--r, 10px);
  padding: 26px;
  min-height: 420px;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Centred in whatever height the hero is given rather than pinned under the
   timestamp. Stretched to match the columns beside it, a top-aligned quote
   left a foot of orange between the words and the name. */
.nst-words__heroline {
  font-family: var(--cond);
  font-size: clamp(30px, 3.2vw, 52px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .98;
  letter-spacing: -.01em;
  margin: 18px 0 0;
  flex: 1;
  display: flex;
  align-items: center;
}

.nst-words__herofoot {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 22px;
}

/* Dark on orange, which is the reverse of every other card here -- the seam
   between the two is what makes the hero read as a different kind of thing. */
.nst-words__hear {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: #f4f4f2;
  background: #08080a;
  padding: 11px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

/* --- the on-camera tile --------------------------------------------------- */

.nst-words__camera {
  position: relative;
  overflow: hidden;
  border-radius: var(--r, 10px);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  cursor: pointer;
  background: repeating-linear-gradient(115deg, #23232e 0 10px, #191922 10px 20px);
  transition: transform .25s ease, box-shadow .25s ease;
}

.nst-words__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nst-words__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(6, 6, 10, .5) 0%, rgba(6, 6, 10, .2) 40%, rgba(6, 6, 10, .96) 100%);
}

.nst-words__flag {
  position: absolute;
  top: 18px;
  left: 18px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  color: #08080a;
  background: var(--orange, #ff4a15);
  padding: 6px 10px;
  border-radius: 999px;
}

.nst-words__clip {
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: var(--mono);
  font-size: 10px;
  color: #f4f4f2;
}

.nst-words__camerabody { position: relative; }

.nst-words__cameraline {
  font-family: var(--cond);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  margin: 0 0 14px;
}

/* --- the tiles ------------------------------------------------------------ */

.nst-words__tile {
  display: flex;
  flex-direction: column;
  /* The same neutral glass as everything else on the page. The first pass gave
     each tile its own hue and the section turned into a paint chart. */
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r, 10px);
  padding: 18px;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Mixed voice. A four-word quote set as body copy disappears; a forty-word one
   set in caps becomes a wall. Length picks the treatment. */
.nst-words__loud {
  font-family: var(--cond);
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.04;
  margin: 12px 0 16px;
}

.nst-words__quiet {
  font-family: var(--body, "Barlow", sans-serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
  color: #e8e8ea;
  margin: 12px 0 16px;
}

/* --- the head and the credit ---------------------------------------------- */

.nst-words__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
}

.nst-words__when { color: var(--orange, #ff4a15); }
.nst-words__hero .nst-words__when { color: rgba(8, 8, 10, .62); }

.nst-words__heat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8b8b93;
  white-space: nowrap;
}
.nst-words__hero .nst-words__heat { color: rgba(8, 8, 10, .62); }

.nst-words__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange, #ff4a15);
}
.nst-words__hero .nst-words__dot { background: #08080a; }

.nst-words__by {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.nst-words__face {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  overflow: hidden;
  background: #23232e;
  display: grid;
  place-items: center;
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 700;
  color: #8b8b93;
}
.nst-words__face img { width: 100%; height: 100%; object-fit: cover; }

.nst-words__by--hero .nst-words__face {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  /* A ring rather than a fill: on orange, a grey circle reads as a hole. */
  box-shadow: 0 0 0 1.5px rgba(8, 8, 10, .3);
}

.nst-words__lines { display: flex; flex-direction: column; min-width: 0; }

.nst-words__who {
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
}
.nst-words__by--hero .nst-words__who { font-size: 22px; }

.nst-words__role {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  color: #8b8b93;
  padding-top: 3px;
}
.nst-words__by--hero .nst-words__role { color: rgba(8, 8, 10, .62); }

/* --- the toggle ----------------------------------------------------------- */

.nst-words__toggle { display: inline-flex; gap: 6px; }

.nst-words__chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: #8b8b93;
  background: none;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}
.nst-words__chip.is-on {
  color: #08080a;
  background: var(--orange, #ff4a15);
  border-color: var(--orange, #ff4a15);
}

/* --- hover ---------------------------------------------------------------- */

@media (hover: hover) {
  .nst-words__hero:hover,
  .nst-words__camera:hover,
  .nst-words__tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  }
  .nst-words__tile:hover { border-color: rgba(255, 255, 255, .18); }
}

/* --- narrower ------------------------------------------------------------- */

@media (max-width: 1180px) {
  .nst-words__wall { grid-template-columns: 1.4fr 1fr; }
  .nst-words__heroline { font-size: clamp(28px, 3.6vw, 40px); }
}

@media (max-width: 900px) {
  /* One column. A 1.5fr hero beside two columns of tiles needs the width to
     mean anything; below this the tiles are too narrow to hold a sentence. */
  .nst-words__wall { grid-template-columns: 1fr; }
  .nst-words__hero,
  .nst-words__camera { grid-column: 1; grid-row: auto; }
  .nst-words__hero { min-height: 0; padding: 22px; }
  .nst-words__heroline { font-size: 30px; }
  .nst-words__herofoot { padding-top: 18px; }
  .nst-words__hear { margin-left: 0; }
}

@media (max-width: 700px) {
  .nst-words__heroline { font-size: 26px; }
  .nst-words__loud { font-size: 21px; }
  .nst-words__quiet { font-size: 15px; }
  .nst-words__cameraline { font-size: 21px; }
  .nst-words__by--hero .nst-words__who { font-size: 18px; }
}