/* The Audiencers case study. Same design system as the Satgana case study,
   same type pairing and same structure, with Poool's own palette sampled off
   their logo: ink, velvet, grapefruit, sunglow. */

:root {
  --green: #191919; /* ink, titles and primary text */
  --green-mid: #5a5a62; /* secondary */
  --sand: #e6e4e0; /* rules */
  --cream: #faf9f7; /* page background */
  --rose: #edecfb; /* velvet tint, the pivot fill */
  --terracotta: #5c56df; /* velvet, the accent */
  --grapefruit: #ee7674;
  --sunglow: #ffb800;

  --wrap: 1080px;
  --wrap-narrow: 760px;
  --wrap-flow: 1240px;

  --title-hero: clamp(2.4rem, 5.4vw, 3.7rem);
  --title-section: clamp(2rem, 4vw, 2.85rem);
  --figure-size: clamp(1.9rem, 3.2vw, 2.6rem);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--green);
  font-family: Nunito, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

p {
  margin: 0 0 1.15em;
  max-width: 68ch;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--terracotta);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--green);
}

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

/* ---------------- layout ---------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
}

.wrap-narrow {
  max-width: calc(var(--wrap-narrow) + 56px);
}

.wrap-flow {
  max-width: calc(var(--wrap-flow) + 56px);
}

.section {
  padding: clamp(64px, 9vw, 118px) 0;
  border-top: 1px solid var(--sand);
}

/* ---------------- screen 1 ---------------- */

.hero {
  padding: clamp(72px, 13vh, 150px) 0 clamp(64px, 9vw, 118px);
}

.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  font-size: 0.95rem;
  margin: 0 0 40px;
}

.eyebrow-label {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--terracotta);
}

.byline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  text-decoration: none;
}

.byline:hover {
  color: var(--terracotta);
}

.byline:hover .in-mark {
  fill: var(--terracotta);
}

.in-mark {
  width: 16px;
  height: 16px;
  flex: none;
  fill: var(--green-mid);
}

/* Satgana's mark is an 84px disc. This is a wordmark, so it is set by height
   to land at the same optical weight in the same place. */
.logo {
  width: auto;
  height: 54px;
  margin: 0 0 34px;
}

.hero-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: var(--title-hero);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--green);
  margin: 0;
  max-width: 15ch;
}

/* ---------------- headings ---------------- */

.section-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: var(--title-section);
  line-height: 1.16;
  color: var(--green);
  margin: 0 0 clamp(30px, 4vw, 48px);
}

/* ---------------- bullets in running text ---------------- */

.bullets {
  list-style: none;
  margin: 0 0 1.15em;
  padding: 0;
  max-width: 62ch;
}

.bullets li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 7px;
}

.bullets li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.66em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
}

/* ---------------- screen 2 ---------------- */

/* No fill. Rose is now the pivot's alone, which is what makes phase 3 read as
   the only filled block on the page. The rule on the left is enough to set
   this block apart from the prose around it. */
.callout {
  margin: clamp(34px, 4.5vw, 52px) 0 0;
  border-left: 4px solid var(--terracotta);
  padding: 4px 0 4px 28px;
}

.callout-title {
  font-weight: 700;
  color: var(--green);
  margin: 0 0 0.5em;
}

.callout p {
  max-width: 62ch;
}

/* ---------------- screen 3, the graph ----------------
   Four nodes read top to bottom. Phase 1 is a wide collection band, the
   connectors narrow it into phase 2, open it into phase 3, which is the
   widest block on the page and the only filled one, then fan it out into
   the three groups of phase 4. The shape carries the hierarchy, so it is
   readable before a single word is. */

.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flow-step {
  width: 100%;
}

.step-collect,
.step-out {
  max-width: 1040px;
}

.step-neck {
  max-width: 620px;
}

.step-pivot {
  max-width: var(--wrap-flow);
  background: var(--rose);
  border-left: 4px solid var(--terracotta);
  padding: clamp(34px, 4vw, 52px) clamp(26px, 3.4vw, 56px);
}

.flow-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--green);
  margin: 0 0 22px;
  text-align: center;
}

.step-out .flow-title {
  margin-bottom: 4px;
}

.flow-title-pivot {
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  margin-bottom: 18px;
}

/* Phase 2 was one block of prose. Four separated moves, one per line of
   reasoning, so the neck reads as a method rather than a paragraph. */
.moves-lead {
  margin: 0 0 20px;
  max-width: none;
}

/* Four observations, each on its own line, separated by hairlines. They are
   not steps, so they take a mark rather than a number. */
.moves {
  list-style: none;
  margin: 0;
  padding: 0;
}

.moves li {
  position: relative;
  padding: 14px 0 14px 28px;
  border-top: 1px solid var(--sand);
  font-size: 0.99rem;
  line-height: 1.6;
}

.moves li:last-child {
  border-bottom: 1px solid var(--sand);
}

.moves li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 1.32em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
}

.moves-close {
  margin: 22px 0 0;
  max-width: none;
}

.tag {
  font-weight: 700;
  color: var(--terracotta);
}

.step-pivot p {
  font-size: 1.06rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 74ch;
}

/* The connectors. Right angles only: a bracket that gathers a whole band
   into one stem, the same bracket reversed to open onto the pivot, and a
   three way split for the deliverables. No curves, no arrowheads. */
.conn {
  display: block;
  width: 100%;
  height: 74px;
  /* The ink starts at the very top of the box and ends at the very bottom, so
     these margins are the whole gap. They need to be generous: at 18px the
     bar read as an underline on the text above it. */
  margin: 38px 0 32px;
  fill: none;
  stroke: var(--terracotta);
  stroke-width: 1;
  opacity: 0.55;
}

.conn path {
  vector-effect: non-scaling-stroke;
}

.conn-short,
.conn-split {
  height: 52px;
}

.conn-short {
  margin: 32px 0 26px;
}

/* The title of phase 4 sits between the two, so the split reads as the
   pivot naming production and production opening into three groups. */
.conn-split {
  margin-top: 24px;
  margin-bottom: 30px;
}

.conn-tick {
  display: none;
}

/* phase 1, the corpus */
.corpus {
  display: grid;
  /* The two missions carry three and four figures, not five, so the columns
     follow the count instead of leaving a hole on the right. */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 26px 22px;
  margin: 0 0 30px;
}

.corpus-item {
  border-top: 2px solid var(--terracotta);
  padding-top: 12px;
}

.corpus-num {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: var(--figure-size);
  line-height: 1.05;
  color: var(--terracotta);
  margin: 0 0 6px;
}

.corpus-text {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--green);
}

.num-inline {
  color: var(--terracotta);
  font-weight: 700;
}

/* The corpus, one dot per post. 5,314 from the ecosystem in green, then the
   521 portfolio posts in terracotta, so the smaller, closer set is the one
   that carries the accent. */
.field {
  margin: 34px 0 0;
}

.field img {
  width: 100%;
  height: auto;
}

.field-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--green-mid);
}

.key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.key::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.key-eco::before {
  background: var(--green-mid);
  opacity: 0.62;
}

.key-pf::before {
  background: var(--terracotta);
}

.field-note {
  font-style: italic;
}

/* Phase 3, the six parts of the platform, in three named rows. The rule down
   the left edge of the pill column runs unbroken across all three, which is
   what says the six belong to one object. It is a border on each row rather
   than a separate element, and the rows are spaced with padding rather than a
   gap, so the line never breaks. */
.platform {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 22px;
}

.platform dt {
  text-align: right;
  padding: 9px 20px 9px 0;
  font-size: 0.9rem;
  color: var(--green-mid);
}

.platform dd {
  margin: 0;
  padding: 9px 0 9px 20px;
  border-left: 1px solid var(--terracotta);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill {
  border: 1px solid var(--terracotta);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 0.95rem;
  color: var(--terracotta);
  background: rgba(255, 255, 255, 0.35);
}

/* phase 4 */
.deliverables {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 40px;
}

.deliverable-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--green);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sand);
  text-align: center;
}

.deliverable ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.deliverable li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 9px;
  color: var(--green);
  font-size: 0.99rem;
  line-height: 1.55;
}

.deliverable li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--terracotta);
}

/* Everything that was handed over, as one object seen from above. No
   rotation: a single offset, repeated, three sheets stepping in from each
   side. */
.handover {
  margin: 46px 0 0;
  padding-top: 38px;
  border-top: 1px solid var(--sand);
}

.exploded {
  position: relative;
  height: 352px;
  max-width: 840px;
  margin: 0 auto;
}

.exploded img {
  position: absolute;
  display: block;
  width: auto;
  background: #fff;
  border: 1px solid var(--sand);
  box-shadow: 0 14px 30px rgba(30, 58, 50, 0.12);
}

.exploded .e1 { height: 196px; left: 0;     top: 0;    z-index: 1; }
.exploded .e2 { height: 196px; left: 54px;  top: 40px; z-index: 2; }
.exploded .e3 { height: 196px; left: 108px; top: 80px; z-index: 3; }
.exploded .e4 { height: 238px; right: 152px; top: 0;   z-index: 4; }
.exploded .e5 { height: 238px; right: 76px;  top: 44px; z-index: 5; }
.exploded .e6 { height: 238px; right: 0;     top: 88px; z-index: 6; }

.handover figcaption {
  margin-top: 30px;
  font-size: 0.86rem;
  color: var(--green-mid);
  text-align: center;
}

/* ---------------- screen 4 ---------------- */

.outcomes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(34px, 4.5vw, 54px) clamp(36px, 5vw, 64px);
}

.outcome-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 1.32rem;
  color: var(--green);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sand);
}

.outcome p {
  color: var(--green);
  max-width: 58ch;
}

.outcome-adoption {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.offsite {
  margin: 0;
}

.offsite img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 42%;
}

.offsite figcaption {
  margin-top: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--green-mid);
}

/* ---------------- the quote ---------------- */

.quote-band {
  background: var(--sand);
  padding: clamp(54px, 7vw, 92px) 0;
}

.quote {
  margin: 0;
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: clamp(24px, 3.5vw, 44px);
  align-items: start;
}

.quote-face {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
}

.quote blockquote {
  margin: 0 0 20px;
}

/* Nunito, like the rest of the page. Playfair italic is a display face: it
   carries three words beautifully and seventy-five badly. */
.quote blockquote p {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.62;
  color: var(--green);
  margin: 0;
  max-width: 56ch;
}

.quote blockquote b {
  font-weight: 700;
}

.quote figcaption {
  display: flex;
  flex-direction: column;
}

.quote-name {
  font-weight: 700;
  color: var(--green);
}

.quote-role {
  font-size: 0.95rem;
  color: var(--green-mid);
}

/* ---------------- screen 5 ---------------- */

.section-close {
  padding-bottom: clamp(72px, 10vw, 130px);
}

.close-label {
  font-weight: 700;
  color: var(--green);
  margin: 0 0 8px;
}

.close-line {
  color: var(--green-mid);
  margin: 0 0 clamp(34px, 4.5vw, 52px);
  max-width: 52ch;
}

.contact-name {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 1.32rem;
  color: var(--green);
  margin: 0 0 6px;
}

.contact p:last-child {
  margin: 0;
}

/* ---------------- responsive ---------------- */

@media (max-width: 980px) {
  .corpus {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 880px) {
  .deliverables {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .outcomes,
  .outcome-adoption {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  /* Every step is the same width on a phone, so the brackets would be a lie.
     They give way to a plain vertical tick between the nodes. */
  .conn {
    height: 40px;
    margin: 26px 0 22px;
  }

  .conn-bracket {
    display: none;
  }

  .conn-tick {
    display: block;
  }

  .corpus {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 18px;
  }

  /* The composition needs room it does not have on a narrow screen, so the
     sheets become a plain two column grid. */
  .exploded {
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    gap: 16px;
  }

  /* No crop here: the sheets keep their own proportions, so a title is never
     cut in half. */
  .exploded img {
    position: static;
    width: 100%;
    height: auto;
    box-shadow: none;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 17px;
  }

  .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  .step-pivot {
    padding-left: 22px;
    padding-right: 22px;
  }

  .callout {
    padding-left: 20px;
  }

  /* The three rows stack, each label above its pair, and the rule goes: it
     would no longer be joining anything. */
  .platform {
    display: block;
    width: auto;
  }

  .platform dt {
    text-align: left;
    padding: 0 0 8px;
  }

  .platform dd {
    border-left: 0;
    padding: 0 0 20px;
  }

  .platform dd:last-of-type {
    padding-bottom: 0;
  }

  /* The pivot keeps its extra width on a phone by running to both edges,
     while every other step stays inside the text column. */
  .step-pivot {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
  }

  .hero-title {
    max-width: none;
  }

  .quote {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (max-width: 420px) {
  .corpus {
    grid-template-columns: 1fr;
  }
}

/* ---------------- the one orchestrated moment ----------------
   Screen 1 settles once on load. Nothing else on the page moves.
   Only applies when the inline head script has set .js, so a page
   without JavaScript is simply there, fully visible, at rest. */

.js .reveal {
  opacity: 0;
  animation: rise 620ms cubic-bezier(0.22, 0.68, 0.26, 1) forwards;
}

.js .reveal:nth-child(1) {
  animation-delay: 40ms;
}
.js .reveal:nth-child(2) {
  animation-delay: 160ms;
}
.js .reveal:nth-child(3) {
  animation-delay: 280ms;
}
.js .reveal:nth-child(4) {
  animation-delay: 400ms;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

@media print {
  .js .reveal {
    opacity: 1;
    animation: none;
  }
}

/* The promise, set as the one line the whole platform hangs on. */
.promise {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.32;
  color: var(--green);
  margin: 0 auto 26px !important;
  max-width: 34ch !important;
  text-align: center;
}

.pill-name {
  font-weight: 700;
  background: #fff;
}

/* What was ruled out, kept visually lighter than what was shipped. */
.ruled-out {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--sand);
}

.ruled-title {
  font-weight: 700;
  color: var(--green);
  margin: 0 0 14px;
}

.rules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rules li {
  position: relative;
  padding: 9px 0 9px 20px;
  border-bottom: 1px solid var(--sand);
  color: var(--green-mid);
  font-size: 0.97rem;
}

.rules li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.15em;
  width: 9px;
  height: 1px;
  background: var(--green-mid);
}

/* Two quotes side by side, no portraits: neither is on file. */
.quote-band .wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(30px, 4vw, 56px);
}

.quote {
  display: block;
  margin: 0;
}

.quote blockquote {
  margin: 0 0 18px;
  padding-top: 16px;
  border-top: 2px solid var(--green);
}

@media (max-width: 880px) {
  .rules,
  .quote-band .wrap {
    grid-template-columns: 1fr;
  }
}

/* A single figure, so it keeps its own width rather than stretching. */
.corpus-single {
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 0 24px;
  margin: 26px 0 26px;
}

.corpus-single .corpus-item {
  display: contents;
}

.corpus-single .corpus-text {
  border-top: 2px solid var(--terracotta);
  padding-top: 12px;
  max-width: 44ch;
}

/* The headline result leads the grid, with the rank set as a figure rather
   than as a sentence. */
.outcome-lead {
  grid-column: 1 / -1;
}

.rank {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1;
  color: var(--terracotta);
  margin: 0 0 6px;
}

.outcome-lead .outcome-title {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 14px;
  max-width: 24ch;
}

.outcomes-lead {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.34;
  color: var(--green);
  max-width: 44ch;
  margin: -14px 0 clamp(30px, 4vw, 44px);
}

/* Each quote carries its author, portrait first, as on the operator page. */
.quote figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
}

.quote-face {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  /* One treatment across both headshots. */
  filter: grayscale(1) contrast(1.03);
}

.quote-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Inherited from the Satgana page, where this block held a photograph beside
   the text. There is none here, so it stops being a two column grid. */
/* Inherited from the Satgana page, where this block held a photograph beside
   the text and ran the full width. Here it is a card like the others, which
   also closes the hole the odd count left in the grid. */
/* Three cards in a two column grid left a hole, so the strongest one runs
   the full width again. It holds no photograph here, unlike on the Satgana
   page, so it is not a grid itself. */
.outcome-adoption {
  display: block;
  grid-column: 1 / -1;
}

/* The caption rule above sets a column; these two sit on one line. */
.quote figcaption {
  flex-direction: row;
}

/* ---------------- the room, and the video ---------------- */

.room {
  margin: 30px 0 0;
}

.room img {
  width: 100%;
  border: 1px solid var(--sand);
}

.room-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.room-pair img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.room figcaption {
  margin: 12px 0 18px;
  display: none;
  font-size: 0.88rem;
  color: var(--green-mid);
}

.video {
  margin-top: 26px;
  aspect-ratio: 16 / 9;
  background: var(--green);
  overflow: hidden;
}

.video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-play {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.video-play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* One mark, in the accent, rather than the YouTube badge. */
.video-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--terracotta);
}

.video-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 22px solid #fff;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  transform: translateX(4px);
}

.video-play:hover .video-icon {
  background: var(--green);
}

/* ---------------- what the media looks like ---------------- */

.articles {
  margin: clamp(38px, 5vw, 60px) 0 0;
  padding-top: clamp(30px, 4vw, 44px);
  border-top: 1px solid var(--sand);
}

.articles-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 1.32rem;
  color: var(--green);
  margin: 0 0 20px;
}

/* Two across, not four: at a quarter of the width the headlines were
   illegible, and a forced square crop cut them mid word. These keep their
   own proportions. */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.articles-grid img {
  width: 100%;
  height: auto;
  border: 1px solid var(--sand);
}

.articles-note {
  margin: 16px 0 0;
  font-size: 0.9rem;
  color: var(--green-mid);
}

@media (max-width: 880px) {
  .articles-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .room-pair {
    grid-template-columns: 1fr;
  }

  .video-icon {
    width: 56px;
    height: 56px;
  }
}