@import url("./assets/fonts/noto-sans-jp/index.css");
@import url("./assets/fonts/noto-serif-jp/index.css");

:root{
  --mm-paper:#fffefd;--mm-ink:#171513;--mm-wine:#8c1029;--mm-wine-dark:#741021;
  --mm-muted:#5c5652;--mm-line:rgba(55,45,40,.14);--mm-soft:#f1ede9;--mm-white:#fff;
  --mm-serif:"Noto Serif JP Variable","Noto Serif JP",serif;
  --mm-sans:"Noto Sans JP Variable","Noto Sans JP",sans-serif;
  --mm-content:min(1312px,calc(100% - 80px));--mm-focus:0 0 0 3px rgba(173,23,52,.24);
}
*{box-sizing:border-box}[hidden]{display:none!important}html{background:var(--mm-paper);scroll-behavior:smooth}body{margin:0;background:var(--mm-paper);color:var(--mm-ink);font-family:var(--mm-sans);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}body :where(button,input,select,textarea){font:inherit}body :where(h1,h2,h3,.mm-site-brand){font-family:var(--mm-serif)}body a{color:inherit}body img{max-width:100%}body :where(a,button,input,select,textarea):focus-visible{outline:0;box-shadow:var(--mm-focus);position:relative;z-index:2}
.mm-site-header{height:74px;padding:0 max(40px,calc((100% - 1360px)/2));display:grid;grid-template-columns:1fr auto;align-items:center;border-bottom:1px solid var(--mm-line);background:rgba(255,253,251,.97);position:sticky;top:0;z-index:80}.mm-site-brand{gap:10px;text-decoration:none;white-space:nowrap;line-height:1}.mm-brand-lockup{width:252px;height:auto;display:block}.mm-brand-mark{width:32px;height:32px;flex:0 0 32px;display:block}.mm-brand-copy{display:grid;gap:3px;color:var(--mm-ink)}.mm-brand-latin{font-size:18px;font-weight:650;letter-spacing:.16em}.mm-brand-latin em{color:var(--mm-wine);font-style:normal}.mm-brand-jp{font-family:var(--mm-sans);color:var(--mm-muted);font-size:9px;font-weight:650;letter-spacing:.25em}.mm-site-nav{align-self:stretch;display:flex;gap:58px}.mm-site-nav a{height:100%;display:grid;place-items:center;position:relative;color:var(--mm-ink);font-size:14px;font-weight:600;text-decoration:none;letter-spacing:.05em}.mm-site-nav a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:13px;height:2px;background:var(--mm-wine)}.mm-nav-tablet,.mm-site-menu-button{display:none}.mm-site-menu{position:fixed;inset:0;z-index:100;background:rgba(33,29,29,.32);backdrop-filter:blur(8px)}.mm-site-menu>nav,.mm-site-menu-head,.mm-site-menu-results{width:min(420px,100%);margin-left:auto;background:var(--mm-paper)}.mm-site-menu-head{height:74px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--mm-line);font-family:var(--mm-serif);font-weight:650}.mm-site-menu-head button{width:44px;height:44px;border:0;background:transparent;font-size:28px}.mm-site-menu>nav{padding:16px 22px}.mm-site-menu>nav a{min-height:58px;display:flex;align-items:center;border-bottom:1px solid var(--mm-line);font-family:var(--mm-serif);font-size:19px;text-decoration:none}.mm-site-menu-results{min-height:64px;padding:12px 22px 26px;display:flex;justify-content:space-between;color:var(--mm-wine);font-weight:700;text-decoration:none}.mm-site-footer{padding:54px max(40px,calc((100% - 1312px)/2));display:grid;grid-template-columns:1fr 2fr;gap:60px;border-top:1px solid var(--mm-line);background:var(--mm-paper)}.mm-site-footer p{margin:12px 0 0;color:var(--mm-muted);font-size:12px}.mm-site-footer nav{display:flex;justify-content:flex-end;align-content:start;gap:16px 26px;flex-wrap:wrap}.mm-site-footer nav a{font-size:12px;text-decoration:none}.mm-bottom-nav{display:none}
.mm-page,.beauty-page{--paper:var(--mm-paper);--ink:var(--mm-ink);--rose:var(--mm-wine);--rose-dark:var(--mm-wine-dark);--line:var(--mm-line);--serif:var(--mm-serif);--sans:var(--mm-sans);font-family:var(--mm-sans)!important;background:var(--mm-paper)!important}.mm-page :where(h1,h2,h3),.beauty-page :where(h1,h2,h3){font-family:var(--mm-serif)!important}.mm-page :where(button,input,select,textarea),.beauty-page :where(button,input,select,textarea){font-family:var(--mm-sans)!important}
@media(min-width:768px) and (max-width:1100px){.mm-site-header{grid-template-columns:1fr auto;gap:28px;padding-inline:28px}.mm-site-nav{display:none}.mm-site-menu-button{width:44px;min-width:44px;height:44px;padding:0;display:grid;place-items:center;border:0;background:transparent;color:var(--mm-ink)}.mm-site-menu-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.mm-site-menu-button svg{width:27px;fill:none;stroke:currentColor;stroke-width:1.7}}
@media(max-width:767px){:root{--mm-content:calc(100% - 32px)}html{scroll-padding-bottom:76px}body{padding-bottom:70px}.mm-site-header{height:62px;padding:0 14px;grid-template-columns:1fr auto}.mm-site-brand{gap:8px}.mm-brand-mark{width:28px;height:28px;flex-basis:28px}.mm-brand-latin{font-size:14px;letter-spacing:.12em}.mm-brand-jp{font-size:8px;letter-spacing:.2em}.mm-site-nav{display:none}.mm-site-menu-button{width:44px;height:44px;padding:0;display:grid;place-items:center;border:0;background:transparent}.mm-site-menu-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.mm-site-menu-button svg{width:24px;fill:none;stroke:currentColor;stroke-width:1.5}.mm-site-menu-head{height:62px}.mm-site-footer{padding:44px 20px 96px;grid-template-columns:1fr;gap:30px}.mm-site-footer nav{justify-content:flex-start}.mm-bottom-nav{height:70px;padding:5px max(8px,env(safe-area-inset-left)) max(5px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:90;border-top:1px solid var(--mm-line);background:rgba(255,253,251,.97);backdrop-filter:blur(12px)}.mm-bottom-nav :where(a,button){min-width:0;min-height:54px;padding:4px;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--mm-ink);font-size:10px;font-weight:650;text-decoration:none}.mm-bottom-nav span{font-size:18px;line-height:1}html.mm-menu-open,body.mm-menu-open{overflow:hidden;overscroll-behavior:none}}

/* Brand links are part of the navigation, so retain a full touch target even
   when the visual wordmark itself is shorter than 44px. */
.mm-site-brand{min-height:44px;display:inline-flex;align-items:center}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}}
@media(max-width:767px){.mm-bottom-nav{grid-template-columns:repeat(5,1fr)}}
@media(max-width:767px){html{scroll-padding-bottom:68px}body{padding-bottom:62px}.mm-bottom-nav{height:62px;padding-top:3px;padding-bottom:max(3px,env(safe-area-inset-bottom))}.mm-bottom-nav :where(a,button){min-height:48px;gap:1px;font-size:9px;line-height:1.15;white-space:nowrap;word-break:keep-all;overflow:hidden}.mm-bottom-nav span{font-size:16px;flex:0 0 auto}}
@media(max-width:767px){.mm-site-footer{padding:30px 18px 76px;gap:20px}.mm-site-footer p{margin-top:8px}.mm-site-footer nav{gap:10px 20px}}

/* 2026-08 brand refinement
   Keep the interface editorial and tactile without turning every section into
   a rounded software card. These rules intentionally sit in the shared shell
   so legacy, diagnosis, catalogue and account routes inherit one language. */
:root{
  --mm-wine-soft:#f8e9ec;
  --mm-wine-faint:#fff6f7;
  --mm-hairline:rgba(82,66,62,.18);
  --mm-shadow-float:0 14px 34px rgba(48,34,31,.09);
  --mm-motion-fast:160ms;
}
body{font-feature-settings:"palt" 1,"kern" 1;text-rendering:optimizeLegibility}
body :where(h1,h2,h3){text-wrap:balance}
body :where(p,li,dd){text-wrap:pretty}
body :where(button,a,input,select,textarea){-webkit-tap-highlight-color:transparent}
.mm-site-header{box-shadow:0 1px 0 rgba(255,255,255,.75)}
.mm-site-nav a{transition:color var(--mm-motion-fast) ease}
.mm-site-nav a:hover{color:var(--mm-wine)}
.mm-site-nav a[aria-current=page]::after{left:12%;right:12%;bottom:10px;height:1px}
.mm-site-menu-button{transition:background-color var(--mm-motion-fast) ease,color var(--mm-motion-fast) ease,transform var(--mm-motion-fast) ease}
.mm-site-menu-button:active{transform:scale(.94)}
.mm-site-footer nav a{min-height:44px;padding-block:7px;display:inline-flex;align-items:center;text-underline-offset:5px}

/* Shared action finish: a quiet inner keyline and a short physical response.
   The geometry stays square enough for a Japanese editorial brand. */
:where(.home-v3-button,.mm-button,.beauty-primary,.mirroria-action button,.mirroria-result-actions a,.mirroria-result-actions button,.mm-auth-form button,.catalog-face-quicklink,.phase1-approved-bottom-cta,.mm-account-result-actions a,.mm-account-result-actions button){
  position:relative;isolation:isolate;overflow:hidden;
  transition:transform var(--mm-motion-fast) ease,box-shadow var(--mm-motion-fast) ease,background-color var(--mm-motion-fast) ease,border-color var(--mm-motion-fast) ease,color var(--mm-motion-fast) ease
}
:where(.home-v3-button,.mm-button,.beauty-primary,.mirroria-action button,.mirroria-result-actions a,.mirroria-result-actions button,.mm-auth-form button,.catalog-face-quicklink,.phase1-approved-bottom-cta)::before{
  content:"";position:absolute;inset:4px;z-index:-1;border:1px solid rgba(255,255,255,.28);pointer-events:none
}
:where(.home-v3-button.secondary,.mm-button:not(.primary),.mirroria-result-actions button,.catalog-face-quicklink)::before{border-color:rgba(173,23,52,.16)}
@media(hover:hover) and (pointer:fine){
  :where(.home-v3-button,.mm-button,.beauty-primary,.mirroria-action button,.mirroria-result-actions a,.mirroria-result-actions button,.mm-auth-form button,.catalog-face-quicklink,.phase1-approved-bottom-cta,.mm-account-result-actions a,.mm-account-result-actions button):hover{transform:translateY(-2px);box-shadow:var(--mm-shadow-float)}
}
:where(.home-v3-button,.mm-button,.beauty-primary,.mirroria-action button,.mirroria-result-actions a,.mirroria-result-actions button,.mm-auth-form button,.catalog-face-quicklink,.phase1-approved-bottom-cta,.mm-account-result-actions a,.mm-account-result-actions button):active{transform:translateY(1px) scale(.985);box-shadow:none}

/* Older content routes use these names. Normalise them instead of carrying a
   second pink, rounded-card design system. */
.site-header,.site-footer{background:var(--mm-paper)!important;border-color:var(--mm-line)!important}
.site-header .brand,.site-footer .brand{font-family:var(--mm-serif)!important}
.site-header .main-nav a,.site-header .mm-static-product-nav a{font-family:var(--mm-sans)!important}
.button.primary,.ai-analyze-button,.question-actions .next,.result-actions .primary-result{background:var(--mm-wine)!important;border-radius:2px!important;box-shadow:none!important}
.blog-featured,.article-card,.article-hero,.cms-article-body figure img,.cms-article-body .callout,.article-cta,.contact-box{border-radius:2px!important;box-shadow:none!important}
.blog-featured,.article-card,.contact-box{border-color:var(--mm-line)!important}
.contact-box a{color:var(--mm-wine-dark)!important}

@media(max-width:767px){
  .mm-site-header{box-shadow:0 8px 22px rgba(45,32,29,.035)}
  .mm-bottom-nav{height:64px;background:rgba(255,253,251,.975);box-shadow:0 -8px 28px rgba(45,32,29,.055)}
  .mm-bottom-nav :where(a,button){position:relative;min-height:50px;font-size:9px;letter-spacing:.02em;overflow:visible}
  .mm-bottom-nav :where(a[aria-current=page],button[aria-expanded=true]){color:var(--mm-wine)}
  .mm-bottom-nav a[aria-current=page]::after{content:"";position:absolute;left:34%;right:34%;bottom:1px;height:2px;background:var(--mm-wine)}
  .mm-site-footer{border-top-color:var(--mm-hairline)}
}

/* Final phone label floor: five bespoke icons stay compact while the Japanese
   labels remain readable without zooming. */
@media(max-width:767px){
  .mm-brand-latin{font-size:15px}
  .mm-bottom-nav :where(a,button){font-size:11px;line-height:1.15}
  .mm-bottom-nav b{font-size:11px;line-height:1.15}
  .mm-bottom-nav .mm-bottom-icon{width:27px;height:27px;flex-basis:27px}
}

/* Wide displays keep an editorial canvas instead of stretching every image
   and content column across the physical 4K panel. */
@media(min-width:1600px){
  :root{--mm-content:min(1560px,calc(100% - 128px))}
  .mm-site-header{height:82px;padding-inline:max(64px,calc((100% - 1680px)/2))}
  .mm-brand-mark{width:36px;height:36px;flex-basis:36px}
  .mm-brand-latin{font-size:20px}
  .mm-site-nav{gap:64px}
  .mm-site-nav a{font-size:15px}
  .mm-site-footer{padding-inline:max(64px,calc((100% - 1560px)/2))}
}
@media(prefers-reduced-motion:reduce){
  :where(.mm-site-nav a,.mm-site-menu-button,.home-v3-button,.mm-button,.beauty-primary,.mirroria-action button,.mirroria-result-actions a,.mirroria-result-actions button,.mm-auth-form button,.catalog-face-quicklink,.phase1-approved-bottom-cta,.mm-account-result-actions a,.mm-account-result-actions button){transition:none!important}
}

/* Quiet Editorial production shell. Applied by the new body contract so older
   routes remain stable while each approved surface migrates to qe-site. */
.qe-site .mm-site-header{
  height:112px;
  padding:0 clamp(44px,3.2vw,60px);
  grid-template-columns:1fr auto;
  border-bottom:1px solid var(--qe-rule);
  background-color:rgba(248,246,244,.985);
  background-image:url("./assets/editorial/paper-stock-v1.webp");
  background-size:1024px 1024px;
  box-shadow:none;
  backdrop-filter:none;
}
.qe-site .mm-site-brand{gap:0}
.qe-site .mm-brand-lockup{width:clamp(268px,23vw,322px);height:auto;display:block}
.qe-site .mm-site-nav{gap:clamp(36px,4vw,64px)}
.qe-site .mm-site-nav a{
  color:var(--qe-ink);
  font-size:13px;
  font-weight:560;
  letter-spacing:.055em;
}
.qe-site .mm-site-nav a[aria-current=page]::after{right:18%;bottom:25px;left:18%;height:1px;background:var(--qe-wine)}
.qe-site .mm-site-menu{
  background:rgba(20,16,15,.22);
  backdrop-filter:blur(10px);
}
.qe-site .mm-site-menu>nav,
.qe-site .mm-site-menu-head,
.qe-site .mm-site-menu-results{background:var(--qe-paper)}
.qe-site .mm-site-menu-head{height:80px;border-bottom-color:var(--qe-rule);font-family:var(--qe-display)}
.qe-site .mm-site-menu>nav{padding:18px 28px}
.qe-site .mm-site-menu>nav a{min-height:64px;border-bottom-color:var(--qe-rule);font-family:var(--qe-display);font-weight:450}
.qe-site .mm-site-menu-results{color:var(--qe-wine)}

.qe-site .mm-site-footer{
  min-height:212px;
  padding:48px var(--qe-gutter);
  grid-template-columns:40.7% 59.3%;
  gap:0;
  align-items:start;
  border-top:1px solid var(--qe-rule);
  background-color:var(--qe-canvas);
  background-image:url("./assets/editorial/paper-stock-v1.webp");
  background-size:1024px 1024px;
}
.qe-site .mm-site-footer-brand p{margin-top:24px;color:var(--qe-ink-muted);font-size:11px;letter-spacing:.02em}
.qe-site .mm-site-footer-links{min-width:0;display:grid;gap:32px}
.qe-site .mm-site-footer nav{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:nowrap}
.qe-site .mm-site-footer nav a{padding:5px 0;color:var(--qe-ink);font-size:11px;letter-spacing:.02em;text-decoration:none}
.qe-site .mm-site-footer-legal{justify-content:flex-start!important;gap:26px!important}
.qe-site .mm-site-footer-legal :where(a,span){color:var(--qe-ink-muted);font-size:10px;white-space:nowrap}
.qe-site .mm-site-footer-legal span{margin-left:auto}

@media(min-width:768px) and (max-width:1100px){
  .qe-site .mm-site-header{height:76px;padding-inline:28px;grid-template-columns:1fr auto}
  .qe-site .mm-brand-lockup{width:220px}
  .qe-site .mm-site-nav{display:none}
  .qe-site .mm-site-menu-button{
    width:44px;
    min-width:44px;
    height:44px;
    padding:0;
    display:grid;
    place-items:center;
    border:0;
    background:transparent;
    color:var(--qe-ink);
  }
  .qe-site .mm-site-menu-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .qe-site .mm-site-menu-button svg{width:27px;stroke-width:1.7}
  .qe-site .mm-site-footer{padding-inline:38px}
  .qe-site .mm-site-footer nav{gap:14px}
}

/* The approved mobile shell is the brand header plus hamburger drawer. The
   drawer contains every primary route and My Results, so the legacy dock is
   removed without reducing navigation reach. */
@media(max-width:767px){
  html{scroll-padding-bottom:0!important}
  body{padding-bottom:0!important}
  .mm-bottom-nav{display:none!important}
  .qe-site .mm-site-header{
    height:58px;
    padding:0 18px;
    grid-template-columns:1fr auto;
    position:relative;
    box-shadow:none;
  }
  .qe-site .mm-site-brand{gap:0}
  .qe-site .mm-brand-lockup{width:174px}
  .qe-site .mm-site-menu-button{width:44px;height:44px;color:var(--qe-ink)}
  .qe-site .mm-site-menu-button svg{width:28px;stroke-width:1.7}
  .qe-site .mm-site-menu-head{height:58px}
  .qe-site .mm-site-footer{
    min-height:0;
    padding:48px 20px;
    grid-template-columns:1fr;
    gap:36px;
  }
  .qe-site .mm-site-footer-links{gap:24px}
  .qe-site .mm-site-footer nav{justify-content:flex-start;gap:14px 24px;flex-wrap:wrap}
  .qe-site .mm-site-footer-legal{gap:12px 20px!important}
  .qe-site .mm-site-footer-legal span{width:100%;margin:10px 0 0}
}

/* Bespoke mobile navigation icon set.  Inline strokes keep every route crisp
   at device scale and share the same quiet editorial weight as the wordmark. */
@media(max-width:767px){
  html{scroll-padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .mm-bottom-nav{height:calc(66px + env(safe-area-inset-bottom));padding:5px 5px max(5px,env(safe-area-inset-bottom));grid-template-columns:repeat(5,minmax(0,1fr));column-gap:1px;border-top-color:var(--mm-hairline)}
  .mm-bottom-nav :where(a,button){min-width:0;min-height:54px;padding:3px 1px 2px;gap:2px;color:#514844;font-family:var(--mm-sans);font-size:9px;line-height:1;letter-spacing:.04em;overflow:visible}
  .mm-bottom-nav .mm-bottom-icon{width:29px;height:29px;display:block;flex:0 0 29px;color:currentColor;overflow:visible}
  .mm-bottom-nav b{display:block;max-width:100%;overflow:hidden;font-size:9px;font-weight:650;line-height:1.15;text-overflow:clip;white-space:nowrap}
  .mm-bottom-nav :where(a[aria-current=page],button[aria-expanded=true]){color:var(--mm-wine)}
  .mm-bottom-nav a[aria-current=page]::after{left:calc(50% - 12px);right:auto;bottom:0;width:24px;height:2px}
}

/* Shipping phone navigation guard. Keep last. */
@media(max-width:767px){
  .mm-brand-latin{font-size:15px}
  .mm-bottom-nav :where(a,button){font-size:11px;line-height:1.15}
  .mm-bottom-nav b{font-size:11px;line-height:1.15}
  .mm-bottom-nav .mm-bottom-icon{width:27px;height:27px;flex-basis:27px}
}