* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #eee8dd; color: #120f0d; font-family: "Noto Sans SC", "Noto Sans JP", sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }.language-page { display: none; }.language-page.active { display: block; }
.language-switch { background: #100e0d; border: 2px solid #f4ede1; display: flex; padding: 3px; position: fixed; right: 3vw; top: 78px; transform: rotate(2deg); z-index: 50; }.language-switch button { background: none; border: 0; color: #9b9188; cursor: pointer; font: inherit; font-size: 9px; padding: 7px 11px; }.language-switch button.active { background: #d1111b; color: #fff; }
.site-header { align-items: center; color: #fff; display: flex; height: 62px; justify-content: space-between; padding: 0 4vw; position: absolute; width: 100%; z-index: 20; }.logo { align-items: center; display: flex; font-size: 9px; font-weight: 900; gap: 12px; letter-spacing: .17em; }.brand-mark { display: grid; gap: 2px; grid-template-columns: repeat(2, 8px); transform: rotate(45deg); }.brand-mark b { background: #fff; display: block; height: 8px; }.brand-mark b:nth-child(1), .brand-mark b:nth-child(4) { background: #d1111b; }nav { display: flex; font-size: 9px; gap: 25px; }.header-cta { border-bottom: 2px solid #d1111b; font-size: 9px; font-weight: 900; padding-bottom: 5px; }
.hero { background: #100e0d; color: #fff; min-height: 100vh; overflow: hidden; position: relative; }.hero::before { background: #d1111b; clip-path: polygon(42% 0, 100% 0, 100% 100%, 13% 100%); content: ""; inset: 0 0 0 48%; position: absolute; }.hero::after { border: 2px solid rgba(255,255,255,.55); content: ""; height: 140vh; position: absolute; right: 15vw; top: -20vh; transform: rotate(24deg); width: 12vw; }
.system-status { color: #aaa098; display: flex; font-size: 7px; gap: 25px; left: 4vw; letter-spacing: .2em; position: absolute; top: 95px; z-index: 3; }.hero-copy { padding: 19vh 6vw 10vh 8vw; position: relative; width: 67%; z-index: 4; }.eyebrow { color: #d1111b; font-size: 8px; font-weight: 900; letter-spacing: .28em; margin: 0 0 22px; text-transform: uppercase; }h1, h2 { font-family: "Noto Serif JP", "Noto Sans JP", serif; font-weight: 700; letter-spacing: -.06em; line-height: 1.08; margin: 0; }h1 { font-size: clamp(55px, 7.6vw, 120px); max-width: 7.4em; transform: rotate(-2deg); }h2 { font-size: clamp(41px, 5.5vw, 82px); }
.lead { background: #100e0d; color: #c2b9b0; font-size: 12px; line-height: 2; margin-top: 35px; max-width: 570px; padding: 14px 17px; transform: rotate(1deg); }.actions { display: flex; gap: 14px; margin-top: 38px; }.button { background: #f2eadf; color: #120f0d; font-size: 9px; font-weight: 900; letter-spacing: .1em; padding: 12px 17px; transform: rotate(-1deg); }.button.secondary { background: transparent; border: 1px solid #fff; color: #fff; transform: rotate(1deg); }
.hero-emblem { align-items: center; display: flex; height: 65vh; justify-content: center; position: absolute; right: 3vw; top: 18vh; width: 38vw; z-index: 3; }.emblem-core { align-items: center; background: #f3ecdf; border-radius: 50%; color: #d1111b; display: flex; height: min(25vw, 380px); justify-content: center; transform: rotate(8deg); width: min(25vw, 380px); }.emblem-core b { font-family: "Noto Serif JP", serif; font-size: clamp(90px, 13vw, 190px); }.hero-emblem span { bottom: 0; font-size: 7px; letter-spacing: .4em; position: absolute; right: 8%; writing-mode: vertical-rl; }.wild-word { bottom: -5vh; color: transparent; font-family: "Noto Serif JP", serif; font-size: 27vw; font-weight: 900; left: -4vw; line-height: .8; opacity: .22; position: absolute; transform: rotate(-8deg); -webkit-text-stroke: 2px #fff; }.hero-terminal { bottom: 25px; color: #fff; display: flex; font-size: 7px; gap: 25px; left: 4vw; letter-spacing: .2em; position: absolute; z-index: 5; }
.prologue { align-items: center; background: #d1111b; color: #fff; display: grid; gap: 5vw; grid-template-columns: .2fr 1.5fr .4fr; padding: 38px 6vw; transform: rotate(-1deg) scale(1.02); }.prologue span { font-family: "Noto Serif JP", serif; font-size: 58px; }.prologue p { font-family: "Noto Serif JP", serif; font-size: 14px; margin: 0; }.prologue b { font-size: 7px; letter-spacing: .2em; }
.section { padding: 140px 7vw; }.story { background: #eee8dd; display: grid; gap: 8vw; grid-template-columns: .35fr 1.65fr; position: relative; }.story::after { color: rgba(209,17,27,.08); content: "道"; font-family: "Noto Serif JP", serif; font-size: 50vw; line-height: .8; position: absolute; right: -8vw; top: 2vw; }.chapter-mark, .story-copy { position: relative; z-index: 2; }.chapter-mark { border-top: 6px solid #120f0d; display: flex; justify-content: space-between; padding-top: 11px; transform: rotate(-2deg); }.chapter-mark span { font-size: 7px; letter-spacing: .2em; }.chapter-mark b { color: #d1111b; font-family: "Noto Serif JP", serif; font-size: 60px; line-height: 1; }.story-copy h2 { transform: rotate(1deg); }.story-copy > p:not(.eyebrow) { color: #6e655e; font-size: 12px; line-height: 2.2; margin: 42px 0 27px; max-width: 760px; }.story-copy strong { background: #120f0d; color: #fff; display: inline-block; font-size: 12px; max-width: 780px; padding: 17px 20px; transform: rotate(-1deg); }
.chapter-heading { align-items: end; display: flex; gap: 10vw; justify-content: space-between; margin-bottom: 70px; }.chapter-heading > p { font-size: 11px; line-height: 2; max-width: 360px; }.audiences { background: #120f0d; color: #fff; transform: skewY(-2deg); }.audiences > * { transform: skewY(2deg); }.audience-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }.audience-card { border: 1px solid #5f5650; min-height: 510px; padding: 30px; position: relative; }.audience-card:nth-child(2) { background: #d1111b; transform: translateY(55px) rotate(2deg); }.audience-card:nth-child(3) { transform: rotate(-2deg); }.audience-index { color: #e96b70; font-family: "Noto Serif JP", serif; font-size: 14px; }.node-signal { display: flex; gap: 7px; margin: 70px 0 35px; }.node-signal i { background: #d1111b; height: 7px; transform: rotate(45deg); width: 7px; }.audience-card:nth-child(2) .node-signal i { background: #fff; }.audience-card h3, .service-card h3, .principle h3 { font-family: "Noto Serif JP", serif; font-size: 20px; margin: 0 0 16px; }.card-body, .service-card p, .principle p { color: #aaa097; font-size: 11px; line-height: 2; }.audience-card:nth-child(2) .card-body { color: #fff; }.audience-card ul { border-top: 1px solid #5c534d; list-style: none; margin: 28px 0 0; padding: 16px 0 0; }.audience-card li { font-size: 10px; padding: 5px 0; }
.services { background: #f2ebdf; }.service-grid { display: grid; gap: 25px; grid-template-columns: repeat(2, 1fr); }.service-card { background: #fff; border: 2px solid #171310; min-height: 250px; padding: 27px; position: relative; }.service-card:nth-child(2n) { transform: translateY(55px) rotate(1deg); }.service-card:nth-child(3n) { background: #d1111b; color: #fff; transform: rotate(-2deg); }.service-card:nth-child(3n) p, .service-card:nth-child(3n) .service-meta { color: #fff; }.service-card::after { border: 2px solid #d1111b; bottom: 18px; color: #d1111b; content: "印"; font-family: "Noto Serif JP", serif; font-size: 20px; height: 42px; padding: 4px; position: absolute; right: 18px; text-align: center; transform: rotate(8deg); width: 42px; }.service-card:nth-child(3n)::after { border-color: #fff; color: #fff; }.service-meta { color: #d1111b; display: flex; font-size: 7px; justify-content: space-between; letter-spacing: .2em; margin-bottom: 48px; }
.statement { background: #d1111b; color: #fff; min-height: 80vh; overflow: hidden; padding: 150px 8vw; position: relative; }.statement::before { color: rgba(255,255,255,.16); content: "結"; font-family: "Noto Serif JP", serif; font-size: 65vw; line-height: .7; position: absolute; right: -6vw; top: -5vw; transform: rotate(15deg); }.statement > * { position: relative; z-index: 2; }.statement-stamp { border: 3px solid #fff; font-family: "Noto Serif JP", serif; font-size: 50px; margin-bottom: 45px; padding: 7px; transform: rotate(-8deg); width: fit-content; }.statement p { font-size: 8px; letter-spacing: .25em; }.statement h2 { max-width: 1050px; transform: rotate(-2deg); }.statement em { color: #120f0d; font-style: normal; }
.principles { background: #120f0d; color: #fff; display: grid; gap: 8vw; grid-template-columns: .35fr 1.65fr; }.principle-grid { border-top: 1px solid #5b524c; margin-top: 60px; }.principle { border-bottom: 1px solid #5b524c; display: grid; gap: 30px; grid-template-columns: .15fr .65fr 1.2fr; padding: 30px 0; }.principle:nth-child(2) { transform: translateX(35px); }.principle > span { color: #d1111b; font-family: "Noto Serif JP", serif; font-size: 24px; }.principle p { margin: 0; }
.contact { background: #eee8dd; border: 25px solid #d1111b; padding: 135px 8vw; position: relative; text-align: center; }.contact::after { color: rgba(209,17,27,.08); content: "縁"; font-family: "Noto Serif JP", serif; font-size: 45vw; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%) rotate(-8deg); }.contact > * { position: relative; z-index: 2; }.contact h2 { margin: auto; max-width: 1000px; }.contact > p:not(.eyebrow) { color: #6e655e; font-size: 11px; line-height: 2; margin: 30px auto; max-width: 620px; }.contact-label { border: 2px solid #171310; display: inline-block; font-size: 9px; font-weight: 900; padding: 10px 16px; transform: rotate(2deg); }
footer { align-items: center; background: #120f0d; color: #8e847c; display: flex; font-size: 8px; justify-content: space-between; padding: 29px 4vw; }footer strong { color: #fff; font-size: 9px; letter-spacing: .15em; }footer p { margin: 3px 0; }footer button { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; text-decoration: underline; }dialog { border: 0; border-top: 8px solid #d1111b; max-width: 650px; padding: 43px; }dialog::backdrop { background: rgba(0,0,0,.85); }dialog h2 { font-size: 22px; }dialog p { color: #6e655e; font-size: 11px; line-height: 2; }.dialog-close { background: none; border: 0; cursor: pointer; font-size: 25px; position: absolute; right: 14px; top: 7px; }.reveal { opacity: 0; transform: translateY(25px) rotate(1deg); transition: .8s; }.reveal.visible { opacity: 1; transform: none; }
@media (max-width: 850px) { nav { display: none; }.site-header { padding: 0 18px; }.language-switch { right: 18px; top: 72px; }.hero-copy { padding: 150px 24px 65px; width: 100%; }.hero::before { clip-path: polygon(70% 0,100% 0,100% 100%,35% 100%); inset-left: 0; }.hero-emblem { bottom: 40px; height: 35vh; opacity: .65; right: -18vw; top: auto; width: 65vw; }.emblem-core { height: 45vw; width: 45vw; }.system-status { display: none; }.prologue { grid-template-columns: .2fr 1fr; padding: 28px 20px; }.prologue b { display: none; }.section { padding: 85px 20px; }.story, .principles { grid-template-columns: 1fr; }.chapter-heading { align-items: start; flex-direction: column; gap: 25px; }.audience-grid, .service-grid { grid-template-columns: 1fr; }.audience-card:nth-child(2), .audience-card:nth-child(3), .service-card:nth-child(2n), .service-card:nth-child(3n), .principle:nth-child(2) { transform: none; }.audience-card { min-height: auto; }.statement { min-height: auto; padding: 95px 22px; }.principle { gap: 14px; grid-template-columns: .2fr 1fr; }.principle p { grid-column: 2; }.contact { border-width: 10px; padding: 90px 22px; }footer { align-items: flex-start; flex-direction: column; gap: 15px; } }

/* Maximum-impact wild narrative layer. */
.hero::before { clip-path: polygon(28% 0,100% 0,100% 100%,4% 100%); inset: 0 0 0 52%; }
.hero::after { background: #fff; border: 0; height: 170vh; right: 19vw; top: -35vh; transform: rotate(27deg); width: 7px; }
h1 { font-size: clamp(64px,9.2vw,145px); line-height: .96; max-width: 6.8em; }
.wild-word { bottom: -9vh; font-size: 34vw; opacity: .3; -webkit-text-stroke-width: 3px; }
.emblem-core { height: min(30vw,450px); width: min(30vw,450px); }.emblem-core b { font-size: clamp(110px,16vw,230px); }
.prologue { border-bottom: 12px solid #120f0d; padding-bottom: 52px; padding-top: 52px; }
.audiences { transform: skewY(-4deg); }.audiences > * { transform: skewY(4deg); }.audience-card:nth-child(2) { transform: translateY(85px) rotate(4deg) scale(1.04); }.audience-card:nth-child(3) { transform: translateY(-35px) rotate(-4deg); }
.service-card:nth-child(2n) { transform: translateY(80px) rotate(2deg); }.service-card:nth-child(3n) { transform: translateX(-25px) rotate(-4deg) scale(1.03); }
.statement { min-height: 100vh; padding-top: 190px; }.statement::before { font-size: 78vw; right: -12vw; top: -12vw; }
.statement h2 { font-size: clamp(52px,7vw,108px); max-width: 9em; }
@media(max-width:850px){h1{font-size:clamp(52px,17vw,82px)}.wild-word{font-size:80vw}.audiences,.audiences>*{transform:none}.audience-card:nth-child(2),.audience-card:nth-child(3),.service-card:nth-child(2n),.service-card:nth-child(3n){transform:none}.statement{min-height:auto;padding-top:110px}}

/* Language-specific typography prevents mixed CJK glyph fallback. */
.language-page[data-language-page="ja"] { font-family: "Noto Sans JP", sans-serif; }
.language-page[data-language-page="zh"] { font-family: "Noto Sans SC", sans-serif; }
.language-page[data-language-page="en"] { font-family: Arial, sans-serif; }
.language-page[data-language-page="zh"] :is(h1,h2,.emblem-core b,.wild-word,.prologue span,.prologue p,.chapter-mark b,.audience-index,.audience-card h3,.service-card h3,.principle h3,.statement-stamp,.principle>span) { font-family: "Noto Serif SC", serif; }
.language-page[data-language-page="ja"] :is(h1,h2,.emblem-core b,.wild-word,.prologue span,.prologue p,.chapter-mark b,.audience-index,.audience-card h3,.service-card h3,.principle h3,.statement-stamp,.principle>span) { font-family: "Noto Serif JP", serif; }
.language-page[data-language-page="en"] :is(h1,h2,.audience-card h3,.service-card h3,.principle h3) { font-family: Georgia, serif; letter-spacing: -.04em; }

/* Full website pages */
.card-link { bottom: 25px; color: #e96b70; font-size: 8px; font-weight: 900; letter-spacing: .18em; position: absolute; }
.audience-card:nth-child(2) .card-link { color: #fff; }
.sub-header { background: #120f0d; position: fixed; }
.subpage { background: #eee8dd; min-height: 100vh; overflow: hidden; }
.subhero { background: #120f0d; color: #fff; min-height: 78vh; overflow: hidden; padding: 22vh 8vw 12vh; position: relative; }
.subhero::after { border: 3px solid #d1111b; content: ""; height: 42vw; position: absolute; right: -9vw; top: 10vh; transform: rotate(12deg); width: 42vw; }
.subhero > *:not(.wild-word) { max-width: 900px; position: relative; z-index: 2; }
.subhero h1 { font-size: clamp(58px,8vw,128px); transform: rotate(-2deg); }
.subhero .lead { color: #c9beb5; max-width: 700px; }
.subhero .wild-word { bottom: -5vh; left: auto; right: -3vw; z-index: 1; }
.detail-grid { display: grid; gap: 20px; grid-template-columns: repeat(2,1fr); }
.detail-card { background: #fff; border: 2px solid #171310; min-height: 320px; padding: 34px; position: relative; }
.detail-card:nth-child(2n) { background: #d1111b; color: #fff; transform: translateY(45px) rotate(1deg); }
.detail-card:nth-child(3n) { transform: rotate(-2deg); }
.detail-card > span { color: #d1111b; font-family: "Noto Serif JP",serif; font-size: 28px; }
.detail-card:nth-child(2n) > span { color: #fff; }
.detail-card h2 { font-size: clamp(28px,3.4vw,54px); margin: 65px 0 20px; }
.detail-card p { color: #6e655e; font-size: 12px; line-height: 2.1; }
.detail-card:nth-child(2n) p { color: #fff; }
.detail-cta { background: #d1111b; color: #fff; padding: 130px 8vw; transform: skewY(-2deg); }
.detail-cta > * { transform: skewY(2deg); }
.detail-cta p { font-size: 8px; letter-spacing: .25em; }
.detail-cta h2 { font-size: clamp(44px,6vw,90px); max-width: 950px; }
.detail-cta a { border-bottom: 2px solid #fff; display: inline-block; font-size: 9px; font-weight: 900; margin-top: 45px; padding-bottom: 8px; }
@media(max-width:850px){.subhero{min-height:auto;padding:160px 22px 100px}.subhero::after{height:75vw;right:-40vw;top:28vh;width:75vw}.detail-grid{grid-template-columns:1fr}.detail-card{min-height:260px}.detail-card:nth-child(2n),.detail-card:nth-child(3n){transform:none}.detail-cta{padding:90px 22px}}