/* Câu chuyện (Figma "Story", 1440 px). Positions are the design's, measured from the centre of the page. */

.tl-story {
  --c: calc(50% - 720px);
  overflow: hidden;
}

.tl-story-hero,
.tl-story-timeline,
.tl-story-origin,
.tl-story-experience {
  position: relative;
}

.tl-story-origin__photo {
  position: absolute;
  left: var(--c);
  width: 1440px;
  max-width: none;
  height: auto;
}

.tl-story-title {
  color: #ce3d27;
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  text-transform: uppercase;
}

.tl-story-subtitle {
  color: #2b1c0e;
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
}

.tl-story-divider {
  display: block;
  width: 350px;
  height: 18px;
  margin-inline: auto;
  background: url('../images/line-divider.svg') 0 0 / 350px 18px no-repeat;
}

.tl-story-divider--left {
  width: 184px;
  margin: 20px 0 18px;
  background-position: -166px 0;
}

/* Hero */
.tl-story-hero {
  height: 900px;
  background:
    linear-gradient(0deg, rgba(203, 67, 48, 0.45) 29.71%, rgba(0, 0, 0, 0.45) 108.79%),
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    var(--tl-story-hero) center / cover no-repeat;
}

.tl-story-hero__copy {
  position: absolute;
  top: 258px;
  left: calc(var(--c) + 128.5px);
  z-index: 1;
  width: 540px;
  color: var(--tl-cream);
}

.tl-story-hero__title {
  font-family: var(--tl-cintra);
  letter-spacing: 0;
  font-size: 52px;
  line-height: 55px;
  text-transform: uppercase;
}

.tl-story-hero__text {
  width: 314px;
  margin-top: 16px;
}

/* The roof line goes on past the 1440 px design as its mirror image, so wide screens keep it unbroken. */
.tl-story-hero__roof {
  position: absolute;
  top: 561px;
  right: 0;
  left: 0;
  height: 339.5px;
  background: var(--tl-roof) center top / 1440px 100% no-repeat;
}

.tl-story-hero__roof::before,
.tl-story-hero__roof::after {
  content: '';
  position: absolute;
  top: 0;
  width: 1440px;
  height: 100%;
  background: var(--tl-roof) 0 0 / 100% 100% no-repeat;
  transform: scaleX(-1);
}

.tl-story-hero__roof::before { right: calc(50% + 720px); }
.tl-story-hero__roof::after { left: calc(50% + 720px); }

/* Timeline */
.tl-story-timeline {
  z-index: 1;
  height: 605px;
}

.tl-story-timeline::before {
  content: '';
  position: absolute;
  inset: 427.8px 0 0;
  background: #cb4330 url('../images/story/band.webp') center top / 1440px auto repeat-x;
}

/* Skyline: the faded silhouettes run behind as a slow marquee, evenly spaced; the landmarks stay in front, on their milestones. */
.tl-skyline-back {
  position: absolute;
  right: 0;
  bottom: calc(100% - 427.8px);
  left: 0;
  z-index: 1;
  overflow: hidden;
}

.tl-skyline-back__track {
  display: flex;
  align-items: flex-end;
  gap: 100px;
  width: max-content;
  padding-right: 100px;
  animation: tl-skyline-run 90s linear infinite reverse;
  will-change: transform;
}

.tl-skyline-back__track img {
  flex: none;
  max-width: none;
  height: auto;
}

@keyframes tl-skyline-run {
  to { transform: translateX(-33.3333%); }
}

.tl-story-skyline {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.tl-skyline {
  position: absolute;
  max-width: none;
}

.tl-skyline--front-1 { top: 309px; left: calc(var(--c) + 151px); width: 120px; height: 120px; }
.tl-skyline--front-2 { top: 295px; left: calc(var(--c) + 373px); width: 151px; height: 134px; }
.tl-skyline--front-3 { top: 347px; left: calc(var(--c) + 595px); width: 116px; height: 82px; }
.tl-skyline--front-4 { top: 254px; left: calc(var(--c) + 853px); width: 204px; height: 175px; }
.tl-skyline--front-5 { top: 261px; left: calc(var(--c) + 1125px); width: 185px; height: 168px; }

@media (prefers-reduced-motion: reduce) {
  .tl-skyline-back__track {
    animation: none;
  }
}

.tl-milestone__marker {
  position: absolute;
  z-index: 2;
  width: 12.6px;
  height: 11.5px;
  background: url('../images/story/skyline-marker.svg') 0 0 / 100% 100% no-repeat;
}

.tl-milestone__marker::after {
  content: '';
  position: absolute;
  top: 5.5px;
  left: 6.2px;
  width: 0.5px;
  height: calc(428.3px - var(--y));
  background: #cb4330;
}

.tl-milestone--1 .tl-milestone__marker { --y: 225px; top: 225px; left: calc(var(--c) + 130px); }
.tl-milestone--2 .tl-milestone__marker { --y: 205px; top: 205px; left: calc(var(--c) + 352px); }
.tl-milestone--3 .tl-milestone__marker { --y: 172.8px; top: 172.8px; left: calc(var(--c) + 574px); }
.tl-milestone--4 .tl-milestone__marker { --y: 140.1px; top: 140.1px; left: calc(var(--c) + 832px); }
.tl-milestone--5 .tl-milestone__marker { --y: 98.6px; top: 98.6px; left: calc(var(--c) + 1104px); }

.tl-story-timeline__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tl-milestone__head,
.tl-milestone__text {
  position: absolute;
  z-index: 2;
}

/* One rhythm for every line of a milestone: 4 px between lines; the big figure sits on a tight line box so it keeps the
   same 4 px from the lines above and below it. Tops are set so the titles / figures keep their Figma baselines. */
.tl-milestone__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tl-milestone__label {
  color: #474140;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
}

.tl-milestone__title {
  color: #c94330;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
}

.tl-milestone__number {
  color: #c94330;
  font-size: 62px;
  font-weight: 600;
  line-height: 0.85;
}

.tl-milestone__date {
  color: #474140;
  font-size: 14px;
  line-height: 1.3;
}

.tl-milestone__text {
  top: 449px;
  color: #fef4e3;
  hyphens: auto;
}

.tl-milestone--1 .tl-milestone__head { top: 218.9px; left: calc(var(--c) + 151px); }
.tl-milestone--2 .tl-milestone__head { top: 197.9px; left: calc(var(--c) + 373px); }
.tl-milestone--3 .tl-milestone__head { top: 164.5px; left: calc(var(--c) + 595px); }
.tl-milestone--4 .tl-milestone__head { top: 135.9px; left: calc(var(--c) + 853px); }
.tl-milestone--5 .tl-milestone__head { top: 84.4px; left: calc(var(--c) + 1126px); width: 110px; }

.tl-milestone--1 .tl-milestone__text { left: calc(var(--c) + 136px); width: 177px; }
.tl-milestone--2 .tl-milestone__text { left: calc(var(--c) + 358px); width: 176px; }
.tl-milestone--3 .tl-milestone__text { left: calc(var(--c) + 580px); width: 177px; }
.tl-milestone--4 .tl-milestone__text { left: calc(var(--c) + 838px); width: 206px; text-align: justify; }
.tl-milestone--5 .tl-milestone__text { left: calc(var(--c) + 1110px); width: 175px; text-align: justify; }

/* Giữ trọn vị nguyên bản */
.tl-story-origin {
  height: 1433px;
}

.tl-story-origin__brush {
  position: absolute;
  top: 52px;
  left: calc(var(--c) + 998px);
  width: 645px;
  height: auto;
}

.tl-story-origin__copy {
  position: absolute;
  top: 83px;
  left: calc(var(--c) + 163px);
  width: 647px;
}

.tl-story-origin .tl-story-title {
  font-size: 60px;
  line-height: 63px;
}

.tl-story-origin .tl-story-subtitle {
  margin-top: 12px;
  font-size: 42px;
  line-height: 44px;
}

.tl-story-origin__text {
  color: #2b1c0e;
  font-size: 20px;
  line-height: 27px;
  text-align: justify;
}

.tl-story-origin__text + .tl-story-origin__text {
  margin-top: 27px;
}

.tl-story-origin__photo {
  top: 406px;
}

/* Beyond the 1440 px photo the dark table backdrop carries on from the photo's own edges. */
.tl-story-origin::before,
.tl-story-origin::after {
  content: '';
  position: absolute;
  top: 406px;
  height: 1027px;
  background: var(--tl-edge-l) 0 0 / 2px 100% repeat-x;
}

.tl-story-origin::before { left: 0; right: calc(50% + 719px); }
.tl-story-origin::after { left: calc(50% + 719px); right: 0; background-image: var(--tl-edge-r); }

.tl-story-origin__chars {
  position: absolute;
  z-index: 1;
  height: auto;
}

.tl-story-origin__chars--left { top: 807px; left: calc(var(--c) + 78px); width: 53px; }
.tl-story-origin__chars--right { top: 1122px; left: calc(var(--c) + 1310px); width: 55px; }

/* Trọn trải nghiệm */
.tl-story-experience {
  height: 1605px;
  overflow: hidden;
  background:
    url('../images/story/temple.svg') center -118px / 1440px 1128px no-repeat,
    linear-gradient(#f1e4d1, #f1e4d1) 0 370px / 100% 1235px no-repeat;
}

.tl-story-experience__swirl {
  position: absolute;
  background: center / contain no-repeat;
}

.tl-story-experience__swirl--left {
  top: -371px;
  left: min(-75px, calc(var(--c) - 75px));
  width: 257px;
  height: 946px;
  background-image: url('../images/story/swirl-left.svg');
}

.tl-story-experience__swirl--right {
  top: -336px;
  right: min(-2px, calc(50% - 722px));
  width: 189px;
  height: 609px;
  background-image: url('../images/story/swirl-right.svg');
}

.tl-story-closing {
  position: absolute;
  top: 51.6px;
  left: calc(50% - 225px);
  width: 450px;
  text-align: center;
}

.tl-story-closing p {
  margin-top: 25.4px;
  color: #2b1b00;
  font-size: 18px;
  line-height: 24px;
}

.tl-story-experience__head {
  position: absolute;
  top: 403.5px;
  right: 0;
  left: 0;
  text-align: center;
}

.tl-story-experience .tl-story-title {
  color: #cf3a05;
  font-size: 70px;
  line-height: 73px;
}

.tl-story-experience .tl-story-subtitle {
  margin-top: 14.5px;
  color: #2b1b00;
  font-size: 48px;
  line-height: 50px;
}

.tl-story-photo {
  --r: 27.35px;
  position: absolute;
  object-fit: cover;
  -webkit-mask:
    radial-gradient(circle at 0 0, #0000 var(--r), #000 calc(var(--r) + 0.5px)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, #0000 var(--r), #000 calc(var(--r) + 0.5px)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, #0000 var(--r), #000 calc(var(--r) + 0.5px)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 var(--r), #000 calc(var(--r) + 0.5px)) 100% 100% / 51% 51% no-repeat;
  mask:
    radial-gradient(circle at 0 0, #0000 var(--r), #000 calc(var(--r) + 0.5px)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, #0000 var(--r), #000 calc(var(--r) + 0.5px)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, #0000 var(--r), #000 calc(var(--r) + 0.5px)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 var(--r), #000 calc(var(--r) + 0.5px)) 100% 100% / 51% 51% no-repeat;
}

.tl-story-photo--1 { --r: 32px; top: 638.5px; left: calc(var(--c) + 203px); width: 406.1px; height: 613px; }
.tl-story-photo--2 { top: 709.7px; left: calc(var(--c) + 643px); width: 524px; height: 348px; }
.tl-story-photo--3 { top: 1099.9px; left: calc(var(--c) + 730.4px); width: 524px; height: 348px; }

.tl-story-note {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  padding: 22px 44px 0 48px;
  background: #ccbfae linear-gradient(#ce3d27, #ce3d27) 0 0 / 32px var(--bar) no-repeat;
}

.tl-story-note h3 {
  color: #ce3d27;
  font-size: 20px;
  font-weight: 600;
  line-height: 27px;
  text-transform: uppercase;
}

.tl-story-note p {
  margin-top: 11px;
  color: #2b1c0e;
  font-size: 18px;
  line-height: 24px;
}

.tl-story-note--1 { --bar: 106px; top: 1078px; left: calc(var(--c) + 130px); width: 312px; height: 214px; padding-right: 14px; }
.tl-story-note--1 h3 { font-size: 21.1px; line-height: 29px; }
.tl-story-note--2 { --bar: 106px; top: 590.3px; left: calc(var(--c) + 906px); width: 403px; height: 187px; }
.tl-story-note--3 { --bar: 93.8px; top: 1316px; left: calc(var(--c) + 511px); width: 408px; height: 210.6px; padding-right: 24px; }

.tl-story .tl-cta {
  margin-top: 0;
}

/* Wrappers used only under 1200 px (timeline scroller, experience rail): no box on desktop. */
.tl-story-timeline__scroller,
.tl-story-timeline__frame,
.tl-story-spaces,
.tl-story-space {
  display: contents;
}

.tl-story-timeline__progress {
  display: none;
}

.tl-story-note h3 span {
  display: block;
}

/* ------------------------------------------------------------------ Tablets and phones */
@media (max-width: 1199px) {
  .tl-story {
    --tl-zoom: 0.85;
  }

  .tl-story-hero {
    height: 760px;
  }

  .tl-story-hero__copy {
    top: 200px;
    left: var(--tl-gutter);
    width: min(540px, calc(100% - 2 * var(--tl-gutter)));
  }

  .tl-story-hero__title {
    font-size: 44px;
    line-height: 1.05;
  }

  .tl-story-hero__roof {
    top: auto;
    bottom: 0;
    height: 240px;
    background-size: 1018px 100%;
  }

  .tl-story-hero__roof::before,
  .tl-story-hero__roof::after {
    width: 1018px;
  }

  .tl-story-hero__roof::before { right: calc(50% + 509px); }
  .tl-story-hero__roof::after { left: calc(50% + 509px); }

  /* Timeline: the 1440 design, smaller, scrolled sideways; the bar under it shows where the visitor is. */
  .tl-story-timeline {
    height: auto;
  }

  .tl-story-timeline::before {
    display: none;
  }

  .tl-story-timeline__scroller {
    display: block;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .tl-story-timeline__scroller::-webkit-scrollbar {
    display: none;
  }

  .tl-story-timeline__frame {
    position: relative;
    display: block;
    width: 1440px;
    height: 605px;
    margin-left: -97px;
    zoom: var(--tl-zoom);
  }

  .tl-story-timeline__frame::before {
    content: '';
    position: absolute;
    inset: 427.8px 0 0;
    background: #cb4330 url('../images/story/band.webp') center top / 1440px auto repeat-x;
  }

  .tl-story-timeline__progress {
    position: absolute;
    right: var(--tl-gutter);
    bottom: 26px;
    left: var(--tl-gutter);
    z-index: 3;
    display: block;
    height: 10px;
    overflow: hidden;
    border-radius: 10px;
    background: #fff4e3;
  }

  .tl-story-timeline__progress span {
    display: block;
    width: var(--tl-progress-size, 30%);
    height: 100%;
    border-radius: inherit;
    background: #cb4330;
    box-shadow: inset 0 0 0 2px #fff4e3;
    transform: translateX(var(--tl-progress-at, 0%));
  }

  .tl-milestone__text {
    top: 440px;
  }

  /* Giữ trọn vị nguyên bản: copy, then the photo across the screen. */
  .tl-story-origin {
    height: auto;
    padding-top: 64px;
  }

  .tl-story-origin::before,
  .tl-story-origin::after {
    display: none;
  }

  .tl-story-origin__brush {
    top: 0;
    right: -140px;
    left: auto;
    width: 420px;
    opacity: 0.6;
  }

  .tl-story-origin__copy {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    max-width: 680px;
    padding-inline: var(--tl-gutter);
  }

  .tl-story-origin .tl-story-title {
    font-size: 48px;
    line-height: 1.1;
  }

  .tl-story-origin .tl-story-subtitle {
    margin-top: 8px;
    font-size: 32px;
    line-height: 1.15;
  }

  .tl-story-origin__text {
    font-size: 16px;
    line-height: 22px;
  }

  .tl-story-origin__text + .tl-story-origin__text {
    margin-top: 20px;
  }

  /* The whole photo at its own ratio, as on desktop (a fixed height + cover cut the heads off). Its top 167/2880 of the
     width is transparent, so it is pulled up by that much: the gap above the heads stays the margin. */
  .tl-story-origin__photo {
    position: relative;
    top: auto;
    left: auto;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1440 / 1027;
    margin-top: calc(40px - 100% * 167 / 2880);
  }

  /* Placed on the photo as on the 1440 design (left char 78px in, 414px up; right char 75px in, 83px up). */
  .tl-story-origin__chars {
    top: auto;
  }

  .tl-story-origin__chars--left { bottom: calc(100vw * 414 / 1440); left: calc(100% * 78 / 1440); width: 34px; }
  .tl-story-origin__chars--right { bottom: calc(100vw * 83 / 1440); left: auto; right: calc(100% * 75 / 1440); width: 34px; }

  /* Trọn trải nghiệm */
  /* The cream band starts a fixed distance above the title (head::before), not at a fixed offset from the section top:
     the closing text above wraps to a different height on each width. The temple drawing sits on top of the band. */
  .tl-story-experience {
    height: auto;
    padding: 56px 0 56px;
    isolation: isolate;
    background: none;
  }

  .tl-story-experience::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('../images/story/temple.svg') center 150px / 1000px auto no-repeat;
    pointer-events: none;
  }

  .tl-story-experience__head::before {
    content: '';
    position: absolute;
    z-index: -2;
    top: -40px;
    right: 0;
    left: 0;
    height: 10000px;
    background: #f1e4d1;
    pointer-events: none;
  }

  .tl-story-experience__swirl {
    display: none;
  }

  .tl-story-closing,
  .tl-story-experience__head {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    padding-inline: var(--tl-gutter);
  }

  .tl-story-closing p {
    max-width: 560px;
    margin: 20px auto 0;
    font-size: 16px;
    line-height: 22px;
  }

  .tl-story-experience__head {
    margin-top: 96px;
  }

  .tl-story-experience .tl-story-title {
    font-size: 48px;
    line-height: 1.1;
  }

  .tl-story-experience .tl-story-subtitle {
    margin-top: 8px;
    font-size: 32px;
    line-height: 1.15;
  }

  .tl-story-spaces {
    display: flex;
    gap: 16px;
    margin-top: 40px;
    padding-inline: var(--tl-gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--tl-gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .tl-story-spaces::-webkit-scrollbar {
    display: none;
  }

  .tl-story-space {
    display: flex;
    flex: 0 0 min(420px, 74%);
    flex-direction: column;
    scroll-snap-align: start;
  }

  .tl-story-photo,
  .tl-story-photo--1 {
    --r: 16px;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 260 / 175;
  }

  .tl-story-note,
  .tl-story-note--1,
  .tl-story-note--2,
  .tl-story-note--3 {
    position: relative;
    top: auto;
    left: auto;
    flex: 1;
    width: auto;
    height: auto;
    margin-top: -1px;
    padding: 14px 16px 16px 22px;
    border-radius: 0 0 16px 16px;
    background: #ccbfae linear-gradient(#ce3d27, #ce3d27) 0 14px / 6px 22px no-repeat;
  }

  .tl-story-note h3,
  .tl-story-note--1 h3 {
    font-size: 16px;
    line-height: 22px;
  }

  .tl-story-note h3 span {
    display: inline;
  }

  .tl-story-note h3 span + span::before {
    content: ' ';
  }

  .tl-story-note p {
    margin-top: 6px;
    font-size: 14px;
    line-height: 19px;
  }
}

@media (max-width: 767px) {
  .tl-story {
    --tl-zoom: 0.75;
  }

  .tl-story-hero {
    height: 620px;
  }

  .tl-story-hero__copy {
    top: 216px;
    width: calc(100% - 2 * var(--tl-gutter));
  }

  .tl-story-hero__title {
    font-size: 32px;
    line-height: 33px;
  }

  .tl-story-hero__text {
    width: auto;
    margin-top: 20px;
    font-size: 15px;
    line-height: 19px;
    text-align: justify;
  }

  .tl-story-hero__roof {
    height: 160px;
    background-size: 680px 100%;
  }

  .tl-story-hero__roof::before,
  .tl-story-hero__roof::after {
    width: 680px;
  }

  .tl-story-hero__roof::before { right: calc(50% + 340px); }
  .tl-story-hero__roof::after { left: calc(50% + 340px); }

  .tl-story-timeline__progress {
    bottom: 24px;
    left: 25px;
    right: 15px;
  }

  .tl-story-origin {
    padding-top: 54px;
  }

  .tl-story-origin__brush {
    top: 20px;
    right: -150px;
    width: 300px;
  }

  .tl-story-origin .tl-story-title {
    font-size: 32px;
  }

  .tl-story-origin .tl-story-subtitle {
    margin-top: 4px;
    font-size: 24px;
  }

  .tl-story-divider--left {
    margin: 22px 0 22px;
  }

  .tl-story-origin__text {
    font-size: 15px;
    line-height: 19px;
  }

  .tl-story-origin__text + .tl-story-origin__text {
    margin-top: 19px;
  }

  .tl-story-origin__photo {
    margin-top: calc(20px - 100% * 167 / 2880);
  }

  .tl-story-origin__chars--left,
  .tl-story-origin__chars--right { width: 24px; }

  .tl-story-experience {
    padding: 56px 0 48px;
  }

  /* No temple drawing on phones. */
  .tl-story-experience::before {
    display: none;
  }

  .tl-story-experience__head::before {
    top: -32px;
  }

  .tl-story-divider {
    width: 184px;
    background-position: -83px 0;
  }

  .tl-story-closing p {
    margin-top: 18px;
    font-size: 15px;
    line-height: 19px;
  }

  .tl-story-experience__head {
    margin-top: 96px;
  }

  .tl-story-experience .tl-story-title {
    font-size: 32px;
  }

  .tl-story-experience .tl-story-subtitle {
    margin-top: 4px;
    font-size: 24px;
  }

  .tl-story-spaces {
    margin-top: 24px;
  }

  .tl-story-space {
    flex-basis: 260px;
  }

  .tl-story-note,
  .tl-story-note--1,
  .tl-story-note--2,
  .tl-story-note--3 {
    padding: 12px 12px 14px 16px;
    background-position: 0 12px;
  }

  .tl-story-note h3,
  .tl-story-note--1 h3 {
    font-size: 15px;
    line-height: 19px;
  }

  .tl-story-note p {
    margin-top: 4px;
    font-size: 12px;
    line-height: 16px;
  }
}