/* Two aligned campaign links in the first view. */
.topIntroPromos { position: relative; top: auto; right: auto; left: auto; width: 100%; margin-top: 22px; margin-bottom: 0; }
.topIntroPromos .topIntroDesc__banner { position: relative; display: block; top: auto; right: auto; width: 100%; line-height: 0; }
.topIntroPromos .topIntroDesc__banner label { line-height: 1.8; right: 0; }
.topRestaurantLink { position: relative; display: block; overflow: hidden; margin-top: 12px; padding: 16px 66px 16px 20px; border: 1px solid #d9dcd1; border-radius: 24px 6px 24px 6px; background: linear-gradient(100deg,rgba(241,246,237,.96) 0%,rgba(248,245,235,.87) 53%,rgba(248,240,231,.65) 100%), url("../img/top/recipe6.webp") center 58% / cover no-repeat; isolation: isolate; color: #276c70; text-align: left; line-height: 1.6; transition: border-color .2s, box-shadow .2s; }
.topRestaurantLink:hover { border-color: #63c3ce; box-shadow: 0 5px 16px #276c7017; }
.topRestaurantLink:focus-visible { outline: 3px solid #ff6058; outline-offset: 4px; }
.topRestaurantLink__eyebrow { display: block; color: #d54d46; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.topRestaurantLink__eyebrow > span { margin-left: .65em; color: #588181; font-weight: 500; font-size: 10px; }
.topRestaurantLink__title { display: block; margin-top: 3px; font-size: clamp(25px,2.15vw,34px); font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
.topRestaurantLink__dates { display: block; margin-top: 5px; font-size: 15px; font-weight: 700; line-height: 1.45; color: #426b65; }
.topRestaurantLink__dates > span { display: block; margin-left: 0; }
.topRestaurantLink__action { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); display: flex; flex-direction: column-reverse; gap: 4px; align-items: center; font-size: 9px; color: #427c7d; }
.topRestaurantLink__action > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #63c3ce; color: #fff; font-size: 21px; line-height: 1; }
.topIntroDesc--restaurant { margin-top: 28px; padding-top: 0; }
@media (min-width: 1025px) {
    .topFv--restaurant .topIntro { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,30vw); align-items: start; column-gap: 4vw; row-gap: 24px; padding: 0 4vw 0 7vw; margin-top: -16rem; }
    .topFv--restaurant .topIntroCopy { font-size: clamp(40px,4.4vw,84px); }
    .topFv--restaurant .topIntroCopy span:last-child { margin-left: 5vw; }
    .topIntroPromos { grid-column: 2; grid-row: 1; width: 100%; margin: 0; }
    .topIntroDesc--restaurant { grid-column: 2; margin: 0; padding: 0; }
}
@media (max-width: 1024px) {
    .topFv--restaurant .gallery { margin-top: -22rem; }
    .topFv--restaurant .topIntro { margin-top: -27rem; }
    .topFv--restaurant .topIntroCopy { font-size: 3.8rem; }
    .topIntroPromos { flex-basis: 100%; margin-top: 14px; }
    .topRestaurantLink { padding: 12px 58px 12px 16px; }
    .topRestaurantLink__title { font-size: 24px; letter-spacing: .02em; }
    .topRestaurantLink__action { right: 11px; }
    .topRestaurantLink__dates { font-size: 14px; }
}
@media (max-width: 360px) {
    .topRestaurantLink { padding-left: 12px; padding-right: 46px; }
    .topRestaurantLink__title { font-size: 21px; }
    .topRestaurantLink__eyebrow > span { font-size: 9px; margin-left: .4em; }
    .topRestaurantLink__action { right: 8px; }
    .topRestaurantLink__action > span { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .topRestaurantLink { transition: none; } }
/* Keep the animated food photographs clear of the copy and campaign links. */
.topFv--restaurant .gallery { -webkit-mask-image: linear-gradient(to bottom,#000 55%,transparent 86%); mask-image: linear-gradient(to bottom,#000 55%,transparent 86%); }
.topFv--restaurant .topIntro { z-index: 11; }

/* Fine paper grain and translucent botanical shapes. */
.topRestaurantLink::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .2; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%238c7963' filter='url(%23paper)' opacity='.6' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
.topRestaurantLink::after { content: ""; position: absolute; right: -9px; bottom: -27px; width: 100px; height: 100px; border: 1px solid #b9848929; border-radius: 65% 35% 60% 40%; transform: rotate(-25deg); background: #e4b7bd26; box-shadow: -34px -8px 0 -12px #b4cec22e, -8px -59px 0 -19px #e1adba2b; z-index: -1; pointer-events: none; }
.topRestaurantLink__title { font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif; font-weight: 600; }
.topRestaurantLink__eyebrow { color: #a45362; }
.topRestaurantLink__action > span { background: #8caaa0; }

.topRestaurantLink__eyebrow strong { display: inline-block; padding: 2px 8px; border-radius: 4px; background: #a45362; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
@media (max-width: 360px) { .topRestaurantLink__eyebrow > span { font-size: 8px; } .topRestaurantLink__eyebrow strong { padding-inline: 5px; font-size: 11px; } }

/* The mobile gallery is scaled to 50%; give its fade mask the full viewport width. */
@media (max-width: 1024px) {
    .topFv--restaurant .gallery { width: 200%; margin-left: -50%; }
}