/* Three real portrait cards; the front card turns to the back of the deck. */
.concept-art { padding-bottom: 2.5rem; }
.sample-names { position: absolute; z-index: 3; bottom: 0; left: 1.5rem; width: 112px; max-width: calc(100% - 3rem); }
.sample-name-link { position: relative; display: block; aspect-ratio: 9 / 16; text-decoration: none; color: #38232c; border-radius: .7rem; isolation: isolate; perspective: 800px; }
.sample-name-content { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fffcfa; border: 2px solid #fffcfa; border-radius: .7rem; overflow: hidden; box-shadow: 0 5px 14px #54203724; transform-origin: 50% 85%; }
.sample-name-content[data-slot="0"] { z-index: 3; transform: none; }
.sample-name-content[data-slot="1"] { z-index: 2; transform: translate(12px, -8px) rotate(7deg) scale(.98); }
.sample-name-content[data-slot="2"] { z-index: 1; transform: translate(23px, -15px) rotate(12deg) scale(.96); }
.sample-name-top { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: .7rem .35rem; background: linear-gradient(135deg, #a9294b, #e05a7a); color: white; }
.sample-name-content[data-gender="male"] .sample-name-top { background: linear-gradient(135deg, #0b6096, #1a8fd1); }
.sample-name-content[data-gender="both"] .sample-name-top, .sample-name-content[data-gender="unisex"] .sample-name-top { background: linear-gradient(135deg, #1e7e3e, #3ab86a); }
.sample-name-label { color: #fff; font-size: .75rem; line-height: 1.4; font-weight: 500; }
.sample-name-title { display: block; max-width: 100%; text-align: center; overflow-wrap: anywhere; font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.sample-name-mark { font-size: 1.4rem; line-height: 1; opacity: .7; }
.sample-name-bottom { flex: 0 0 62px; display: flex; align-items: center; justify-content: center; padding: .4rem .35rem; }
.sample-name-meaning { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-align: center; color: #674b58; font-size: .75rem; font-weight: 500; line-height: 1.4; max-width: 100%; }
.sample-name-controls { display: flex; justify-content: center; gap: .1rem; margin-top: .2rem; }
.sample-name-controls[hidden] { display: none; }
.sample-name-controls button { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: #692a42; border: 0; border-radius: .4rem; padding: .2rem .3rem; font: inherit; font-size: .8125rem; cursor: pointer; min-width: 44px; min-height: 44px; }
.sample-name-controls button:hover { background: #ffffff75; }
.sample-names :focus-visible { outline: 3px solid #662440; outline-offset: 4px; }
.concept-hero h1 .title-words { display: block; }
.concept-hero h1 .title-word-mask { display: inline-block; vertical-align: top; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.concept-hero h1 .title-word { display: inline-block; transform-origin: right bottom; }
.concept-benefit-cards article { transition: transform .45s cubic-bezier(.16,1,.3,1), background .3s, border-color .3s; transform-origin: center bottom; }
.concept-benefit-cards article:hover { transform: translateY(-7px); border-color: #dca0b4; }
.concept-benefit-cards article > span { transition: transform .5s cubic-bezier(.16,1,.3,1); transform-origin: right center; }
.concept-benefit-cards article:hover > span { transform: translateX(-6px) scale(1.12); }
.concept-steps li b { transition: transform .55s cubic-bezier(.16,1,.3,1), background .4s; }
.concept-steps li.is-current b { transform: scale(1.15); }
.concept-hero.motion-running .main-cta { animation: concept-cta-arrive 1.2s cubic-bezier(.16,1,.3,1) .6s backwards; }
@keyframes concept-cta-arrive { 0% { transform: translateY(15px) scale(.94); } 70% { transform: translateY(-3px) scale(1.025); } 100% { transform: none; } }
@media (max-width: 1050px) { .sample-names { left: 1rem; } }
@media (max-width: 720px) {
  .concept-art { padding-bottom: 3rem; }
  .sample-names { left: .85rem; max-width: calc(100% - 1.7rem); }
}
@media (prefers-reduced-motion: reduce) {
  .concept-benefit-cards article, .concept-benefit-cards article > span, .concept-steps li b { transition: none; }
  .concept-benefit-cards article:hover, .concept-benefit-cards article:hover > span, .concept-steps li.is-current b { transform: none; }
  .concept-hero.motion-running .main-cta { animation: none; }
}
/* The small deck straddles the photo edge, with space reserved underneath. */
.concept-art { --deck-width:112px; --deck-height:calc(var(--deck-width) * 16 / 9); padding-bottom:calc(var(--deck-height) / 2 + 50px); }
.sample-names { width:var(--deck-width); left:3.5rem; bottom:0; }
.sample-name-content[data-slot="1"] { transform:translate(8px,-6px) rotate(5deg) scale(.98); }
.sample-name-content[data-slot="2"] { transform:translate(16px,-11px) rotate(9deg) scale(.96); }
.sample-name-top { flex:0 0 43%; align-items:flex-start; justify-content:center; gap:.2rem; padding:.6rem .5rem .45rem; }
.sample-name-label { font-size:.625rem; opacity:.9; }
.sample-name-title { text-align:right; }
.sample-name-en { font-size:.625rem; letter-spacing:.1em; opacity:.75; text-transform:uppercase; }
.sample-name-bottom { flex:1; min-height:0; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:.4rem; padding:.5rem .4rem .35rem; }
.sample-name-meaning { text-align:right; font-size:.6875rem; font-weight:400; line-height:1.4; -webkit-line-clamp:3; }
.sample-name-origin { border-radius:20px; background:#f0f4ff; color:#256384; font-size:.5625rem; padding:.13rem .4rem; line-height:1.3; }
.sample-name-actions { display:flex; align-self:center; gap:.65rem; margin-top:auto; }
.sample-name-actions span { display:grid; place-items:center; width:22px; height:22px; font-size:.9375rem; border-radius:50%; background:#f4eff1; color:#946576; }
.sample-name-actions span:first-child { background:#a9294b; color:#fff; }
.concept-menu-toggle { display:none; }
.concept-header nav[hidden] { display:none; }
@media(max-width:720px) {
  .concept-art { padding-bottom:calc(var(--deck-height) / 2 + 50px); }
  .sample-names { left:auto; right:clamp(4rem,17vw,5rem); }
  .concept-header { position:relative; flex-wrap:nowrap; gap:.65rem; }
  .concept-header .nav-cta { margin-inline-start:auto; padding-inline:.9rem; }
  .concept-menu-toggle:not([hidden]) { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; order:4; width:44px; height:44px; flex-shrink:0; padding:9px; background:transparent; border:1px solid #d4afbd; border-radius:.55rem; cursor:pointer; }
  .concept-menu-toggle span { display:block; width:20px; height:2px; border-radius:2px; background:#682d45; transition:transform .2s,opacity .2s; }
  .concept-menu-toggle[aria-expanded=true] span:first-child { transform:translateY(7px) rotate(45deg); }
  .concept-menu-toggle[aria-expanded=true] span:nth-child(2) { opacity:0; }
  .concept-menu-toggle[aria-expanded=true] span:last-child { transform:translateY(-7px) rotate(-45deg); }
  .concept-header.menu-ready nav:not([hidden]) { position:absolute; z-index:12; top:calc(100% - .2rem); inset-inline:0; width:auto; display:flex; flex-direction:column; align-items:stretch; gap:0; background:#fffaf7; border:1px solid #e1c5cf; border-radius:.8rem; padding:.5rem; box-shadow:0 12px 28px #5c2a421a; }
  .concept-header.menu-ready nav a { padding:.6rem .8rem; border-radius:.4rem; min-height:48px; }
  .concept-header.menu-ready nav a:hover { background:#f5e1e6; }
}
@media(prefers-reduced-motion:reduce) { .concept-menu-toggle span { transition:none; } }