:root {
  --bg: #e8bd8b;

  --text: #1f1a17;
  --muted: #6f5848;

  --accent: #8f3427;

  --line: #c89f73;

  --land: #d5aa78;
  --land-stroke: #a87d58;

  --route: #8f3427;
  --point: #2b211b;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", sans-serif;
}

main {
  width: 100%;
}


/* -----------------------
   HERO
------------------------ */

.hero {
  height: 320vh;
  position: relative;
}

.hero-sticky {
  position: sticky;
  top: 0;

  height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

.eyebrow {
  position: absolute;
  top: 58px;

  margin: 0;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;

  color: var(--muted);
}

.hero-stage {
  position: relative;

  width: min(900px, 90vw);
  height: 240px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.travel-word {
  position: absolute;

  opacity: 0;
  transform: translateY(25px);

  font-size: clamp(90px, 14vw, 170px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.travel-word.active {
  opacity: 1;
  transform: translateY(0);
}

#word-arabic {
  font-family: "Noto Naskh Arabic", serif;
  font-size: clamp(115px, 17vw, 210px);
  letter-spacing: 0;
}

.hero-language {
  margin: 20px 0 0;

  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;

  color: var(--muted);

  transition: opacity 0.35s ease;
}

.hero-caption {
  position: absolute;
  bottom: 90px;

  margin: 0;

  font-size: 17px;
  color: var(--muted);

  opacity: 0;
  transform: translateY(10px);

  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.hero-caption.visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-cue {
  position: absolute;
  bottom: 38px;

  text-align: center;

  font-size: 9px;
  letter-spacing: 0.22em;

  color: var(--muted);

  transition: opacity 0.4s ease;
}

.scroll-cue span {
  display: block;
  margin-top: 7px;
  font-size: 16px;
}


.hero-stage {
  position: relative;
  overflow: hidden;
}

.hero-bg-motion {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero-ghost {
  position: absolute;
  display: block;

  color: var(--text);
  opacity: 0.045;

  line-height: 0.5;
  white-space: nowrap;

  user-select: none;
  pointer-events: none;
}

.hero-ghost-1 {
  top: 18%;
  left: 12%;

  font-family: "Noto Naskh Arabic", serif;
  font-size: clamp(100px, 14vw, 180px);

  animation: heroFloat1 12s ease-in-out infinite alternate;
}

.hero-ghost-2 {
  top: 52%;
  left: 8%;

  font-family: "Instrument Serif", serif;
  font-size: clamp(72px, 10vw, 130px);

  animation: heroFloat2 14s ease-in-out infinite alternate;
}

.hero-ghost-3 {
  top: 28%;
  right: 10%;

  font-family: "Instrument Serif", serif;
  font-size: clamp(78px, 11vw, 140px);

  animation: heroFloat3 16s ease-in-out infinite alternate;
}

.travel-word {
  position: absolute;
  z-index: 2;
}

@keyframes heroFloat1 {
  from {
    transform: translate(-20px, 10px) rotate(-1deg);
  }

  to {
    transform: translate(45px, -28px) rotate(1deg);
  }
}

@keyframes heroFloat2 {
  from {
    transform: translate(-35px, -8px) rotate(1deg);
  }

  to {
    transform: translate(40px, 24px) rotate(-1deg);
  }
}

@keyframes heroFloat3 {
  from {
    transform: translate(30px, -18px) rotate(-1deg);
  }

  to {
    transform: translate(-45px, 30px) rotate(1deg);
  }
}

/* -----------------------
   INTRO
------------------------ */

.intro {
  padding: 180px 24px;
}

.text-column {
  width: min(680px, 100%);
  margin: 0 auto;
}

.section-kicker {
  margin-bottom: 22px;

  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;

  color: var(--accent);
}

.text-column h1 {
  margin: 0 0 40px;

  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 500;
}

.text-column p {
  font-size: 20px;
  line-height: 1.7;
  color: #44403b;
}


/* -----------------------
   LANGUAGE FAMILIES
------------------------ */

.family-section {
  min-height: 100vh;

  padding: 120px 24px 180px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.family-grid {
  width: min(1000px, 100%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.family-card {
  padding: 70px 30px;
  text-align: center;
}

.family-card + .family-card {
  border-left: 1px solid var(--line);
}

.family-language {
  min-height: 90px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 56px;
  letter-spacing: -0.04em;
}

.family-language.arabic {
  font-family: "Noto Naskh Arabic", serif;
  font-size: 68px;
}

.family-name {
  margin-top: 24px;

  font-size: 17px;
  font-weight: 600;
}

.family-group {
  margin-top: 8px;

  font-size: 14px;
  color: var(--muted);
}

.family-takeaway {
  width: min(650px, 100%);

  margin: 90px auto 0;

  text-align: center;

  font-size: 28px;
  line-height: 1.35;
}


/* -----------------------
   COFFEE JOURNEY
------------------------ */

.coffee-journey {
  position: relative;
}

.journey-sticky {
  position: sticky;
  top: 0;

  height: 100vh;

  display: grid;
  grid-template-columns: 30% 70%;
  align-items: center;

  padding: 50px 55px;

  background: var(--bg);
}

.journey-header {
  position: relative;
  z-index: 3;

  align-self: center;

  padding-right: 25px;
}

.journey-header h2 {
  margin: 0;

  max-width: 320px;

  font-family: "Instrument Serif", serif;
  font-size: clamp(56px, 6vw, 88px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  font-weight: 400;

  color: var(--text);
}

.map-wrap {
  position: relative;
  z-index: 1;

  width: 100%;
  height: 76vh;
}

#coffee-map {
  width: 100%;
  height: 100%;

  overflow: visible;
}

.map-land {
  fill: var(--land);
  stroke: var(--land-stroke);
  stroke-width: 0.45px;
  opacity: 0.48;
}

.route-line {
  stroke-width: 2.4px;

  stroke: var(--route);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;

  opacity: 0.95;
}

.route-point {
  fill: var(--point);
  stroke: var(--bg);
  stroke-width: 2px;
}

.route-label {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;

  fill: var(--text);
}

.journey-word-card {
  position: absolute;
  left: 50%;
  bottom: 22px;

  transform: translateX(-50%);

  text-align: center;
}

.journey-word {
  font-family: "Instrument Serif", serif;
  font-size: 64px;
  line-height: 0.9;
  font-weight: 400;
}

.journey-place {
  margin-top: 12px;

  font-family: "DM Sans", sans-serif;
  font-size: 9px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.24em;

  color: var(--muted);
}


/* -----------------------
   SCROLL STEPS
------------------------ */

.journey-steps {
  position: relative;

  width: min(560px, calc(100% - 40px));

  margin-left: auto;
  margin-right: 7vw;

  padding-bottom: 80vh;
}

.journey-step {
  min-height: 85vh;

  display: flex;
  align-items: center;
}

.journey-step p {
  margin: 0;

  padding: 24px 0 24px 22px;

  background: transparent;

  border-left: 2px solid var(--accent);

  font-family: "DM Sans", sans-serif;
  font-size: 19px;
  line-height: 1.55;

  color: var(--text);
}

.journey-step strong,
.journey-step em {
  font-family: "Instrument Serif", serif;
  font-size: 1.18em;

  font-weight: 400;
  font-style: normal;
}


/* -----------------------
   RESPONSIVE
------------------------ */

@media (max-width: 850px) {

  .journey-sticky {
    grid-template-columns: 1fr;
    align-content: center;

    padding: 30px 24px;
  }

  .journey-header {
    position: absolute;

    top: 50px;
    left: 25px;
    right: 25px;

    padding-right: 0;
  }

  .journey-header h2 {
    max-width: 360px;
    font-size: 42px;
  }

  .map-wrap {
    height: 55vh;
    margin-top: 100px;
  }

  .journey-steps {
    width: calc(100% - 40px);
    margin: 0 auto;
  }
}

@media (max-width: 700px) {

  .family-grid {
    grid-template-columns: 1fr;
  }

  .family-card + .family-card {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .intro {
    padding: 120px 24px;
  }

  .text-column p {
    font-size: 18px;
  }

  .family-takeaway {
    font-size: 23px;
  }
}

/* -----------------------
   ARABIC AS A BRIDGE
------------------------ */

.bridge-section {
  position: relative;

  padding-top: 180px;

  background: var(--bg);
}

.bridge-intro {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto 140px;
}

.bridge-intro h2 {
  margin: 0 0 36px;

  font-family: "Instrument Serif", serif;
  font-size: clamp(58px, 7vw, 96px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  font-weight: 400;
}

.bridge-intro > p:last-child {
  width: min(620px, 100%);

  font-size: 20px;
  line-height: 1.65;

  color: var(--muted);
}


/* Orange scrollytelling */

.orange-story {
  position: relative;
}

.orange-sticky {
  position: sticky;
  top: 0;

  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

.orange-map-wrap {
  position: relative;

  width: 100%;
  height: 88vh;
}

#orange-map {
  width: 100%;
  height: 100%;
}


/* Map styling */

.orange-land {
  fill: var(--land);
  stroke: var(--land-stroke);

  stroke-width: 0.4px;
  opacity: 0.42;
}

.orange-route {
  fill: none;

  stroke: var(--route);
  stroke-width: 2.4px;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.orange-point {
  fill: var(--point);

  stroke: var(--bg);
  stroke-width: 2px;
}

.orange-label {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;

  fill: var(--text);

  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 5px;
  stroke-linejoin: round;
}


/* Current word */

.orange-word-display {
  position: absolute;

  left: 50%;
  bottom: 42px;

  transform: translateX(-50%);

  text-align: center;
}

#orange-word {
  font-family: "Instrument Serif", serif;

  font-size: clamp(56px, 6vw, 84px);
  line-height: 0.9;
}

#orange-language {
  margin-top: 14px;

  font-size: 9px;
  font-weight: 600;

  letter-spacing: 0.24em;

  color: var(--muted);
}


/* Narrative cards */

.orange-steps {
  position: relative;

  width: min(460px, calc(100% - 40px));

  margin-left: 7vw;
  margin-right: auto;

  padding-bottom: 80vh;
}

.orange-step {
  min-height: 90vh;

  display: flex;
  align-items: flex-start;

  padding-top: 12vh;
}

.orange-step p {
  max-width: 420px;

  margin: 0;

  padding: 22px 0 22px 20px;

  border-left: 2px solid var(--accent);

  font-size: 18px;
  line-height: 1.55;
}

.orange-step strong,
.orange-step em {
  font-family: "Instrument Serif", serif;

  font-size: 1.2em;
  font-weight: 400;
  font-style: normal;
}


/* Arabic word inside orange section */

.orange-arabic {
  font-family: "Noto Naskh Arabic", serif !important;

  font-size: clamp(70px, 8vw, 105px) !important;
}


@media (max-width: 850px) {

  .bridge-section {
    padding-top: 120px;
  }

  .bridge-intro {
    margin-bottom: 80px;
  }

  .orange-map-wrap {
    height: 68vh;
  }

  .orange-steps {
    width: calc(100% - 40px);

    margin-left: auto;
    margin-right: auto;
  }

  .orange-step p {
    font-size: 17px;
  }
}

/* -----------------------
   WORD TRANSFORMATIONS
------------------------ */

.transform-section {
  position: relative;
  padding-top: 180px;
  background: var(--bg);
}

.transform-intro {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto 130px;
}

.transform-intro h2 {
  margin: 0 0 36px;

  font-family: "Instrument Serif", serif;
  font-size: clamp(56px, 7vw, 94px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-weight: 400;
}

.transform-intro > p:last-child {
  width: min(620px, 100%);

  font-size: 20px;
  line-height: 1.65;

  color: var(--muted);
}


/* Scrollytelling wrapper */

.transform-story {
  position: relative;
}

.transform-sticky {
  position: sticky;
  top: 0;

  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}


/* Main word comparison */

.transform-example {
  width: min(900px, 86vw);

  display: grid;
  grid-template-columns: 1fr 180px 1fr;
  grid-template-rows: auto auto;
  align-items: center;

  column-gap: 35px;
}


/* Arabic */

.transform-arabic {
  grid-column: 1;
  grid-row: 1;

  text-align: right;

  font-family: "Noto Naskh Arabic", serif;
  font-size: clamp(90px, 12vw, 170px);
  line-height: 1;
}


/* Transliteration */

.transform-translit {
  grid-column: 1;
  grid-row: 2;

  margin-top: 18px;

  text-align: right;

  font-family: "Instrument Serif", serif;
  font-size: 30px;

  color: var(--muted);
}


/* Connector */

.transform-line {
  grid-column: 2;
  grid-row: 1 / span 2;

  width: 100%;
  height: 1px;

  background: var(--accent);
}


/* Turkish */

.transform-turkish {
  grid-column: 3;
  grid-row: 1;

  font-family: "Instrument Serif", serif;
  font-size: clamp(84px, 11vw, 155px);
  line-height: 1;
}


/* Numeric similarity score */

.transform-score {
  grid-column: 3;
  grid-row: 2;

  margin-top: 18px;

  font-family: "DM Sans", sans-serif;
  font-size: 9px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.18em;

  color: var(--accent);
}


/* -----------------------
   SMOOTH WORD SWAP
------------------------ */

/*
These four elements fade out together,
their text gets swapped in JS,
then they fade back in together.
*/

.transform-arabic,
.transform-translit,
.transform-turkish,
.transform-score {
  opacity: 1;
  transform: translateY(0);

  transition:
    opacity 0.32s ease,
    transform 0.32s ease;
}


/* Temporary state while changing words */

.transform-example.is-changing
.transform-arabic,

.transform-example.is-changing
.transform-translit,

.transform-example.is-changing
.transform-turkish,

.transform-example.is-changing
.transform-score {
  opacity: 0;
  transform: translateY(10px);
}


/* -----------------------
   NARRATIVE STEPS
------------------------ */

.transform-steps {
  position: relative;

  width: min(500px, calc(100% - 40px));

  margin-left: 7vw;

  padding-bottom: 80vh;
}

.transform-step {
  min-height: 90vh;

  display: flex;
  align-items: flex-start;

  padding-top: 13vh;
}

.transform-step p {
  max-width: 440px;

  margin: 0;

  padding: 22px 0 22px 20px;

  border-left: 2px solid var(--accent);

  font-size: 18px;
  line-height: 1.55;
}

.transform-step strong {
  font-family: "Instrument Serif", serif;
  font-size: 1.2em;
  font-weight: 400;
}


/* -----------------------
   MOBILE
------------------------ */

@media (max-width: 850px) {

  .transform-section {
    padding-top: 120px;
  }

  .transform-intro {
    margin-bottom: 80px;
  }

  .transform-example {
    grid-template-columns: 1fr;
    grid-template-rows:
      auto
      auto
      auto
      auto
      auto;

    text-align: center;
  }

  .transform-arabic,
  .transform-translit,
  .transform-turkish,
  .transform-score,
  .transform-line {
    grid-column: 1;
  }

  .transform-arabic {
    grid-row: 1;
    text-align: center;
  }

  .transform-translit {
    grid-row: 2;
    text-align: center;
  }

  .transform-line {
    grid-row: 3;

    width: 120px;
    margin: 34px auto;
  }

  .transform-turkish {
    grid-row: 4;
    text-align: center;
  }

  .transform-score {
    grid-row: 5;
    text-align: center;
  }

  .transform-steps {
    width: calc(100% - 40px);

    margin-left: auto;
    margin-right: auto;
  }
}

/* -----------------------
   SPANISH AL- STORY
------------------------ */

.article-section {
  position: relative;
  padding-top: 180px;
  background: var(--bg);
}

.article-intro {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto 130px;
}

.article-intro h2 {
  margin: 0 0 36px;

  font-family: "Instrument Serif", serif;
  font-size: clamp(56px, 7vw, 94px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-weight: 400;
}

.article-intro > p:last-child {
  width: min(620px, 100%);

  font-size: 20px;
  line-height: 1.65;
  color: var(--muted);
}


/* Sticky visual */

.article-story {
  position: relative;
}

.article-sticky {
  position: sticky;
  top: 0;

  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

.article-stage {
  width: min(1050px, 88vw);

  display: grid;
  grid-template-columns: 1fr 90px 1fr;
  grid-template-rows: auto auto;

  align-items: center;
  column-gap: 30px;
}


/* Arabic side */

.article-source {
  text-align: right;
}

.article-arabic {
  font-family: "Noto Naskh Arabic", serif;
  font-size: clamp(82px, 10vw, 145px);
  line-height: 1;
}

.article-translit {
  margin-top: 15px;

  font-family: "Instrument Serif", serif;
  font-size: 30px;

  color: var(--muted);
}


/* Arrow */

.article-arrow {
  font-family: "Instrument Serif", serif;
  font-size: 48px;

  text-align: center;

  color: var(--accent);
}


/* Spanish */

.article-result {
  font-family: "Instrument Serif", serif;
  font-size: clamp(80px, 10vw, 145px);
  line-height: 1;
}

.article-prefix {
  color: var(--accent);
}

.article-rest {
  color: var(--text);
}


/* Explanation */

.article-label {
  grid-column: 3;
  grid-row: 2;

  margin-top: 24px;

  max-width: 320px;

  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  line-height: 1.45;

  text-transform: uppercase;
  letter-spacing: 0.18em;

  color: var(--muted);
}


/* Fade transitions */

.article-arabic,
.article-translit,
.article-result,
.article-label {
  opacity: 1;
  transform: translateY(0);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.article-stage.is-changing
.article-arabic,

.article-stage.is-changing
.article-translit,

.article-stage.is-changing
.article-result,

.article-stage.is-changing
.article-label {
  opacity: 0;
  transform: translateY(10px);
}


/* Scrolly copy */

.article-steps {
  position: relative;

  width: min(500px, calc(100% - 40px));

  margin-left: 7vw;

  padding-bottom: 80vh;
}

.article-step {
  min-height: 90vh;

  display: flex;
  align-items: flex-start;

  padding-top: 13vh;
}

.article-step p {
  max-width: 440px;

  margin: 0;

  padding: 22px 0 22px 20px;

  border-left: 2px solid var(--accent);

  font-size: 18px;
  line-height: 1.55;
}

.article-step strong,
.article-step em {
  font-family: "Instrument Serif", serif;
  font-size: 1.2em;
  font-weight: 400;
  font-style: normal;
}


@media (max-width: 850px) {

  .article-stage {
    grid-template-columns: 1fr;
    grid-template-rows:
      auto
      auto
      auto
      auto;

    text-align: center;
  }

  .article-source,
  .article-result,
  .article-label,
  .article-arrow {
    grid-column: 1;
    text-align: center;
  }

  .article-source {
    grid-row: 1;
  }

  .article-arrow {
    grid-row: 2;

    margin: 25px 0;
  }

  .article-result {
    grid-row: 3;
  }

  .article-label {
    grid-row: 4;

    margin-left: auto;
    margin-right: auto;
  }

  .article-steps {
    width: calc(100% - 40px);

    margin-left: auto;
    margin-right: auto;
  }
}

/* -----------------------
   SIMILARITY RANKING
------------------------ */

.similarity-section {
  position: relative;
  padding-top: 180px;
  background: var(--bg);
}

.similarity-intro {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto 140px;
}

.similarity-intro h2 {
  margin: 0 0 36px;

  font-family: "Instrument Serif", serif;
  font-size: clamp(56px, 7vw, 94px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-weight: 400;
}

.similarity-intro > p:last-child {
  width: min(620px, 100%);

  font-size: 20px;
  line-height: 1.65;

  color: var(--muted);
}


/* Sticky chart */

.similarity-story {
  position: relative;
}

.similarity-sticky {
  position: sticky;
  top: 0;

  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

.similarity-chart-wrap {
  width: min(1050px, 90vw);
}

.similarity-heading {
  display: flex;
  justify-content: space-between;

  margin-bottom: 18px;

  font-size: 9px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.2em;

  color: var(--muted);
}

#similarity-chart {
  width: 100%;
  height: 660px;
  overflow: visible;
}


/* D3 elements */

.sim-row {
  transition: opacity 0.3s ease;
}

.sim-line {
  stroke: var(--line);
  stroke-width: 1.4px;
}

.sim-line.highlight {
  stroke: var(--accent);
  stroke-width: 2.4px;
}

.sim-arabic {
  font-family: "Noto Naskh Arabic", serif;
  font-size: 28px;

  fill: var(--text);
}

.sim-translit {
  font-family: "Instrument Serif", serif;
  font-size: 17px;

  fill: var(--muted);
}

.sim-turkish {
  font-family: "Instrument Serif", serif;
  font-size: 26px;

  fill: var(--text);
}

.sim-score {
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 600;

  fill: var(--accent);
}

.sim-axis line {
  stroke: var(--line);
}

.sim-axis path {
  display: none;
}

.sim-axis text {
  font-family: "DM Sans", sans-serif;
  font-size: 10px;

  fill: var(--muted);
}


/* Scroll copy */

.similarity-steps {
  position: relative;

  width: min(500px, calc(100% - 40px));

  margin-left: 7vw;

  padding-bottom: 80vh;
}

.similarity-step {
  min-height: 90vh;

  display: flex;
  align-items: flex-start;

  padding-top: 13vh;
}

.similarity-step p {
  max-width: 440px;

  margin: 0;

  padding: 22px 0 22px 20px;

  border-left: 2px solid var(--accent);

  font-size: 18px;
  line-height: 1.55;
}

.similarity-step strong {
  font-family: "Instrument Serif", serif;
  font-size: 1.2em;
  font-weight: 400;
}


@media (max-width: 850px) {

  .similarity-section {
    padding-top: 120px;
  }

  .similarity-chart-wrap {
    width: 94vw;
  }

  #similarity-chart {
    height: 580px;
  }

  .similarity-steps {
    width: calc(100% - 40px);

    margin-left: auto;
    margin-right: auto;
  }
}

/* -----------------------
   WORD UNIVERSE
------------------------ */

.word-universe-section {
  position: relative;

  padding:
    180px 24px
    220px;

  background: var(--bg);
}

.word-universe-intro {
  width: min(760px, 100%);
  margin: 0 auto 70px;
}

.word-universe-intro h2 {
  margin: 0 0 36px;

  font-family: "Instrument Serif", serif;
  font-size: clamp(56px, 7vw, 94px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-weight: 400;
}

.word-universe-intro > p:last-child {
  width: min(620px, 100%);

  font-size: 20px;
  line-height: 1.65;

  color: var(--muted);
}


/* Filters */

.word-universe-controls {
  width: min(1100px, 100%);
  margin: 0 auto 42px;

  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.word-filter {
  appearance: none;

  padding: 10px 16px;

  border:
    1px solid
    var(--line);

  border-radius: 999px;

  background: transparent;

  font-family:
    "DM Sans",
    sans-serif;

  font-size: 11px;
  font-weight: 600;

  letter-spacing: 0.04em;

  color: var(--muted);

  cursor: pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.word-filter:hover,
.word-filter.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}


/* Table-like universe */

.word-universe {
  width: min(1100px, 100%);
  margin: 0 auto;
}

.word-universe-header,
.word-row {
  display: grid;

  grid-template-columns:
    1fr 1fr 1fr;

  column-gap: 40px;
}

.word-universe-header {
  padding:
    0 18px
    14px;

  border-bottom:
    1px solid
    var(--accent);

  font-size: 9px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.22em;

  color: var(--muted);
}


/* Individual row */

.word-row {
  position: relative;

  min-height: 86px;

  padding: 18px;

  align-items: center;

  border-bottom:
    1px solid
    var(--line);

  cursor: pointer;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    background 0.3s ease;
}

.word-row:hover {
  background:
    rgba(255, 255, 255, 0.10);
}

.word-universe-list.has-hover
.word-row:not(.is-hovered) {
  opacity: 0.22;
}


/* Words */

.universe-arabic {
  font-family:
    "Noto Naskh Arabic",
    serif;

  font-size: 34px;
  line-height: 1;

  text-align: left;
}

.universe-turkish,
.universe-spanish {
  font-family:
    "Instrument Serif",
    serif;

  font-size: 29px;
  line-height: 1;
}

.word-missing {
  font-family:
    "DM Sans",
    sans-serif;

  font-size: 11px;

  color: var(--line);
}


/* Meaning label */

.universe-meaning {
  position: absolute;

  right: 18px;
  bottom: 8px;

  font-size: 8px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.15em;

  color: var(--muted);

  opacity: 0;

  transition:
    opacity 0.25s ease;
}

.word-row:hover
.universe-meaning {
  opacity: 1;
}


/* -----------------------
   DETAIL PANEL
------------------------ */

.word-detail {
  position: fixed;

  top: 0;
  right: 0;

  z-index: 20;

  width: min(430px, 92vw);
  height: 100vh;

  padding:
    80px 40px
    50px;

  background: #f1cfaa;

  border-left:
    1px solid
    var(--line);

  transform:
    translateX(105%);

  transition:
    transform 0.45s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  overflow-y: auto;
}

.word-detail.open {
  transform:
    translateX(0);
}

.word-detail-close {
  position: absolute;

  top: 24px;
  right: 28px;

  border: 0;
  background: none;

  font-family:
    "DM Sans",
    sans-serif;

  font-size: 28px;

  color: var(--text);

  cursor: pointer;
}

.word-detail-kicker {
  margin: 0 0 25px;

  font-size: 9px;
  font-weight: 600;

  letter-spacing: 0.22em;
  text-transform: uppercase;

  color: var(--accent);
}

.word-detail-arabic {
  margin-bottom: 15px;

  font-family:
    "Noto Naskh Arabic",
    serif;

  font-size: 82px;
  line-height: 1;

  text-align: left;
}

.word-detail h3 {
  margin:
    0 0 45px;

  font-family:
    "Instrument Serif",
    serif;

  font-size: 46px;
  line-height: 1;

  font-weight: 400;
}

.word-detail-grid {
  display: grid;
  gap: 28px;
}

.word-detail-grid > div {
  display: grid;
  gap: 5px;

  padding-bottom: 18px;

  border-bottom:
    1px solid
    var(--line);
}

.detail-label {
  font-size: 8px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.18em;

  color: var(--muted);
}

.word-detail-grid
div span:last-child {
  font-family:
    "Instrument Serif",
    serif;

  font-size: 22px;
}


/* -----------------------
   MOBILE
------------------------ */

@media (max-width: 700px) {

  .word-universe-section {
    padding-top: 120px;
  }

  .word-universe-header,
  .word-row {
    grid-template-columns:
      1fr 1fr 1fr;

    column-gap: 14px;
  }

  .universe-arabic {
    font-size: 25px;
  }

  .universe-turkish,
  .universe-spanish {
    font-size: 21px;
  }

  .word-row {
    padding:
      16px 8px;
  }

  .word-universe-header {
    padding-left: 8px;
    padding-right: 8px;
  }

}

/* -----------------------
   WORD SEARCH
------------------------ */

.word-search-wrap {
  width: min(1100px, 100%);
  margin: 0 auto 24px;
}

.word-search {
  width: 100%;

  padding: 18px 0;

  border: 0;
  border-bottom: 1px solid var(--accent);

  background: transparent;

  font-family: "Instrument Serif", serif;
  font-size: clamp(24px, 3vw, 38px);

  color: var(--text);

  outline: none;

  border-radius: 0;
}

.word-search::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.word-search:focus {
  border-bottom-width: 2px;
}

/* -----------------------
   WORD NETWORK
------------------------ */

.network-section {
  padding: 180px 24px 200px;
  background: var(--bg);
}

.network-intro {
  width: min(760px, 100%);
  margin: 0 auto 90px;
}

.network-intro h2 {
  margin: 0 0 36px;

  font-family: "Instrument Serif", serif;
  font-size: clamp(56px, 7vw, 94px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-weight: 400;
}

.network-intro > p:last-child {
  width: min(620px, 100%);

  font-size: 20px;
  line-height: 1.65;
  color: var(--muted);
}

.network-wrap {
  width: min(1200px, 100%);
  height: 760px;

  margin: 0 auto;

  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

#word-network {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.network-link {
  stroke: var(--line);
  stroke-width: 1.2px;
  opacity: 0.45;

  transition:
    opacity 0.25s ease,
    stroke-width 0.25s ease;
}

.network-language {
  fill: var(--accent);
  stroke: var(--bg);
  stroke-width: 3px;
}

.network-word {
  fill: var(--text);
  stroke: var(--bg);
  stroke-width: 2px;
}

.network-label {
  pointer-events: none;

  font-family: "DM Sans", sans-serif;
  font-size: 10px;

  fill: var(--text);

  opacity: 0;

  transition: opacity 0.2s ease;
}

.network-node:hover .network-label {
  opacity: 1;
}

.network-label.language {
  opacity: 1;

  font-size: 13px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.network-node {
  cursor: pointer;

  transition: opacity 0.25s ease;
}

.network-node:hover .network-label:not(.language) {
  opacity: 1;
  font-size: 15px;
  font-weight: 600;
}

.network-faded {
  opacity: 0.07;
}

.network-link.network-active {
  opacity: 1;
  stroke-width: 2.3px;
  stroke: var(--accent);
}

.network-note {
  margin: 26px auto 0;

  width: min(1200px, 100%);

  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: var(--muted);
}

@media (max-width: 750px) {

  .network-section {
    padding-top: 120px;
  }

  .network-wrap {
    height: 600px;
  }

  .network-label {
    font-size: 8px;
  }

}

/* -----------------------
   METHODOLOGY
------------------------ */

.method-section {
  padding: 180px 24px;
  border-top: 1px solid var(--line);
}

.method-inner {
  width: min(1000px, 100%);
  margin: 0 auto;
}

.method-inner > h2 {
  max-width: 760px;
  margin: 0 0 80px;

  font-family: "Instrument Serif", serif;
  font-size: clamp(48px, 6vw, 78px);
  line-height: 0.98;
  font-weight: 400;
}

.method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 55px;
}

.method-grid h3 {
  margin: 0 0 16px;

  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.method-grid p,
.method-sources p {
  margin: 0;

  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
}

.method-sources {
  margin-top: 80px;
  padding-top: 30px;

  border-top: 1px solid var(--line);
}


/* -----------------------
   CLOSING
------------------------ */

.closing-section {
  min-height: 70vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 80px 24px;
}

.closing-section p {
  width: min(800px, 100%);
  margin: 0;

  text-align: center;

  font-family: "Instrument Serif", serif;
  font-size: clamp(54px, 8vw, 110px);
  line-height: 0.95;
}


/* Mobile */

@media (max-width: 750px) {

  .method-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .method-section {
    padding-top: 120px;
    padding-bottom: 120px;
  }

}
/* -----------------------
   NETWORK TOOLTIP
------------------------ */

.network-tooltip {
  width: min(700px, 100%);
  min-height: 110px;

  margin: 28px auto 0;

  text-align: center;

  opacity: 0;
  transform: translateY(8px);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.network-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.network-tooltip-meaning {
  font-family: "Instrument Serif", serif;
  font-size: 36px;
  line-height: 1;

  color: var(--text);
}

.network-tooltip-forms {
  margin-top: 12px;

  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 9px;

  font-family: "Instrument Serif", serif;
  font-size: 24px;

  color: var(--accent);
}

.network-tooltip-arabic {
  font-family: "Noto Naskh Arabic", serif;
  font-size: 31px;
  line-height: 1;
}

.network-tooltip-separator {
  color: var(--muted);
}

.network-tooltip-route {
  margin-top: 12px;

  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.14em;

  color: var(--muted);
}

.method-sources,
.method-tools {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);

  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  column-gap: 42px;
  align-items: start;
}

.method-sources .section-kicker,
.method-tools .section-kicker {
  margin: 0;
}

.method-sources > p:not(.section-kicker),
.method-tools > p:not(.section-kicker) {
  grid-column: 2;
  max-width: 760px;
  margin: 0 0 14px;
  line-height: 1.65;
}

.method-tools {
  margin-top: 34px;
}

@media (max-width: 760px) {
  .method-sources,
  .method-tools {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .method-sources > p:not(.section-kicker),
  .method-tools > p:not(.section-kicker) {
    grid-column: 1;
  }
}