/* MEMOTURN / 自转 — plain wordmark + unified brand subtitle, 2026-10-26. */
:root { --serif: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'PingFang TC', 'Microsoft YaHei', sans-serif; }
.brand, .footer-wordmark { display: flex; align-items: center; gap: 9px; }
.brand-mark { display: block; width: 40px; height: 40px; flex: 0 0 auto; }
.brand-copy, .footer-wordmark .brand-copy { display: flex; flex-direction: column; justify-content: center; margin: 0; font-size: initial; letter-spacing: normal; line-height: 1; }
.brand-name { color: #202326; font-size: 18px; font-weight: 750; line-height: 1; letter-spacing: -.025em; }
.brand-subtitle { margin-top: 5px; color: #7e8991; font-size: 8px; font-weight: 400; line-height: 1; letter-spacing: .19em; white-space: nowrap; }
.brand .brand-cn, .footer-wordmark .brand-cn { margin: 0 0 0 7px; padding: 0; border: 0; font-size: 11px; font-weight: 500; color: #5e6871; letter-spacing: .15em; white-space: nowrap; }
.language { font: inherit; font-size: 12px; color: #434b53; background: #fff; padding: 9px 10px; min-height: 42px; cursor: pointer; max-width: 108px; }
.language:focus-visible { outline: 2px solid #6d899d; outline-offset: 3px; }
.hero { grid-template-columns: 1.16fr 1fr; gap: 60px; padding-block: 86px 92px; }
.hero h1 { font-weight: 650; font-size: clamp(42px, 4.2vw, 58px); line-height: 1.16; letter-spacing: -.055em; }
.hero h1 em { color: #7b8c96; }
html:lang(en) .hero h1 > span, html:lang(en) .hero h1 > em { display: block; text-wrap: balance; }
html:lang(en) .hero h1 > br { display: none; }
html:lang(zh) .hero h1 { font-family: var(--serif); font-size: clamp(34px, 3.6vw, 49px); font-weight: 600; line-height: 1.5; letter-spacing: -.045em; }
.hero-lede { max-width: 500px; font-size: 15px; line-height: 2; margin-bottom: 0; }
.hero-signoff { max-width: 510px; margin: 28px 0 0; color: #3d4f58; font-size: 15px; line-height: 1.9; }
.hero-signoff strong { font-weight: 550; }
.idea h2 { white-space: pre-line; text-wrap: balance; }
.idea .section-number { align-self: start; }
.hero-art { border: 1px solid #e7ebee; border-radius: 22px; background: #f7f9fa; padding: 23px 25px; min-height: 390px; justify-content: space-between; }
.art-top, .art-bottom { border: 0; padding-block: 4px; font-size: 10px; }
.brand-art { position: relative; min-height: 270px; display: grid; place-items: center; container-type: inline-size; }
.brand-art::before { content: ''; position: absolute; inset: 15% 6%; background-image: radial-gradient(#c8d1d7 .7px, transparent .7px); background-size: 20px 20px; mask-image: radial-gradient(ellipse, #000 15%, transparent 70%); }
.brand-display { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(12px, 4cqw, 20px); width: 100%; max-width: 100%; padding-inline: 0; box-sizing: border-box; }
.brand-display > img { width: clamp(54px, 19cqw, 88px); height: auto; flex: 0 0 auto; }
.brand-display > span { display: flex; flex-direction: column; min-width: 0; }
.brand-display strong { color: #202326; font-size: clamp(27px, 9.5cqw, 44px); font-weight: 750; line-height: .94; letter-spacing: -.045em; white-space: nowrap; }
.brand-display small { margin-top: clamp(8px, 2.4cqw, 12px); color: #7e8991; font-size: clamp(6px, 2cqw, 9px); line-height: 1; letter-spacing: .22em; white-space: nowrap; }
.art-bottom { color: #77838c; }
.idea h2 { font-weight: 600; }
.brand-story { max-width: 650px; margin-top: 32px; }
.idea-chapter { padding-block: 32px; border-top: 1px solid #e7ebee; }
.idea-chapter:first-child { padding-top: 0; border-top: 0; }
.idea-chapter:last-child { padding-bottom: 0; }
.idea-chapter p { margin: 0; color: var(--muted); font-size: 15px; line-height: 2; }
.idea-chapter p + p { margin-top: 18px; }
.brand-closing { max-width: 650px; margin-top: 36px; padding-left: 20px; border-left: 2px solid #bccbc9; color: #3d4f58; font-size: 16px; line-height: 1.9; }
.brand-closing strong { font-weight: 550; }
html:lang(zh) h2 { font-family: var(--serif); letter-spacing: -.025em; line-height: 1.5; }
html:lang(zh) .hero-lede { line-height: 2; }
html:lang(zh) .journal-panel h3 { font-size: 26px; }
html:lang(zh) .journal-entry > p:nth-child(2) { font-size: 17px; line-height: 1.9; }
.legal-content h1 { font-weight: 600; }
@media (max-width: 1100px) { .hero { gap: 30px; } .hero-art { padding: 20px; min-height: 340px; } .brand-art { min-height: 220px; } .site-header nav { gap: 18px; } }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; gap: 40px; padding-block: 55px 65px; } .hero-copy { max-width: 620px; } .hero-art { max-width: 620px; min-height: 310px; } .hero h1 { font-size: clamp(40px, 6.5vw, 56px); } html:lang(zh) .hero h1 { font-size: clamp(32px, 5.2vw, 44px); } .brand-art { min-height: 230px; } .site-header nav a[href='#company'] { display: none; } .site-header nav { gap: 14px; } }
@media (max-width: 540px) { .brand-story { margin-top: 32px; } .idea-chapter { padding-block: 26px; } .idea-chapter p { font-size: 14px; } .brand-closing { font-size: 15px; margin-top: 30px; padding-left: 16px; } .site-header { gap: 12px; } .site-header nav a[href='#product'] { display: none; } .site-header nav { gap: 10px; } .brand-mark { width: 34px; height: 34px; } .brand-name { font-size: 15px; } .brand-subtitle { margin-top: 4px; font-size: 6.5px; letter-spacing: .14em; } .brand .brand-cn { margin-left: 2px; font-size: 10px; letter-spacing: .08em; } .brand { gap: 6px; } .language { font-size: 11px; max-width: 93px; padding-inline: 6px; } .hero { padding-top: 44px; } .hero h1 { font-size: 41px; } html:lang(zh) .hero h1 { font-size: clamp(28px, 6.7vw, 36px); } .hero-art { min-height: 265px; padding: 18px; } .brand-art { min-height: 190px; } .brand-display { gap: clamp(12px, 4cqw, 18px); } .brand-display > img { width: clamp(52px, 19cqw, 68px); } .brand-display strong { font-size: clamp(26px, 9.5cqw, 34px); } .brand-display small { margin-top: 8px; font-size: clamp(6px, 2cqw, 7px); letter-spacing: .18em; } .art-top { font-size: 9px; } .art-top > span:last-child { text-align: right; } .hero-lede, .hero-signoff { font-size: 14px; } .footer-wordmark .brand-mark { width: 38px; height: 38px; } .footer-wordmark .brand-name { font-size: 17px; } .footer-wordmark .brand-subtitle { font-size: 7px; } .footer-wordmark .brand-cn { font-size: 10px; } }
@media (max-width: 359px) { .brand .brand-cn { display: none; } .hero h1 { font-size: 36px; } html:lang(zh) .hero h1 { font-size: 25px; } .hero-art { padding: 14px; } .art-top, .art-bottom { font-size: 8px; } }