/* Tokyo trip page: reusable, scoped layout rules layered over the supplied feature template. */
.feature-body {
  margin: 0;
  padding: 0;
  color: #111;
  background: #fff;
}

.feature-body > .wrapper {
  width: 100%;
  max-width: none;
  margin: 0;
}

.feature-page {
  --feature-red: #ed0000;
  --feature-paper: #f7f6f1;
  --feature-placeholder: #d9d9d9;
  --feature-gutter: 62px;
  --feature-header-offset: calc(var(--header-height-pc, 64px) + 14px);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #111;
  background: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.feature-page *,
.feature-page *::before,
.feature-page *::after {
  box-sizing: border-box;
}

/* Shared lazy image frame. All supplied-image classes and data attributes stay in place. */
.feature-page .feature-image {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  overflow: hidden;
  background: var(--feature-placeholder);
}

.feature-page .feature-image::before {
  display: block;
  padding-top: var(--feature-image-ratio, 100%);
  content: "";
}

.feature-page .feature-image > .u-imgAdjustBox_inner {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.feature-page .feature-image picture,
.feature-page .feature-image .fr-img {
  display: block;
  width: 100%;
  height: 100%;
}

.feature-page .feature-image .fr-img {
  object-fit: cover;
}

.feature-page .feature-image--hero { --feature-image-ratio: 60.913706%; }
.feature-page .feature-image--banner { --feature-image-ratio: 46.153846%; }
.feature-page .feature-image--gallery { --feature-image-ratio: 123.71134%; }
.feature-page .feature-image--social { --feature-image-ratio: 120%; }
.feature-page .feature-image--stamp {
  --feature-image-ratio: 171.304348%;
  background: transparent;
}
.feature-page .feature-image--stamp .fr-img { object-fit: contain; }

/* Hero: copy overlaps the photograph. Japanese copy sits just outside its right edge. */
.feature-page .feature-masthead {
  padding-top: 54px;
  background-color: var(--feature-paper);
  background-image:
    radial-gradient(rgba(89, 76, 57, .035) .55px, transparent .7px),
    radial-gradient(rgba(89, 76, 57, .02) .45px, transparent .6px);
  background-size: 5px 5px, 9px 9px;
}

.feature-page .feature-hero {
  position: relative;
  min-height: 0;
}

.feature-page .feature-hero__media.fr-sp-px-1g {
  width: var(--feature-hero-fit-width, min(71.28vw, 920px));
  max-width: none;
  margin: 0 0 0 var(--feature-hero-media-left, calc(max(5vw, calc((100vw - 1200px) / 2 + 10px)) + min(14.67vw, 190px)));
  padding-right: 0;
  padding-left: 0;
}

.feature-page .feature-hero__copy {
  position: absolute !important;
  top: 50%;
  left: var(--feature-hero-group-left, 5vw);
  z-index: 2;
  width: var(--feature-hero-copy-width, max(260px, 47.7vw));
  margin: 0;
  color: var(--feature-red);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  transform: translateY(-50%);
}

.feature-page .feature-hero__title {
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: var(--feature-hero-title-size, clamp(52px, 8.1vw, 136px));
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .88;
  text-transform: uppercase;
}

.feature-page .feature-hero__title span { display: block; }
.feature-page .feature-hero__title .feature-hero__meet-gap {
  display: inline;
  margin-left: .075em;
}

.feature-page .feature-hero__description {
  max-width: var(--feature-hero-description-width, max(100px, 11.7vw));
  margin: var(--feature-hero-description-gap, max(16px, 3.6vw)) 0 0;
  color: inherit;
  font-size: var(--feature-hero-description-size, max(13px, 1.44vw));
  font-weight: 400;
  line-height: 1.32;
}

.feature-page .feature-hero__description-break { display: inline; }

.feature-page .feature-hero__japanese {
  position: absolute;
  top: 0;
  right: var(--feature-hero-group-right, 5vw);
  z-index: 2;
  width: var(--feature-hero-japanese-width, 1.8vw);
  margin: 0;
  color: var(--feature-red);
  font-size: var(--feature-hero-japanese-size, max(14px, 1.62vw));
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-align: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* Desktop hero uses the same left and right edges as the rendered site header.
   JavaScript measures the logo and menu; these values keep the layout composed
   while the shared header is loading or when previewed outside the site shell. */
@media (min-width: 813px) {
  .feature-page .feature-hero {
    --feature-hero-group-left: max(5vw, calc((100vw - 1200px) / 2 + 10px));
    --feature-hero-group-right: max(5vw, calc((100vw - 1200px) / 2 + 34px));
    --feature-hero-group-width: calc(100vw - var(--feature-hero-group-left) - var(--feature-hero-group-right));
    --feature-hero-copy-offset: min(14.67vw, 190px);
    --feature-hero-fit-width: min(71.28vw, 920px);
    --feature-hero-japanese-gap: min(2.25vw, 26px);
    --feature-hero-japanese-width: max(14px, min(1.8vw, 23px));
    --feature-hero-title-size: clamp(52px, 8.1vw, 104px);
    --feature-hero-copy-width: max(260px, min(47.7vw, 612px));
    --feature-hero-description-width: max(100px, min(11.7vw, 150px));
    --feature-hero-description-gap: max(16px, min(3.6vw, 46px));
    --feature-hero-description-size: max(13px, min(1.44vw, 18.5px));
    --feature-hero-japanese-size: max(14px, min(1.62vw, 21px));
    --feature-hero-media-left: calc(var(--feature-hero-group-left) + var(--feature-hero-copy-offset));
  }

  .feature-page .feature-hero__media.fr-sp-px-1g {
    width: var(--feature-hero-fit-width);
    max-width: none;
    margin: 0 0 0 var(--feature-hero-media-left);
  }

  .feature-page .feature-image--hero .fr-img {
    object-fit: contain;
  }

  .feature-page .feature-hero__description-break {
    display: block;
  }
}

/* Intro panel, Tokyo seal, brand paragraph and three responsive day tabs. */
.feature-page .feature-intro {
  padding: 76px 21px 116px;
  color: #111;
  text-align: center;
}

.feature-page .feature-intro__stamp {
  position: relative;
  width: 42px;
  height: 74px;
  margin: 0 auto 35px;
}

.feature-page .feature-intro__copy {
  width: min(600px, 100%);
  margin: 0 auto;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.6;
}

.feature-page .feature-nav.fr-anchorButton {
  display: grid;
  width: min(820px, calc(100% - 124px));
  max-width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  margin: 50px auto 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.feature-page .feature-nav .fr-anchorButton_item {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.feature-page .feature-nav .fr-anchorButton_itemText {
  display: flex;
  min-height: 48px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  color: #aaa;
  background: transparent;
  font-family: inherit;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  text-transform: none;
}

.feature-page .feature-nav a { cursor: pointer; }
.feature-page .feature-tab__day { font-size: 15px; line-height: 19px; }
.feature-page .feature-tab__title { font-size: 13px; line-height: 17px; }
.feature-page .feature-nav a[aria-current="location"],
.feature-page .feature-nav a[aria-selected="true"] {
  color: #111;
}
.feature-page .feature-nav a[aria-selected="true"] .feature-tab__day,
.feature-page .feature-nav a[aria-current="location"] .feature-tab__day { text-decoration: underline; }
.feature-page .feature-nav a:hover { text-decoration: none; }

.feature-page .feature-nav a:focus-visible,
.feature-page .feature-category__button:focus-visible,
.feature-page .feature-shop-action a:focus-visible,
.feature-page .feature-social a:focus-visible,
.feature-page .feature-gallery:focus-visible {
  outline: 2px solid var(--feature-red);
  outline-offset: 4px;
}

/* A future day URL gets an accessible release message instead of showing unreleased content. */
.feature-page .feature-coming-soon[hidden] { display: none !important; }
.feature-page .feature-coming-soon {
  display: grid;
  min-height: clamp(240px, 30vh, 340px);
  place-items: center;
  margin: -65px 0 0;
  padding: 0 24px 65px;
  color: #111;
  background: var(--feature-paper);
  text-align: center;
}
.feature-page .feature-coming-soon__inner { width: min(620px, 100%); }
.feature-page .feature-coming-soon__eyebrow {
  margin: 0 0 14px;
  color: var(--feature-red);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.feature-page .feature-coming-soon__title {
  margin: 0 0 10px;
  color: #111;
  font-size: 20px;
  font-weight: normal;
  letter-spacing: normal;
  line-height: normal;
}
.feature-page .feature-coming-soon__copy {
  max-width: 480px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
}
/* Keep the hero, intro and day tabs visible while an unreleased day is selected. */
.feature-page.feature-page--coming-soon > .feature-panels,
.feature-page.feature-page--coming-soon > .feature-social,
.feature-body.feature-body--coming-soon > .wrapper > .aside { display: none !important; }

/* The complete three-day content remains in the document for search and direct links. */
.feature-page .feature-panels { width: 100%; }
.feature-page .feature-day[hidden] { display: none !important; }
.feature-page .feature-day.u-fixedAnchorAdjust {
  margin: 0;
  padding: 0;
  scroll-margin-top: var(--feature-header-offset);
}
.feature-page .feature-day[role="tabpanel"]:focus-visible {
  outline: 2px solid var(--feature-red);
  outline-offset: -2px;
}

/* Daily hero and editorial introduction. */
.feature-page .feature-story {
  display: grid;
  width: min(1100px, calc(100% - 124px));
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 130px;
  align-items: start;
  margin: 80px auto;
  font-family: inherit;
}

.feature-page .feature-story__heading {
  min-width: 0;
  padding-left: 20px;
  border-left: 1px solid var(--feature-red);
}

.feature-page .feature-story__day {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.feature-page .feature-story__title {
  margin: 0;
  font-family: inherit;
  font-size: clamp(24px, 2.45vw, 32px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.22;
}

.feature-page .feature-story__copy {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.6;
}

/* Three-photo editorial categories: triptych on desktop, swipe gallery on mobile. */
.feature-page .feature-category { margin: 0; }

.feature-page .feature-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 var(--feature-gutter);
  padding: 0;
}

.feature-page .feature-gallery__item { min-width: 0; }

.feature-page .feature-category__content {
  width: min(600px, calc(100% - 42px));
  margin: 0 auto;
  padding: 48px 0 60px;
  font-family: inherit;
  text-align: center;
}
.feature-page .feature-category--last .feature-category__content { padding-bottom: 0; }

.feature-page .feature-category__title {
  margin: 0;
  font-family: inherit;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
}

.feature-page .feature-category__copy {
  margin: 25px auto;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.feature-page .feature-category__button.fr-linkButton {
  display: inline-flex;
  width: 264px;
  max-width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12px 20px;
  border: 1px solid #222;
  border-radius: 999px;
  color: #111;
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
}
.feature-page .feature-category__button:hover { background: #f5f5f5; }

/* Single Shop their looks link and the original BFF product carousel. */
.feature-page .feature-shop-action {
  margin: 83px 21px 40px;
  text-align: center;
}
.feature-page .feature-shop-action .fr-linkText_item {
  color: #111;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
}
.feature-page .feature-shop-action .fr-linkText_item:hover { text-decoration: underline; }

.feature-page .feature-products-wrap {
  margin: 0 var(--feature-gutter) 60px;
}

/* Shared social area: four-column desktop grid and two-up horizontal mobile strip. */
.feature-page .feature-social {
  padding: 0 0 43px;
  background: #fff;
  text-align: center;
}

.feature-page .feature-social__action { padding: 0 21px; }

.feature-page .feature-social__button.fr-linkButton {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 8px 18px;
  border: 1px solid #dedede;
  border-radius: 999px;
  color: #111;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
}

.feature-page .feature-social-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 40px 246px 0;
}
.feature-page .feature-social-grid__item { display: block; min-width: 0; }

@media (min-width: 813px) {
  /* The production global header is fixed; the hero keeps the measured 54px inset below it. */
  html:not(.frNativeApp) .feature-page { padding-top: var(--header-height-pc, 64px); }
}

@media (min-width: 813px) and (max-width: 1099px) {
  .feature-page { --feature-gutter: 32px; }
  .feature-page .feature-story {
    width: calc(100% - 64px);
    column-gap: 64px;
  }
  .feature-page .feature-nav.fr-anchorButton {
    width: calc(100% - 64px);
    gap: 28px;
  }
  .feature-page .feature-social-grid { margin-right: 12%; margin-left: 12%; }
}

@media (max-width: 812px) {
  .feature-page {
    --feature-gutter: 0px;
    --feature-header-offset: calc(var(--header-height-sp, 54px) + 12px);
  }

  .feature-page .feature-masthead { padding-top: 0; }
  .feature-page .feature-hero__media.fr-sp-px-1g {
    width: 100%;
    max-width: none;
    margin: 56px 0 0;
    padding-right: 0;
    padding-left: 0;
  }
  .feature-page .feature-image--hero { --feature-image-ratio: 132.978723%; }
  .feature-page .feature-image--banner { --feature-image-ratio: 79.155673%; }
  .feature-page .feature-image--gallery { --feature-image-ratio: 133.333333%; }
  .feature-page .feature-image--social { --feature-image-ratio: 120%; }

  .feature-page .feature-hero__copy {
    top: auto;
    right: 22px;
    bottom: 33px;
    left: 22px;
    width: auto;
    transform: none;
  }
  .feature-page .feature-hero__title {
    max-width: 100%;
    font-size: clamp(43px, 13.6vw, 58px);
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: .88;
  }
  .feature-page .feature-hero__description {
    max-width: 185px;
    margin-top: 33px;
    font-size: 16px;
    line-height: 1.35;
  }
  .feature-page .feature-hero__japanese {
    top: 18px;
    right: max(20px, env(safe-area-inset-right));
    width: 1.6em;
    overflow: visible;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.15;
    letter-spacing: 0;
  }

  .feature-page .feature-intro { padding: 85px 21px 80px; }
  .feature-page .feature-intro__stamp {
    width: 39px;
    height: 69px;
    margin-bottom: 40px;
  }
  .feature-page .feature-intro__copy {
    width: 100%;
    max-width: 340px;
    font-size: 15px;
    line-height: 1.55;
  }
  .feature-page .feature-nav.fr-anchorButton {
    box-sizing: border-box;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-top: 50px;
    padding: 0;
  }
  .feature-page .feature-nav .fr-anchorButton_itemText {
    min-height: 52px;
    gap: 4px;
    padding: 0 2px 8px;
  }
  .feature-page .feature-tab__day { font-size: 13px; line-height: 16px; }
  .feature-page .feature-tab__title { font-size: 12px; line-height: 1.3; }

  .feature-page .feature-story {
    display: block;
    width: auto;
    max-width: none;
    margin: 60px 29px 70px;
    text-align: center;
  }
  .feature-page .feature-story__heading { padding: 0; border: 0; }
  .feature-page .feature-story__day {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    text-transform: uppercase;
  }
  .feature-page .feature-story__title {
    margin: 20px 0 20px;
    font-size: 25px;
    line-height: 1.28;
  }
  .feature-page .feature-story__copy {
    max-width: 340px;
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
  }

  .feature-page .feature-gallery {
    display: flex;
    gap: 4.5px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .feature-page .feature-gallery::-webkit-scrollbar { display: none; }
  .feature-page .feature-gallery__item {
    flex: 0 0 66.666667%;
    scroll-snap-align: start;
  }
  .feature-page .feature-category__content {
    width: 100%;
    padding: 49px 21px 60px;
  }
  .feature-page .feature-category--last .feature-category__content { padding-bottom: 0; }
  .feature-page .feature-category__title { font-size: 18px; line-height: 1.3; }
  .feature-page .feature-category__copy { font-size: 14px; line-height: 1.5; }
  .feature-page .feature-category__button.fr-linkButton {
    width: min(264px, 100%);
    min-height: 52px;
    font-size: 15px;
  }

  .feature-page .feature-shop-action { margin: 70px 21px 30px; }
  .feature-page .feature-shop-action .fr-linkText_item { font-size: 15px; }
  .feature-page .feature-products-wrap { margin: 0 0 60px; }

  
  .feature-page .feature-social__button.fr-linkButton {
    min-width: 264px;
    min-height: 52px;
    padding: 12px 18px;
    font-size: 13px;
  }
  .feature-page .feature-social-grid {
    display: flex;
    width: 100%;
    gap: 3.5px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    margin: 40px 0 0;
    padding: 0 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .feature-page .feature-social-grid::-webkit-scrollbar { display: none; }
  .feature-page .feature-social-grid__item {
    flex: 0 0 calc((100vw - 35.5px) / 2);
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-page *,
  .feature-page *::before,
  .feature-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
footer .fr-globalFooter {
  margin-top: 0 !important;
}
