/* parts/layout.css: owned by the layout workstream. Loaded after styles.css.
   Composition: broken grid, bleed, overlap, ruled text links, one red primary. */

:root {
  --lay-edge: clamp(20px, 5vw, 96px);
  --lay-rule: rgba(255, 255, 255, 0.22);
  --lay-red: #bc002d;
  --lay-pull: clamp(0px, 18vw, 290px);
}

/* ------------------------------------------------------------------
   Ruled text links (replace pill / outline / light page buttons)
   ------------------------------------------------------------------ */

.link-rule {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-width: min(100%, 300px);
  padding: 17px 0 16px;
  border-top: 1px solid var(--lay-rule);
  color: inherit;
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    border-color 0.4s var(--ease),
    color 0.4s var(--ease);
}

.link-rule::after {
  content: "";
  flex: none;
  width: 56px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 10'%3E%3Cpath d='M0 5h55M50.5 .8L55 5l-4.5 4.2' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 10'%3E%3Cpath d='M0 5h55M50.5 .8L55 5l-4.5 4.2' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transition: transform 0.5s var(--ease-out);
}

a.link-rule:hover,
a.link-rule:focus-visible,
a:hover > .link-rule,
a:focus-visible > .link-rule {
  border-top-color: var(--white);
  color: var(--white);
}

a.link-rule:hover::after,
a.link-rule:focus-visible::after,
a:hover > .link-rule::after,
a:focus-visible > .link-rule::after {
  transform: translateX(10px);
}

a.link-rule:focus-visible,
.btn--red:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}

.link-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(100%, 420px);
  margin-top: 28px;
  border-bottom: 1px solid var(--lay-rule);
}

.link-list .link-rule {
  width: 100%;
}

.split-feature .link-rule {
  margin-top: 26px;
}

/* ------------------------------------------------------------------
   The one red primary action: square corners, darker arrow cell
   ------------------------------------------------------------------ */

.btn--red {
  position: relative;
  justify-content: flex-start;
  min-width: 0;
  min-height: 52px;
  padding: 0 76px 0 26px;
  border: 0;
  border-radius: 0;
  background: var(--lay-red);
  color: var(--white);
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
}

.btn--red:hover {
  background: #96001f;
  color: var(--white);
}

.btn--red .chev {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 52px;
  height: auto;
  padding: 19px;
  background: #86001b;
  transition:
    background-color 0.3s var(--ease),
    padding 0.4s var(--ease-out);
}

.btn--red:hover .chev {
  background: #6e0016;
  padding-left: 23px;
  padding-right: 15px;
}

.cta-block {
  margin-top: clamp(40px, 5vw, 72px);
}

/* ------------------------------------------------------------------
   Page headers: text sits low and to the left, the photo breathes
   ------------------------------------------------------------------ */

.page-header {
  min-height: min(86vh, 860px);
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
}

.page-header__content {
  width: 100%;
  max-width: none;
  padding: calc(var(--header-h) + 40px) var(--gutter) clamp(56px, 9vh, 110px);
}

.page-header h1 {
  max-width: 14ch;
}

.page-header p {
  max-width: 440px;
  margin-left: 0;
  margin-right: 0;
}

.page-header .hero__actions {
  justify-content: flex-start;
  align-items: center;
  gap: 40px;
  margin-top: 36px;
}

.page-header .hero__actions .link-rule {
  min-width: 240px;
}

/* ------------------------------------------------------------------
   Statements: eyebrow hangs in the margin, the line sits offset
   ------------------------------------------------------------------ */

.statement {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-content: start;
  padding: clamp(90px, 13vw, 200px) var(--gutter) clamp(70px, 9vw, 140px);
  text-align: left;
}

.statement > .eyebrow {
  grid-column: 1 / 4;
  grid-row: 1;
  margin-bottom: 0 !important;
  padding-top: 0.7em;
}

.statement > p {
  grid-column: 4 / 12;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.statement > p + p {
  max-width: 560px;
}

/* mirrored: text pushed right of centre, eyebrow hanging on the far side */
.statement--right > .eyebrow {
  grid-column: 10 / -1;
  grid-row: 1;
}

.statement--right > p {
  grid-column: 2 / 10;
}

.statement--right > p + p {
  grid-column: 5 / 10;
}

/* ------------------------------------------------------------------
   Split features: bleed, overlap and offset instead of two even halves
   ------------------------------------------------------------------ */

.split-feature {
  align-items: end;
}

.split-feature__media {
  border-radius: 0;
}

/* tall image bleeding off the left edge, text low in the frame */
.split-feature--bleed-l {
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  column-gap: clamp(40px, 8vw, 150px);
  padding-left: 0;
}

.split-feature--bleed-l .split-feature__media {
  aspect-ratio: 4 / 5;
  max-height: 92vh;
}

.split-feature--bleed-l > div:not(.split-feature__media) {
  padding-bottom: clamp(0px, 3vw, 48px);
}

/* wide image bleeding off the right edge, text high and set in */
.split-feature--bleed-r {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: clamp(40px, 7vw, 130px);
  align-items: start;
  padding-right: 0;
}

.split-feature--bleed-r .split-feature__media {
  order: 2;
  aspect-ratio: 1.55 / 1;
  margin-top: clamp(0px, 8vw, 140px);
}

.split-feature--bleed-r > div:not(.split-feature__media) {
  order: 1;
  padding-top: clamp(0px, 3vw, 40px);
}

/* headline crosses over the edge of the photograph */
.split-feature--overlap {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 0;
  padding-left: var(--lay-edge);
  padding-right: var(--gutter);
}

.split-feature--overlap .split-feature__media {
  grid-column: 1 / 8;
  grid-row: 1;
  aspect-ratio: 1.15 / 1;
  position: relative;
}

.split-feature--overlap .split-feature__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(10, 9, 9, 0.7), rgba(10, 9, 9, 0));
  pointer-events: none;
}

.split-feature--overlap > div:not(.split-feature__media) {
  grid-column: 8 / -1;
  grid-row: 1;
  padding-left: clamp(16px, 2.5vw, 40px);
  position: relative;
  z-index: 2;
  align-self: end;
  padding-bottom: clamp(0px, 2vw, 32px);
}

.split-feature--overlap h2 {
  width: calc(100% + var(--lay-pull));
  max-width: 9em;
  margin-left: calc(-1 * var(--lay-pull));
  margin-bottom: 26px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}

/* narrow portrait set off-centre with air around it */
.split-feature--narrow {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: center;
}

.split-feature--narrow .split-feature__media {
  grid-column: 8 / 12;
  grid-row: 1;
  order: 0;
  aspect-ratio: 3 / 4;
}

.split-feature--narrow > div:not(.split-feature__media) {
  grid-column: 1 / 7;
  grid-row: 1;
}

/* ------------------------------------------------------------------
   Full-bleed photograph with one line of copy
   ------------------------------------------------------------------ */

.fullbleed {
  position: relative;
  z-index: 1;
  height: min(92vh, 860px);
  min-height: 420px;
  margin: 0;
  overflow: hidden;
  background: #111;
  isolation: isolate;
}

.fullbleed img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fullbleed::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to top, rgba(8, 7, 7, 0.72), rgba(8, 7, 7, 0) 52%);
  pointer-events: none;
}

.fullbleed figcaption {
  position: absolute;
  left: var(--gutter);
  right: var(--lay-edge);
  bottom: clamp(36px, 7vh, 84px);
  z-index: 1;
  max-width: 22ch;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 41px);
  font-weight: 400;
  line-height: 1.15;
}

.fullbleed--right figcaption {
  left: auto;
  right: var(--gutter);
  text-align: right;
}

/* ------------------------------------------------------------------
   Duo tiles: unequal widths, the second sits lower with empty ground above
   ------------------------------------------------------------------ */

.duo {
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: end;
}

.duo__tile:nth-child(2) {
  min-height: min(62vh, 640px);
}

.duo__tile > div {
  width: min(100%, 420px);
}

.duo__tile .link-rule {
  display: flex;
  width: 100%;
  border-top-color: rgba(255, 255, 255, 0.45);
  color: var(--white);
}

/* ------------------------------------------------------------------
   Info cards become ruled columns, staggered
   ------------------------------------------------------------------ */

.info-grid {
  grid-template-columns: 1.25fr 1fr 1fr 1.35fr;
  column-gap: clamp(24px, 3vw, 56px);
  row-gap: 40px;
  align-items: start;
}

.info-card {
  padding: 22px 0 0;
  border-top: 1px solid var(--lay-rule);
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.info-card:hover {
  transform: none;
}

.info-card:nth-child(2) {
  margin-top: 44px;
}

.info-card:nth-child(3) {
  margin-top: 88px;
}

.info-card:nth-child(4) {
  margin-top: 22px;
}

.info-card .eyebrow {
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.62);
}

/* ------------------------------------------------------------------
   Visit: headline column on the left, details in a wide column on the right
   ------------------------------------------------------------------ */

.section--aside {
  padding-block: clamp(56px, 7vw, 110px);
}

.section--aside > .container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
}

.aside__head {
  grid-column: 1 / 5;
  position: sticky;
  top: calc(var(--header-h) + 32px);
}

.aside__head .eyebrow {
  margin-bottom: 18px;
}

.aside__head h2 {
  margin-bottom: 0 !important;
}

.aside__body {
  grid-column: 6 / -1;
}

.aside__body > :first-child {
  margin-top: 0 !important;
}

/* menu page: breathing room after a full-bleed photograph */
.fullbleed + .menu-section {
  padding-top: clamp(70px, 8vw, 120px) !important;
}

#hours {
  padding-block: clamp(70px, 9vw, 140px);
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */

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

  .info-card:nth-child(n) {
    margin-top: 0;
  }

  .info-card:nth-child(even) {
    margin-top: 32px;
  }

  :root {
    --lay-pull: clamp(0px, 8vw, 90px);
  }
}

@media (max-width: 760px) {
  :root {
    --lay-edge: 20px;
  }

  .page-header {
    min-height: 78vh;
  }

  .page-header h1,
  .page-header p {
    max-width: none;
  }

  .page-header .hero__actions {
    gap: 22px;
    align-items: stretch;
    flex-direction: column;
  }

  .statement {
    grid-template-columns: 1fr;
    padding-inline: 20px;
    padding-block: 84px 64px;
  }

  .statement > .eyebrow,
  .statement--right > .eyebrow {
    grid-column: 1;
    padding-top: 0;
    margin-bottom: 22px !important;
  }

  .statement > p,
  .statement--right > p,
  .statement--right > p + p {
    grid-column: 1;
  }

  .split-feature,
  .split-feature--bleed-l,
  .split-feature--bleed-r,
  .split-feature--overlap,
  .split-feature--narrow {
    grid-template-columns: 1fr;
    row-gap: 34px;
    column-gap: 0;
    align-items: start;
    padding-left: 0;
    padding-right: 0;
  }

  .split-feature--bleed-l > div:not(.split-feature__media),
  .split-feature--bleed-r > div:not(.split-feature__media),
  .split-feature--overlap > div:not(.split-feature__media),
  .split-feature--narrow > div:not(.split-feature__media) {
    grid-column: 1;
    grid-row: auto;
    order: 1;
    padding: 0 20px;
  }

  .split-feature--overlap .split-feature__media,
  .split-feature--narrow .split-feature__media,
  .split-feature--bleed-l .split-feature__media,
  .split-feature--bleed-r .split-feature__media {
    grid-column: 1;
    grid-row: auto;
    order: 0;
    margin-top: 0;
  }

  .split-feature--bleed-l .split-feature__media {
    aspect-ratio: 4 / 4.6;
    max-height: none;
  }

  .split-feature--bleed-r .split-feature__media {
    aspect-ratio: 1.3 / 1;
    margin-left: 20px;
  }

  .split-feature--narrow .split-feature__media {
    aspect-ratio: 4 / 4.6;
    width: 78%;
    margin-left: 20px;
  }

  /* the headline still crosses the photo on mobile */
  .split-feature--overlap > div:not(.split-feature__media) {
    margin-top: -64px;
    position: relative;
    z-index: 2;
  }

  .split-feature--overlap h2 {
    width: 100%;
    max-width: 12ch;
    margin-left: 0;
  }

  .fullbleed {
    height: 68vh;
    min-height: 380px;
  }

  .fullbleed figcaption,
  .fullbleed--right figcaption {
    left: 20px;
    right: 20px;
    text-align: left;
  }

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

  .duo__tile:nth-child(2) {
    min-height: 56vh;
  }

  .info-grid {
    grid-template-columns: 1fr;
    row-gap: 30px;
  }

  .info-card:nth-child(n) {
    margin-top: 0;
  }

  .section--aside > .container {
    grid-template-columns: 1fr;
  }

  .aside__head,
  .aside__body {
    grid-column: 1;
    position: static;
  }

  .aside__head {
    margin-bottom: 28px;
  }

  .link-rule {
    min-width: 0;
    width: 100%;
  }
}

/* Merge fix: the info cards lost their white boxes, so their text must be light on the dark page */
.info-card,
.info-card p,
.info-card p.t-time,
.info-card .t-time .t-main,
.info-card .t-time .t-pair,
.info-card .t-time .t-run,
.info-card .t-time .t-num,
.info-card .t-time .t-ap,
.info-card .t-time .t-dash {
  color: #f2e8de;
}

.info-card .t-time .t-sub,
.info-card .t-time .t-sub .t-num,
.info-card .t-time .t-sub .t-ap,
.info-card .t-time .t-lead {
  color: rgba(242, 232, 222, 0.78);
}

.info-card p:not(.t-time),
.info-card a {
  color: rgba(242, 232, 222, 0.88);
}

.info-card .eyebrow {
  color: rgba(242, 232, 222, 0.7);
}

/* Homepage intro statement: one centered editorial block */
.intro-statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(96px, 12vw, 190px) 24px clamp(88px, 11vw, 170px);
}

.intro-statement__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(28px, 3.4vw, 48px);
  font-family: var(--sans, Inter, sans-serif);
  font-size: 10.1px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(242, 232, 222, 0.75);
}

.intro-statement__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red, #e8202f);
  flex: none;
}

.intro-statement__line {
  max-width: 15ch;
  margin: 0;
  font-family: var(--serif, "Outfit", system-ui, sans-serif);
  font-weight: 300;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #f2e8de;
}

.intro-statement__line em {
  font-style: italic;
  font-weight: 300;
  color: #f2e8de;
}

.intro-statement__body {
  max-width: 46ch;
  margin: clamp(34px, 4vw, 56px) 0 0;
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid rgba(242, 232, 222, 0.28);
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.75;
  color: rgba(242, 232, 222, 0.78);
}

@media (max-width: 700px) {
  .intro-statement__line {
    max-width: none;
  }
}

/* Specificity bump so the global h2 rules cannot shrink the intro headline */
.section.intro-statement h2.intro-statement__line {
  max-width: none;
  font-size: clamp(38px, 6vw, 93px) !important;
  line-height: 1.04 !important;
  font-weight: 300 !important;
}

.section.intro-statement h2.intro-statement__line em {
  font-size: inherit !important;
}

/* Homepage intro: headline left, tall photo right */
.section.intro-split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(32px, 6vw, 110px);
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(80px, 10vw, 160px) clamp(20px, 6vw, 96px);
}

.intro-split__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(24px, 3vw, 40px);
  font-size: 10.1px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(242, 232, 222, 0.75);
}

.intro-split__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red, #e8202f);
  flex: none;
}

.section.intro-split h2.intro-split__line {
  margin: 0;
  max-width: none;
  font-family: var(--serif, "Outfit", system-ui, sans-serif);
  font-size: clamp(29px, 4.3vw, 67px) !important;
  font-weight: 300 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.02em;
  color: #f2e8de;
}

.section.intro-split h2.intro-split__line em {
  font-style: italic;
  font-size: inherit !important;
}

.intro-split__body {
  max-width: 54ch;
  margin: clamp(28px, 3.4vw, 48px) 0 0;
  padding-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid rgba(242, 232, 222, 0.28);
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.75;
  color: rgba(242, 232, 222, 0.8);
}

.intro-split__photo {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.intro-split__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 560px) {
  .section.intro-split {
    grid-template-columns: 1fr;
  }

  .intro-split__photo {
    aspect-ratio: 4 / 5;
    max-width: 420px;
  }
}

@media (min-width: 561px) and (max-width: 900px) {
  .section.intro-split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 28px;
  }

  .section.intro-split h2.intro-split__line {
    font-size: clamp(28px, 5.3vw, 48px) !important;
  }
}

/* Intro split: full viewport width, photo flush to the right edge */
.section.intro-split {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: min(86vh, 860px);
}

.intro-split__copy {
  align-self: center;
  padding: clamp(64px, 8vw, 130px) clamp(24px, 5vw, 96px) clamp(64px, 8vw, 130px) clamp(24px, 7.2vw, 140px);
}

.intro-split__label {
  gap: 0;
}

.section.intro-split .intro-split__photo {
  aspect-ratio: auto;
  max-width: none;
  height: 100%;
  min-height: 420px;
}

@media (max-width: 560px) {
  .section.intro-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .intro-split__copy {
    padding: 72px 24px 48px;
  }

  .section.intro-split .intro-split__photo {
    aspect-ratio: 4 / 5;
    height: auto;
    min-height: 0;
    width: 100%;
  }
}

/* "Experience Nomi.": same face as the rest of the headline, bold and red */
.section.intro-split h2.intro-split__line em {
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--red, #e8202f) !important;
}

/* "The Japanese night out." as its own big section */
.section.night-out {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: none;
  width: 100%;
  min-height: min(70vh, 640px);
  margin: 0;
  padding: clamp(80px, 11vw, 170px) clamp(24px, 7.2vw, 140px);
}

.section.night-out h2.night-out__title {
  margin: 0;
  max-width: none;
  font-family: var(--serif, "Outfit", system-ui, sans-serif);
  font-size: clamp(45px, 8.6vw, 138px) !important;
  font-weight: 300 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.03em;
  color: #f2e8de;
}

@media (max-width: 560px) {
  .section.night-out {
    min-height: 0;
    padding: 72px 24px 40px;
  }

  .section.night-out h2.night-out__title {
    font-size: clamp(38px, 12vw, 62px) !important;
  }
}

/* ===== Red bento buttons: label . japanese, arrow cell on the right, animated on hover ===== */
a.btn-bento,
span.btn-bento {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  min-height: 44px;
  padding: 11px 48px 11px 28px;
  overflow: hidden;
  background: var(--red, #e8202f);
  color: #fff;
  border: 1px solid var(--red, #e8202f);
  border-radius: 999px;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 10.6px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  transition:
    background-color 0.3s var(--ease, ease),
    color 0.3s var(--ease, ease),
    border-color 0.3s var(--ease, ease);
}

a.btn-bento:hover,
a.btn-bento:focus-visible,
a:hover span.btn-bento,
a:focus-visible span.btn-bento {
  background: transparent;
  color: var(--red, #e8202f);
  border-color: var(--red, #e8202f);
}

a.btn-bento:focus-visible {
  outline: 2px solid #f2e8de;
  outline-offset: 3px;
}

.btn-bento .btn__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.btn-bento .btn__label [lang="ja"] {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Meiryo", sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: none;
}

.btn-bento .btn__dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 12px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* arrow sits inside the pill; hollow hover clears the arrow cell */
.btn-bento .btn__arrow,
.mega__cta .chev {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42px;
  height: 100%;
  padding: 14px;
  background: transparent;
  overflow: visible;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-bento:hover .btn__arrow,
a:hover .btn-bento .btn__arrow,
.mega__cta:hover .chev {
  background: transparent;
  color: inherit;
}

/* arrow animation: slides out to the right and re-enters from the left */
@keyframes btn-arrow-slide {
  0% { transform: translateX(0); opacity: 1; }
  45% { transform: translateX(16px); opacity: 0; }
  46% { transform: translateX(-16px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.btn-bento:hover .btn__arrow path,
.btn-bento:focus-visible .btn__arrow path,
a:hover .btn-bento .btn__arrow path,
.mega__cta:hover .chev path,
.mega__cta:focus-visible .chev path {
  animation: btn-arrow-slide 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform-box: fill-box;
}

@media (prefers-reduced-motion: reduce) {
  .btn-bento:hover .btn__arrow path,
  a:hover .btn-bento .btn__arrow path,
  .mega__cta:hover .chev path {
    animation: none;
  }
}

.page-header .hero__actions .btn-bento,
.link-list .btn-bento {
  margin: 0;
}

.link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.split-feature .btn-bento {
  margin-top: 28px;
}

.duo__tile .btn-bento {
  margin-top: 18px;
}

.duo__contact {
  margin: 18px 0 0;
  max-width: 28ch;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: rgba(242, 232, 222, 0.82);
}

.duo__contact a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.duo__contact a:hover,
.duo__contact a:focus-visible {
  color: #fff;
}

@media (max-width: 560px) {
  a.btn-bento,
  span.btn-bento {
    min-width: 0;
    width: 100%;
    padding-left: 14px;
    font-size: 10.1px;
  }
}

/* ===== The headline no longer covers the photo ===== */
.split-feature--plain {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 90px);
  align-items: center;
  padding-left: clamp(20px, 7.2vw, 140px);
  padding-right: clamp(20px, 7.2vw, 140px);
}

.split-feature--plain .split-feature__media {
  /* Portrait PDF crop (p05 woman) — keep face in frame, not landscape letterbox */
  aspect-ratio: 3 / 4;
  position: relative;
  max-height: min(78vh, 720px);
}

.split-feature--plain > div:not(.split-feature__media) {
  position: static;
  align-self: center;
  padding: 0;
}

.split-feature--plain h2 {
  width: auto;
  max-width: none;
  margin: 0 0 26px;
  text-shadow: none;
}

@media (max-width: 800px) {
  .split-feature--plain {
    grid-template-columns: 1fr;
  }
}

/* ===== "The menu" / "The bar": large, bold, red ===== */
.section h2.big-red-title,
h2.big-red-title {
  margin: 0 0 22px;
  max-width: none;
  font-family: var(--serif, "Outfit", system-ui, sans-serif);
  font-size: clamp(24px, 3.1vw, 41px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em;
  color: var(--red, #e8202f) !important;
  text-transform: none;
}

/* Contact button stacks: same width, no ruled underline */
.link-list {
  border-bottom: 0;
  gap: 10px;
  width: min(100%, 360px);
}

.link-list .btn-bento {
  width: 100%;
  min-width: 0;
}

/* ===== Homepage hours board: clean two-by-two, one line per time ===== */
.section.hours-board {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(72px, 9vw, 140px) clamp(20px, 7.2vw, 120px);
}

.hours-board__intro {
  max-width: 34ch;
  margin: 0 0 clamp(36px, 5vw, 64px);
  font-family: var(--serif, "Outfit", system-ui, sans-serif);
  font-size: clamp(21px, 2.2vw, 33px);
  font-weight: 300;
  line-height: 1.2;
  color: #f2e8de;
}

.hours-board__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 6vw, 96px);
}

.hours-board__item {
  padding: 26px 0 34px;
  border-top: 1px solid rgba(242, 232, 222, 0.28);
}

.hours-board__label {
  margin: 0 0 14px;
  font-size: 10.1px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(242, 232, 222, 0.7);
}

.hours-board__time {
  margin: 0;
  font-family: var(--serif, "Outfit", system-ui, sans-serif);
  font-size: clamp(24px, 3.1vw, 45px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #f2e8de;
}

.hours-board__time--text {
  font-size: clamp(21px, 2.4vw, 34px);
  white-space: normal;
}

.hours-board__note {
  margin: 12px 0 0;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(242, 232, 222, 0.75);
}

.hours-board__cta {
  margin-top: clamp(28px, 4vw, 52px);
}

@media (max-width: 640px) {
  .hours-board__grid {
    grid-template-columns: 1fr;
  }

  .hours-board__item {
    padding: 22px 0 26px;
  }

  .hours-board__time {
    font-size: clamp(31px, 9.5vw, 41px);
  }

  .hours-board__time--text {
    font-size: clamp(24px, 6.9vw, 31px);
  }
}

/* ===== Mobile pass ===== */
@media (max-width: 700px) {
  /* hero: bigger frame, no floating circle over the wordmark, caption below the photo */
  .uhero {
    padding-left: 20px;
    padding-right: 20px;
  }

  .uhero__frame {
    aspect-ratio: 4 / 5;
  }

  .uhero__frame img {
    object-position: 64% 50%;
  }

  .uhero__orb {
    display: none;
  }

  .uhero__caption {
    position: static;
    margin: 14px 2px 0;
    font-size: 11px;
    line-height: 1.5;
    opacity: 0.8;
  }

  /* buttons: English on top, Japanese beneath, no wrapping mess */
  a.btn-bento,
  span.btn-bento {
    min-height: 60px;
    padding: 8px 56px 8px 14px;
  }

  .btn-bento .btn__label {
    flex-direction: column;
    gap: 3px;
    line-height: 1.25;
  }

  .btn-bento .btn__dot {
    display: none;
  }

  .btn-bento .btn__label [lang="ja"] {
    font-size: 11px;
    opacity: 0.92;
  }

  .btn-bento .btn__arrow {
    width: 44px;
    padding: 15px;
  }

  .fullbleed figcaption {
    text-wrap: balance;
  }
}

/* ===== Menu and bar side by side, right under "The Japanese night out." ===== */
.section.menu-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 80px);
  max-width: none;
  margin: 0;
  padding: clamp(24px, 4vw, 60px) clamp(20px, 7.2vw, 140px) clamp(72px, 9vw, 140px);
}

.menu-bar__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.menu-bar__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: clamp(22px, 2.6vw, 38px);
}

.menu-bar__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.menu-bar__col h2.big-red-title {
  /* Homepage Menu/Bar block: clearly smaller than the former ~120px display */
  font-size: clamp(26px, 3.3vw, 45px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.menu-bar__col p {
  max-width: 42ch;
  margin: 0 0 14px;
  line-height: 1.7;
  color: rgba(242, 232, 222, 0.82);
}

.menu-bar__col .btn-bento {
  margin-top: 14px;
}

@media (max-width: 760px) {
  .section.menu-bar {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .menu-bar__photo {
    aspect-ratio: 5 / 4;
  }

  .menu-bar__col .btn-bento {
    width: 100%;
  }
}

/* ===== Dropdown promo: button gets its own row so nothing is crowded ===== */
.mega .mega__promo {
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  row-gap: 0;
  padding: 10px 10px 10px 10px;
}

.mega .mega__promo .btn {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: stretch;
  width: 100%;
  min-height: 40px;
  margin-top: 12px;
  padding: 0 14px;
  text-align: center;
}

.mega .mega__promo .btn .btn__label {
  white-space: nowrap;
}

.menu-bar__photo {
  /* PDF p03 portraits — keep face/food in frame */
  aspect-ratio: 3 / 4;
}

.menu-bar__col p:last-of-type {
  margin-bottom: 26px;
}

.menu-bar__col .btn-bento {
  margin-top: auto;
}

@media (max-width: 760px) {
  .menu-bar__photo {
    aspect-ratio: 5 / 4;
  }
}

/* Visit page section titles: big, plain, no subtitle */
.section h2.visit-title,
h2.visit-title {
  margin: 0 0 clamp(26px, 3.4vw, 48px);
  max-width: none;
  font-family: var(--serif, "Outfit", system-ui, sans-serif);
  font-size: clamp(36px, 4.1vw, 71px) !important;
  font-weight: 300 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.02em;
  color: #f2e8de;
}

@media (max-width: 560px) {
  .section h2.visit-title,
  h2.visit-title {
    font-size: clamp(36px, 11.2vw, 52px) !important;
  }
}

/* The floating circle photo in the hero is removed */
.uhero__orb {
  display: none !important;
}

/* ===== "After dark, the energy changes." ===== */
.section.after-dark {
  max-width: none;
  margin: 0;
  padding: clamp(88px, 11vw, 180px) clamp(20px, 7.2vw, 140px);
  background: #151413;
}

.section.after-dark h2.after-dark__title {
  max-width: 14ch;
  margin: 0 0 clamp(40px, 5vw, 80px);
  font-family: var(--serif, "Outfit", system-ui, sans-serif);
  font-size: clamp(46px, 8.2vw, 134px) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em;
  color: #f2e8de;
}

.after-dark__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(28px, 6vw, 100px);
  align-items: start;
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid rgba(242, 232, 222, 0.28);
}

.after-dark__body {
  max-width: 44ch;
  margin: 0;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.75;
  color: rgba(242, 232, 222, 0.82);
}

.after-dark__age {
  margin: 0;
  max-width: 20ch;
  font-family: var(--serif, "Outfit", system-ui, sans-serif);
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--red, #e8202f);
}

@media (max-width: 760px) {
  .after-dark__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .section.after-dark h2.after-dark__title {
    font-size: clamp(41px, 12.9vw, 69px) !important;
  }
}

/* "The Japanese night out." spans the full width of the page */
.section.night-out {
  padding-left: clamp(16px, 2.2vw, 40px);
  padding-right: clamp(16px, 2.2vw, 40px);
  min-height: 0;
}

.section.night-out h2.night-out__title {
  width: 100%;
  font-size: 13.2vw !important;
  line-height: 0.98 !important;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.night-out__title .night-out__line {
  display: block;
}

.section.night-out {
  overflow: hidden;
}

.section.night-out h2.night-out__title {
  font-size: 17.7vw !important;
  letter-spacing: -0.04em;
}

/* ===== Night-out title: much smaller ===== */
.section.night-out h2.night-out__title {
  font-size: clamp(24px, 3.6vw, 45px) !important;
  letter-spacing: -0.02em;
  line-height: 1.12 !important;
  white-space: normal;
}

@media (max-width: 560px) {
  .section.night-out h2.night-out__title {
    font-size: clamp(22px, 6.5vw, 31px) !important;
  }
}

/* Kill earlier vw overrides that still inflate night-out */
.section.night-out h2.night-out__title {
  font-size: clamp(24px, 3.6vw, 45px) !important;
}

/* ===== Menu page section links: spaced text, not buttons ===== */
.tabs {
  justify-content: center;
  align-items: baseline;
  gap: clamp(28px, 6vw, 88px);
  padding: 22px var(--gutter);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(30, 29, 28, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.tabs .pill,
.tabs .pill:hover,
.tabs .pill.is-active {
  position: relative;
  min-width: 0;
  height: auto;
  padding: 8px 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(242, 232, 222, 0.55);
  font-family: var(--serif, "Outfit", system-ui, sans-serif);
  font-size: clamp(16px, 1.7vw, 24px);
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.35s var(--ease);
}

.tabs .pill::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
}

.tabs .pill:hover,
.tabs .pill.is-active {
  color: #f2e8de;
}

.tabs .pill:hover::after,
.tabs .pill.is-active::after {
  transform: scaleX(1);
}

@media (max-width: 700px) {
  .tabs {
    justify-content: flex-start;
    gap: 30px;
    padding: 14px 20px;
  }

  .tabs .pill,
  .tabs .pill:hover,
  .tabs .pill.is-active {
    font-size: 16px;
    padding: 6px 0 10px;
  }
}

@media (max-width: 700px) {
  .tabs {
    justify-content: space-between;
    gap: 14px;
    padding: 12px 20px;
  }

  .tabs .pill,
  .tabs .pill:hover,
  .tabs .pill.is-active {
    font-size: 14px;
    letter-spacing: 0;
  }
}

/* ===== Menu page: "The menu" hero + "The bar" in the big bold red ===== */
.page-header h1.big-red-title.page-title-red {
  font-size: clamp(62px, 9.5vw, 155px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: var(--red, #e8202f) !important;
  max-width: none;
  margin: 0 0 22px;
  text-align: left;
}

#drinks h2.big-red-title {
  font-size: clamp(48px, 6.5vw, 103px) !important;
  margin: 0;
}

@media (max-width: 560px) {
  .page-header h1.big-red-title.page-title-red {
    font-size: clamp(45px, 13.8vw, 72px) !important;
  }

  #drinks h2.big-red-title {
    font-size: clamp(45px, 14.6vw, 69px) !important;
  }
}

/* ===== The Japanese night out.: match Izakaya · Cocktails · Late Night figcaption ===== */
.section.night-out {
  justify-content: center;
  align-items: center;
  min-height: 0;
  padding: clamp(48px, 6vw, 88px) clamp(20px, 5vw, 72px);
}

.section.night-out h2.night-out__title {
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: center;
  text-wrap: balance;
  white-space: normal;
  font-family: var(--serif, "Outfit", system-ui, sans-serif);
  font-size: clamp(19px, 2.8vw, 34px) !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
  color: #f2e8de;
}

.night-out__title .night-out__line {
  display: inline;
}

.night-out__title .night-out__line + .night-out__line::before {
  content: " ";
}

@media (max-width: 560px) {
  .section.night-out {
    padding: 40px 24px;
  }

  .section.night-out h2.night-out__title {
    font-size: clamp(17px, 5.2vw, 24px) !important;
  }
}

/* ===== Visit hero: one statement, two buttons, centered ===== */
.page-header.page-header--visit {
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: min(92vh, 900px);
}

.page-header--visit .page-header__content {
  width: 100%;
  max-width: 1100px;
  padding: calc(var(--header-h) + 48px) clamp(20px, 6vw, 80px) clamp(64px, 10vh, 120px);
}

.page-header--visit h1.visit-hero__lines {
  max-width: none;
  margin: 0 auto;
  font-family: var(--serif, "Outfit", system-ui, sans-serif);
  font-size: clamp(34px, 5.7vw, 89px) !important;
  font-weight: 300 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em;
  color: #f2e8de;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
}

.page-header--visit .visit-hero__line {
  display: block;
}

.page-header--visit .visit-hero__line--accent {
  margin-top: 0.12em;
  font-weight: 700;
  color: var(--red, #e8202f);
}

.page-header--visit .hero__actions {
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: clamp(36px, 5vw, 60px);
}

@media (max-width: 560px) {
  .page-header--visit h1.visit-hero__lines {
    font-size: clamp(26px, 8.1vw, 43px) !important;
  }

  .page-header--visit .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }

  .page-header--visit .hero__actions .btn-bento {
    min-width: 0;
    width: 100%;
  }
}

/* ===== Duo tiles: equal halves, equal height, text centered on the photo with the button below ===== */
.duo {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

.duo__tile,
.duo__tile:nth-child(2) {
  align-items: center;
  justify-content: center;
  min-height: clamp(400px, 52vh, 560px);
  padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 56px);
  text-align: center;
}

.duo__tile::after {
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0.38) 100%);
}

.duo__tile > div {
  width: min(100%, 560px);
  margin: 0 auto;
  text-align: center;
}

.duo__tile h4 {
  margin: 0 0 10px;
}

.duo__tile h3 {
  margin: 2px 0 6px;
  font-size: clamp(26px, 2.8vw, 45px);
}

.duo__tile .btn-bento {
  margin-top: 26px;
}

@media (max-width: 900px) {
  .duo {
    grid-template-columns: minmax(0, 1fr);
  }

  .duo__tile,
  .duo__tile:nth-child(2) {
    min-height: 56vh;
  }
}

/* Equal title rows so both duo CTAs align */
@media (min-width: 901px) {
  .duo__tile h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.3em;
  }
}

.duo__tile .duo__contact {
  margin: 16px auto 0;
  max-width: 32ch;
  text-align: center;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: rgba(242, 232, 222, 0.9);
}

.duo__tile .btn-bento {
  margin-top: 28px;
}

.duo__tile > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: min(100%, 420px);
}

.duo__tile > div .btn-bento,
.duo__tile > div span.btn-bento {
  align-self: center;
}

/* ===== Full-bleed photo caption: big, centered, hero-style ===== */
.fullbleed::after {
  background: radial-gradient(ellipse at 50% 50%, rgba(8, 7, 7, 0.62) 0%, rgba(8, 7, 7, 0.46) 60%, rgba(8, 7, 7, 0.36) 100%);
}

.fullbleed figcaption,
.fullbleed--right figcaption {
  left: 0;
  right: 0;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  max-width: none;
  padding: 0 clamp(20px, 5vw, 72px);
  text-align: center;
  text-wrap: balance;
  font-family: var(--serif, "Outfit", system-ui, sans-serif);
  font-size: clamp(19px, 2.8vw, 34px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #f2e8de;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
}

@media (max-width: 560px) {
  .fullbleed figcaption,
  .fullbleed--right figcaption {
    left: 0;
    right: 0;
    text-align: center;
    font-size: clamp(17px, 5.2vw, 24px);
  }
}

/* ===== Happy hour + rare menu: big red heading ===== */
.split-feature h2.hh-title,
h2.hh-title {
  margin: 0 0 18px;
  max-width: none;
  font-family: var(--serif, "Outfit", system-ui, sans-serif);
  font-size: clamp(34px, 4.5vw, 76px) !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.02em;
  color: var(--red, #e8202f) !important;
}

@media (max-width: 560px) {
  .split-feature h2.hh-title,
  h2.hh-title {
    font-size: clamp(31px, 9.5vw, 48px) !important;
  }
}

@media (max-width: 700px) {
  .fullbleed figcaption .fb-part {
    display: block;
  }

  .fullbleed figcaption .fb-sep {
    display: none;
  }
}

/* ===== Inline NOMI logo mark: N, red dot, MI (the wordmark's NOMI, without BAR) ===== */
.nomi-logo {
  display: inline-flex;
  align-items: center;
  vertical-align: baseline;
  font-family: var(--display, "Outfit", system-ui, sans-serif);
  font-size: 0.92em;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  color: inherit;
}

.nomi-logo__dot {
  display: inline-block;
  flex: none;
  width: 0.74em;
  height: 0.74em;
  margin: 0 0.05em;
  border-radius: 50%;
  background: var(--red, #e8202f);
}

/* Inside the bold red statement lines the whole mark is red, dot included */
.intro-split__line em .nomi-logo {
  display: inline-flex;
  font-size: 0.92em;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.visit-hero__line--accent .nomi-logo {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0;
}

/* Large serif settings: the mark sits a touch smaller than the serif caps */
h1 .nomi-logo,
h2 .nomi-logo,
.statement p .nomi-logo {
  font-size: 0.78em;
  font-weight: 500;
}

/* ===== Home hero wordmark: NOMIBAR in capitals, like the header logo ===== */
.uhero__word {
  text-transform: uppercase;
  letter-spacing: -0.012em;
  line-height: 0.9;
}

.uhero__dot {
  width: 0.7em;
  height: 0.7em;
  margin: 0 0.045em 0 0.05em;
}

/* The logo mark inside red statement lines: white letters, red dot (as in the header logo) */
.intro-split__line em .nomi-logo,
.visit-hero__line--accent .nomi-logo {
  color: #fff;
}

/* Logo mark inside a red button: the dot turns white so the O still reads */
.btn-bento .nomi-logo {
  color: #fff;
}

.btn-bento .nomi-logo__dot {
  background: #fff;
}

@media (max-width: 560px) {
  .btn-bento .btn__label {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 0.4em;
  }
}

.btn-bento .btn__label {
  gap: 0 0.4em;
}

.btn-bento .nomi-logo {
  font-size: 1.15em;
  font-weight: 700;
}

/* Legal pages */
.legal-page p {
  margin: 0 0 16px;
  max-width: 68ch;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(242, 232, 222, 0.86);
}

.legal-page h2 {
  margin: 0 0 12px;
  font-size: clamp(21px, 2.6vw, 31px);
}

.legal-page a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== About hero: single centered word, no photo clutter ===== */
.page-header.page-header--title {
  display: flex;
  min-height: min(42vh, 420px);
  background: #0c0b0a;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.page-header--title .page-header__content {
  display: flex;
  width: 100%;
  max-width: none;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + 48px) 24px 56px;
  text-align: center;
}

.page-header--title h1 {
  margin: 0 auto;
  max-width: none !important;
  width: auto;
  font-family: var(--serif, "Outfit", system-ui, sans-serif);
  font-size: clamp(48px, 8.6vw, 103px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #f2e8de;
  text-align: center;
}

/* ===== Statement stack: lead + support with clear hierarchy ===== */
.statement.statement--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(72px, 10vw, 160px) clamp(20px, 7.2vw, 140px);
  text-align: left;
}

.statement.statement--stack p.statement__lead,
.statement--stack > p.statement__lead {
  grid-column: auto;
  max-width: min(100%, 34ch);
  margin: 0;
  font-family: var(--serif, "Outfit", system-ui, sans-serif) !important;
  font-weight: 300 !important;
  font-size: clamp(22px, 2.8vw, 38px) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.015em;
  color: #f2e8de;
}

.statement--stack .statement__body {
  margin-top: clamp(24px, 3vw, 36px);
  max-width: min(100%, 540px);
}

.statement--stack .statement__support {
  margin: 0;
  max-width: none;
  font-family: var(--sans, Inter, system-ui, sans-serif);
  font-size: clamp(14px, 1.1vw, 15px) !important;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.01em;
  opacity: 0.8;
  color: #f2e8de;
}

.statement--stack .statement__support + .statement__support {
  margin-top: 14px;
}

.statement--stack .statement__support--close {
  opacity: 0.92;
  font-style: italic;
}

@media (max-width: 720px) {
  .statement.statement--stack p.statement__lead,
  .statement--stack > p.statement__lead {
    max-width: none;
  }
}

/* Visit location + contact CTA stacks */
.hours-board__grid--location {
  align-items: start;
}

.hours-board__grid--location .hours-board__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding-bottom: 28px;
  overflow: hidden;
}

.hours-board__grid--location .hours-board__time--text {
  font-size: clamp(17px, 1.7vw, 24px) !important;
  line-height: 1.3 !important;
  white-space: normal;
  overflow-wrap: anywhere;
}

.section.hours-board#location .visit-title {
  margin-bottom: clamp(20px, 2.5vw, 36px);
  position: relative;
  z-index: 1;
}

.hours-board__grid--location .btn-bento {
  margin-top: 8px;
}

.aside__body .visit-prose {
  max-width: 680px;
  margin: 0 0 28px;
  opacity: 0.85;
  line-height: 1.7;
}

.aside__body .link-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: min(100%, 360px);
  margin-top: 8px;
  border-bottom: 0;
}

.aside__body .link-list .btn-bento {
  width: 100%;
  min-width: 0;
}

/* Mega panel pills must win over the square .btn--red layout pass */
.mega .btn.btn--red,
.mega a.btn.btn--red {
  border-radius: 999px !important;
  border: 1px solid var(--red, #e8202f) !important;
  background: var(--red, #e8202f) !important;
  color: #fff !important;
  min-height: 44px;
  padding-right: 52px;
  overflow: hidden;
}

.mega .btn.btn--red:hover,
.mega .btn.btn--red:focus-visible,
.mega a.btn.btn--red:hover,
.mega a.btn.btn--red:focus-visible {
  background: transparent !important;
  color: var(--red, #e8202f) !important;
  border-color: var(--red, #e8202f) !important;
}

.mega .btn.btn--sm {
  padding: 9px 18px !important;
  min-height: 38px;
}

.mega .mega__promo .btn.btn--red {
  padding: 9px 18px !important;
}

.mega .btn.btn--red .chev {
  background: transparent !important;
  width: 42px;
  padding: 14px;
}

.mega .btn.btn--red:hover .chev {
  background: transparent !important;
  padding: 14px;
}


/* ===== About / split media pairs: two intentional frames ===== */
.split-feature__media--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  aspect-ratio: auto;
  max-height: none;
  overflow: visible;
  border-radius: 0;
}

.split-feature__media--pair img {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.split-feature--bleed-l .split-feature__media--pair {
  aspect-ratio: auto;
  max-height: none;
}

.split-feature--narrow .split-feature__media--pair {
  grid-column: 7 / -1;
}

@media (max-width: 760px) {
  .split-feature__media--pair {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .split-feature__media--pair img {
    aspect-ratio: 4 / 5;
  }
}

/* Full-bleed dual frame */
.fullbleed.fullbleed--pair {
  position: relative;
  display: block;
  min-height: min(72vh, 780px);
  overflow: hidden;
}

.fullbleed--pair > img {
  display: none;
}

.fullbleed--pair .fullbleed__pair {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0;
}

.fullbleed--pair .fullbleed__pair img {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
}

.fullbleed--pair::after {
  z-index: 1;
}

.fullbleed--pair figcaption {
  z-index: 2;
}

@media (max-width: 700px) {
  .fullbleed--pair .fullbleed__pair {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
  }

  .fullbleed.fullbleed--pair {
    min-height: min(90vh, 920px);
  }
}

/* Brand lockup reads like the geometric logo wordmark */
.brand__word {
  font-family: var(--display, "Outfit", system-ui, sans-serif);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}