*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#0b0a08;color:#f2eee7;font-family:"Noto Serif JP",serif;font-weight:300}a{color:inherit;text-decoration:none}img{display:block;width:100%}.story-header{position:fixed;z-index:50;top:0;left:0;right:0;height:74px;display:flex;align-items:center;padding:0 34px;border-bottom:1px solid rgba(255,255,255,.14);background:rgba(10,9,8,.74);backdrop-filter:blur(14px)}.brand{font-family:"Cormorant Garamond",serif;font-size:20px;letter-spacing:.16em;white-space:nowrap}.desktop-nav{margin-left:auto;display:flex;align-items:center;gap:19px}.desktop-nav a{font:500 11px/1 Arial,sans-serif;letter-spacing:.12em;opacity:.72}.desktop-nav a:hover,.desktop-nav .active{opacity:1}.header-actions{display:flex;align-items:center;gap:12px;margin-left:20px}.lang-btn,.menu-btn{background:none;border:0;color:#fff}.lang-btn{font:500 11px Arial;letter-spacing:.12em;cursor:pointer}.menu-btn{display:none;width:36px;height:36px;position:relative}.menu-btn span{position:absolute;left:8px;right:8px;height:1px;background:#fff}.menu-btn span:first-child{top:14px}.menu-btn span:last-child{top:21px}.mobile-menu{display:none}.hero{height:min(88vh,900px);min-height:640px;position:relative;overflow:hidden}.hero img{height:100%;object-fit:cover}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.15) 58%,rgba(0,0,0,.08)),linear-gradient(0deg,rgba(0,0,0,.42),transparent 50%)}.hero-copy{position:absolute;left:7vw;bottom:11%;max-width:800px}.hero-copy p,.eyebrow{font:500 11px/1.3 Arial,sans-serif;letter-spacing:.27em;text-transform:uppercase}.hero-copy h1{font-family:"Cormorant Garamond",serif;font-size:clamp(72px,9vw,140px);font-weight:400;line-height:.8;letter-spacing:.02em;margin:18px 0 24px}.hero-copy span{font-size:15px;letter-spacing:.08em}.story-section{position:relative;display:grid;grid-template-columns:minmax(70px,10vw) minmax(0,760px) 1fr;gap:4vw;padding:150px 7vw;background:#f2efe9;color:#17130f}.story-section.reverse{background:#e9e3da}.story-section.dark{background:#14110e;color:#f2eee7}.section-number{font:400 12px Arial,sans-serif;letter-spacing:.2em;opacity:.5;padding-top:9px}.story-copy{grid-column:2}.story-copy.wide-copy{max-width:900px}.story-copy h2,.philosophy h2{font-family:"Cormorant Garamond","Noto Serif JP",serif;font-size:clamp(42px,5vw,74px);font-weight:400;line-height:1.05;margin:22px 0 48px;letter-spacing:.01em}.body{font-size:16px;line-height:2.15;letter-spacing:.04em}.body p{margin:0 0 24px}.statement{font-size:clamp(20px,2.4vw,30px);line-height:1.75!important;margin:42px 0!important}.en-only{display:none}.is-en .ja-only{display:none}.is-en .en-only{display:block}.is-en{font-family:"Cormorant Garamond",serif}.is-en .body{font-family:Georgia,serif;font-size:18px;line-height:1.8}.image-break-wide{height:min(74vw,820px);overflow:hidden}.image-break-wide img{height:100%;object-fit:cover}.ingredient-grid{display:grid;grid-template-columns:repeat(3,1fr);background:#0b0a08}.ingredient-grid figure,.art-pair figure{margin:0;position:relative;overflow:hidden}.ingredient-grid img{aspect-ratio:1/1.18;height:100%;object-fit:cover;transition:transform .8s ease}.ingredient-grid figure:hover img{transform:scale(1.025)}.ingredient-grid figcaption{position:absolute;left:28px;bottom:26px;text-shadow:0 2px 12px rgba(0,0,0,.55)}.ingredient-grid figcaption span{display:block;font:500 9px Arial;letter-spacing:.22em;margin-bottom:8px}.ingredient-grid figcaption strong{font-family:"Cormorant Garamond",serif;font-size:28px;font-weight:500;letter-spacing:.04em}.art-pair{display:grid;grid-template-columns:1fr 1fr}.art-pair img{aspect-ratio:16/11;height:100%;object-fit:cover;filter:saturate(.78)}.art-pair figcaption{position:absolute;left:30px;bottom:26px;font:500 11px Arial;letter-spacing:.26em}.philosophy{padding:160px 9vw 130px;text-align:center;background:#090806}.philosophy .section-number{padding:0;margin-bottom:28px}.philosophy h2{max-width:980px;margin:28px auto 54px}.philosophy-copy{max-width:760px;margin:0 auto;font-size:17px;line-height:2.05}.closing-lines{margin:120px auto 76px;display:flex;flex-direction:column;align-items:center;gap:7px;font-family:"Cormorant Garamond",serif;letter-spacing:.13em}.closing-lines span{font-size:18px;opacity:.65}.closing-lines strong{font-size:clamp(30px,4.5vw,64px);font-weight:400;margin-top:28px;letter-spacing:.04em}.story-cta{display:inline-block;border-bottom:1px solid rgba(255,255,255,.55);padding:12px 0;font:500 11px Arial;letter-spacing:.2em}footer{display:flex;justify-content:space-between;padding:28px 34px;border-top:1px solid rgba(255,255,255,.12);font:500 10px Arial;letter-spacing:.16em;color:rgba(255,255,255,.62)}
@media(max-width:1100px){.desktop-nav{display:none}.menu-btn{display:block}.mobile-menu{display:block;position:fixed;z-index:45;top:74px;left:0;right:0;background:#0a0908;padding:24px 28px 34px;transform:translateY(-120%);transition:transform .35s ease;border-bottom:1px solid rgba(255,255,255,.14)}.mobile-menu.open{transform:translateY(0)}.mobile-menu nav{display:flex;flex-direction:column}.mobile-menu a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1);font:500 12px Arial;letter-spacing:.12em}.story-section{grid-template-columns:70px minmax(0,1fr);padding:110px 7vw}.story-copy{grid-column:2}.ingredient-grid{grid-template-columns:1fr 1fr}.ingredient-grid figure:last-child{grid-column:1/-1}.ingredient-grid figure:last-child img{aspect-ratio:2/1}}
@media(max-width:700px){.story-header{height:64px;padding:0 18px}.brand{font-size:17px}.header-actions{margin-left:auto}.mobile-menu{top:64px}.hero{height:78vh;min-height:560px}.hero img{object-position:48% center}.hero-overlay{background:linear-gradient(0deg,rgba(0,0,0,.66),transparent 65%)}.hero-copy{left:22px;right:22px;bottom:9%}.hero-copy h1{font-size:64px;line-height:.9;margin:12px 0 18px}.hero-copy span{font-size:13px;line-height:1.7}.story-section{display:block;padding:82px 22px}.section-number{margin-bottom:40px}.story-copy h2,.philosophy h2{font-size:42px;margin:16px 0 36px;line-height:1.12}.body{font-size:15px;line-height:2}.body p{margin-bottom:22px}.statement{font-size:19px!important;line-height:1.8!important;margin:34px 0!important}.image-break-wide{height:72vh;max-height:640px}.ingredient-grid{display:block}.ingredient-grid img{aspect-ratio:4/5}.ingredient-grid figcaption{left:20px;bottom:20px}.art-pair{display:block}.art-pair img{aspect-ratio:4/3}.philosophy{padding:100px 22px 86px}.philosophy-copy{font-size:15px;line-height:2}.closing-lines{margin:84px auto 58px;gap:5px}.closing-lines span{font-size:15px}.closing-lines strong{font-size:38px;line-height:1.05;margin-top:24px}footer{padding:24px 18px;gap:20px;font-size:9px}}


/* 2026-09 Story typography refinement: clean, intentional line breaks */
.story-copy h2,.philosophy h2{
  text-wrap:balance;
  max-width:14em;
}
.body,.philosophy-copy{
  line-break:strict;
  word-break:normal;
  overflow-wrap:normal;
  text-wrap:pretty;
}
.body p,.philosophy-copy p{
  max-width:42em;
}
.ja-only{
  letter-spacing:.025em;
}
.story-br-desktop{display:block}
@media(max-width:700px){
  .story-copy h2,.philosophy h2{
    max-width:11em;
    text-wrap:balance;
  }
  .body,.philosophy-copy{
    line-height:2.08;
    letter-spacing:.015em;
  }
  .body p,.philosophy-copy p{
    max-width:100%;
  }
  .story-br-desktop{display:none}
  .statement{
    max-width:17em;
  }
}

/* Final story line-break and closing translation refinements */
.closing-lines.ja-only span{
  font-family:"Noto Serif JP",serif;
  text-transform:none;
  letter-spacing:.08em;
}
.closing-lines.ja-only strong{
  font-family:"Noto Serif JP",serif;
  text-transform:none;
  letter-spacing:.04em;
  line-height:1.45;
}
@media(max-width:700px){
  .closing-lines.ja-only span{font-size:14px;}
  .closing-lines.ja-only strong{font-size:30px;line-height:1.45;}
}


/* 2026-09 mobile Japanese story cleanup */
.story-br-mobile{display:none}
@media(max-width:700px){
  /* Never show both language blocks on mobile. */
  body:not(.is-en) .en-only{display:none!important}
  body:not(.is-en) .ja-only{display:block!important}
  body.is-en .ja-only{display:none!important}
  body.is-en .en-only{display:block!important}

  .story-br-mobile{display:inline}
  .story-copy h2,.philosophy h2{
    word-break:keep-all;
    overflow-wrap:normal;
    text-wrap:balance;
    line-height:1.25;
  }
  .body.ja-only,.philosophy-copy.ja-only{
    word-break:keep-all;
    overflow-wrap:break-word;
    line-break:strict;
    text-wrap:pretty;
  }
  .body.ja-only p,.philosophy-copy.ja-only p{
    line-height:2.05;
    margin-bottom:24px;
  }
  .closing-lines.en-only{display:none!important}
  body.is-en .closing-lines.en-only{display:flex!important}
  body.is-en .closing-lines.ja-only{display:none!important}
  body:not(.is-en) .closing-lines.ja-only{display:flex!important}
}


/* 2026-09 mobile OUR STORY cleanup */
.story-br-mobile{display:none}
/* Keep the English closing completely hidden in Japanese mode; .closing-lines sets display:flex later. */
.closing-lines.en-only{display:none}
.is-en .closing-lines.en-only{display:flex}
@media(max-width:700px){
  .story-br-mobile{display:block}
  .story-copy h2,.philosophy h2{
    max-width:none;
    width:100%;
    text-wrap:balance;
    word-break:keep-all;
    overflow-wrap:normal;
  }
  .body.ja-only p,.philosophy-copy.ja-only p{
    word-break:normal;
    line-break:strict;
    overflow-wrap:break-word;
    text-wrap:pretty;
  }
  .closing-lines.ja-only{
    display:flex;
    width:100%;
    padding:0 4px;
  }
  .closing-lines.ja-only span,
  .closing-lines.ja-only strong{
    word-break:keep-all;
    overflow-wrap:normal;
    text-wrap:balance;
  }
}

/* 2026-09-20 — Mobile Japanese OUR STORY fit refinement */
@media (max-width:700px){
  /* Give Japanese copy enough usable width while keeping the editorial rhythm. */
  body:not(.is-en) .story-section{
    padding:76px 20px;
    overflow:hidden;
  }
  body:not(.is-en) .story-copy,
  body:not(.is-en) .body,
  body:not(.is-en) .philosophy-copy{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  body:not(.is-en) .hero-copy{
    left:20px;
    right:20px;
    max-width:calc(100% - 40px);
  }
  body:not(.is-en) .hero-copy h1{
    font-size:clamp(48px,16vw,64px);
    line-height:.92;
    max-width:100%;
  }
  body:not(.is-en) .hero-copy span{
    display:block;
    max-width:100%;
    font-size:12.5px;
    line-height:1.75;
    letter-spacing:.045em;
    overflow-wrap:anywhere;
  }

  body:not(.is-en) .story-copy h2,
  body:not(.is-en) .philosophy h2{
    width:100%;
    max-width:100%;
    font-size:clamp(31px,10.2vw,40px);
    line-height:1.28;
    letter-spacing:0;
    word-break:normal;
    overflow-wrap:break-word;
    line-break:strict;
    text-wrap:pretty;
  }

  body:not(.is-en) .body.ja-only,
  body:not(.is-en) .philosophy-copy.ja-only{
    font-size:clamp(13.5px,4.15vw,15px);
    line-height:2.05;
    letter-spacing:.005em;
    word-break:normal;
    overflow-wrap:break-word;
    line-break:strict;
    text-wrap:pretty;
  }
  body:not(.is-en) .body.ja-only p,
  body:not(.is-en) .philosophy-copy.ja-only p{
    width:100%;
    max-width:100%;
    margin-bottom:22px;
  }

  /* Let ordinary prose wrap naturally on narrow phones. Intentional <br>s remain. */
  body:not(.is-en) .story-br-mobile{display:none;}
  body:not(.is-en) .story-copy h2 br,
  body:not(.is-en) .philosophy h2 br{display:block;}

  body:not(.is-en) .statement{
    width:100%;
    max-width:100%;
    font-size:clamp(16px,5.2vw,19px)!important;
    line-height:1.85!important;
    letter-spacing:0;
    overflow-wrap:break-word;
  }

  body:not(.is-en) .philosophy{
    padding:94px 20px 82px;
    overflow:hidden;
  }
  body:not(.is-en) .closing-lines.ja-only{
    width:100%;
    max-width:100%;
    padding:0;
    gap:7px;
  }
  body:not(.is-en) .closing-lines.ja-only span{
    width:100%;
    font-size:clamp(13px,4vw,14px);
    line-height:1.7;
    letter-spacing:.045em;
    word-break:normal;
    overflow-wrap:break-word;
  }
  body:not(.is-en) .closing-lines.ja-only strong{
    width:100%;
    max-width:12em;
    font-size:clamp(25px,8.4vw,30px);
    line-height:1.48;
    letter-spacing:.015em;
    word-break:normal;
    overflow-wrap:break-word;
  }

  body:not(.is-en) .ingredient-grid figcaption strong{
    font-size:clamp(23px,7vw,28px);
  }
  body:not(.is-en) footer{
    flex-wrap:wrap;
    row-gap:8px;
  }
}

@media (max-width:380px){
  body:not(.is-en) .story-section{padding-left:18px;padding-right:18px;}
  body:not(.is-en) .philosophy{padding-left:18px;padding-right:18px;}
  body:not(.is-en) .story-copy h2,
  body:not(.is-en) .philosophy h2{font-size:30px;}
  body:not(.is-en) .body.ja-only,
  body:not(.is-en) .philosophy-copy.ja-only{font-size:13.5px;}
}

/* Mobile JP line-break refinements 2026-09-21 */
.mobile-jp-only{display:none}
@media (max-width: 768px){
  html[lang="ja"] .desktop-jp-only{display:none!important}
  html[lang="ja"] .mobile-jp-only{display:block!important}
}

@media (max-width:768px){
.ingredient-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
padding:0 18px 28px;
background:#0b0a08;
}
.ingredient-grid figure{width:100%;}
.ingredient-grid img{
width:100%;
aspect-ratio:1/1;
height:auto;
border-radius:8px;
}
.ingredient-grid figcaption{left:10px;bottom:10px;}
.ingredient-grid figcaption strong{font-size:13px;}
.ingredient-grid figcaption span{font-size:7px;}
}

/* Mobile Our Story ingredient images — unified, readable sizing */
@media (max-width:768px){
  .ingredient-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    width:min(90vw,520px);
    margin:0 auto;
    padding:0 0 32px;
    background:#0b0a08;
  }
  .ingredient-grid figure,
  .ingredient-grid figure:last-child{
    width:100%;
    aspect-ratio:4/3;
    margin:0;
    grid-column:auto;
    overflow:hidden;
    border-radius:8px;
  }
  .ingredient-grid img,
  .ingredient-grid figure:last-child img{
    width:100%;
    height:100%;
    aspect-ratio:auto;
    object-fit:cover;
    border-radius:0;
  }
  .ingredient-grid figcaption{
    left:16px;
    bottom:14px;
  }
  .ingredient-grid figcaption strong{font-size:20px;}
  .ingredient-grid figcaption span{font-size:8px;}
}


/* 2026-09 mobile-only forced Japanese line breaks */
.story-br-mobile-force{display:none;}
@media(max-width:700px){
  body:not(.is-en) .story-br-mobile-force{display:block;}
}