/* CODEX · film composition, single lifestyle image, handwritten letter */
@font-face{font-family:"GoBetter Letter";src:url("assets/GoBetterLetter-subset.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
dialog.letter-dialog{width:min(760px,calc(100% - 32px));background:#fffcf5;padding:58px 58px 42px}
.letter-dialog #dialog-content>p,.brand-letter .letter-body>p,.brand-letter .letter-sign>span{font-family:"GoBetter Letter",cursive;font-size:27px;font-weight:400;line-height:1.7;letter-spacing:0;color:#59452f}
.letter-dialog #dialog-content>p{margin:22px 0}
.letter-dialog #dialog-content>.slogan{width:160px;margin:30px 0 12px}
.letter-dialog #dialog-content>p:last-child{text-align:right;margin-top:25px;font-size:29px}
.brand-letter .letter-body{background:#fffcf5;padding:42px 44px;border:1px solid #5a452b12}
.brand-letter .letter-sign{margin-top:30px}
.brand-letter .letter-body>p{margin:22px 0}
.codex-lifestyle{margin:36px auto 0;max-width:1080px}
.codex-lifestyle #scene-original>img{aspect-ratio:16/10;object-fit:cover;object-position:50% 50%;border-radius:3px}
.codex-lifestyle figcaption{font-size:11px;color:#806d57;margin-top:10px}
.film-frame{aspect-ratio:16/9;background:#f5eee5}
.film-frame video{width:100%;height:100%;object-fit:contain}
.film-overlay{left:auto!important;right:22px!important;bottom:20px!important;display:block!important}
.film-overlay>span{display:none!important}
.film-overlay .video-toggle{width:46px;height:46px;border:1px solid #5a452b66;background:#fffcf5cc;backdrop-filter:blur(6px);font-size:18px}
.film-playback{gap:16px}
@media(max-width:760px){
dialog.letter-dialog{padding:48px 25px 30px}
.letter-dialog #dialog-content>p,.brand-letter .letter-body>p,.brand-letter .letter-sign>span{font-size:24px;line-height:1.65}
.letter-dialog #dialog-content>p:last-child{font-size:26px}
.brand-letter .letter-body{padding:28px 23px}
.brand-letter .letter-body>p br{display:none}
.codex-lifestyle{margin-top:28px}
.codex-lifestyle #scene-original>img{aspect-ratio:4/3;object-position:62% 50%}
.film-frame{aspect-ratio:9/10}
.film-overlay{right:12px!important;bottom:12px!important}
.film-overlay .video-toggle{width:44px;height:44px}
.film-playback{display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:12px 3px}
.film-playback .film-progress{grid-column:1/-1;grid-row:2}
#film-time{grid-row:1;grid-column:2;font-size:11px}
#film-status{font-size:11px}
.film-expand{grid-column:2;min-height:44px;font-size:12px}
}


.letter-dialog #dialog-content .letter-slogan,.brand-letter .letter-sign .letter-slogan{font-family:"GoBetter Letter",cursive;font-size:31px;line-height:1.5;letter-spacing:0;font-weight:400;margin:30px 0 12px;color:#59452f}
@media(max-width:760px){.letter-dialog #dialog-content .letter-slogan,.brand-letter .letter-sign .letter-slogan{font-size:28px}}