/* Full-width backgrounds with the 1800px editorial container used by Custom Studio.
   Homepage's 4.5vw gutter keeps header and copy aligned across the site. */
:root{--content-width:min(100%,1800px);--u:calc(min(100vw,1800px) / 1024);--page-gutter:clamp(24px,4.5vw,86px)}
body{width:100%;max-width:none;margin:0;background:var(--paper)}
#main-content{width:100%}
.brand-intro{width:100%;margin-left:0}
.about-hero,.chapter-nav,.our-story,.our-philosophy{width:100%;max-width:none;margin:0}
.about-content-frame{width:100%;max-width:1800px;margin-inline:auto;position:relative;height:100%}
.about-hero{background:radial-gradient(ellipse at 25% 35%,#fff,#f7f7f7 70%,#efefef)}
/* The yellow field spans the screen independently of the product/copy frame. */
.about-hero::before{content:'';position:absolute;inset:0;background:#ffe000;clip-path:polygon(76.8% 0,100% 0,100% 100%,54% 100%)}
.hero-yellow{display:none}
.site-header{left:var(--page-gutter);right:var(--page-gutter)}
.hero-copy{left:var(--page-gutter)}
.chapter-nav{padding:0;display:block}
.chapter-content-frame{display:grid;grid-template-columns:1.1fr 1.3fr 1fr 1.1fr .9fr;align-items:center;padding-inline:var(--page-gutter)}
.our-philosophy{padding:0}
.philosophy-content-frame{min-height:calc(538 * var(--u));padding:calc(35 * var(--u)) var(--page-gutter) calc(37 * var(--u))}
.hero-art,.story-player,.story-mountain,.philosophy-ghost,.belief-image{background-repeat:no-repeat}
@media(max-width:700px){
 :root{--u:1px;--page-gutter:24px}
 .about-content-frame{height:auto}
 .hero-content-frame{height:100%}
 .about-hero::before{height:421px;clip-path:polygon(84% 0,100% 0,100% 100%,63.5% 100%)}
 .site-header{left:22px;right:22px}
 .chapter-content-frame{grid-template-columns:1fr 1fr;min-height:142px;padding:20px 24px;gap:18px}
 .chapter-nav{min-height:0}
 .story-content-frame{display:flex;flex-direction:column}
 .philosophy-content-frame{min-height:0;padding:34px 24px 40px}
}
@media(min-width:701px) and (max-width:1000px){
 .site-header .main-nav{gap:calc(19 * var(--u))}
}
@media(min-width:701px){
 /* Artwork reaches the viewport edges while editable copy stays in its frame. */
 .hero-art,.story-mountain,.philosophy-ghost{right:calc((min(100vw,1800px) - 100vw) / 2)}
 .story-player{left:calc((min(100vw,1800px) - 100vw) / 2)}
 .about-hero::before{clip-path:polygon(76.8% 0,100% 0,100% 58%,63% 83%)}
}
@media(min-width:701px){
 .about-hero::before{clip-path:polygon(calc(100% - 238 * var(--u)) 0,100% 0,100% 58%,calc(100% - 379 * var(--u)) 83%)}
}
.philosophy-ghost{mix-blend-mode:multiply}