/* 2026 art direction — mykokoro.jp */
.brand-v3 { background:#f8f6f0; color:#282621; overflow:hidden; }
.brand-v3 > [hidden] { display:none; }
.brand-v3 :where(h1,h2,h3,p,figure) { margin:0; }
.brand-v3 :where(h1,h2,h3) { font-family:var(--font-serif); font-weight:300; letter-spacing:.035em; }
.b3-eyebrow { color:#907951; font-size:10px; font-weight:500; letter-spacing:.2em; line-height:1.5; }
.b3-hero { position:relative; height:calc(100svh - 60px); min-height:650px; max-height:960px; padding-top:60px; overflow:hidden; background:#e9e4d9; }
.b3-hero-copy { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-start; box-sizing:border-box; min-height:100%; max-width:520px; padding:clamp(138px,15vh,190px) clamp(42px,6.2vw,100px) 54px; }
.b3-hero h1 { display:flex; flex-direction:column; align-items:flex-start; font-size:clamp(50px,5.4vw,78px); line-height:1; letter-spacing:.12em; margin:18px 0 20px; white-space:nowrap; text-wrap:nowrap; }
.b3-hero h1 strong { font:inherit; font-weight:400; }
.b3-hero h1 small { margin-top:15px; color:#554f45; font-family:var(--font-sans); font-size:14px; font-weight:400; letter-spacing:.18em; }
.b3-hero-copy > p:not(.b3-eyebrow) { max-width:380px; color:#5f5a52; font-size:13px; line-height:1.9; letter-spacing:.035em; }
.b3-hero-copy a, .b3-store a { display:inline-flex; align-items:center; gap:24px; color:#302d27; font-size:12px; text-decoration:none; padding-bottom:10px; margin-top:34px; border-bottom:1px solid #a48d64; transition:gap .25s ease; }
.b3-hero-copy a:hover, .b3-store a:hover { gap:34px; }
.b3-hero-actions { display:flex; align-items:flex-end; gap:28px; flex-wrap:wrap; }
.b3-hero-actions .b3-buy-link { gap:8px; color:#fff; background:#302e29; border:0; padding:13px 16px; }
.b3-hero-actions .b3-buy-link:hover { gap:8px; background:#4a453c; }
.b3-buy-link b { font-size:15px; font-weight:500; letter-spacing:.04em; }
.b3-buy-link small { color:#d7c8ab; font-size:9px; margin-right:8px; }
.v81-hero-status { display:flex; align-items:center; gap:14px; margin-top:22px; }
.v81-hero-status b { font-size:15px; font-weight:500; letter-spacing:.04em; }
.v81-hero-status b small { color:#766d60; font-size:9px; font-weight:400; }
.v81-hero-status > span, .v81-store-status > span { display:inline-flex; align-items:center; min-height:24px; padding:0 10px; color:#fff; background:#332f29; font-size:9px; font-weight:600; letter-spacing:.14em; }
.b3-hero-scene, .b3-ritual-visual { margin:0; position:relative; overflow:hidden; isolation:isolate; }
.b3-hero-scene { position:absolute; inset:0; min-height:0; height:100%; display:block; background:#f1eee8; }
.b3-scene-bg { width:100%; height:100%; object-fit:cover; display:block; }
.b3-hero-scene .b3-scene-bg { width:100%; height:100%; object-fit:cover; object-position:center; background:transparent; }
.b3-hero-scene .b3-device, .b3-ritual-visual .b3-device { display:none; }
.b3-device { position:absolute; z-index:1; display:block; width:clamp(280px,30vw,430px); height:auto; filter:drop-shadow(0 26px 28px rgba(60,45,26,.19)); }
.brand-v2 .b3-device { width:clamp(280px,30vw,430px); height:auto; object-fit:contain; }
.b3-hero-scene .b3-device { right:5.6%; bottom:12%; }
.b3-intro { max-width:880px; margin:0 auto; padding:clamp(105px,14vw,190px) 28px; text-align:center; }
.b3-intro h2 { font-size:clamp(37px,5vw,67px); line-height:1.4; margin:18px 0 20px; text-wrap:balance; }
.b3-intro h2 em { font-style:normal; color:#a58d63; }
.b3-intro > p:last-child { color:#6e685e; font-size:14px; line-height:2.1; }
.b3-ritual { display:grid; grid-template-columns:minmax(440px,.95fr) minmax(0,1.05fr); min-height:690px; background:#eae5da; }
.b3-ritual-copy { align-self:center; padding:clamp(64px,6.8vw,104px); }
.b3-ritual h2 { font-size:clamp(34px,3.25vw,48px); line-height:1.34; margin:20px 0 22px; text-wrap:balance; }
.b3-ritual h2 span { white-space:nowrap; }
.b3-ritual-copy > p:last-child { max-width:440px; color:#686258; font-size:13px; line-height:2.02; text-wrap:pretty; }
.b3-ritual-visual { min-height:600px; }
.b3-ritual-visual .b3-scene-bg { transform:none; object-fit:contain; object-position:center 25%; background:#f1eee8; }
.b3-ritual-visual .b3-device { width:clamp(260px,28vw,395px); right:17%; bottom:6%; }
.b3-steps { max-width:1220px; margin:0 auto; padding:clamp(84px,10vw,138px) 28px; display:grid; grid-template-columns:repeat(3,1fr); }
.b3-steps article { min-height:190px; padding:0 42px; border-left:1px solid #d8d1c5; }
.b3-steps article:first-child { border-left:0; padding-left:0; }
.b3-steps article:last-child { padding-right:0; }
.b3-steps span { display:block; color:#9d865e; font-size:10px; letter-spacing:.17em; margin-bottom:26px; }
.b3-steps h3 { font-size:26px; line-height:1.4; margin-bottom:10px; }
.b3-steps p { color:#716a60; font-size:12px; line-height:1.9; }
.b3-store { min-height:430px; background:#302e29; color:#f8f6f0; display:flex; align-items:center; justify-content:space-between; gap:50px; padding:clamp(65px,10vw,135px) max(28px,calc((100vw - 1164px)/2)); }
.b3-store .b3-eyebrow { color:#cab994; }
.b3-store h2 { font-size:clamp(35px,4vw,59px); line-height:1.45; margin-top:20px; text-wrap:balance; }
.b3-store a { border-color:#c4ae80; color:#f8f6f0; white-space:nowrap; margin:0; }
.b3-store a span { color:#cdb685; }
.b3-store h2 small { display:block; margin-top:14px; color:#d6c7aa; font-family:var(--font-sans); font-size:13px; font-weight:400; letter-spacing:.12em; }
.b3-store p:not(.b3-eyebrow) { max-width:560px; margin-top:18px; color:#c9c2b5; font-size:13px; line-height:1.9; }

.v81-section { max-width:1220px; margin:0 auto; padding:clamp(90px,10vw,145px) 28px; }
.v81-section > h2, .v81-ai h2, .v81-trust h2 { margin:18px 0 36px; font-size:clamp(35px,4.2vw,58px); line-height:1.35; }
.v81-card-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #d8d1c5; }
.v81-card-grid article { padding:34px 36px 0 0; }
.v81-card-grid article + article { padding-left:36px; border-left:1px solid #d8d1c5; }
.v81-card-grid span, .v81-steps span { display:block; margin-bottom:22px; color:#9d865e; font-size:10px; letter-spacing:.16em; }
.v81-card-grid h3 { min-height:76px; margin-bottom:14px; font-size:22px; line-height:1.55; }
.v81-card-grid p, .v81-ai p, .v81-trust p { color:#6e685e; font-size:13px; line-height:2; }
.v81-process { padding-top:20px; }
.v81-steps { display:grid; grid-template-columns:repeat(5,1fr); margin-top:42px; border-top:1px solid #d8d1c5; }
.v81-steps article { min-height:150px; padding:28px 20px 0; border-left:1px solid #d8d1c5; }
.v81-steps article:first-child { padding-left:0; border-left:0; }
.v81-steps h3 { font-size:17px; line-height:1.65; }
.v81-text-link { display:inline-block; margin-top:38px; padding-bottom:8px; color:#332f29; border-bottom:1px solid #a48d64; font-size:12px; text-decoration:none; }
.v81-ai { padding:clamp(84px,9vw,125px) max(28px,calc((100vw - 1164px)/2)); color:#f8f6f0; background:#302e29; }
.v81-ai .b3-eyebrow { color:#cab994; }
.v81-ai h2 { margin-bottom:22px; }
.v81-ai p:last-child { max-width:820px; color:#d6d0c5; }
.v81-trust { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.v81-trust article { padding-right:58px; }
.v81-trust article + article { padding:0 0 0 58px; border-left:1px solid #d8d1c5; }
.v81-trust h2 { margin-bottom:16px; font-size:clamp(29px,3vw,42px); }
.v81-store-status { display:flex; min-width:210px; flex-direction:column; align-items:flex-start; gap:14px; }
.v81-store-status b { font-size:28px; font-weight:400; }
.v81-store-status b small { display:block; margin-top:5px; color:#c9c2b5; font-size:10px; font-weight:400; }
.v81-store-status a { margin-top:6px; }

/* Latin copy needs room to compose naturally; Japanese remains intentionally concise. */
html[lang="en"] .b3-hero h1 { max-width:570px; font-size:clamp(36px,3.15vw,50px); white-space:normal; text-wrap:balance; }
html[lang="en"] .b3-ritual h2 span { white-space:normal; }
html[lang="en"] .b3-store h2 { max-width:620px; }

/* Keep the navigation inside the hero atmosphere instead of as a detached white strip. */
body:has(.brand-v3) .k-header { background:rgba(250,248,243,.34); border-bottom-color:rgba(79,64,42,.10); backdrop-filter:blur(14px) saturate(1.12); -webkit-backdrop-filter:blur(14px) saturate(1.12); }
body:has(.brand-v3) .k-header-inner { position:relative; max-width:none; height:68px; padding:0 clamp(28px,4vw,64px); }
body:has(.brand-v3) .k-nav { position:absolute; left:50%; transform:translateX(-50%); gap:30px; }
body:has(.brand-v3) .k-nav a { font-size:11px; letter-spacing:.07em; color:rgba(44,39,32,.72); }
body:has(.brand-v3) .k-actions { gap:20px; }
body:has(.brand-v3) .k-store-link { font-size:11px; letter-spacing:.08em; }

@media (max-width:760px) {
  .b3-hero { height:calc(100svh - 60px); min-height:610px; padding-top:60px; }
  .b3-hero-copy { min-height:100%; max-width:310px; padding:112px 24px 170px; justify-content:flex-start; }
  .b3-hero h1 { font-size:clamp(48px,13vw,62px); line-height:1; margin-top:15px; white-space:normal; text-wrap:balance; }
  .b3-hero h1 small { font-size:13px; margin-top:13px; }
  .b3-hero-copy > p:not(.b3-eyebrow) { font-size:12px; line-height:1.95; }
  .b3-hero-copy a { margin-top:28px; }
  .b3-hero-actions { gap:0 18px; }
  .b3-hero-scene { inset:0; height:100%; }
  .b3-hero-scene .b3-scene-bg { width:100%; height:100%; object-fit:cover; object-position:62% center; }
  body:has(.brand-v3) .k-header-inner { height:60px; padding:0 22px; }
  .b3-device, .brand-v2 .b3-device { width:61vw; height:auto; }
  .b3-hero-scene .b3-device { right:6%; bottom:10%; }
  .b3-intro { padding:104px 24px; text-align:left; }
  .b3-intro h2 { font-size:40px; }
  .b3-ritual { grid-template-columns:1fr; min-height:0; }
  .b3-ritual-copy { padding:80px 24px 55px; }
  .b3-ritual h2 { font-size:clamp(34px,9.8vw,38px); }
  .b3-ritual-visual { min-height:0; height:108vw; }
  .b3-ritual-visual .b3-device { width:58vw; right:15%; bottom:4%; }
  .b3-steps { grid-template-columns:1fr; padding:76px 24px; }
  .b3-steps article, .b3-steps article:first-child, .b3-steps article:last-child { min-height:0; border-left:0; border-top:1px solid #d8d1c5; padding:25px 0; }
  .b3-steps article:first-child { border-top:0; padding-top:0; }
  .b3-steps span { margin-bottom:14px; }
  .b3-steps h3 { font-size:23px; }
  .b3-store { min-height:0; display:block; padding:78px 24px; }
  .b3-store h2 { font-size:39px; }
  .b3-store a { margin-top:40px; }
  html[lang="en"] .b3-hero h1 { font-size:clamp(34px,9.3vw,40px); }
  .v81-hero-status { margin-top:16px; }
  .v81-section { padding:80px 24px; }
  .v81-section > h2, .v81-ai h2 { font-size:36px; }
  .v81-card-grid, .v81-steps, .v81-trust { grid-template-columns:1fr; }
  .v81-card-grid article, .v81-card-grid article + article { min-height:0; padding:28px 0; border-left:0; border-top:1px solid #d8d1c5; }
  .v81-card-grid article:first-child { border-top:0; }
  .v81-card-grid h3 { min-height:0; }
  .v81-process { padding-top:8px; }
  .v81-steps article, .v81-steps article:first-child { min-height:0; padding:24px 0; border-left:0; border-bottom:1px solid #d8d1c5; }
  .v81-ai { padding:74px 24px; }
  .v81-trust article, .v81-trust article + article { padding:34px 0; border-left:0; border-top:1px solid #d8d1c5; }
  .v81-trust article:first-child { border-top:0; }
  .v81-store-status { margin-top:38px; }
}