/* Lacquer, paper and little moments of attitude. */
.arrow-mark { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; flex: none; }
.button { position: relative; isolation: isolate; overflow: hidden; }
.button::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -70% -35%;
  background: linear-gradient(105deg, transparent 38%, #ffffff20 49%, transparent 60%);
  transform: translateX(-85%) rotate(-8deg);
  pointer-events: none;
}
.button > span, .text-link > span { display: inline-flex; align-items: center; transition: transform .35s var(--ease); }
.button:focus-visible > span, .text-link:focus-visible > span { transform: translate(2px, -2px); }
.editorial .nav-links a[aria-current="location"] { color: #9c3865; }
.nav-links a[aria-current="location"]::after { transform: scaleX(1); }

/* Each section has the same hand-painted signature. */
.lacquer-line { position: relative; isolation: isolate; display: inline-block; }
.lacquer-line::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -.02em;
  right: -.06em;
  bottom: -.04em;
  height: .14em;
  background: #eab9cc;
  clip-path: polygon(0 35%, 5% 10%, 96% 0, 100% 45%, 95% 90%, 2% 100%);
  transform: rotate(-1deg) scaleX(1);
  transform-origin: left;
  transition: transform .8s var(--ease) .15s;
}
.academy .lacquer-line::after, .editorial-footer .lacquer-line::after { background: #a14d733b; }
.craft-ready .lacquer-line:not(.is-inked)::after { transform: rotate(-1deg) scaleX(0); }

/* The mystery stays sealed; its light and movement feel like a little object. */
.mystery-book { animation: book-drift 6.5s ease-in-out infinite; animation-play-state: paused; }
.teaser-art.ambient-active .mystery-book { animation-play-state: running; }
.course-teaser:nth-child(2) .mystery-book { animation-delay: -2.1s; }
.course-teaser:nth-child(3) .mystery-book { animation-delay: -4.3s; }
.course-teasers .course-teaser:nth-child(2) { transition-delay: .07s; }
.course-teasers .course-teaser:nth-child(3) { transition-delay: .14s; }
.teaser-art::after {
  content: '';
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(110deg, transparent 43%, #fff6 50%, transparent 57%);
  transform: translateX(-75%) rotate(-12deg);
  opacity: .4;
  pointer-events: none;
}

/* A price menu should be as considered as the manicure. */
.service-menu .service-tab { min-height: 40px; }
.service-item { position: relative; animation: menu-arrive .42s var(--ease) both; animation-delay: calc(var(--service-i, 0) * 35ms); }
.service-item::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: #c57599;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
  pointer-events: none;
}
.service-item[open]::after, .service-item:focus-within::after { transform: scaleX(1); }
.service-item summary { transition: background .3s, padding .35s var(--ease); border-radius: 6px; }
.service-item[open] summary { padding-inline: 10px; background: #f5e5ec88; }
.service-item[open] .service-name { color: #923257; }
.service-item[open] .service-body { animation: detail-arrive .3s var(--ease) both; }
.service-item .expand-icon { transition: transform .35s var(--ease), background .3s, border-color .3s; }

/* The punchline now has the whole departure lounge to itself. */
.travel-intro { row-gap: 20px; }
.tour-quip {
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 10px 0 11px;
  border-top: 1px dashed #bd92534d;
  text-align: center;
  color: #442335;
  font-family: 'Barlow Condensed', 'Arial Narrow', 'DM Sans', sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(15px, 3.8vw, 20px);
  line-height: 1.35;
  letter-spacing: .05px;
}
.quip-text { display: inline-block; white-space: nowrap; max-width: 100%; }
.quip-punch { position: relative; isolation: isolate; color: #84274f; font-weight: 700; }
.quip-punch::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 55% -.08em -.09em;
  background: #eeb6cc;
  clip-path: polygon(0 22%, 97% 0, 100% 67%, 4% 100%);
  transform-origin: left;
  transition: transform .7s var(--ease) .2s;
}
.craft-ready .tour-quip:not(.is-inked) .quip-punch::after { transform: scaleX(0); }
.travel-film .film-frame { box-shadow: 0 16px 32px #482e3820, 0 0 0 1px #bc945c32; }
.film-frame button { min-width: 40px; min-height: 40px; }
.film-frame button .arrow-mark { width: 12px; height: 12px; }
.credit-contact .arrow-mark { width: 11px; height: 11px; }

@keyframes book-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes menu-arrive { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes detail-arrive { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lacquer-pass { to { transform: translateX(85%) rotate(-8deg); } }
@keyframes foil-pass { to { transform: translateX(75%) rotate(-12deg); } }
@keyframes navigation-arrive { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

@media (hover: hover) and (pointer: fine) {
  .button:hover::before { animation: lacquer-pass .75s var(--ease) both; }
  .button:hover > span, .text-link:hover > span { transform: translate(2px, -2px); }
  .course-teaser:hover .teaser-art::after { animation: foil-pass .95s var(--ease) both; }
  .service-item summary:hover { background: #f5e5ec66; padding-inline: 10px; }
  .service-item summary:hover .expand-icon { border-color: #bc6d92; }
}

@media (max-width: 800px) {
  .menu-button { width: 44px; height: 44px; }
  .nav-links.open { animation: navigation-arrive .28s var(--ease) both; }
  .footer-invite .button { font-size: 11px; min-height: 48px; }
}

@media (max-width: 600px) {
  .tour-story .tour-title { min-height: 132px; }
  .tour-story .nail-crew { grid-row: 2; margin-top: 24px; }
  .travel-intro { row-gap: 17px; }
  .tour-quip { padding-top: 11px; }
  .service-menu .service-tab { min-height: 44px; }
}

@media (max-width: 360px) {
  .footer-invite { gap: 12px; }
  .footer-invite h2 { font-size: 36px; }
  .footer-invite .button { padding-inline: 12px; gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .mystery-book, .service-item, .service-item[open] .service-body, .nav-links.open { animation: none; }
  .mystery-book { translate: none; }
  .lacquer-line::after, .quip-punch::after { transform: none !important; transition: none; }
  .button::before, .teaser-art::after { display: none; }
  .service-item::after, .service-item summary, .button > span, .text-link > span { transition: none; }
}