html,
body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100%;
  height:100%;
  background:#ffffff;
  overscroll-behavior:none;
}

body{
  overflow-x:hidden;
}

#colors-brand{
  --paper:#ffffff;
  --ink:#0f0f0f;
  --dummy:#d8d8d4;
  --hair:rgba(15,15,15,.22);

  position:relative;
  overflow:visible;
  background:#ffffff;
  color:var(--ink);
  font-family:"Times New Roman","Yu Mincho","Hiragino Mincho ProN",serif;
}

#colors-brand *{
  box-sizing:border-box;
}

.cn-scroll-scene{
  position:relative;
  height:600svh;
  background:#ffffff;
}

.cn-sticky-frame{
  position:sticky;
  top:0;
  width:100%;
  height:100svh;
  overflow:hidden;
  background:#ffffff;
}

.cn-cover{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#ffffff;
  isolation:isolate;
}

.cn-stage{
  position:absolute;
  inset:0;
  width:100%;
  height:100svh;
  transform:none;
  overflow:hidden;
  background:#ffffff;
  z-index:1;
}

.cn-stage::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:38%;
  z-index:2;
  background:#ffffff;
  border-right:0;
  pointer-events:none;
}

.cn-top-left{
  position:absolute;
  left:7.4%;
  top:5.7%;
  z-index:20;
  font-size:7px;
  line-height:1;
  color:#0f0f0f;
  white-space:nowrap;
}

.cn-top-center{
  position:absolute;
  left:49.6%;
  top:5.7%;
  transform:translateX(-50%);
  z-index:20;
  font-size:7px;
  line-height:1;
  color:#0f0f0f;
  white-space:nowrap;
}

.cn-top-right{
  position:absolute;
  right:7.4%;
  top:5.7%;
  z-index:60;
  font:inherit;
  font-size:7px;
  line-height:1;
  color:#8f8f8f;
  white-space:nowrap;
  background:none;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
}

.cn-top-right span{
  position:relative;
  display:inline-block;
  padding-bottom:12px;
}

.cn-top-right span::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:16px;
  height:1px;
  background:#bdbdbd;
  transform-origin:left center;
}

.cn-rule{
  position:absolute;
  left:7.4%;
  top:9.2%;
  width:11%;
  height:1px;
  background:var(--hair);
  z-index:20;
  transform-origin:left center;
}

.cn-photo-wrap{
  position:absolute;
  left:38%;
  top:0;
  width:62%;
  height:100%;
  z-index:5;
  overflow:visible;
  background:transparent;
}

.cn-photo-dummy{
  position:absolute;
  left:0;
  top:-10%;
  width:120%;
  height:120%;
  transform:none;

  background-image:url("images/hero.png");
  background-size:340%;
  background-position:71% center;
  background-repeat:no-repeat;
}

.cn-photo-sequence{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:0;
  pointer-events:none;
}

.cn-photo-sequence.is-ready{
  opacity:1;
}

.cn-lettering{
  position:absolute;
  left:-28%;
  top:37%;
  width:140%;
  max-width:none !important;
  height:auto;
  opacity:0.60;
  z-index:30;
  pointer-events:none;
  transform-origin:center center;
}

.cn-copy-block{
  position:absolute;
  left:7.4%;
  top:71.8%;
  z-index:20;
  font-size:7.2px;
  line-height:1.65;
  color:#0f0f0f;
}

.cn-copy-block span{
  display:block;
}

.cn-scroll{
  position:absolute;
  left:7.4%;
  top:87%;
  z-index:20;
  font-size:7.2px;
  line-height:1;
  color:#0f0f0f;
}

.cn-scroll::after{
  content:"";
  display:block;
  width:1px;
  height:24px;
  margin-top:9px;
  background:#5a5a5a;
  transform-origin:top center;
  transform:scaleY(var(--scroll-line-scale,1));
}

.cn-page{
  position:absolute;
  right:7.4%;
  bottom:5.8%;
  z-index:20;
  font-size:7px;
  line-height:1;
  letter-spacing:.16em;
  color:#0f0f0f;
}

/* INDEX LAYER */

.cn-index-layer{
  position:absolute;
  inset:0;
  z-index:45;
  background:rgba(255,255,255,.96);
  opacity:0;
  pointer-events:none;
}

.cn-index-layer.is-active{
  pointer-events:auto;
}

.cn-index-stage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

.cn-index-title{
  position:absolute;
  left:7.4%;
  top:5.7%;
  font-size:7px;
  line-height:1;
  color:#0f0f0f;
}

.cn-index-title::after{
  content:"";
  display:block;
  width:16px;
  height:1px;
  margin-top:12px;
  background:#bdbdbd;
}

.cn-index-list{
  position:absolute;
  left:23%;
  top:28%;
  display:flex;
  flex-direction:column;
  gap:26px;
}

.cn-index-item{
  display:grid;
  grid-template-columns:26px auto;
  column-gap:26px;
  align-items:baseline;
  text-decoration:none;
  color:#0f0f0f;
  font-size:23px;
  line-height:1;
  letter-spacing:-.03em;
  opacity:0;
  transform:translateY(12px);
}

.cn-index-item span{
  font-size:7px;
  color:rgba(15,15,15,.45);
  letter-spacing:.14em;
}

.cn-index-note{
  position:absolute;
  left:7.4%;
  bottom:9%;
  font-size:8px;
  line-height:1.7;
  color:rgba(15,15,15,.54);
  opacity:0;
  transform:translateY(10px);
}

.cn-index-page{
  position:absolute;
  right:7.4%;
  bottom:5.8%;
  font-size:7px;
  line-height:1;
  letter-spacing:.16em;
  color:#0f0f0f;
  opacity:0;
}
/* EDITORIAL 01 LAYER */

.cn-editorial-layer{
  position:absolute;
  inset:0;
  z-index:55;
  background:#ffffff;
  opacity:0;
  pointer-events:none;
}

.cn-editorial-stage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

.cn-editorial-meta{
  position:absolute;
  left:7.4%;
  top:5.7%;
  z-index:30;
  display:flex;
  gap:28px;
  font-size:7px;
  line-height:1;
  color:rgba(15,15,15,.58);
  opacity:0;
}

.cn-editorial-photo{
  position:absolute;
  right:9%;
  top:27%;
  width:34%;
  height:26%;
  z-index:18;
overflow:visible;
background:transparent;
  opacity:0;
}

.cn-editorial-photo-image{
  width:100%;
  height:100%;
  background-image:url("images/editorial01.JPG");
  background-size:170%;
  background-position:50% 26%;
  background-repeat:no-repeat;
  filter:grayscale(100%);
  opacity:.9;
}

.cn-editorial-text{
  position:absolute;
  left:24%;
  top:51%;
  width:42%;
  z-index:35;
  color:rgba(42,42,42,.68);
  font-size:11.4px;
  line-height:1.28;
  letter-spacing:.01em;
  text-align:justify;
  text-align-last:justify;
  pointer-events:none;
}

.cn-word{
  display:inline-block;
}

.cn-editorial-text div{
  text-align:justify;
  text-align-last:justify;
}
.cn-editorial-sign{
  position:absolute;
  left:-2%;
  top:6.2%;
  width:105%;
  height:auto;
  z-index:26;
  opacity:.82;
  pointer-events:none;
}
.cn-editorial-mark{
  position:absolute;
  left:-22%;
  bottom:1%;
  width:96%;
  max-width:none !important;
  height:auto;
  z-index:24;
  opacity:0;
  pointer-events:none;
  transform:rotate(-4deg);
}

.cn-editorial-page{
  position:absolute;
  right:7.4%;
  bottom:5.8%;
  z-index:30;
  font-size:7px;
  line-height:1;
  letter-spacing:.16em;
  color:#0f0f0f;
  opacity:0;
}


.cn-index-reservation{
  margin-top:10px;
  margin-bottom:10px;
}
.cn-editorial-photo{
  left:29%;
  right:auto;
  top:31.5%;
  width:42%;
  height:20%;
}

.cn-editorial-text{
  left:29%;
  top:53%;
  width:42%;
}

/* CN_012: mobile hero photo field — reduce the white column while preserving desktop */
@media (max-width: 767px){
  .cn-photo-wrap{
    left:27.5%;
    width:72.5%;
  }
}

/* CN_013: hero typography + interaction polish. Photo framing remains frozen from CN_012. */

/* Desktop typography: deliberately larger than mobile to balance the wide editorial canvas. */
.cn-top-left,
.cn-top-center,
.cn-top-right{
  font-size:14px;
}

.cn-copy-block{
  font-size:14px;
  line-height:1.58;
}

.cn-scroll{
  font-size:13px;
}

.cn-page{
  font-size:11.5px;
}

/* Brand motion: keep the typography quiet, but let it visibly settle like a magazine masthead. */
.cn-top-left > span{
  display:inline-block;
}

.cn-brand-mobile-break{
  display:none;
}

.cn-brand-tail{
  white-space:nowrap;
}

.cn-rule::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(15,15,15,.28);
  transform-origin:left center;
  animation:cnBrandRulePulse 6.2s cubic-bezier(.22,.61,.36,1) infinite;
}

/* INDEX: darker, clearer, but still editorial rather than button-like. */
.cn-top-right{
  color:#151515;
}

.cn-top-right span{
  padding-bottom:15px;
  transform-origin:center center;
  animation:cnIndexType 3.8s cubic-bezier(.22,.61,.36,1) infinite;
}

.cn-top-right span::after{
  width:28px;
  background:#232323;
  opacity:.78;
  animation:cnIndexRule 3.8s cubic-bezier(.22,.61,.36,1) infinite;
}

.cn-top-right span::before{
  content:"";
  position:absolute;
  left:34px;
  bottom:-1px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#151515;
  opacity:0;
  transform:translateX(-7px) scale(.5);
  animation:cnIndexDot 3.8s cubic-bezier(.22,.61,.36,1) infinite;
  pointer-events:none;
}

.cn-top-right:hover span,
.cn-top-right:focus-visible span{
  letter-spacing:.11em;
}

.cn-top-right:hover span::after,
.cn-top-right:focus-visible span::after{
  opacity:1;
}

.cn-top-right:hover span::before,
.cn-top-right:focus-visible span::before{
  opacity:1;
  transform:translateX(0) scale(1);
}

/* Scroll cue: retain the long vertical line and add a moving ink accent inside it. */
.cn-scroll{
  overflow:visible;
}

.cn-scroll > span{
  display:inline-block;
  animation:cnScrollLabel 4s cubic-bezier(.22,.61,.36,1) infinite;
}

.cn-scroll::before{
  content:"";
  position:absolute;
  left:0;
  top:calc(100% + 9px);
  width:1px;
  height:8px;
  background:rgba(15,15,15,.42);
  z-index:2;
  opacity:0;
  animation:cnScrollInk 3.2s cubic-bezier(.45,0,.55,1) infinite;
  pointer-events:none;
}

/* PC-only signature composition. Smartphone dimensions/position are explicitly restored below. */
.cn-lettering{
  left:-11%;
  top:28%;
  width:84%;
}

@keyframes cnBrandRulePulse{
  0%,100%{ transform:scaleX(.58); opacity:.20; }
  38%{ transform:scaleX(.92); opacity:.44; }
  64%{ transform:scaleX(.92); opacity:.44; }
  86%{ transform:scaleX(.68); opacity:.27; }
}

@keyframes cnIndexType{
  0%,100%{ transform:translateY(0); letter-spacing:0; }
  34%{ transform:translateY(-1px); letter-spacing:.055em; }
  52%{ transform:translateY(-1px); letter-spacing:.055em; }
  70%{ transform:translateY(0); letter-spacing:.012em; }
}

@keyframes cnIndexRule{
  0%,100%{ transform:translateX(0) scaleX(.38); opacity:.46; }
  28%{ transform:translateX(0) scaleX(1); opacity:.88; }
  48%{ transform:translateX(5px) scaleX(.72); opacity:.68; }
  68%{ transform:translateX(0) scaleX(1); opacity:.9; }
  86%{ transform:translateX(0) scaleX(.5); opacity:.52; }
}

@keyframes cnIndexDot{
  0%,18%,100%{ opacity:0; transform:translateX(-7px) scale(.5); }
  30%{ opacity:.9; transform:translateX(-2px) scale(.8); }
  46%{ opacity:1; transform:translateX(3px) scale(1); }
  62%{ opacity:.72; transform:translateX(7px) scale(.72); }
  78%{ opacity:0; transform:translateX(10px) scale(.45); }
}

@keyframes cnScrollLabel{
  0%,100%{ transform:translateY(0); opacity:1; }
  48%{ transform:translateY(1px); opacity:.86; }
  68%{ transform:translateY(0); opacity:1; }
}

@keyframes cnScrollInk{
  0%{ transform:translateY(1px) scaleY(.30); opacity:0; }
  22%{ opacity:.48; }
  66%{ transform:translateY(14px) scaleY(.72); opacity:.42; }
  100%{ transform:translateY(21px) scaleY(.22); opacity:0; }
}

@media (max-width: 767px){
  /* Keep CN_012's completed photo field untouched. */
  .cn-photo-wrap{
    left:27.5%;
    width:72.5%;
  }

  /* Smartphone typography: substantially more legible while retaining the print-editorial hierarchy. */
  .cn-top-left{
    font-size:8.8px;
    line-height:1.35;
  }

  .cn-brand-mobile-break{
    display:inline;
  }

  .cn-brand-tail{
    margin-left:0;
  }

  .cn-top-center{
    font-size:9.2px;
  }

  .cn-top-right{
    font-size:10.5px;
  }

  .cn-copy-block{
    font-size:9.6px;
    line-height:1.58;
  }

  .cn-scroll{
    font-size:9.2px;
  }

  .cn-page{
    font-size:9px;
  }

  .cn-top-right span{
    padding-bottom:13px;
  }

  .cn-top-right span::after{
    width:25px;
  }


  .cn-top-right span::before{
    left:31px;
    width:3.5px;
    height:3.5px;
    animation-duration:3.2s;
  }

  /* Smartphone signature was already approved: restore it exactly. */
  .cn-lettering{
    left:-28%;
    top:37%;
    width:140%;
  }
}

@media (prefers-reduced-motion: reduce){
  .cn-rule::after,
  .cn-top-right span,
  .cn-top-right span::after,
  .cn-top-right span::before,
  .cn-scroll > span,
  .cn-scroll::before{
    animation:none !important;
  }
}

/* CN_016: smartphone typography + line behavior restored to CN_012.
   Keep the approved two-line salon name; only its rule is lowered to clear the second line.
   PC typography, hero photo, frame sequence, signature and all main animations remain untouched. */
@media (max-width: 767px){
  /* Restore the original quiet mobile type scale. */
  .cn-top-left{
    font-size:7px;
    line-height:1.25;
  }

  .cn-top-center{
    font-size:7px;
  }

  .cn-top-right{
    font-size:7px;
    color:#8f8f8f;
  }

  .cn-copy-block{
    font-size:7.2px;
    line-height:1.65;
  }

  .cn-scroll{
    font-size:7.2px;
  }

  .cn-page{
    font-size:7px;
  }

  /* Two-line salon name stays; move its rule lower so it does not crowd the second line. */
  .cn-rule{
    top:10.25%;
  }

  /* Restore the original static salon-name rule. */
  .cn-rule::after{
    content:none;
    animation:none;
  }

  /* Restore Index to the original quiet typography / static short rule on mobile. */
  .cn-top-right span{
    padding-bottom:12px;
    animation:none;
    letter-spacing:normal;
    transform:none;
  }

  .cn-top-right span::after{
    width:16px;
    background:#bdbdbd;
    opacity:1;
    animation:none;
    transform:none;
  }

  .cn-top-right span::before{
    content:none;
    display:none;
    animation:none;
  }

  /* Restore the original static Scroll cue. */
  .cn-scroll > span{
    animation:none;
    transform:none;
    opacity:1;
  }

  .cn-scroll::after{
    background:#0f0f0f;
  }

  .cn-scroll::before{
    content:none;
    display:none;
    animation:none;
  }
}


/* CN_017: navigation-only polish.
   Hero framing, frame sequence, signature, typography scale and all established animations stay untouched. */
.cn-editorial-index{
  position:absolute;
  right:7.4%;
  top:5.7%;
  z-index:60;
  font:inherit;
  font-size:14px;
  line-height:1;
  color:rgba(15,15,15,.58);
  white-space:nowrap;
  background:none;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
}

.cn-editorial-index span{
  position:relative;
  display:inline-block;
  padding-bottom:12px;
}

.cn-editorial-index span::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:16px;
  height:1px;
  background:rgba(15,15,15,.42);
}

@media (max-width: 767px){
  /* Hero Index sits on the photograph: white type + a quieter white rule. */
  .cn-top-right{
    color:#fff;
  }

  .cn-top-right span::after{
    background:rgba(255,255,255,.72);
  }

  /* Page 03 Index matches the restored quiet mobile type scale. */
  .cn-editorial-index{
    font-size:7px;
  }
}

/* CN_018: full-book skeleton after the completed opening three pages. */
.cn-content-skeleton{
  position:absolute;
  inset:0;
  z-index:70;
  pointer-events:none;
}

.cn-content-layer{
  position:absolute;
  inset:0;
  background:#fff;
  opacity:0;
  pointer-events:none;
}

.cn-content-stage{
  position:absolute;
  inset:0;
  overflow:hidden;
  color:#0f0f0f;
}

.cn-content-kicker{
  position:absolute;
  left:7.4%;
  top:5.7%;
  display:flex;
  gap:28px;
  font-size:7px;
  line-height:1;
  color:rgba(15,15,15,.58);
}

.cn-content-index{
  position:absolute;
  right:7.4%;
  top:5.7%;
  z-index:5;
  border:0;
  padding:0;
  margin:0;
  background:none;
  color:rgba(15,15,15,.58);
  font:inherit;
  font-size:7px;
  line-height:1;
  cursor:pointer;
}

.cn-content-index span{
  position:relative;
  display:inline-block;
  padding-bottom:12px;
}

.cn-content-index span::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:16px;
  height:1px;
  background:rgba(15,15,15,.42);
}

.cn-content-layer h2{
  position:absolute;
  left:7.4%;
  top:45%;
  margin:0;
  font-size:clamp(32px,5.6vw,86px);
  line-height:.92;
  letter-spacing:-.045em;
  font-weight:400;
  text-transform:none;
}

.cn-content-page{
  position:absolute;
  right:7.4%;
  bottom:5.8%;
  font-size:7px;
  line-height:1;
  letter-spacing:.16em;
  color:#0f0f0f;
}

@media (max-width:767px){
  .cn-content-layer h2{
    top:46%;
    font-size:12vw;
  }
}


/* CN_019 — Page 04 / Philosophy.
   No photography: the typography itself is the visual. */
.cn-philosophy-layer{
  background:#fff;
}

.cn-philosophy-composition{
  position:absolute;
  inset:0;
  color:#111;
}

.cn-philosophy-eyebrow{
  position:absolute;
  left:7.4%;
  top:17.5%;
  margin:0;
  font-size:7px;
  line-height:1;
  letter-spacing:.04em;
  color:rgba(15,15,15,.48);
}

.cn-content-layer .cn-philosophy-title{
  left:7.4%;
  top:25%;
  margin:0;
  font-size:clamp(42px,5vw,76px);
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:400;
  text-transform:none;
}

.cn-philosophy-body{
  position:absolute;
  left:48%;
  top:26.5%;
  width:34%;
  max-width:520px;
  font-size:clamp(11px,.86vw,14px);
  line-height:2.05;
  letter-spacing:.025em;
}

.cn-philosophy-body p{
  margin:0 0 2.05em;
}

.cn-philosophy-statement{
  position:absolute;
  left:48%;
  top:64%;
  margin:0;
  font-size:clamp(17px,1.55vw,25px);
  line-height:1.65;
  letter-spacing:.015em;
}

.cn-philosophy-closing{
  position:absolute;
  right:7.4%;
  bottom:10.5%;
  margin:0;
  text-align:right;
  font-size:clamp(11px,.9vw,15px);
  line-height:1.8;
  letter-spacing:.035em;
}

.cn-philosophy-eyebrow,
.cn-philosophy-title,
.cn-philosophy-body,
.cn-philosophy-statement,
.cn-philosophy-closing{
  opacity:0;
  transform:translateY(10px);
  will-change:opacity,transform;
}

@media (max-width:767px){
  .cn-philosophy-eyebrow{
    left:7.4%;
    top:15.5%;
    font-size:7px;
  }

  .cn-content-layer .cn-philosophy-title{
    left:7.4%;
    top:21%;
    width:84%;
    font-size:9.8vw;
    line-height:1.12;
    letter-spacing:-.04em;
  }

  .cn-philosophy-body{
    left:26%;
    top:36%;
    width:66%;
    max-width:none;
    font-size:8px;
    line-height:1.9;
    letter-spacing:.015em;
  }

  .cn-philosophy-body p{
    margin-bottom:1.75em;
  }

  .cn-philosophy-statement{
    left:7.4%;
    top:auto;
    bottom:23%;
    width:84%;
    font-size:14px;
    line-height:1.55;
    letter-spacing:0;
  }

  .cn-philosophy-closing{
    right:7.4%;
    bottom:10.5%;
    font-size:8px;
    line-height:1.75;
  }
}


/* CN_020 — Philosophy editorial recomposition.
   Same content, rebuilt as one typographic spread with Japanese + English hierarchy. */
.cn-philosophy-composition{
  overflow:hidden;
}

.cn-philosophy-eyebrow{
  left:7.4%;
  top:17%;
  font-size:7px;
  letter-spacing:.08em;
  color:rgba(15,15,15,.45);
  text-transform:uppercase;
}

.cn-philosophy-english{
  position:absolute;
  left:-1.5%;
  top:24%;
  width:103%;
  margin:0;
  color:rgba(12,12,12,.075);
  font-size:clamp(72px,10.4vw,160px);
  line-height:.78;
  letter-spacing:-.075em;
  font-weight:400;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
}
.cn-philosophy-english span{display:block;}
.cn-philosophy-english span:last-child{
  margin-left:15%;
}

.cn-content-layer .cn-philosophy-title{
  left:7.4%;
  top:30.5%;
  width:auto;
  font-size:clamp(44px,5.2vw,80px);
  line-height:1;
  letter-spacing:-.045em;
  z-index:2;
}

.cn-philosophy-body{
  left:50.5%;
  top:43%;
  width:34%;
  max-width:520px;
  font-size:clamp(10px,.78vw,13px);
  line-height:2;
  letter-spacing:.02em;
  z-index:2;
}
.cn-philosophy-body p{
  margin:0 0 1.8em;
}

.cn-philosophy-en-copy{
  position:absolute;
  left:7.4%;
  top:57%;
  width:29%;
  margin:0;
  font-size:clamp(8px,.62vw,10px);
  line-height:1.75;
  letter-spacing:.04em;
  color:rgba(15,15,15,.54);
  text-transform:none;
  z-index:2;
}

.cn-philosophy-statement{
  left:7.4%;
  top:auto;
  bottom:15%;
  width:48%;
  font-size:clamp(19px,1.7vw,28px);
  line-height:1.55;
  letter-spacing:-.01em;
  z-index:2;
}

.cn-philosophy-closing{
  right:7.4%;
  bottom:10.5%;
  width:36%;
  font-size:clamp(9px,.72vw,12px);
  line-height:1.7;
  letter-spacing:.025em;
  z-index:2;
}

.cn-philosophy-english,
.cn-philosophy-en-copy{
  opacity:0;
  transform:translateY(10px);
  will-change:opacity,transform;
}

@media (max-width:767px){
  .cn-philosophy-eyebrow{
    left:7.4%;
    top:15.8%;
    font-size:6.5px;
  }

  .cn-philosophy-english{
    left:-3%;
    top:24.5%;
    width:106%;
    font-size:20.5vw;
    line-height:.8;
    letter-spacing:-.08em;
  }
  .cn-philosophy-english span:last-child{
    margin-left:13%;
  }

  .cn-content-layer .cn-philosophy-title{
    left:7.4%;
    top:28.5%;
    width:86%;
    font-size:10.5vw;
    line-height:1.05;
  }

  .cn-philosophy-body{
    left:31%;
    top:43.5%;
    width:61%;
    max-width:none;
    font-size:7.4px;
    line-height:1.9;
    letter-spacing:.01em;
  }
  .cn-philosophy-body p{
    margin-bottom:1.55em;
  }

  .cn-philosophy-en-copy{
    left:7.4%;
    top:57%;
    width:45%;
    font-size:6.3px;
    line-height:1.7;
    letter-spacing:.025em;
  }

  .cn-philosophy-statement{
    left:7.4%;
    top:auto;
    bottom:17.5%;
    width:70%;
    font-size:13px;
    line-height:1.55;
  }

  .cn-philosophy-closing{
    right:7.4%;
    bottom:10.8%;
    width:52%;
    font-size:6.8px;
    line-height:1.65;
  }
}


/* CN_021 — Philosophy refinement.
   Keep PC composition, modernize the oversized English type,
   and give mobile its own cleaner editorial grid. */
.cn-philosophy-english{
  font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;
  font-weight:300;
  letter-spacing:-.065em;
  color:rgba(12,12,12,.055);
}

@media (max-width:767px){
  .cn-philosophy-english{
    left:-6%;
    top:25.3%;
    width:112%;
    font-size:21vw;
    line-height:.76;
    letter-spacing:-.07em;
    color:rgba(12,12,12,.052);
  }
  .cn-philosophy-english span:last-child{
    margin-left:17%;
  }

  .cn-content-layer .cn-philosophy-title{
    left:7.4%;
    top:29.5%;
    width:86%;
    font-size:10.2vw;
    line-height:1.04;
  }

  .cn-philosophy-body{
    left:28%;
    top:44.5%;
    width:64%;
    font-size:7.2px;
    line-height:1.92;
    letter-spacing:.008em;
  }
  .cn-philosophy-body p{
    margin-bottom:1.55em;
  }

  .cn-philosophy-en-copy{
    left:7.4%;
    top:61.5%;
    width:43%;
    font-size:6.1px;
    line-height:1.72;
    letter-spacing:.025em;
    color:rgba(15,15,15,.46);
  }

  .cn-philosophy-statement{
    left:7.4%;
    top:72%;
    bottom:auto;
    width:72%;
    font-size:13px;
    line-height:1.55;
  }

  .cn-philosophy-closing{
    right:7.4%;
    bottom:10.8%;
    width:54%;
    font-size:6.7px;
    line-height:1.65;
  }
}


/* CN_022 — Smartphone-only Philosophy refinement.
   Goal:
   1) make the oversized English background more legible without fully containing it;
   2) separate the small English editorial note clearly from the Japanese body.
   PC/tablet rules remain exactly as CN_021. */
@media (max-width:767px){
  .cn-philosophy-english{
    left:-1.5%;
    top:25.2%;
    width:103%;
    font-size:17vw;
    line-height:.82;
    letter-spacing:-.07em;
  }

  .cn-philosophy-english span:last-child{
    margin-left:10%;
  }

  .cn-philosophy-en-copy{
    left:7.4%;
    top:61.5%;
    width:43%;
    font-size:6.3px;
    line-height:1.72;
    letter-spacing:.025em;
  }
}


/* CN_023 — Fix missed smartphone English-note repositioning only. */
@media (max-width:767px){
  .cn-philosophy-en-copy{
    left:7.4%;
    top:66.5%;
    width:43%;
  }
}

/* CN_024 — Smartphone-only Philosophy note repositioning. */
@media (max-width:767px){
  .cn-philosophy-en-copy{
    left:15%;
    top:62.8%;
    width:39%;
  }
}

.cn-philosophy-english span{
  will-change:transform;
}


/* CN_025 — Page 04 Philosophy / full editorial redesign.
   room.jpeg is treated as a changing editorial aperture, not a placed salon photo. */
.cn-philosophy-v2{
  overflow:hidden;
}

.cn-philosophy-v2 .cn-philosophy-eyebrow{
  left:7.4%;
  top:16.6%;
  font-size:6.5px;
  letter-spacing:.10em;
  color:rgba(20,18,17,.45);
}

.cn-philosophy-main-en{
  position:absolute;
  left:7.4%;
  top:22.5%;
  z-index:3;
  margin:0;
  color:#171513;
  font-family:Arial, Helvetica, sans-serif;
  font-size:clamp(54px,7vw,108px);
  font-weight:300;
  line-height:.88;
  letter-spacing:-.07em;
  text-transform:uppercase;
  pointer-events:none;
}
.cn-philosophy-main-en span{display:block;}
.cn-philosophy-main-en span:last-child{margin-left:8%;}

.cn-content-layer .cn-philosophy-v2 .cn-philosophy-title{
  left:10.5%;
  top:39%;
  z-index:4;
  margin:0;
  width:auto;
  font-size:clamp(20px,2.1vw,34px);
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight:400;
  white-space:nowrap;
}

.cn-philosophy-photo{
  position:absolute;
  right:8.2%;
  top:31%;
  z-index:2;
  width:37%;
  height:39%;
  pointer-events:none;
}
.cn-philosophy-photo-mask{
  position:absolute;
  inset:0;
  overflow:hidden;
  clip-path:inset(0 82% 0 0);
  will-change:clip-path;
}
.cn-philosophy-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:56% 52%;
  transform:scale(1.07) translateX(-3%);
  transform-origin:center;
  will-change:transform;
  filter:saturate(.72) contrast(.96);
}

.cn-philosophy-v2 .cn-philosophy-body{
  left:7.4%;
  top:51.5%;
  z-index:4;
  width:30%;
  max-width:430px;
  font-size:clamp(9px,.68vw,11px);
  line-height:1.95;
  letter-spacing:.015em;
}
.cn-philosophy-v2 .cn-philosophy-body p{
  margin:0 0 1.75em;
}

.cn-philosophy-v2 .cn-philosophy-en-copy{
  left:auto;
  right:8.2%;
  top:72.5%;
  z-index:4;
  width:37%;
  font-family:Arial, Helvetica, sans-serif;
  font-size:clamp(8px,.58vw,10px);
  line-height:1.55;
  letter-spacing:.015em;
  color:rgba(23,21,19,.64);
}
.cn-philosophy-v2 .cn-philosophy-en-copy p{margin:0 0 1.25em;}
.cn-philosophy-v2 .cn-philosophy-en-copy .cn-philosophy-en-strong{
  margin-top:1.9em;
  font-size:clamp(10px,.78vw,13px);
  line-height:1.12;
  letter-spacing:.08em;
  color:#171513;
}

.cn-philosophy-v2 .cn-philosophy-statement{
  left:7.4%;
  top:auto;
  bottom:13.8%;
  z-index:4;
  width:42%;
  font-size:clamp(18px,1.45vw,24px);
  line-height:1.55;
  letter-spacing:-.015em;
}

.cn-philosophy-v2 .cn-philosophy-closing{
  right:7.4%;
  bottom:7.8%;
  z-index:4;
  width:auto;
  font-size:clamp(7px,.52vw,9px);
  line-height:1.7;
  letter-spacing:.035em;
  color:rgba(23,21,19,.58);
}

.cn-philosophy-main-en,
.cn-philosophy-v2 .cn-philosophy-title,
.cn-philosophy-photo,
.cn-philosophy-v2 .cn-philosophy-body,
.cn-philosophy-v2 .cn-philosophy-en-copy,
.cn-philosophy-v2 .cn-philosophy-statement,
.cn-philosophy-v2 .cn-philosophy-closing{
  opacity:0;
  transform:translateY(10px);
  will-change:opacity,transform;
}

@media (max-width:767px){
  .cn-philosophy-v2 .cn-philosophy-eyebrow{
    left:7.4%;
    top:15.8%;
    font-size:6.2px;
  }

  .cn-philosophy-main-en{
    left:7.4%;
    top:23.4%;
    width:88%;
    font-size:13.2vw;
    line-height:.87;
    letter-spacing:-.065em;
  }
  .cn-philosophy-main-en span:last-child{
    margin-left:9%;
  }

  .cn-content-layer .cn-philosophy-v2 .cn-philosophy-title{
    left:8.2%;
    top:34.6%;
    font-size:6.6vw;
    line-height:1.05;
  }

  .cn-philosophy-photo{
    right:6.5%;
    top:38.5%;
    width:45%;
    height:30%;
  }
  .cn-philosophy-photo img{
    object-position:57% 53%;
  }

  .cn-philosophy-v2 .cn-philosophy-body{
    left:7.4%;
    top:43%;
    width:39%;
    max-width:none;
    font-size:7px;
    line-height:1.82;
  }
  .cn-philosophy-v2 .cn-philosophy-body p{
    margin-bottom:1.55em;
  }

  .cn-philosophy-v2 .cn-philosophy-en-copy{
    left:12.5%;
    right:auto;
    top:69.5%;
    width:43%;
    font-size:6.4px;
    line-height:1.52;
  }
  .cn-philosophy-v2 .cn-philosophy-en-copy p{
    margin-bottom:1.05em;
  }
  .cn-philosophy-v2 .cn-philosophy-en-copy .cn-philosophy-en-strong{
    margin-top:1.65em;
    font-size:8.5px;
    line-height:1.08;
  }

  .cn-philosophy-v2 .cn-philosophy-statement{
    left:7.4%;
    bottom:15.5%;
    width:64%;
    font-size:12px;
    line-height:1.5;
  }

  .cn-philosophy-v2 .cn-philosophy-closing{
    right:7.4%;
    bottom:9.2%;
    width:55%;
    font-size:6.5px;
    line-height:1.55;
  }
}


/* CN_026 — Philosophy editorial refinement.
   Photo is no longer a "placed card": it becomes a cropped editorial field
   that enters from the right and visually interlocks with the typography. */

.cn-philosophy-v2 .cn-philosophy-main-en{
  left:6.8%;
  top:22.2%;
  font-size:clamp(50px,6.4vw,98px);
  line-height:.84;
  letter-spacing:-.065em;
  z-index:5;
}

.cn-philosophy-v2 .cn-philosophy-main-en span:first-child{
  margin-left:0;
}
.cn-philosophy-v2 .cn-philosophy-main-en span:last-child{
  margin-left:13%;
}

.cn-content-layer .cn-philosophy-v2 .cn-philosophy-title{
  left:9.2%;
  top:37.2%;
  z-index:7;
  font-size:clamp(18px,1.8vw,30px);
}

.cn-philosophy-v2 .cn-philosophy-photo{
  right:-3.5%;
  top:28.8%;
  width:50%;
  height:46%;
  z-index:2;
  overflow:hidden;
}

.cn-philosophy-v2 .cn-philosophy-photo-mask{
  clip-path:inset(0 88% 0 0);
}

.cn-philosophy-v2 .cn-philosophy-photo img{
  width:118%;
  height:112%;
  margin-left:-8%;
  margin-top:-5%;
  object-fit:cover;
  object-position:58% 51%;
  filter:saturate(.68) contrast(.98) brightness(.98);
}

.cn-philosophy-v2 .cn-philosophy-body{
  left:7.4%;
  top:50.2%;
  width:29%;
  z-index:6;
}

.cn-philosophy-v2 .cn-philosophy-en-copy{
  left:39%;
  right:auto;
  top:66.5%;
  width:27%;
  z-index:6;
}

.cn-philosophy-v2 .cn-philosophy-en-copy .cn-philosophy-en-strong{
  margin-top:1.45em;
}

.cn-philosophy-v2 .cn-philosophy-statement{
  left:7.4%;
  bottom:12.8%;
  width:38%;
  z-index:6;
}

.cn-philosophy-v2 .cn-philosophy-closing{
  right:7.4%;
  bottom:7.6%;
  width:auto;
  z-index:6;
}

/* editorial mask line: gives the photo/white boundary a deliberate magazine-like edge */
.cn-philosophy-v2 .cn-philosophy-photo::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(20,18,17,.10);
  z-index:3;
  pointer-events:none;
}

/* Smartphone: stronger crop, cleaner hierarchy, and less "card" feeling. */
@media (max-width:767px){
  .cn-philosophy-v2 .cn-philosophy-main-en{
    left:5.5%;
    top:23.3%;
    width:94%;
    font-size:11.9vw;
    line-height:.84;
    letter-spacing:-.06em;
  }
  .cn-philosophy-v2 .cn-philosophy-main-en span:last-child{
    margin-left:14%;
  }

  .cn-content-layer .cn-philosophy-v2 .cn-philosophy-title{
    left:8.5%;
    top:33.8%;
    font-size:5.9vw;
  }

  .cn-philosophy-v2 .cn-philosophy-photo{
    right:-12%;
    top:38.2%;
    width:61%;
    height:31.5%;
  }

  .cn-philosophy-v2 .cn-philosophy-photo img{
    width:124%;
    height:112%;
    margin-left:-9%;
    margin-top:-4%;
    object-position:58% 52%;
  }

  .cn-philosophy-v2 .cn-philosophy-body{
    left:7.4%;
    top:43.3%;
    width:38%;
    font-size:6.9px;
    line-height:1.8;
  }

  .cn-philosophy-v2 .cn-philosophy-en-copy{
    left:31%;
    top:67.4%;
    width:42%;
    font-size:6.25px;
    line-height:1.5;
  }

  .cn-philosophy-v2 .cn-philosophy-en-copy .cn-philosophy-en-strong{
    margin-top:1.35em;
    font-size:8.2px;
  }

  .cn-philosophy-v2 .cn-philosophy-statement{
    left:7.4%;
    bottom:14.9%;
    width:58%;
    font-size:11.6px;
    line-height:1.48;
  }

  .cn-philosophy-v2 .cn-philosophy-closing{
    right:7.4%;
    bottom:9%;
    width:54%;
    font-size:6.35px;
  }
}


/* CN_027 — Philosophy / hidden theme: ORBIT
   The room is one world seen through three editorial apertures.
   Language moves continuously on individual, nearly imperceptible orbits.
   No literal space motifs are shown. */
.cn-philosophy-v3{
  position:absolute;
  inset:0;
  overflow:hidden;
  color:#171513;
}

.cn-philosophy-v3 .cn-philosophy-eyebrow{
  left:7.4%;
  top:16.6%;
  font-size:6.5px;
  letter-spacing:.10em;
  color:rgba(20,18,17,.45);
  z-index:8;
}

.cn-philosophy-fragments{
  position:absolute;
  left:37.5%;
  top:30%;
  width:43%;
  height:40%;
  z-index:2;
}

.cn-room-fragment{
  position:absolute;
  overflow:hidden;
  background:#eeeae4;
  opacity:0;
  transform:translateY(12px);
  will-change:transform,opacity;
}
.cn-room-fragment img{
  position:absolute;
  display:block;
  max-width:none;
  filter:saturate(.62) contrast(.96) brightness(.99);
  will-change:transform;
}

/* Three windows into the SAME photograph. */
.cn-room-fragment-a{
  left:0;
  top:8%;
  width:25%;
  height:72%;
}
.cn-room-fragment-a img{
  width:410%;
  height:auto;
  left:-12%;
  top:-7%;
}

.cn-room-fragment-b{
  left:31%;
  top:0;
  width:66%;
  height:28%;
}
.cn-room-fragment-b img{
  width:155%;
  height:auto;
  left:-43%;
  top:-7%;
}

.cn-room-fragment-c{
  left:31%;
  top:36%;
  width:66%;
  height:57%;
}
.cn-room-fragment-c img{
  width:158%;
  height:auto;
  left:-42%;
  top:-47%;
}

.cn-orbit-copy{
  position:absolute;
  margin:0;
  z-index:5;
  will-change:transform,opacity;
}

.cn-orbit-freedom,
.cn-orbit-inyour,
.cn-orbit-ownway{
  font-family:Arial,Helvetica,sans-serif;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:-.065em;
  line-height:.82;
  color:#171513;
}
.cn-orbit-freedom{
  left:7.5%;
  top:25%;
  font-size:clamp(50px,6.6vw,102px);
}
.cn-orbit-inyour{
  right:6.8%;
  top:20.8%;
  font-size:clamp(32px,4.4vw,68px);
}
.cn-orbit-ownway{
  left:10.5%;
  top:70.5%;
  font-size:clamp(36px,4.9vw,76px);
}

.cn-content-layer .cn-philosophy-v3 .cn-philosophy-title{
  left:8.8%;
  top:42%;
  width:auto;
  font-size:clamp(20px,2vw,32px);
  line-height:1.08;
  letter-spacing:-.03em;
  font-weight:400;
  white-space:nowrap;
  z-index:7;
}

.cn-philosophy-v3 .cn-philosophy-body{
  left:7.4%;
  top:50%;
  width:27%;
  max-width:390px;
  font-size:clamp(8px,.63vw,10.5px);
  line-height:1.9;
  letter-spacing:.015em;
  z-index:6;
}
.cn-philosophy-v3 .cn-philosophy-body p{margin:0 0 1.65em;}

.cn-philosophy-v3 .cn-philosophy-en-copy{
  left:65.5%;
  top:64.5%;
  width:24%;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(7px,.54vw,9px);
  line-height:1.5;
  letter-spacing:.015em;
  color:rgba(23,21,19,.62);
  z-index:6;
}
.cn-philosophy-v3 .cn-philosophy-en-copy p{margin:0 0 1.15em;}

.cn-philosophy-v3 .cn-philosophy-en-strong{
  left:48%;
  top:76.5%;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(9px,.72vw,12px);
  line-height:1.08;
  letter-spacing:.08em;
  color:#171513;
  z-index:6;
}

.cn-philosophy-v3 .cn-philosophy-statement{
  left:7.4%;
  bottom:11.8%;
  width:37%;
  font-size:clamp(17px,1.35vw,22px);
  line-height:1.5;
  letter-spacing:-.015em;
  z-index:6;
}

.cn-philosophy-v3 .cn-philosophy-closing{
  right:7.4%;
  bottom:7.8%;
  width:auto;
  font-size:clamp(7px,.52vw,9px);
  line-height:1.7;
  letter-spacing:.035em;
  color:rgba(23,21,19,.52);
  z-index:6;
}

.cn-philosophy-note{
  font-family:Arial,Helvetica,sans-serif;
  font-size:5.5px;
  letter-spacing:.14em;
  color:rgba(23,21,19,.34);
  white-space:nowrap;
  z-index:4;
}
.cn-philosophy-note-a{left:27%;top:20.5%;}
.cn-philosophy-note-b{right:12%;top:47%;writing-mode:vertical-rl;}

.cn-philosophy-v3 .cn-philosophy-eyebrow,
.cn-philosophy-v3 .cn-orbit-copy{
  opacity:0;
}

@media (max-width:767px){
  .cn-philosophy-v3 .cn-philosophy-eyebrow{
    left:7.4%;
    top:15.8%;
    font-size:6.1px;
  }

  .cn-philosophy-fragments{
    left:27%;
    top:31.5%;
    width:64%;
    height:36%;
  }
  .cn-room-fragment-a{
    left:0; top:10%; width:25%; height:70%;
  }
  .cn-room-fragment-b{
    left:31%; top:0; width:66%; height:27%;
  }
  .cn-room-fragment-c{
    left:31%; top:35%; width:66%; height:56%;
  }

  .cn-orbit-freedom{
    left:6.5%;
    top:23.5%;
    font-size:13vw;
  }
  .cn-orbit-inyour{
    right:4%;
    top:20.7%;
    font-size:8.4vw;
  }
  .cn-orbit-ownway{
    left:7%;
    top:69%;
    font-size:10vw;
  }

  .cn-content-layer .cn-philosophy-v3 .cn-philosophy-title{
    left:7.4%;
    top:42.2%;
    font-size:5.8vw;
  }

  .cn-philosophy-v3 .cn-philosophy-body{
    left:7.4%;
    top:49.2%;
    width:38%;
    font-size:6.6px;
    line-height:1.78;
  }
  .cn-philosophy-v3 .cn-philosophy-body p{margin-bottom:1.45em;}

  .cn-philosophy-v3 .cn-philosophy-en-copy{
    left:57%;
    top:63.2%;
    width:34%;
    font-size:5.9px;
  }

  .cn-philosophy-v3 .cn-philosophy-en-strong{
    left:43%;
    top:75.5%;
    font-size:7.8px;
  }

  .cn-philosophy-v3 .cn-philosophy-statement{
    left:7.4%;
    bottom:13.8%;
    width:59%;
    font-size:11.4px;
  }

  .cn-philosophy-v3 .cn-philosophy-closing{
    right:7.4%;
    bottom:8.8%;
    width:52%;
    font-size:6.2px;
  }

  .cn-philosophy-note{font-size:4.8px;}
  .cn-philosophy-note-a{left:43%;top:18.8%;}
  .cn-philosophy-note-b{right:5.5%;top:49%;}
}


/* CN_028 — PHILOSOPHY / "LIVING PAGE"
   Static state: a restrained editorial spread that belongs beside 01–03.
   Motion state: the room lives inside six observation windows; text drifts on
   slow independent orbits. The hidden system is orbital, never literal space. */

.cn-philosophy-layer,
.cn-philosophy-v4{
  background:#fbfaf7;
}

.cn-philosophy-v4{
  position:absolute;
  inset:0;
  overflow:hidden;
  color:#22201e;
}

.cn-philosophy-v4 .cn-philosophy-eyebrow{
  left:7.4%;
  top:16.5%;
  z-index:20;
  font-size:6.4px;
  letter-spacing:.11em;
  color:rgba(48,44,40,.43);
}

/* One disciplined outer rectangle, six irregular interior windows. */
.cn-philosophy-mosaic{
  position:absolute;
  left:40.5%;
  top:31%;
  width:41%;
  height:37%;
  z-index:3;
  display:grid;
  grid-template-columns:.72fr 1.02fr 1.26fr;
  grid-template-rows:.72fr 1.18fr .92fr;
  grid-template-areas:
    "a b b"
    "a c d"
    "e c f";
  gap:5px;
  overflow:hidden;
  background:#fbfaf7;
  will-change:gap,transform;
}

.cn-mosaic-cell{
  position:relative;
  overflow:hidden;
  min-width:0;
  min-height:0;
  background:#e9e5df;
  opacity:0;
  will-change:opacity,transform;
}
.cn-mosaic-a{grid-area:a;}
.cn-mosaic-b{grid-area:b;}
.cn-mosaic-c{grid-area:c;}
.cn-mosaic-d{grid-area:d;}
.cn-mosaic-e{grid-area:e;}
.cn-mosaic-f{grid-area:f;}

.cn-mosaic-cell img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  max-width:none;
  filter:grayscale(.34) sepia(.08) saturate(.62) contrast(.92) brightness(1.035);
  will-change:transform,filter;
}

/* Each aperture observes the same room at a different scale and crop. */
.cn-mosaic-a img{transform:scale(1.46); object-position:12% 48%;}
.cn-mosaic-b img{transform:scale(1.82); object-position:54% 13%;}
.cn-mosaic-c img{transform:scale(1.16); object-position:48% 56%;}
.cn-mosaic-d img{transform:scale(2.05); object-position:86% 48%;}
.cn-mosaic-e img{transform:scale(1.72); object-position:22% 92%;}
.cn-mosaic-f img{transform:scale(1.32); object-position:82% 78%;}

/* Typography returns to the quieter editorial language of Pages 01–03. */
.cn-philosophy-v4 .cn-orbit-freedom{
  left:7.4%;
  top:24.5%;
  z-index:10;
  font-family:"Times New Roman","Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(52px,6.1vw,94px);
  font-weight:400;
  font-style:italic;
  line-height:.9;
  letter-spacing:-.045em;
  text-transform:none;
  color:#24211f;
}

.cn-philosophy-v4 .cn-orbit-inyour{
  right:8.5%;
  top:22.7%;
  z-index:10;
  font-family:"Times New Roman","Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(12px,1.05vw,17px);
  font-weight:400;
  line-height:1;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(36,33,31,.70);
}

.cn-philosophy-v4 .cn-orbit-ownway{
  left:11.5%;
  top:68.8%;
  z-index:10;
  font-family:"Times New Roman","Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(25px,2.9vw,45px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.025em;
  text-transform:uppercase;
  color:#2a2725;
}

.cn-philosophy-red-word{
  color:inherit;
  transition:none;
}

.cn-content-layer .cn-philosophy-v4 .cn-philosophy-title{
  left:10%;
  top:40.5%;
  z-index:12;
  width:auto;
  font-size:clamp(18px,1.7vw,27px);
  line-height:1.1;
  font-weight:400;
  letter-spacing:-.025em;
  white-space:nowrap;
  color:rgba(35,32,30,.84);
}

.cn-philosophy-v4 .cn-philosophy-body{
  left:7.4%;
  top:49%;
  z-index:9;
  width:27%;
  max-width:405px;
  font-size:clamp(8px,.61vw,10px);
  line-height:1.9;
  letter-spacing:.012em;
  color:rgba(42,39,36,.72);
}
.cn-philosophy-v4 .cn-philosophy-body p{margin:0 0 1.55em;}

.cn-philosophy-v4 .cn-philosophy-en-copy{
  left:65%;
  top:61.8%;
  z-index:9;
  width:25%;
  font-family:"Times New Roman",serif;
  font-size:clamp(7px,.52vw,8.7px);
  line-height:1.52;
  letter-spacing:.018em;
  color:rgba(42,39,36,.48);
}
.cn-philosophy-v4 .cn-philosophy-en-copy p{margin:0 0 1.05em;}

.cn-philosophy-v4 .cn-philosophy-en-strong{
  left:47%;
  top:75.8%;
  z-index:9;
  font-family:"Times New Roman",serif;
  font-size:clamp(8px,.61vw,10px);
  line-height:1.18;
  letter-spacing:.09em;
  color:rgba(42,39,36,.69);
}

.cn-philosophy-v4 .cn-philosophy-statement{
  left:7.4%;
  bottom:12.4%;
  z-index:9;
  width:38%;
  font-size:clamp(16px,1.28vw,21px);
  line-height:1.52;
  letter-spacing:-.01em;
  color:#292624;
}

.cn-philosophy-v4 .cn-philosophy-closing{
  right:7.4%;
  bottom:7.7%;
  z-index:9;
  width:auto;
  font-size:clamp(6.8px,.5vw,8.5px);
  line-height:1.65;
  letter-spacing:.032em;
  color:rgba(42,39,36,.43);
}

.cn-philosophy-v4 .cn-philosophy-note{
  z-index:8;
  font-family:"Times New Roman",serif;
  font-size:5.2px;
  letter-spacing:.14em;
  color:rgba(42,39,36,.28);
  white-space:nowrap;
}
.cn-philosophy-v4 .cn-philosophy-note-a{left:31.5%;top:20.8%;}
.cn-philosophy-v4 .cn-philosophy-note-b{right:9%;top:48%;writing-mode:vertical-rl;}

.cn-philosophy-v4 .cn-orbit-copy,
.cn-philosophy-v4 .cn-philosophy-eyebrow{
  opacity:0;
  will-change:transform,opacity,color;
}

/* Smartphone — same editorial logic, not a scaled desktop composition. */
@media (max-width:767px){
  .cn-philosophy-v4 .cn-philosophy-eyebrow{
    left:7.4%;
    top:15.7%;
    font-size:6px;
  }

  .cn-philosophy-mosaic{
    left:30%;
    top:32.4%;
    width:61%;
    height:34.5%;
    gap:4px;
  }

  .cn-philosophy-v4 .cn-orbit-freedom{
    left:6.8%;
    top:23.8%;
    font-size:12.2vw;
    line-height:.9;
  }

  .cn-philosophy-v4 .cn-orbit-inyour{
    right:7%;
    top:21.8%;
    font-size:2.7vw;
    letter-spacing:.12em;
  }

  .cn-philosophy-v4 .cn-orbit-ownway{
    left:7.4%;
    top:68.8%;
    font-size:7.2vw;
  }

  .cn-content-layer .cn-philosophy-v4 .cn-philosophy-title{
    left:7.4%;
    top:42.1%;
    font-size:5.2vw;
  }

  .cn-philosophy-v4 .cn-philosophy-body{
    left:7.4%;
    top:49%;
    width:36.5%;
    font-size:6.35px;
    line-height:1.76;
  }

  .cn-philosophy-v4 .cn-philosophy-en-copy{
    left:60%;
    top:62.5%;
    width:31%;
    font-size:5.6px;
  }

  .cn-philosophy-v4 .cn-philosophy-en-strong{
    left:43%;
    top:75.2%;
    font-size:7.2px;
  }

  .cn-philosophy-v4 .cn-philosophy-statement{
    left:7.4%;
    bottom:13.7%;
    width:56%;
    font-size:10.8px;
  }

  .cn-philosophy-v4 .cn-philosophy-closing{
    right:7.4%;
    bottom:8.8%;
    width:52%;
    font-size:6px;
  }

  .cn-philosophy-v4 .cn-philosophy-note{
    font-size:4.5px;
  }
  .cn-philosophy-v4 .cn-philosophy-note-a{left:42%;top:19.5%;}
  .cn-philosophy-v4 .cn-philosophy-note-b{right:5.5%;top:48.5%;}
}


/* CN_030 — PHILOSOPHY / "LIVING PAGE"
   No visible frames, no lines, no grid.
   The room exists behind the paper and appears through drifting cut-outs.
   English is broken into independent editorial words with long orbital motion. */

.cn-philosophy-v5{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#fff;
  color:#262321;
}

.cn-philosophy-v5 .cn-philosophy-eyebrow{
  left:7.4%;
  top:16.4%;
  z-index:30;
  font-size:6.3px;
  letter-spacing:.11em;
  color:rgba(45,41,38,.40);
}

/* One underlying space, revealed through five borderless shards. */
.cn-philosophy-photo-world{
  position:absolute;
  left:33%;
  top:28.5%;
  width:58%;
  height:46%;
  z-index:2;
  pointer-events:none;
}

.cn-photo-shard{
  position:absolute;
  overflow:hidden;
  border:0;
  outline:0;
  box-shadow:none;
  opacity:0;
  will-change:transform,opacity,clip-path;
}
.cn-photo-shard img{
  position:absolute;
  display:block;
  max-width:none;
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
  outline:0;
  box-shadow:none;
  filter:grayscale(.24) sepia(.05) saturate(.58) contrast(.90) brightness(1.045);
  will-change:transform,filter;
}

/* Irregular, overlapping windows: no visible outer frame. */
.cn-photo-shard-a{
  left:0%;
  top:12%;
  width:31%;
  height:66%;
  clip-path:polygon(0 5%, 84% 0, 100% 18%, 93% 92%, 12% 100%, 0 82%);
}
.cn-photo-shard-b{
  left:22%;
  top:0%;
  width:48%;
  height:30%;
  clip-path:polygon(5% 0, 100% 7%, 93% 88%, 14% 100%, 0 70%);
}
.cn-photo-shard-c{
  left:29%;
  top:23%;
  width:43%;
  height:63%;
  clip-path:polygon(8% 0, 100% 4%, 94% 95%, 18% 100%, 0 76%);
}
.cn-photo-shard-d{
  right:0%;
  top:17%;
  width:38%;
  height:47%;
  clip-path:polygon(0 8%, 88% 0, 100% 20%, 90% 100%, 6% 91%);
}
.cn-photo-shard-e{
  right:5%;
  bottom:0%;
  width:43%;
  height:36%;
  clip-path:polygon(9% 0, 100% 12%, 91% 100%, 0 88%);
}

/* Different crops/scales, same room. */
.cn-photo-shard-a img{object-position:18% 48%; transform:scale(1.45);}
.cn-photo-shard-b img{object-position:56% 10%; transform:scale(1.72);}
.cn-photo-shard-c img{object-position:48% 58%; transform:scale(1.18);}
.cn-photo-shard-d img{object-position:88% 45%; transform:scale(1.95);}
.cn-photo-shard-e img{object-position:72% 84%; transform:scale(1.52);}

/* English vocabulary: not a headline block, but independent pieces of the spread. */
.cn-live-word{
  position:absolute;
  margin:0;
  z-index:10;
  opacity:0;
  will-change:transform,opacity,color;
}

.cn-live-freedom,
.cn-live-your,
.cn-live-own,
.cn-live-way,
.cn-live-time,
.cn-live-quiet,
.cn-live-together,
.cn-live-comfort{
  font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;
  font-weight:300;
  color:#272422;
  line-height:1;
  letter-spacing:-.035em;
}

.cn-live-freedom{left:7.5%;top:24.7%;font-size:clamp(46px,5.3vw,82px);letter-spacing:-.055em;}
.cn-live-your{right:9%;top:22.7%;font-size:clamp(12px,1.1vw,17px);letter-spacing:.10em;}
.cn-live-own{left:9%;top:67.5%;font-size:clamp(26px,3vw,46px);}
.cn-live-way{left:28%;top:73.8%;font-size:clamp(18px,2.1vw,32px);letter-spacing:.02em;}
.cn-live-time{right:10%;top:58.8%;font-size:clamp(8px,.72vw,11px);letter-spacing:.14em;color:rgba(39,36,34,.52);}
.cn-live-quiet{left:50%;top:18.8%;font-size:clamp(7px,.62vw,10px);letter-spacing:.16em;color:rgba(39,36,34,.36);}
.cn-live-together{right:4.5%;top:47.2%;font-size:clamp(7px,.62vw,10px);letter-spacing:.15em;color:rgba(39,36,34,.34);}
.cn-live-comfort{left:47%;top:79%;font-size:clamp(7px,.62vw,10px);letter-spacing:.16em;color:rgba(39,36,34,.44);}

.cn-content-layer .cn-philosophy-v5 .cn-philosophy-title{
  left:7.7%;
  top:40.5%;
  z-index:18;
  width:auto;
  font-size:clamp(18px,1.65vw,26px);
  line-height:1.1;
  font-weight:400;
  letter-spacing:-.025em;
  white-space:nowrap;
  color:rgba(38,35,33,.78);
}

.cn-philosophy-v5 .cn-philosophy-body{
  left:7.4%;
  top:48.7%;
  z-index:16;
  width:26%;
  max-width:390px;
  font-size:clamp(8px,.60vw,9.8px);
  line-height:1.9;
  letter-spacing:.012em;
  color:rgba(46,42,39,.66);
}
.cn-philosophy-v5 .cn-philosophy-body p{margin:0 0 1.5em;}

.cn-philosophy-v5 .cn-philosophy-statement{
  left:7.4%;
  bottom:12.2%;
  z-index:15;
  width:38%;
  font-size:clamp(16px,1.26vw,20px);
  line-height:1.52;
  letter-spacing:-.01em;
  color:#292624;
}

.cn-philosophy-v5 .cn-philosophy-closing{
  right:7.4%;
  bottom:7.8%;
  z-index:15;
  width:auto;
  font-size:clamp(6.8px,.5vw,8.4px);
  line-height:1.65;
  letter-spacing:.032em;
  color:rgba(42,39,36,.42);
}

.cn-philosophy-v5 .cn-philosophy-note{
  z-index:9;
  font-family:"Times New Roman",serif;
  font-size:5.1px;
  letter-spacing:.14em;
  color:rgba(42,39,36,.26);
  white-space:nowrap;
}
.cn-note-a{left:31%;top:20.4%;}
.cn-note-b{right:8%;top:50%;writing-mode:vertical-rl;}

@media (max-width:767px){
  .cn-philosophy-v5 .cn-philosophy-eyebrow{
    left:7.4%;
    top:15.7%;
    font-size:6px;
  }

  .cn-philosophy-photo-world{
    left:24%;
    top:30%;
    width:72%;
    height:43%;
  }

  .cn-live-freedom{
    left:6.8%;
    top:23.8%;
    font-size:11.2vw;
  }
  .cn-live-your{
    right:6.5%;
    top:21.5%;
    font-size:2.55vw;
  }
  .cn-live-own{
    left:7.4%;
    top:68.5%;
    font-size:7.2vw;
  }
  .cn-live-way{
    left:29%;
    top:74%;
    font-size:4.7vw;
  }
  .cn-live-time{
    right:7%;
    top:59.5%;
    font-size:1.75vw;
  }
  .cn-live-quiet{
    left:50%;
    top:19%;
    font-size:1.55vw;
  }
  .cn-live-together{
    right:2%;
    top:46.5%;
    font-size:1.5vw;
  }
  .cn-live-comfort{
    left:45%;
    top:79%;
    font-size:1.55vw;
  }

  .cn-content-layer .cn-philosophy-v5 .cn-philosophy-title{
    left:7.4%;
    top:41.9%;
    font-size:5.0vw;
  }

  .cn-philosophy-v5 .cn-philosophy-body{
    left:7.4%;
    top:49.1%;
    width:35%;
    font-size:6.2px;
    line-height:1.75;
  }

  .cn-philosophy-v5 .cn-philosophy-statement{
    left:7.4%;
    bottom:13.8%;
    width:56%;
    font-size:10.6px;
  }

  .cn-philosophy-v5 .cn-philosophy-closing{
    right:7.4%;
    bottom:8.8%;
    width:52%;
    font-size:6px;
  }

  .cn-philosophy-v5 .cn-philosophy-note{
    font-size:4.4px;
  }
  .cn-note-a{left:41%;top:19.5%;}
  .cn-note-b{right:4%;top:49%;}
}


/* CN_032 — PHILOSOPHY / LIVING PAGE v6
   Quiet editorial first. Motion is hidden inside the photo and in small orbiting words.
   No visible frames, no grid, no giant English headline. */

.cn-philosophy-v6{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#fff;
  color:#2b2927;
}

.cn-philosophy-v6 .cn-philosophy-eyebrow{
  left:7.4%;
  top:16.4%;
  z-index:30;
  font-size:6.2px;
  letter-spacing:.11em;
  color:rgba(45,42,39,.39);
}

/* One calm photograph. The outside silhouette never breaks. */
.cn-philosophy-living-photo{
  position:absolute;
  left:49%;
  top:31.5%;
  width:32%;
  height:31%;
  overflow:hidden;
  z-index:4;
  opacity:0;
  will-change:opacity,transform;
}

.cn-philosophy-living-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:55% 52%;
  max-width:none;
  border:0;
  outline:0;
  box-shadow:none;
  filter:grayscale(1) contrast(.91) brightness(1.035);
  will-change:transform,filter;
}

.cn-living-photo-base{
  transform:scale(1.035);
}

.cn-living-layer{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

/* Invisible internal masks: no borders, no lines. */
.cn-living-layer-light{
  clip-path:polygon(0 0, 41% 0, 45% 100%, 0 100%);
}
.cn-living-layer-window{
  clip-path:polygon(41% 0, 100% 0, 100% 58%, 47% 63%);
}
.cn-living-layer-floor{
  clip-path:polygon(43% 58%, 100% 54%, 100% 100%, 38% 100%);
}

.cn-living-layer img{
  transform:scale(1.035);
}

/* English is vocabulary, never the headline. */
.cn-orbit-word{
  position:absolute;
  margin:0;
  opacity:0;
  z-index:12;
  will-change:transform,opacity,color;
}

.cn-word-freedom,
.cn-word-your,
.cn-word-own,
.cn-word-way,
.cn-word-time,
.cn-word-quiet,
.cn-word-together,
.cn-word-comfort{
  font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;
  font-weight:300;
  line-height:1;
  text-transform:lowercase;
  color:rgba(40,38,36,.58);
}

.cn-word-freedom{left:22%;top:24.5%;font-size:clamp(14px,1.2vw,19px);letter-spacing:.06em;}
.cn-word-your{right:10%;top:23.2%;font-size:clamp(8px,.68vw,10.5px);letter-spacing:.13em;color:rgba(40,38,36,.38);}
.cn-word-own{left:34%;top:68.5%;font-size:clamp(9px,.8vw,12px);letter-spacing:.10em;color:rgba(40,38,36,.44);}
.cn-word-way{left:12%;top:72.7%;font-size:clamp(11px,.95vw,15px);letter-spacing:.08em;color:rgba(40,38,36,.54);}
.cn-word-time{right:16%;top:65.2%;font-size:clamp(7px,.58vw,9px);letter-spacing:.16em;color:rgba(40,38,36,.30);}
.cn-word-quiet{left:49%;top:19%;font-size:clamp(7px,.56vw,8.8px);letter-spacing:.16em;color:rgba(40,38,36,.26);}
.cn-word-together{right:7%;top:48%;font-size:clamp(7px,.56vw,8.8px);letter-spacing:.15em;color:rgba(40,38,36,.24);}
.cn-word-comfort{left:58%;top:77%;font-size:clamp(7px,.56vw,8.8px);letter-spacing:.16em;color:rgba(40,38,36,.32);}

.cn-content-layer .cn-philosophy-v6 .cn-philosophy-title{
  left:8%;
  top:35.6%;
  z-index:18;
  width:auto;
  font-size:clamp(34px,3.25vw,52px);
  line-height:1.06;
  font-weight:400;
  letter-spacing:-.045em;
  white-space:nowrap;
  color:#211f1d;
}

.cn-philosophy-v6 .cn-philosophy-body{
  left:8.2%;
  top:46.8%;
  z-index:16;
  width:31%;
  max-width:430px;
  font-size:clamp(8.3px,.64vw,10.3px);
  line-height:1.93;
  letter-spacing:.01em;
  color:rgba(43,40,38,.68);
}
.cn-philosophy-v6 .cn-philosophy-body p{margin:0 0 1.55em;}

.cn-philosophy-v6 .cn-philosophy-statement{
  left:8%;
  bottom:14.2%;
  z-index:15;
  width:38%;
  font-size:clamp(17px,1.34vw,21px);
  line-height:1.54;
  letter-spacing:-.012em;
  color:#292624;
}

.cn-philosophy-v6 .cn-philosophy-closing{
  right:7.5%;
  bottom:7.8%;
  z-index:15;
  width:auto;
  font-size:clamp(6.8px,.5vw,8.4px);
  line-height:1.65;
  letter-spacing:.032em;
  color:rgba(42,39,36,.40);
}

.cn-philosophy-v6 .cn-philosophy-note{
  left:37%;
  top:19.5%;
  z-index:11;
  font-family:"Times New Roman",serif;
  font-size:5px;
  letter-spacing:.14em;
  color:rgba(42,39,36,.23);
  white-space:nowrap;
}

/* End-state phrase: invisible until the final portion of the scroll. */
.cn-philosophy-converge{
  position:absolute;
  right:10%;
  bottom:14.5%;
  z-index:20;
  display:grid;
  grid-template-columns:auto auto;
  column-gap:8px;
  row-gap:1px;
  align-items:baseline;
  opacity:0;
  transform:translateY(8px);
  font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;
  font-weight:300;
  font-size:clamp(8px,.72vw,11px);
  line-height:1.05;
  letter-spacing:.10em;
  color:rgba(40,38,36,.68);
  will-change:opacity,transform;
}
.cn-philosophy-converge span:nth-child(1){
  grid-row:1 / span 3;
  align-self:start;
  writing-mode:vertical-rl;
  margin-top:1px;
  color:rgba(40,38,36,.42);
}
.cn-philosophy-converge span:nth-child(2){grid-column:2;grid-row:1;}
.cn-philosophy-converge span:nth-child(3){grid-column:2;grid-row:2;}
.cn-philosophy-converge span:nth-child(4){grid-column:2;grid-row:3;}

@media (max-width:767px){
  .cn-philosophy-v6 .cn-philosophy-eyebrow{
    left:7.4%;
    top:15.7%;
    font-size:6px;
  }

  .cn-philosophy-living-photo{
    left:45%;
    top:34%;
    width:43%;
    height:29%;
  }

  .cn-word-freedom{left:20%;top:24.5%;font-size:3.2vw;}
  .cn-word-your{right:8%;top:22.5%;font-size:1.75vw;}
  .cn-word-own{left:33%;top:67.5%;font-size:2vw;}
  .cn-word-way{left:11%;top:72%;font-size:2.8vw;}
  .cn-word-time{right:11%;top:64%;font-size:1.55vw;}
  .cn-word-quiet{left:49%;top:19%;font-size:1.45vw;}
  .cn-word-together{right:4%;top:47%;font-size:1.45vw;}
  .cn-word-comfort{left:58%;top:76.5%;font-size:1.45vw;}

  .cn-content-layer .cn-philosophy-v6 .cn-philosophy-title{
    left:7.4%;
    top:36.6%;
    font-size:8.1vw;
  }

  .cn-philosophy-v6 .cn-philosophy-body{
    left:7.4%;
    top:47.7%;
    width:34%;
    font-size:6.2px;
    line-height:1.77;
  }

  .cn-philosophy-v6 .cn-philosophy-statement{
    left:7.4%;
    bottom:14%;
    width:56%;
    font-size:10.8px;
  }

  .cn-philosophy-v6 .cn-philosophy-closing{
    right:7.4%;
    bottom:8.8%;
    width:52%;
    font-size:6px;
  }

  .cn-philosophy-v6 .cn-philosophy-note{
    left:41%;
    top:19.4%;
    font-size:4.4px;
  }

  .cn-philosophy-converge{
    right:8%;
    bottom:14%;
    font-size:6.7px;
    column-gap:6px;
  }
}


/* CN_033 — PHILOSOPHY refinement
   The room is not a visible photograph/card. It dissolves into the paper
   like a faint graphite memory. Orbiting English remains alive, while related
   words gather into meaningful phrases as the user scrolls. */

.cn-philosophy-v6{
  background:#fff;
}

.cn-philosophy-living-photo{
  left:37%;
  top:20%;
  width:58%;
  height:59%;
  overflow:visible;
  z-index:2;
  pointer-events:none;
  -webkit-mask-image:
    radial-gradient(ellipse at 57% 50%, rgba(0,0,0,.98) 0%, rgba(0,0,0,.72) 42%, rgba(0,0,0,.20) 72%, rgba(0,0,0,0) 100%);
  mask-image:
    radial-gradient(ellipse at 57% 50%, rgba(0,0,0,.98) 0%, rgba(0,0,0,.72) 42%, rgba(0,0,0,.20) 72%, rgba(0,0,0,0) 100%);
}

.cn-philosophy-living-photo img{
  filter:grayscale(1) contrast(.72) brightness(1.18) blur(2.2px);
  opacity:.22;
  transform:scale(1.34);
  object-position:58% 52%;
  mix-blend-mode:multiply;
}

.cn-living-layer{
  opacity:.58;
}
.cn-living-layer-light{
  clip-path:polygon(0 0, 46% 0, 48% 100%, 0 100%);
}
.cn-living-layer-window{
  clip-path:polygon(36% 0, 100% 0, 100% 61%, 43% 66%);
}
.cn-living-layer-floor{
  clip-path:polygon(38% 54%, 100% 50%, 100% 100%, 34% 100%);
}

.cn-living-layer img{
  filter:grayscale(1) contrast(.66) brightness(1.22) blur(3.2px);
  opacity:.16;
  mix-blend-mode:multiply;
}

.cn-word-freedom{left:23%;top:23.7%;font-size:clamp(12px,1.0vw,16px);letter-spacing:.08em;color:rgba(40,38,36,.42);}
.cn-word-your{right:12%;top:25%;font-size:clamp(8px,.62vw,10px);letter-spacing:.14em;color:rgba(40,38,36,.32);}
.cn-word-own{left:38%;top:67.5%;font-size:clamp(8px,.68vw,10.5px);letter-spacing:.12em;color:rgba(40,38,36,.36);}
.cn-word-way{left:18%;top:72%;font-size:clamp(10px,.82vw,13px);letter-spacing:.09em;color:rgba(40,38,36,.46);}
.cn-word-time{right:17%;top:64.2%;font-size:clamp(7px,.56vw,8.8px);letter-spacing:.17em;color:rgba(40,38,36,.26);}
.cn-word-quiet{left:53%;top:18.8%;font-size:clamp(7px,.54vw,8.4px);letter-spacing:.17em;color:rgba(40,38,36,.22);}
.cn-word-together{right:7%;top:49%;font-size:clamp(7px,.54vw,8.4px);letter-spacing:.16em;color:rgba(40,38,36,.22);}
.cn-word-comfort{left:60%;top:77%;font-size:clamp(7px,.54vw,8.4px);letter-spacing:.17em;color:rgba(40,38,36,.28);}

.cn-philosophy-converge{
  color:rgba(40,38,36,.54);
  font-size:clamp(7.4px,.66vw,10px);
}

@media (max-width:767px){
  .cn-philosophy-living-photo{
    left:27%;
    top:23%;
    width:74%;
    height:57%;
    -webkit-mask-image:
      radial-gradient(ellipse at 58% 50%, rgba(0,0,0,.98) 0%, rgba(0,0,0,.68) 40%, rgba(0,0,0,.16) 73%, rgba(0,0,0,0) 100%);
    mask-image:
      radial-gradient(ellipse at 58% 50%, rgba(0,0,0,.98) 0%, rgba(0,0,0,.68) 40%, rgba(0,0,0,.16) 73%, rgba(0,0,0,0) 100%);
  }

  .cn-philosophy-living-photo img{
    filter:grayscale(1) contrast(.70) brightness(1.2) blur(2.4px);
    opacity:.20;
    transform:scale(1.42);
  }

  .cn-living-layer img{
    filter:grayscale(1) contrast(.64) brightness(1.23) blur(3.4px);
    opacity:.14;
  }

  .cn-word-freedom{left:20%;top:24.4%;font-size:2.75vw;}
  .cn-word-your{right:9%;top:24%;font-size:1.55vw;}
  .cn-word-own{left:37%;top:67%;font-size:1.8vw;}
  .cn-word-way{left:16%;top:71.5%;font-size:2.35vw;}
  .cn-word-time{right:12%;top:64%;font-size:1.45vw;}
  .cn-word-quiet{left:51%;top:19%;font-size:1.35vw;}
  .cn-word-together{right:5%;top:48%;font-size:1.35vw;}
  .cn-word-comfort{left:58%;top:76.5%;font-size:1.35vw;}
}


/* CN_034 — Philosophy 04 refinement
   1) remove readable photo rectangle
   2) remove visible internal slice boundaries
   3) make semantic gathering slow and atmospheric
   4) give the small English vocabulary more typographic individuality */

.cn-philosophy-living-photo{
  /* Oversize the field so no photo edge reads as a rectangle. */
  left:-8%;
  top:7%;
  width:118%;
  height:82%;
  overflow:hidden;
  -webkit-mask-image:
    radial-gradient(ellipse 66% 58% at 61% 52%,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.54) 39%,
      rgba(0,0,0,.20) 67%,
      rgba(0,0,0,.05) 82%,
      rgba(0,0,0,0) 100%);
  mask-image:
    radial-gradient(ellipse 66% 58% at 61% 52%,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.54) 39%,
      rgba(0,0,0,.20) 67%,
      rgba(0,0,0,.05) 82%,
      rgba(0,0,0,0) 100%);
}

.cn-philosophy-living-photo > .cn-living-photo-base{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:58% 51%;
  filter:grayscale(1) contrast(.63) brightness(1.24) blur(4.6px);
  opacity:.18;
  mix-blend-mode:multiply;
  transform:scale(1.12);
}

/* CN_032's sliced internal photo layers are intentionally retired.
   Their clip-path seams were reading as vertical/horizontal lines. */
.cn-philosophy-living-photo .cn-living-layer{
  display:none !important;
}

/* More varied editorial hierarchy among the orbiting words. */
.cn-word-freedom{
  left:22%; top:24%;
  font-size:clamp(13px,1.08vw,17px);
  letter-spacing:.055em;
  color:rgba(38,36,34,.40);
}
.cn-word-your{
  right:11%; top:23.5%;
  font-size:clamp(6px,.43vw,7.5px);
  letter-spacing:.24em;
  color:rgba(38,36,34,.21);
}
.cn-word-own{
  left:39%; top:68%;
  font-size:clamp(9px,.72vw,11.5px);
  letter-spacing:.10em;
  color:rgba(38,36,34,.30);
}
.cn-word-way{
  left:18%; top:72%;
  font-size:clamp(11px,.88vw,14px);
  letter-spacing:.06em;
  color:rgba(38,36,34,.43);
}
.cn-word-time{
  right:16%; top:64%;
  font-size:clamp(6px,.47vw,7.8px);
  letter-spacing:.25em;
  color:rgba(38,36,34,.20);
}
.cn-word-quiet{
  left:55%; top:45%;
  font-size:clamp(8px,.67vw,10.5px);
  letter-spacing:.19em;
  color:rgba(38,36,34,.20);
}
.cn-word-together{
  right:5.5%; top:47%;
  font-size:clamp(9px,.73vw,11.5px);
  letter-spacing:.23em;
  color:rgba(38,36,34,.19);
}
.cn-word-comfort{
  left:57%; top:76%;
  font-size:clamp(5.8px,.42vw,7px);
  letter-spacing:.28em;
  color:rgba(38,36,34,.18);
}

@media (max-width:767px){
  .cn-philosophy-living-photo{
    left:-18%;
    top:9%;
    width:138%;
    height:78%;
    -webkit-mask-image:
      radial-gradient(ellipse 68% 59% at 61% 51%,
        rgba(0,0,0,.76) 0%,
        rgba(0,0,0,.50) 38%,
        rgba(0,0,0,.17) 67%,
        rgba(0,0,0,.04) 83%,
        rgba(0,0,0,0) 100%);
    mask-image:
      radial-gradient(ellipse 68% 59% at 61% 51%,
        rgba(0,0,0,.76) 0%,
        rgba(0,0,0,.50) 38%,
        rgba(0,0,0,.17) 67%,
        rgba(0,0,0,.04) 83%,
        rgba(0,0,0,0) 100%);
  }

  .cn-philosophy-living-photo > .cn-living-photo-base{
    filter:grayscale(1) contrast(.61) brightness(1.25) blur(4.8px);
    opacity:.17;
    transform:scale(1.14);
  }

  .cn-word-freedom{left:20%;top:24%;font-size:2.9vw;}
  .cn-word-your{right:8%;top:23.5%;font-size:1.25vw;}
  .cn-word-own{left:38%;top:68%;font-size:2.0vw;}
  .cn-word-way{left:16%;top:72%;font-size:2.55vw;}
  .cn-word-time{right:11%;top:64%;font-size:1.25vw;}
  .cn-word-quiet{left:54%;top:45%;font-size:1.75vw;}
  .cn-word-together{right:4%;top:47%;font-size:1.85vw;}
  .cn-word-comfort{left:56%;top:76%;font-size:1.15vw;}
}

/* CN_035 — Philosophy 04: two faint monochrome memories + stronger serif orbit vocabulary */
.cn-philosophy-memory-photo{position:absolute;pointer-events:none;z-index:1;overflow:hidden;will-change:transform,opacity}
.cn-philosophy-memory-photo-2{left:39%;top:14%;width:69%;height:72%;opacity:0;
-webkit-mask-image:radial-gradient(ellipse 60% 61% at 58% 45%,rgba(0,0,0,.58) 0%,rgba(0,0,0,.37) 39%,rgba(0,0,0,.14) 66%,rgba(0,0,0,.025) 84%,transparent 100%);
mask-image:radial-gradient(ellipse 60% 61% at 58% 45%,rgba(0,0,0,.58) 0%,rgba(0,0,0,.37) 39%,rgba(0,0,0,.14) 66%,rgba(0,0,0,.025) 84%,transparent 100%)}
.cn-philosophy-memory-photo-2 img{width:100%;height:100%;object-fit:cover;object-position:63% 26%;filter:grayscale(1) contrast(.58) brightness(1.28) blur(5.8px);opacity:.115;mix-blend-mode:multiply;transform:scale(1.31);will-change:transform}
.cn-philosophy-v6 .cn-orbit-word{font-family:"Cormorant Garamond","Times New Roman",serif;font-style:normal}
.cn-word-freedom{font-size:clamp(17px,1.42vw,23px);letter-spacing:.035em;color:rgba(34,32,30,.49)}
.cn-word-your{font-size:clamp(10px,.72vw,12px);letter-spacing:.20em;color:rgba(34,32,30,.32)}
.cn-word-own{font-size:clamp(13px,1vw,16px);letter-spacing:.08em;color:rgba(34,32,30,.39)}
.cn-word-way{font-size:clamp(16px,1.27vw,20px);letter-spacing:.035em;color:rgba(34,32,30,.52)}
.cn-word-time{font-size:clamp(10px,.76vw,12.5px);letter-spacing:.19em;color:rgba(34,32,30,.31)}
.cn-word-quiet{font-size:clamp(14px,1.08vw,17px);letter-spacing:.12em;color:rgba(34,32,30,.35)}
.cn-word-together{font-size:clamp(15px,1.16vw,18.5px);letter-spacing:.15em;color:rgba(34,32,30,.37)}
.cn-word-comfort{font-size:clamp(10px,.70vw,11.8px);letter-spacing:.21em;color:rgba(34,32,30,.29)}
@media(max-width:767px){
.cn-philosophy-memory-photo-2{left:30%;top:14%;width:88%;height:70%}
.cn-philosophy-memory-photo-2 img{object-position:61% 27%;filter:grayscale(1) contrast(.57) brightness(1.29) blur(5.9px);opacity:.105;transform:scale(1.34)}
.cn-word-freedom{font-size:4vw}.cn-word-your{font-size:2.15vw}.cn-word-own{font-size:2.9vw}.cn-word-way{font-size:3.7vw}
.cn-word-time{font-size:2.2vw}.cn-word-quiet{font-size:3.05vw}.cn-word-together{font-size:3.25vw}.cn-word-comfort{font-size:2.05vw}}


/* CN_037 — Philosophy 04 corrective pass
   IMPORTANT:
   - CN_035 typography sizes/positions remain the initial state.
   - Japanese size changes happen ONLY as scroll progresses.
   - room2 becomes perceptible, still monochrome / blurred / pale.
   - English auto-floating gets a much wider, slow orbit.
*/

.cn-philosophy-memory-photo-2{
  left:35%;
  top:8%;
  width:76%;
  height:78%;
  -webkit-mask-image:
    radial-gradient(ellipse 64% 62% at 60% 42%,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.48) 40%,
      rgba(0,0,0,.18) 67%,
      rgba(0,0,0,.035) 84%,
      rgba(0,0,0,0) 100%);
  mask-image:
    radial-gradient(ellipse 64% 62% at 60% 42%,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.48) 40%,
      rgba(0,0,0,.18) 67%,
      rgba(0,0,0,.035) 84%,
      rgba(0,0,0,0) 100%);
}

.cn-philosophy-memory-photo-2 img{
  object-position:64% 23%;
  filter:grayscale(1) contrast(.64) brightness(1.22) blur(4.4px);
  opacity:.22;
}

/* WAY must not sit on the Japanese message. */
.cn-word-way{
  left:13%;
  top:80%;
}

/* Scroll scaling uses transform only; base font sizes remain CN_035. */
.cn-philosophy-v6 .cn-philosophy-title,
.cn-philosophy-v6 .cn-philosophy-body,
.cn-philosophy-v6 .cn-philosophy-statement{
  transform-origin:left top;
  will-change:transform;
}

@media(max-width:767px){
  .cn-philosophy-memory-photo-2{
    left:24%;
    top:7%;
    width:102%;
    height:78%;
  }

  .cn-philosophy-memory-photo-2 img{
    object-position:63% 22%;
    filter:grayscale(1) contrast(.63) brightness(1.23) blur(4.5px);
    opacity:.20;
  }

  .cn-word-way{
    left:12%;
    top:80%;
  }
}


/* =========================================================
   CN_041 — PAGE 05 / COLLECTION
   Mobile-first moving editorial prototype.
   Dummy plates only; final photography can be swapped later.
   ========================================================= */
.cn-collection-layer{ background:#f7f6f2; }
.cn-collection-stage{
  background:#f7f6f2;
  color:#111;
  isolation:isolate;
}
.cn-collection-counter{
  position:absolute;
  right:7.4%;
  top:13.2%;
  z-index:20;
  display:flex;
  align-items:baseline;
  gap:4px;
  font:500 7px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.12em;
}
.cn-collection-counter strong{
  font-family:"Cormorant Garamond","Times New Roman",serif;
  font-size:20px;
  line-height:1;
  font-weight:400;
  letter-spacing:0;
}
.cn-collection-title{
  position:absolute;
  left:6.2%;
  top:15.4%;
  z-index:9;
  font-family:"Cormorant Garamond","Times New Roman",serif;
  font-size:15.3vw;
  line-height:.82;
  letter-spacing:-.058em;
  white-space:nowrap;
  transform-origin:left center;
  will-change:transform,opacity;
}
.cn-collection-sub{
  position:absolute;
  right:7.4%;
  top:25.2%;
  z-index:10;
  font:500 7px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.18em;
  white-space:nowrap;
  will-change:transform,opacity;
}
.cn-collection-shot{
  position:absolute;
  margin:0;
  z-index:5;
  will-change:transform,opacity;
}
.cn-collection-shot-a{
  left:16%;
  top:29%;
  width:68%;
  height:46%;
  z-index:6;
}
.cn-collection-shot-b{
  left:58%;
  top:20%;
  width:34%;
  height:29%;
  z-index:5;
  opacity:0;
}
.cn-collection-shot-c{
  left:7%;
  top:53%;
  width:43%;
  height:28%;
  z-index:7;
  opacity:0;
}
.cn-collection-placeholder{
  position:absolute;
  inset:0 0 17px;
  overflow:hidden;
  background:#d7d4ce;
  filter:grayscale(1);
}
.cn-collection-placeholder::before,
.cn-collection-placeholder::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.cn-collection-placeholder::before{
  width:72%;
  aspect-ratio:1;
  left:-20%;
  top:16%;
  background:rgba(255,255,255,.57);
  box-shadow:47vw -14vw 0 rgba(30,30,30,.10);
}
.cn-collection-placeholder::after{
  width:44%;
  aspect-ratio:1;
  right:-7%;
  bottom:7%;
  border:1px solid rgba(20,20,20,.18);
  box-shadow:-25vw -22vw 0 7vw rgba(255,255,255,.24);
}
.cn-collection-placeholder-b{ background:#c7c5bf; }
.cn-collection-placeholder-c{ background:#e1ded7; }
.cn-collection-placeholder span{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  font:500 7px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.2em;
  color:rgba(0,0,0,.34);
}
.cn-collection-shot figcaption{
  position:absolute;
  left:0;
  bottom:0;
  font:500 6.5px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.15em;
  white-space:nowrap;
}
.cn-collection-meta{
  position:absolute;
  left:7.4%;
  bottom:10.5%;
  z-index:10;
  font:500 6.5px/1.45 Arial,Helvetica,sans-serif;
  letter-spacing:.13em;
  will-change:transform,opacity;
}
.cn-collection-place{
  position:absolute;
  right:7.4%;
  bottom:10.5%;
  z-index:10;
  writing-mode:vertical-rl;
  font:500 6.5px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.13em;
  will-change:transform,opacity;
}
.cn-collection-final{
  position:absolute;
  left:7%;
  top:35%;
  z-index:11;
  opacity:0;
  font-family:"Cormorant Garamond","Times New Roman",serif;
  font-size:12.7vw;
  line-height:.83;
  letter-spacing:-.048em;
  pointer-events:none;
  will-change:transform,opacity;
}

/* PC is intentionally not designed yet; only keep the prototype usable. */
@media (min-width:768px){
  .cn-collection-title{font-size:8vw;}
  .cn-collection-final{font-size:6.5vw;}
  .cn-collection-shot-a{left:31%;width:38%;}
  .cn-collection-shot-b{left:69%;width:20%;}
  .cn-collection-shot-c{left:12%;width:24%;}
}


/* =========================================================
   CN_042 — PAGE 03 / iOS WebKit edge-artifact containment
   Rendering-only fix: preserve the completed Editorial 01 appearance.
   ========================================================= */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 767px) {
    .cn-editorial-photo,
    .cn-editorial-photo-image {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      transform-style: preserve-3d;
    }

    .cn-editorial-photo-image {
      /* Keep the filtered image on a stable compositor surface so its
         right raster edge is not exposed while blur/opacity are changing. */
      outline: 1px solid transparent;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
    }
  }
}


/* =========================================================
   CN_044 — PAGE 03 / iOS WebKit entrance blur isolation
   CN_043 overscan reverted. CN_042 exit fix retained.
   Rendering-only: isolate the blurred child on its own stable
   compositor surface; visual geometry and animation stay intact.
   ========================================================= */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 767px) {
    .cn-editorial-photo-image {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      will-change: filter;
      contain: paint;
    }
  }
}