/* 映画の余韻と、手に取るような一本。 */
.time-interlude { position: relative; isolation: isolate; min-height: 610px; height: min(760px,78svh); background: #171b15 url('../images/editorial-v1/afterglow.jpg') center/cover; color: #f6edde; display: flex; align-items: center; overflow: hidden; scroll-margin-top: 78px; }
#time-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.time-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(14,19,13,.84),rgba(14,19,13,.35) 55%,rgba(14,19,13,.08)); }
.time-eyebrow { font-size: 9px; line-height: 1.8; letter-spacing: .18em; color: #c1ae85; }
.editorial-site .time-copy h2 { font-family: "Noto Serif JP",serif; font-weight: 300; font-size: clamp(34px,3.6vw,52px); line-height: 1.85; letter-spacing: .11em; margin: 24px 0; }
.time-description { font-size: 13px; line-height: 2.4; color: #c9c4b4; letter-spacing: .06em; }
.time-after { font-family: "Noto Serif JP",serif; font-size: 20px; letter-spacing: .15em; margin-top: 30px; opacity: 0; transform: translateY(8px); transition: opacity 2s,transform 2s; }
.is-time-still .time-after { opacity: 1; transform: none; }
.time-controls { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; align-items: center; justify-content: flex-start; gap: 38px; }
#time-state { font-size: 10px; letter-spacing: .08em; color: #c5b89c; }
.time-controls > div { display: flex; gap: 20px; }
.time-controls button { font-size: 11px; padding: 12px 0; border-bottom: 1px solid #8d8d75; min-height: 44px; }
.time-controls button:hover { color: #ffe3ae; }
.time-controls button:focus-visible { outline: 2px solid #ecd29e; outline-offset: 4px; }
.bottle-study { position: relative; background: #18231d; color: #f2eddf; padding: 85px 0; scroll-margin-top: 78px; }
.bottle-study-layout { display: grid; grid-template-columns: .9fr 1.2fr; align-items: center; gap: 9%; }
.editorial-site .bottle-study-copy h2 { font-family: "Noto Serif JP",serif; font-weight: 300; font-size: clamp(30px,3.6vw,50px); line-height: 1.8; letter-spacing: .1em; margin: 24px 0; }
.bottle-study-lead { font-size: 13px; line-height: 2.5; color: #c0c7b6; letter-spacing: .04em; }
.bottle-study-description { border-top: 1px solid #4b5b43; margin-top: 35px; padding-top: 25px; }
.bottle-study-description > span { color: #b6b798; font-size: 10px; letter-spacing: .12em; }
.bottle-study-description h3 { font-family: "Noto Serif JP",serif; font-size: 44px; font-weight: 300; letter-spacing: .06em; margin: 5px 0 12px; }
.bottle-study-description h3 small { font-family: "Noto Sans JP",sans-serif; font-size: 9px; letter-spacing: .18em; margin-left: 20px; color: #b7ab8e; }
.bottle-study-description p { font-size: 13px; line-height: 2.2; color: #c9ccbc; }
.bottle-study-description a { display: inline-block; margin-top: 25px; font-size: 12px; padding-bottom: 8px; border-bottom: 1px solid #97a17e; }
.bottle-study-description a > span { margin-left: 18px; }
.bottle-model-area { position: relative; background: radial-gradient(ellipse at 50% 40%,#4d543d,#253125 54%,#18231d 77%); border-top: 1px solid #58614d; border-bottom: 1px solid #58614d; min-width: 0; }
.bottle-model-caption { display: block; padding-top: 18px; text-align: center; font-size: 9px; letter-spacing: .22em; color: #a7b297; }
#bottle-model { display: block; width: 100%; height: 580px; position: relative; background: transparent; --poster-color: transparent; --progress-bar-color: #d5b884; --progress-bar-height: 2px; }
.bottle-model-poster { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.bottle-model-controls { display: flex; align-items: center; justify-content: center; gap: 25px; margin-top: -4px; }
.bottle-model-controls button { font-size: 11px; min-height: 44px; padding: 8px 13px; border: 1px solid #748067; }
.bottle-model-controls button:first-child,.bottle-model-controls button:last-child { width: 44px; border-radius: 50%; font-size: 18px; }
.bottle-model-controls button:disabled { opacity: .4; cursor: default; }
.bottle-model-controls button:not(:disabled):hover { background: #3f4d36; }
#bottle-status { text-align: center; font-size: 11px; line-height: 1.8; color: #bfc6ae; margin: 17px 18px 24px; }
.bottle-render-note { position: absolute; right: 0; bottom: -25px; font-size: 8px; letter-spacing: .16em; color: #89977e; }
.bottle-study button:focus-visible,.bottle-study a:focus-visible { outline: 2px solid #d5bc83; outline-offset: 5px; }
@media (max-width: 767px) {
 .time-interlude { min-height: 590px; height: 80svh; }
 #time-film { object-position: 68% center; }
 .time-shade { background: linear-gradient(90deg,rgba(14,19,13,.88),rgba(14,19,13,.32)),linear-gradient(0deg,rgba(14,19,13,.45),transparent 35%); }
 .time-copy { padding-bottom: 30px; }
 .editorial-site .time-copy h2 { font-size: 32px; line-height: 1.9; margin-top: 22px; }
 .time-description { font-size: 12px; }
 .time-after { font-size: 17px; letter-spacing: .07em; }
 .time-controls { bottom: 25px; flex-direction: column; align-items: flex-start; gap: 8px; }
 .time-controls > div { gap: 24px; }
 .time-controls button { font-size: 11px; }
 .bottle-study { padding: 55px 0 70px; }
 .bottle-study-layout { grid-template-columns: 1fr; gap: 40px; }
 .editorial-site .bottle-study-copy h2 { font-size: 33px; margin: 20px 0; }
 .bottle-study-lead { font-size: 12px; }
 .bottle-study-description { margin-top: 26px; padding-top: 20px; }
 .bottle-study-description h3 { font-size: 36px; }
 .bottle-study-description p { font-size: 12px; }
 #bottle-model { height: 430px; }
 .bottle-model-caption { font-size: 8px; }
 #bottle-status { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .time-after { transition: none; transform: none; } }
/* 手に取るように、瓶だけが少し浮き上がる。 */
.bottle-model-area { isolation: isolate; }
.bottle-model-area::before { content: ""; position: absolute; width: 32%; height: 25px; left: 34%; bottom: 142px; border-radius: 50%; background: rgba(0,0,0,.36); filter: blur(12px); z-index: -1; transition: transform .6s,opacity .6s; }
#bottle-model { transition: transform .65s cubic-bezier(.2,.7,.2,1); cursor: grab; }
.is-bottle-held #bottle-model { transform: translateY(-12px) scale(1.025); }
.is-bottle-held::before { transform: scale(1.28); opacity: .48; }
.is-bottle-grabbing #bottle-model { cursor: grabbing; }
#bottle-model::part(default-progress-bar) { background: #d5b884; }
@media (prefers-reduced-motion: reduce) {
 #bottle-model,.bottle-model-area::before { transition: none; }
 .is-bottle-held #bottle-model { transform: none; }
}