/* =========================================================
   MARKETING PAGE
   HERO
   ========================================================= */


.marketing-hero {
  position: relative;

  width: 100%;
  height: 760px;

  overflow: hidden;

  background: #eee8dd;
  border-bottom: 1px solid #111;
}


/* =========================================================
   HERO IMAGE
   ========================================================= */

.marketing-hero-media {
  position: absolute;
  inset: 0;

  display: block;
}


.marketing-hero-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;
}


/* =========================================================
   HERO COPY
   ========================================================= */

.marketing-hero-copy {
  position: absolute;
  z-index: 2;

  left: 7.5%;
  top: 30%;

  width: min(640px, 40vw);

  color: #111;
}


/* LABEL */

.marketing-hero-label {
  margin: 0 0 25px;

  font-family:
    IBMThai,
    sans-serif;

  font-size: 14px;
  font-weight: 600;
  line-height: 1;

  letter-spacing: 0.01em;
}


/* H1 */

.marketing-hero h1 {
  margin: 0;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: clamp(58px, 4.7vw, 76px);
  font-weight: 500;
  line-height: 0.95;

  letter-spacing: -0.02em;
}


/* INTRO */

.marketing-hero-intro {
  max-width: 560px;

  margin: 27px 0 0;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 22px;
  font-weight: 400;
  line-height: 1.28;
}


/* TOPICS */

.marketing-hero-topics {
  margin: 32px 0 0;

  font-family:
    IBMThai,
    sans-serif;

  font-size: 12px;
  font-weight: 600;
  line-height: 1;

  letter-spacing: 0.055em;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

  .marketing-hero {
    height: 820px;
    min-height: 0;
  }


  .marketing-hero-image {
    object-position: center center;
  }


  .marketing-hero-copy {
    left: 7%;
    right: 7%;
    top: 13.5%;

    width: auto;
  }


  .marketing-hero-label {
    margin-bottom: 18px;

    font-size: 13px;
  }


  .marketing-hero h1 {
    font-size: clamp(46px, 13vw, 54px);
    line-height: 0.96;
  }


  .marketing-hero-intro {
    max-width: 330px;

    margin-top: 20px;

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


  .marketing-hero-desktop-break {
    display: none;
  }


  .marketing-hero-topics {
    max-width: 310px;

    margin-top: 24px;

    font-size: 11px;
    line-height: 1.45;

    letter-spacing: 0.035em;
  }

}


/* =========================================================
   MARKETING — SHARED SECTION SYSTEM
   ========================================================= */

.marketing-section-grid {
  width: 100%;
  max-width: 1420px;

  margin: 0 auto;

  display: grid;
  grid-template-columns:
    190px minmax(0, 1fr);

  gap: 64px;

  align-items: start;
}


.marketing-section-label {
  display: flex;
  align-items: center;

  gap: 10px;

  padding-top: 7px;

  color: #111;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 14px;
  font-weight: 500;
  line-height: 1;

  white-space: nowrap;
}


.marketing-section-label-light {
  color: #f5f4ef;
}


/* =========================================================
   SECTION 01 — FEATURED STORY
   ========================================================= */

.marketing-featured {
  padding: 110px 6% 120px;

  background: #fefefe;
  color: #111;
}


.marketing-featured-content {
  min-width: 0;
}


.marketing-featured-story {
  display: grid;
  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(340px, 0.78fr);

  gap: 58px;

  align-items: stretch;
}


/* FEATURED VISUAL */

.marketing-featured-visual {
  position: relative;

  min-height: 560px;

  overflow: hidden;

  display: block;

  padding: 34px;

  background: #171717;
  color: #fff;

  text-decoration: none;
}


.marketing-visual-kicker {
  position: relative;
  z-index: 2;

  font-family:
    IBMThai,
    sans-serif;

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

  letter-spacing: 0.05em;
}


.marketing-visual-word {
  position: absolute;

  left: -1.5%;
  bottom: -8%;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: clamp(180px, 19vw, 340px);
  font-weight: 600;
  line-height: 0.72;

  letter-spacing: -0.075em;

  color: rgba(255, 255, 255, 0.09);

  user-select: none;

  transition:
    transform 420ms cubic-bezier(.2,.75,.25,1),
    color 420ms ease;
}


.marketing-visual-arrow {
  position: absolute;

  right: 30px;
  top: 27px;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 34px;

  transition:
    transform 180ms ease;
}


/* FEATURED COPY */

.marketing-featured-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  justify-content: center;

  padding:
    34px 0
    30px;
}


.marketing-article-category {
  margin: 0 0 24px;

  color: #6a6762;

  font-family:
    IBMThai,
    sans-serif;

  font-size: 13px;
  font-weight: 600;
  line-height: 1;

  letter-spacing: 0.04em;
}


.marketing-featured-copy h2 {
  margin: 0;
}


.marketing-featured-copy h2 a {
  color: #111;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 34px;
  font-weight: 500;
  line-height: 1.08;

  text-decoration: none;
}


.marketing-featured-description {
  margin: 28px 0 0;

  max-width: 480px;

  color: #4e4b47;

  font-size: 16px;
  line-height: 1.65;
}


.marketing-read-link {
  width: fit-content;

  margin-top: 38px;

  display: inline-flex;
  align-items: center;

  gap: 9px;

  color: #111;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 16px;
  font-weight: 500;

  text-decoration: none;

  border-bottom: 1px solid #111;

  transition:
    transform 160ms ease;
}


/* =========================================================
   SECTION 02 — TOPICS
   ========================================================= */

.marketing-topics {
  padding: 92px 6% 50px;

  background: #dbdbdb;
  color: #111;
}


.marketing-topics-content {
  min-width: 0;
}


.marketing-topics-content h2 {
  margin: 0 0 40px;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 32px;
  font-weight: 500;
  line-height: 1.08;
}


.marketing-topic-filter {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
}


.marketing-topic-button {
  appearance: none;

  margin: 0;
  padding: 11px 17px;

  border: 1px solid #111;
  border-radius: 999px;

  background: transparent;
  color: #111;

  font-family:
    IBMThai,
    sans-serif;

  font-size: 12px;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;

  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}


.marketing-topic-button.is-active {
  background: var(--yellow);
  color: #111;
}


/* =========================================================
   SECTION 03 — LATEST ARTICLES
   ========================================================= */

.marketing-latest {
  padding: 68px 6% 120px;

  background: #dbdbdb;
  color: #111;
}


.marketing-latest-content {
  min-width: 0;

  padding-top: 4px;
}


.marketing-latest-content > h2 {
  margin: 0 0 42px;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 32px;
  font-weight: 500;
  line-height: 1.08;
}


/* MAGAZINE GRID */

.marketing-article-grid {
  display: grid;

  grid-template-columns:
    repeat(12, minmax(0, 1fr));

  column-gap: 24px;
  row-gap: 64px;
}


.marketing-article-card {
  min-width: 0;

  transition:
    opacity 200ms ease,
    transform 200ms ease;
}


.marketing-article-card[hidden] {
  display: none;
}


.marketing-article-card-wide {
  grid-column: span 7;
}


.marketing-article-card-narrow {
  grid-column: span 5;
}


/* ARTICLE VISUAL */

.marketing-card-visual {
  position: relative;

  width: 100%;
  min-height: 350px;

  overflow: hidden;

  display: block;

  padding: 27px;

  color: #111;

  text-decoration: none;
}


.marketing-card-visual-light {
  background: #f4f0ea;
}


.marketing-card-visual-dark {
  background: #171717;
  color: #f5f4ef;
}


.marketing-card-visual-warm {
  background: #f0eae6;
}


.marketing-card-visual-yellow {
  background: var(--yellow);
}


.marketing-card-number {
  position: relative;
  z-index: 2;

  font-family:
    IBMThai,
    sans-serif;

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


.marketing-card-word {
  position: absolute;

  left: 20px;
  bottom: -5px;

  max-width: 95%;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: clamp(82px, 8.5vw, 142px);
  font-weight: 600;
  line-height: 0.78;

  letter-spacing: -0.06em;

  opacity: 0.13;

  white-space: nowrap;

  transition:
    transform 360ms cubic-bezier(.2,.75,.25,1),
    opacity 360ms ease;
}


.marketing-card-arrow {
  position: absolute;

  right: 25px;
  top: 21px;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 28px;

  transition:
    transform 180ms ease;
}


/* CARD CONTENT */

.marketing-card-content {
  padding-top: 24px;
}


.marketing-card-content .marketing-article-category {
  margin-bottom: 16px;
}


.marketing-card-content h3 {
  max-width: 760px;

  margin: 0;
}


.marketing-card-content h3 a {
  color: #111;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 24px;
  font-weight: 500;
  line-height: 1.12;

  text-decoration: none;
}


.marketing-card-content > p:last-child {
  max-width: 620px;

  margin: 18px 0 0;

  color: #54514d;

  font-size: 15px;
  line-height: 1.6;
}


/* =========================================================
   SECTION 04 — EXPLORE
   ========================================================= */

.marketing-explore {
  padding: 92px 6% 98px;

  background: #171717;
  color: #f5f4ef;
}


.marketing-explore-content {
  min-width: 0;
}


.marketing-explore-content h2 {
  margin: 0 0 40px;

  color: #f5f4ef;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 25px;
  font-weight: 500;
  line-height: 1.08;
}


.marketing-explore-list {
  max-width: 1060px;

  border-top:
    1px solid rgba(255, 255, 255, 0.26);
}


.marketing-explore-row {
  appearance: none;

  width: 100%;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    120px
    26px;

  gap: 18px;

  align-items: center;

  margin: 0;
  padding: 20px 0;

  border: 0;
  border-bottom:
    1px solid rgba(255, 255, 255, 0.26);

  background: transparent;
  color: #f5f4ef;

  text-align: left;

  cursor: pointer;

  transition:
    color 180ms ease,
    padding-left 180ms ease;
}


.marketing-explore-name {
  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}


.marketing-explore-count {
  color: #9d9a94;

  font-family:
    IBMThai,
    sans-serif;

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

  text-align: right;
}


.marketing-explore-arrow {
  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 22px;

  text-align: right;
}


/* =========================================================
   SECTION 05 — LET'S TALK
   ========================================================= */

.marketing-talk {
  padding: 96px 6% 104px;

  background: var(--yellow);
  color: #111;
}


.marketing-talk-inner {
  width: 100%;
  max-width: 1420px;

  margin: 0 auto;

  display: grid;
  grid-template-columns:
    190px minmax(0, 1fr);

  gap: 64px;

  align-items: start;
}


.marketing-talk-label {
  display: flex;
  align-items: center;

  gap: 10px;

  padding-top: 8px;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}


.marketing-talk-content h2 {
  max-width: 880px;

  margin: 0;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 32px;
  font-weight: 500;
  line-height: 1.03;

  letter-spacing: -0.015em;
}


.marketing-talk-cta {
  appearance: none;

  margin-top: 42px;

  padding: 13px 22px;

  border: 1px solid #111;
  border-radius: 0;

  background: #111;
  color: #fff;

  display: inline-flex;
  align-items: center;

  gap: 16px;

  font-family:
    FCMinimal,
    IBMThai,
    sans-serif;

  font-size: 16px;
  font-weight: 500;

  cursor: pointer;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}


/* =========================================================
   DESKTOP INTERACTION
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  .marketing-featured-visual:hover
  .marketing-visual-word {
    transform: translateX(18px);

    color: rgba(255, 255, 255, 0.14);
  }


  .marketing-featured-visual:hover
  .marketing-visual-arrow {
    transform:
      translate(4px, -4px);
  }


  .marketing-read-link:hover {
    transform:
      translateX(5px);
  }


  .marketing-topic-button:not(.is-active):hover {
    transform:
      translateY(-2px);

    background: #111;
    color: #fff;
  }


  .marketing-card-visual:hover
  .marketing-card-word {
    transform:
      translateX(12px);

    opacity: 0.20;
  }


  .marketing-card-visual:hover
  .marketing-card-arrow {
    transform:
      translate(4px, -4px);
  }


  .marketing-card-content h3 a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }


  .marketing-explore-row:hover {
    padding-left: 10px;

    color: var(--yellow);
  }


  .marketing-talk-cta:hover {
    transform:
      translate(-3px, -3px);

    box-shadow:
      4px 4px 0
      rgba(17, 17, 17, 0.32);
  }

}


/* KEYBOARD */

.marketing-featured-visual:focus-visible,
.marketing-read-link:focus-visible,
.marketing-card-visual:focus-visible,
.marketing-card-content a:focus-visible,
.marketing-topic-button:focus-visible,
.marketing-explore-row:focus-visible,
.marketing-talk-cta:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}


/* =========================================================
   MARKETING CONTENT — MOBILE
   ========================================================= */

@media (max-width: 800px) {

  .marketing-section-grid {
    grid-template-columns: 1fr;

    gap: 30px;
  }


  .marketing-section-label {
    padding-top: 0;

    font-size: 14px;
  }


  /* FEATURED */

  .marketing-featured {
    padding:
      64px 14px
      72px;
  }


  .marketing-featured-story {
    grid-template-columns: 1fr;

    gap: 32px;
  }


  .marketing-featured-visual {
    min-height: 390px;

    padding: 22px;
  }


  .marketing-visual-word {
    left: -4px;
    bottom: -3%;

    font-size: clamp(145px, 46vw, 210px);
  }


  .marketing-visual-arrow {
    right: 20px;
    top: 18px;

    font-size: 29px;
  }


  .marketing-featured-copy {
    padding: 0;
  }


  .marketing-article-category {
    margin-bottom: 17px;
  }


  .marketing-featured-copy h2 a {
    font-size: 25px;
    line-height: 1.08;
  }


  .marketing-featured-description {
    margin-top: 20px;

    max-width: none;

    font-size: 15px;
    line-height: 1.65;
  }


  .marketing-read-link {
    margin-top: 27px;

    font-size: 15px;
  }


  /* TOPICS */

  .marketing-topics {
    padding:
      64px 14px
      38px;
  }


  .marketing-topics-content h2 {
    margin-bottom: 27px;

    font-size: 25px;
    line-height: 1.05;
  }


  .marketing-topic-filter {
    flex-wrap: nowrap;

    width: calc(100% + 28px);

    margin-left: -14px;

    padding:
      2px 14px
      8px;

    overflow-x: auto;

    scrollbar-width: none;
  }


  .marketing-topic-filter::-webkit-scrollbar {
    display: none;
  }


  .marketing-topic-button {
    flex: 0 0 auto;

    padding: 10px 14px;

    font-size: 11px;
  }


  /* LATEST */

  .marketing-latest {
    padding:
      46px 14px
      72px;
  }


  .marketing-latest-content > h2 {
    margin-bottom: 31px;

    font-size: 25px;
    line-height: 1.05;
  }


  .marketing-article-grid {
    grid-template-columns: 1fr;

    row-gap: 50px;
  }


  .marketing-article-card-wide,
  .marketing-article-card-narrow {
    grid-column: auto;
  }


  .marketing-card-visual {
    min-height: 300px;

    padding: 21px;
  }


  .marketing-card-word {
    left: 14px;

    font-size: clamp(85px, 29vw, 125px);
  }


  .marketing-card-arrow {
    right: 19px;
    top: 17px;

    font-size: 25px;
  }


  .marketing-card-content {
    padding-top: 20px;
  }


  .marketing-card-content h3 a {
    font-size: 20px;
    line-height: 1.12;
  }


  .marketing-card-content > p:last-child {
    margin-top: 14px;

    font-size: 15px;
  }


  /* EXPLORE */

  .marketing-explore {
    padding:
      64px 14px
      72px;
  }


  .marketing-explore-content h2 {
    margin-bottom: 31px;

    font-size: 23px;
    line-height: 1.05;
  }


  .marketing-explore-row {
    grid-template-columns:
      minmax(0, 1fr)
      76px
      25px;

    gap: 10px;

    padding: 22px 0;
  }


  .marketing-explore-name {
    font-size: 19px;
  }


  .marketing-explore-count {
    font-size: 10px;
  }


  .marketing-explore-arrow {
    font-size: 22px;
  }


  /* LET'S TALK */

  .marketing-talk {
    padding:
      64px 14px
      72px;
  }


  .marketing-talk-inner {
    grid-template-columns: 1fr;

    gap: 32px;
  }


  .marketing-talk-label {
    padding-top: 0;

    font-size: 14px;
  }


  .marketing-talk-content h2 {
    max-width: 350px;

    font-size: 25px;
    line-height: 1.04;
  }


  .marketing-talk-cta {
    margin-top: 30px;

    font-size: 15px;
  }


  /* TAP FEEDBACK */

  .marketing-topic-button:active,
  .marketing-card-visual:active,
  .marketing-explore-row:active {
    transform:
      translateY(1px);
  }


  .marketing-talk-cta:active {
    transform:
      translate(1px, 1px);

    box-shadow:
      1px 1px 0 #111;
  }

}