/* Shared finishing layer: typography, motion, accessibility and perceived quality. */
:root {
  --site-ease: cubic-bezier(.22, 1, .36, 1);
  --site-radius: clamp(20px, 2.4vw, 34px);
  --site-shadow: 0 24px 70px rgba(17, 17, 17, .09);
  --site-shadow-hover: 0 34px 90px rgba(17, 17, 17, .14);
}

html {
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-feature-settings: "palt" 1, "kern" 1;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  color: #111;
  background: #e8c77c;
}

:where(h1, h2, h3, summary, .price, .hero-price) {
  text-wrap: balance;
}

:where(p, li) {
  text-wrap: pretty;
}

:where(section[id], details[id]) {
  scroll-margin-top: 94px;
}

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid #d4a13c;
  outline-offset: 4px;
}

:where(a, button, summary) {
  -webkit-tap-highlight-color: transparent;
}

img {
  height: auto;
}

/* Quiet entrance motion, added progressively by site-polish.js. */
.site-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s var(--site-ease), transform .75s var(--site-ease);
}

.site-reveal.site-reveal-visible {
  opacity: 1;
  transform: none;
}

/* RYON builds its product cards after DOM load; never hide that store UI. */
.ryon-page .site-reveal {
  opacity: 1;
  transform: none;
}

/* Global tactile polish without changing each brand's palette. */
:where(.card, .business-service-card, .business-brand-service-card, .event-card, .service-card, .voice-social-card, .kanpai-card) {
  transition: transform .32s var(--site-ease), box-shadow .32s var(--site-ease), border-color .32s ease;
}

@media (hover: hover) {
  :where(.card, .business-service-card, .business-brand-service-card, .event-card, .service-card, .voice-social-card, .kanpai-card):hover {
    transform: translateY(-5px);
    box-shadow: var(--site-shadow-hover);
  }
}

/* Portal: equal optical logo footprint, irrespective of transparent padding. */
.portal-page .welcome-card {
  border-radius: var(--site-radius);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 24px 64px rgba(0, 0, 0, .2);
}

.portal-page .welcome-logo-wrap {
  width: 220px !important;
  height: 108px !important;
  max-width: 82% !important;
  max-height: none !important;
  margin: 0 auto 16px !important;
  overflow: visible !important;
}

.portal-page .welcome-logo-wrap img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform-origin: center;
}

.portal-page .ryota-logo-wrap img { transform: scale(2.25); }
.portal-page .neon-logo-wrap img { transform: scale(1.08); }
.portal-page .ryon-logo-wrap {
  margin-bottom: 24px !important;
  overflow: hidden !important;
}
.portal-page .ryon-logo-wrap img { transform: scale(.82); }
.portal-page .voice-logo-wrap img { transform: scale(.82); }
.portal-page .torutas-logo-wrap {
  margin-bottom: 26px !important;
}
.portal-page .torutas-logo-wrap img { transform: translateY(-6px) scale(.58); }

.portal-page .welcome-card > span:not(.welcome-logo-wrap) {
  letter-spacing: .12em;
}

/* NEON: let photographs read as works, not thumbnails. */
body:not(.music-page):not(.ryon-page):not(.voice-page):not(.kanpai-page):not(.torutas-page):not(.eventplus-page) .site-header {
  box-shadow: 0 12px 34px rgba(0, 0, 0, .08);
}

.neon-business-page :where(.business-service-card, .business-price-card, .business-merit-card, .business-flow-card) {
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow);
}

.neon-business-page .business-service-image {
  overflow: hidden;
}

.neon-business-page .business-service-image img {
  transition: transform .8s var(--site-ease);
}

.neon-business-page :where(.business-section-header, .business-final-copy) > p {
  max-width: 66ch;
}

.neon-business-page .business-brand-service-card {
  overflow: hidden;
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow);
}

@media (hover: hover) {
  .neon-business-page .business-service-card:hover .business-service-image img {
    transform: scale(1.035);
  }
}

/* 73Voice: generous cards, clearer hierarchy and touch targets. */
.voice-page :where(.voice-private-card, .voice-social-card, details.voice-private-card) {
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow);
}

.voice-page details > summary {
  min-height: 112px;
}

.voice-page .voice-socials {
  padding-inline: clamp(22px, 5vw, 64px);
}

.voice-page .voice-private {
  gap: clamp(14px, 2vw, 22px);
}

.voice-page :where(.voice-private-section, .voice-faq-section, .voice-contact-panel, .voice-social-panel, .voice-works-section) {
  overflow: clip;
}

.voice-page .voice-fineprint {
  margin: 24px clamp(18px, 4vw, 56px) 34px;
  padding: 18px 20px;
  border: 1px solid rgba(154, 119, 48, .18);
  border-radius: 18px;
  background: rgba(247, 241, 225, .74);
}

.voice-page .voice-social-panel {
  padding-inline: clamp(24px, 5vw, 64px);
}

.voice-page .voice-footer-brand p {
  letter-spacing: .02em;
  font-weight: 700;
}

/* RYOTA IWAKOSHI: turn request choices into a deliberate editorial system. */
.music-page .request-picker {
  gap: clamp(16px, 2vw, 28px);
}

.music-page .request-card {
  overflow: clip;
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow);
}

.music-page .request-card-media {
  overflow: hidden;
}

.music-page .request-card-media img {
  transition: transform .8s var(--site-ease), filter .5s ease;
}

.music-page .request-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(215, 188, 122, .12);
  border: 1px solid rgba(215, 188, 122, .28);
}

@media (hover: hover) {
  .music-page .request-card:hover .request-card-media img {
    transform: scale(1.035);
  }
}

/* RYON: stronger product-stage rhythm while preserving the fashion identity. */
.ryon-page :where(.ryon-product-stage, .ryon-product-card, .ryon-concept-grid) {
  border-radius: var(--site-radius);
}

/* Keep the compact RYON mark aligned with the other brand headers. */
.ryon-page .ryon-brand {
  flex: 0 0 auto;
  width: 48px;
  height: 32px;
}

.ryon-page .ryon-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ryon-page .ryon-product-card {
  overflow: clip;
  transition: transform .32s var(--site-ease), box-shadow .32s var(--site-ease);
}

.ryon-page .ryon-product-thumb img {
  transition: transform .7s var(--site-ease);
}

@media (hover: hover) {
  .ryon-page .ryon-product-card:hover { transform: translateY(-5px); }
  .ryon-page .ryon-product-card:hover .ryon-product-thumb img { transform: scale(1.035); }
}

/* Independent service brands: premium spacing, crisp surfaces. */
.torutas-page :where(.card, .price-card, .creative-staff-card),
.eventplus-page :where(.service-card, .event-card, .price-card, .faq-list details),
.kanpai-page :where(.kanpai-card, .kanpai-route-card) {
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow);
}

.eventplus-page :where(.service-card, .event-card) {
  overflow: clip;
}

.eventplus-page :where(.service-card, .event-card) .media-placeholder {
  transition: transform .7s var(--site-ease), filter .5s ease;
}

.kanpai-page :where(.choice-card, .kanpai-choice) {
  border-radius: var(--site-radius);
}

.kanpai-page .choice-card {
  transition: transform .32s var(--site-ease), box-shadow .32s var(--site-ease);
}

@media (hover: hover) {
  .eventplus-page :where(.service-card, .event-card):hover .media-placeholder { transform: scale(1.018); }
  .kanpai-page .choice-card:hover { transform: translateY(-5px); box-shadow: var(--site-shadow-hover); }
}

.torutas-page .torutas-header,
.eventplus-page .site-header,
.kanpai-page .kanpai-header {
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

@media (max-width: 620px) {
  html { scroll-padding-top: 76px; }

  .portal-page .welcome-screen {
    padding: 24px 18px 42px;
  }

  .portal-page .welcome-card {
    grid-template-rows: 124px auto auto auto;
    min-height: 348px;
    padding: 26px 22px;
  }

  .portal-page .welcome-logo-wrap {
    width: 196px !important;
    height: 118px !important;
    max-width: 78% !important;
    margin-bottom: 12px !important;
  }

  .portal-page .ryon-logo-wrap {
    margin-bottom: 22px !important;
  }

  .portal-page .ryon-logo-wrap img {
    transform: scale(.74);
  }

  .portal-page .torutas-logo-wrap {
    margin-bottom: 30px !important;
  }

  .portal-page .torutas-logo-wrap img {
    transform: translateY(-8px) scale(.54);
  }

  .ryon-page .ryon-header {
    padding: 14px 18px;
  }

  .ryon-page .ryon-brand {
    width: 44px;
    height: 28px;
  }

  .voice-page details > summary {
    min-height: 104px;
  }

  .voice-page .voice-fineprint {
    margin-inline: 14px;
    padding: 16px;
  }

  .voice-page .voice-social-panel {
    padding-inline: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .site-reveal { opacity: 1; transform: none; }
}

/* Final portal logo system: one canvas, optically balanced artwork. */
.portal-page .welcome-logo-wrap {
  width: 220px !important;
  height: 132px !important;
  max-width: 82% !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.portal-page .welcome-logo-wrap img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

.portal-page .ryota-logo-wrap img,
.portal-page .neon-logo-wrap img { padding: 9px 0 !important; }

.portal-page .ryon-logo-wrap img,
.portal-page .voice-logo-wrap img,
.portal-page .torutas-logo-wrap img { padding: 0 !important; }

.portal-page .welcome-actions strong {
  max-width: 100%;
  font-size: clamp(1.35rem, 2.8vw, 2.1rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.portal-page .welcome-card > span:not(.welcome-logo-wrap) {
  margin-top: 14px;
}

@media (max-width: 1180px) {
  .portal-page .welcome-actions strong {
    font-size: clamp(1.2rem, 3.7vw, 1.8rem);
  }
}

@media (max-width: 620px) {
  .portal-page .welcome-logo-wrap {
    width: 196px !important;
    height: 96px !important;
    max-width: 78% !important;
    margin-bottom: 0 !important;
  }

  .portal-page .welcome-actions strong {
    font-size: clamp(1.45rem, 7vw, 2rem);
  }
}