/* The same paper, ink and watercolor as the app. No scripts required. */
.home-page .page{max-width:1440px;padding-inline:64px}
.home-page header{padding-block:28px;position:relative;z-index:2}
.welcome{position:relative;padding-top:60px}
.welcome-copy{position:relative;z-index:1;max-width:760px}
.welcome h1{font-size:clamp(66px,7.7vw,112px);letter-spacing:-3px;line-height:.98}
.welcome h1 em{font-weight:400;color:var(--red)}
.welcome .eyebrow{margin-bottom:20px}
.welcome .intro{font-size:18px;max-width:440px;margin:26px 0}
.welcome-actions{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.quiet-link{font-size:14px;text-decoration:none;padding:12px 0}
.welcome .release{margin-top:18px;font-size:12px}
.welcome-scene{height:470px;position:relative;margin:0 -64px;isolation:isolate}
.bar-art{display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom;mask-image:linear-gradient(to bottom,transparent,#000 22%)}
.hero-phone{position:absolute;right:9%;bottom:38px;width:clamp(220px,23vw,310px);transform:rotate(5deg);z-index:1}
.phone{width:100%;padding:5px;background:#29261f;border-radius:36px;box-shadow:0 24px 50px #49331e22,0 2px 4px #38291840;position:relative}
.phone img{display:block;width:100%;height:auto;border-radius:31px}
.scene-note{position:absolute;left:48%;bottom:52px;width:170px;transform:rotate(-7deg);font:italic 21px/1.3 var(--serif);color:#684f36}
.colophon{display:flex;gap:20px;justify-content:space-between;align-items:center;padding:25px 0;border-block:1px solid var(--line);font-size:12px;letter-spacing:.5px}
.colophon span+span::before{content:'✳';color:var(--red);margin-right:18px}
.chapter{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center;padding:110px 0}
.chapter-copy{min-width:0}
.chapter-copy .eyebrow{color:var(--red);font-size:11px;margin-bottom:25px}
.chapter-copy h2{font-size:clamp(42px,4.7vw,65px);line-height:1.06;letter-spacing:-1.1px;text-wrap:balance}
.chapter-description{font-size:17px;line-height:1.85;color:var(--muted);max-width:440px;margin-top:28px}
.chapter-list{list-style:none;padding:0;margin:30px 0 0;max-width:440px}
.chapter-list li{border-top:1px solid var(--line);padding:13px 0;font-size:13px;display:flex;align-items:baseline;gap:12px}
.chapter-list li:before{content:'↗';color:var(--red)}
figure{margin:0}
figcaption{font:italic 19px/1.5 var(--serif);color:var(--muted);text-align:center}
.cabinet-stage{position:relative;padding:38px 30px 0}
.cabinet-stage:before{content:'';position:absolute;inset:80px -15px 80px;background:#dddcc7;border-radius:48% 52% 45% 55%;transform:rotate(-8deg);opacity:.65}
.cabinet-stage .phone{width:min(100%,290px);margin:0 auto 32px;transform:rotate(-3deg)}
.cabinet-stage figcaption{position:relative}
.menu-chapter{margin-inline:-64px;padding:85px 9%;gap:14%;background:#e8dfcd url('/assets/grain.svg');border-block:1px solid #d7cbb5}
.menu-print{width:min(100%,300px);margin:auto;transform:rotate(-4deg);box-shadow:14px 20px 20px #5d432b26,-2px 1px 1px #a28a61;border:1px solid #d5c5a7}
.menu-print img{display:block;width:100%;height:auto}
.menu-stage figcaption{margin-top:35px}
.mixing-stage{position:relative;overflow:hidden;border-radius:48% 48% 2px 2px;padding:48px 30px}
.stage-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.mixing-stage .phone{width:min(100%,290px);margin:auto;transform:rotate(3deg)}
.personal-chapters{display:grid;grid-template-columns:1fr 1fr;gap:7%;padding:15px 0 90px}
.personal .chapter-copy{min-height:275px;margin-bottom:45px}
.personal .chapter-copy h2{font-size:clamp(40px,4vw,56px)}
.personal .chapter-description{font-size:16px}
.create-stage,.journal-stage{position:relative;padding:48px 30px 28px;overflow:hidden;min-width:0}
.create-stage{background:#e6dfdf}
.create-stage .stage-art{opacity:.75}
.journal-stage{background:#e8dfcd url('/assets/grain.svg')}
.create-stage .phone,.journal-stage .phone{width:min(100%,270px);margin:auto}
.create-stage .phone{transform:rotate(3deg)}
.journal-stage .phone{transform:rotate(-3deg)}
.personal figcaption{position:relative;margin:32px auto 0;font-size:18px;max-width:350px}
.ipad-chapter{padding:70px 8% 80px;background:#e1e1d2;margin-inline:-64px;text-align:center}
.ipad-chapter .chapter-description{margin:22px auto 42px;max-width:540px}
.tablet{position:relative;aspect-ratio:1194/834;background:#29261f;border:10px solid #29261f;border-radius:26px;overflow:hidden;box-shadow:0 25px 50px #31332125;max-width:1000px;margin:auto}
.tablet-screen{position:absolute;max-width:none;width:69.84925%;height:auto;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg)}
.home-page .menu-section{padding:95px 0 55px;border-top:0}
.home-page .section-title h2{font-size:46px}
.home-page .card-art{border:none;background:#eae3d5;border-radius:50% 50% 2px 2px;height:250px}
.home-page .card-art svg{height:250px}
.home-page .drink-card p{font-size:14px}
.home-page .promise{margin:30px 0 70px;background:transparent;border-block:1px solid var(--line);padding:32px 0}
.home-page .promise p{max-width:800px;font-size:14px}
.home-page .promise .text-link{margin-top:12px}
.home-page .directory{padding-bottom:40px}
.invitation{text-align:center;padding:75px 0 100px}
.invitation h2{font-size:clamp(45px,5.4vw,74px);line-height:1.08;text-wrap:balance}
.invitation p:not(.eyebrow){color:var(--muted);max-width:440px;margin:25px auto 30px;font-size:16px}
.home-page:lang(zh-Hans) .welcome h1{font-size:clamp(48px,5.7vw,82px);line-height:1.23;letter-spacing:-1.5px}
.home-page:lang(zh-Hans) .chapter-copy h2{font-size:clamp(36px,3.8vw,52px);line-height:1.4}
.home-page:lang(zh-Hans) .personal .chapter-copy h2{font-size:clamp(34px,3.5vw,46px)}
.home-page:lang(zh-Hans) figcaption{font:15px/1.8 var(--sans)}
.home-page:lang(zh-Hans) .invitation h2{font-size:clamp(36px,4.5vw,58px);line-height:1.4}
@media(min-width:1600px){.welcome-scene{height:500px}.hero-phone{width:310px;right:11%}}
@media(max-width:1100px){
  .home-page .page{padding-inline:38px}
  .welcome{padding-top:45px}.welcome-copy{max-width:65%}
  .welcome h1{font-size:80px}.welcome .intro{font-size:16px;max-width:370px}
  .welcome-scene{height:370px;margin-inline:-38px}.hero-phone{right:7%;width:235px;bottom:30px}
  .scene-note{display:none}.chapter{gap:7%;padding:80px 0}
  .menu-chapter{margin-inline:-38px;padding:65px 7%}
  .chapter-copy h2{font-size:48px}.chapter-description{font-size:16px}
  .cabinet-stage{padding-inline:15px}.phone{border-radius:29px}.phone img{border-radius:24px}
  .mixing-stage{padding-inline:24px}.personal-chapters{gap:5%}.personal .chapter-copy{min-height:300px}
  .personal .chapter-copy h2{font-size:43px}.create-stage,.journal-stage{padding-inline:26px}
  .ipad-chapter{margin-inline:-38px}
  .home-page:lang(zh-Hans) .welcome h1{font-size:60px}
}
@media(max-width:850px){
  .home-page .page{padding-inline:24px}.home-page header{padding-block:22px}
  .welcome{padding-top:36px}.welcome-copy{max-width:100%}.welcome h1{font-size:clamp(64px,12vw,86px);letter-spacing:-2px}
  .welcome .intro{font-size:16px;max-width:440px;margin-block:22px}
  .welcome-scene{height:480px;margin:28px -24px 0}
  .bar-art{object-position:40% bottom;height:75%;position:absolute;bottom:0;mask-image:linear-gradient(to bottom,transparent,#000 28%)}
  .hero-phone{right:13%;bottom:26px;width:200px;transform:rotate(5deg)}
  .colophon{gap:12px;justify-content:center;flex-wrap:wrap;font-size:11px;padding-block:18px}
  .colophon span+span::before{display:none}
  .colophon span:last-child{flex-basis:100%;text-align:center}
  .chapter{grid-template-columns:1fr;gap:38px;padding:65px 0}
  .chapter-copy h2{font-size:49px}.chapter-copy .eyebrow{margin-bottom:18px}
  .chapter-description{margin-top:20px;max-width:520px;font-size:16px}
  .chapter-list{margin-top:22px;max-width:none}
  .cabinet-stage{max-width:400px;width:100%;margin:auto;padding-top:38px}
  .cabinet-stage .phone,.mixing-stage .phone{width:265px;max-width:100%}
  .menu-chapter{margin-inline:-24px;padding:60px 24px;gap:42px}
  .menu-stage{grid-row:2}.menu-print{width:270px;max-width:85%}
  .mixing-stage{width:100%;max-width:430px;margin:auto;padding:40px 25px}
  .personal-chapters{grid-template-columns:1fr;gap:65px;padding:0 0 65px}
  .personal .chapter-copy{min-height:0;margin-bottom:30px}.personal .chapter-copy h2{font-size:49px}
  .personal figure{max-width:430px;margin:auto}.personal .phone{width:265px;max-width:100%}
  .ipad-chapter{margin-inline:-24px;padding:55px 24px}
  .ipad-chapter .chapter-copy h2{font-size:43px}.ipad-chapter .chapter-description{font-size:15px}
  .tablet{border-width:6px;border-radius:16px}
  .home-page .menu-section{padding:60px 0 30px}.home-page .section-title h2{font-size:38px}
  .home-page .card-art{height:150px}.home-page .card-art svg{height:154px}
  .home-page .promise{margin:10px 0 50px;gap:17px}.home-page .promise h2{font-size:29px}
  .home-page .directory h2{font-size:34px}.invitation{padding:45px 0 65px}
  .invitation h2{font-size:49px}
  .home-page:lang(zh-Hans) .welcome h1{font-size:clamp(39px,8vw,58px);letter-spacing:-1px}
  .home-page:lang(zh-Hans) .chapter-copy h2,.home-page:lang(zh-Hans) .personal .chapter-copy h2{font-size:clamp(33px,7vw,44px)}
  .home-page:lang(zh-Hans) .invitation h2{font-size:clamp(32px,6.5vw,42px)}
}
/* Long headings, CJK and right-to-left editions share the same composition. */
.welcome h1,.chapter-copy h2,.invitation h2{overflow-wrap:break-word}
.home-page:lang(zh-Hant) .welcome h1,.home-page:lang(ja) .welcome h1,.home-page:lang(ko) .welcome h1{font-size:clamp(40px,5.5vw,78px);line-height:1.3;letter-spacing:-.5px}
.home-page:lang(zh-Hant) .chapter-copy h2,.home-page:lang(ja) .chapter-copy h2,.home-page:lang(ko) .chapter-copy h2{font-size:clamp(34px,3.7vw,52px);line-height:1.4}
.home-page:lang(th) .welcome h1,.home-page:lang(hi) .welcome h1,.home-page:lang(ar) .welcome h1{font-size:clamp(42px,5.7vw,78px);line-height:1.45;letter-spacing:0}
.home-page:lang(th) .chapter-copy h2,.home-page:lang(hi) .chapter-copy h2,.home-page:lang(ar) .chapter-copy h2{font-size:clamp(33px,3.7vw,52px);line-height:1.5;letter-spacing:0}
.home-page:lang(ar) .welcome h1 em,.home-page:lang(th) .welcome h1 em,.home-page:lang(hi) .welcome h1 em{font-style:normal}
[dir=rtl] .hero-phone{right:auto;left:9%;transform:rotate(-5deg)}
[dir=rtl] .scene-note{left:auto;right:48%;transform:rotate(7deg)}
[dir=rtl] .colophon span+span::before{margin-right:0;margin-left:18px}
@media(max-width:850px){[dir=rtl] .hero-phone{left:13%}.home-page .cards{display:block}.home-page .drink-card{display:grid;grid-template-columns:113px minmax(0,1fr);column-gap:19px;margin-bottom:30px}.home-page .card-art{grid-row:1/4}.home-page .card-art svg{width:118px}}
@media(max-width:380px){
  .home-page .page{padding-inline:20px}.welcome-actions{gap:20px}
  .welcome-scene,.menu-chapter,.ipad-chapter{margin-inline:-20px}
  .hero-phone{right:9%;width:190px}.welcome-scene{height:450px}
  .chapter-copy h2,.personal .chapter-copy h2{font-size:43px}
  .home-page:lang(zh-Hans) .welcome h1{font-size:36px}
}