@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@500;700&display=swap');

.cinema-love {
  --paper: #211f20;
  --ink: #f2ebe0;
  --line: #746863;
  --signal: #e89c87;
  --edge: clamp(20px,7vw,105px);
  --headline: 'Roboto Condensed',Arial,sans-serif;
  overflow-wrap: anywhere;
  font-size: 15px;
}
.cinema-love .occasion-nav { text-transform: uppercase; }
.cinema-love :is(h1,h2,.cl-footer>span) { font-family: var(--headline); font-weight: 700; text-transform: uppercase; }
.cinema-love .overline { color: var(--signal); letter-spacing: .18em; text-transform: uppercase; }
.cl-screen { display: grid; align-items: end; min-height: min(68vw,700px); padding: 38px var(--edge); isolation: isolate; position: relative; }
.cl-screen figure { position: absolute; inset: 0; z-index: -1; }
.cl-screen img { object-position: 58% 61%; filter: grayscale(.85); }
.cl-screen figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,#211b1bf0,#211b1b5e 58%,#211b1b14),linear-gradient(0deg,#211b1b,#211b1b00 67%); }
.cl-title h1 { font-size: clamp(51px,10vw,144px); line-height: .86; letter-spacing: -.035em; margin-block: 15px; max-width: 11ch; }
.cl-title h1 span { display: block; }
.cl-title h1 i { display: block; font-size: .43em; font-style: normal; color: var(--signal); margin-block: .16em; }
.cl-title .cover-date { letter-spacing: .16em; margin: 0; }
.cl-title a { display: inline-block; margin-top: 16px; text-transform: uppercase; font-size: 10px; letter-spacing: .14em; border-bottom: 1px solid var(--signal); }
.cl-synopsis.welcome { max-width: none; margin: 0 var(--edge); text-align: left; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); gap: 8px clamp(18px,9vw,150px); padding: clamp(46px,8vw,110px) 0; }
.cl-synopsis .overline { grid-column: 1/-1; margin: 0; }
.cl-synopsis h2 { grid-row: span 2; margin: 0; }
.cl-synopsis > p:not(.overline), .cl-dress > p:not(.overline) { margin: 12px 0 0; white-space: pre-line; }
.cl-synopsis .sign { margin: 8px 0 0; }
.cl-billing { background: #e8dfd0; color: #292326; --line: #b6a89b; padding: clamp(35px,6vw,76px) var(--edge); }
.cl-billing .overline { color: #71372c; }
.cl-billing .ni-date { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,360px); align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.cl-billing .ni-date h2 { grid-column: 1; font-size: clamp(32px,5vw,66px); }
.cl-billing .digits { grid-column: 2; grid-row: 1/3; gap: 10px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); text-align: center; margin: 0; }
.cl-billing .digits b { min-width: 0; font: 700 clamp(28px,5vw,54px)/1.1 var(--headline); }
.cl-billing .digits span { letter-spacing: .05em; }
.cl-billing .schedule { max-width: none; display: block; padding: 31px 0 0; }
.cl-billing .section-title h2 { margin-block: 8px 17px; font-size: clamp(31px,5vw,60px); }
.cl-billing .schedule li { display: grid; grid-template-columns: 24px 57px minmax(0,1fr); gap: 12px; align-items: baseline; }
.cl-billing .schedule li p { font-size: 13px; }
.cl-location { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); margin: clamp(45px,8vw,100px) var(--edge) 0; border: 1px solid var(--line); }
.cl-location img { min-height: 300px; aspect-ratio: 4/3; object-position: center 67%; filter: grayscale(1); }
.cl-location .location-copy { padding: clamp(22px,5vw,70px); }
.cl-dress.dress { text-align: left; padding-inline: var(--edge); }
.cinema-love .response { grid-template-columns: repeat(2,minmax(0,1fr)); width: calc(100% - 2 * var(--edge)); padding-inline: 0; gap: clamp(24px,7vw,90px); }
.cinema-love .response :is(input,textarea) { color: var(--ink); color-scheme: dark; }
.cinema-love .response ::placeholder { color: #cabcb3; }
.cinema-love .response button { min-height: 44px; }
.cl-footer { background: #171517; }
.cl-footer > span { font-size: clamp(42px,8vw,100px); line-height: 1; }
.cl-opening[hidden] { display: none; }
.cl-opening { --opening-ready: 1; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; padding: 0; border: 0; background: #211e20; color: var(--ink); }
.cl-opening::backdrop { background: transparent; }
.cl-intro { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 100%; padding: 18px; gap: 8px; }
.cl-intro h2 { font-size: clamp(34px,8vw,88px); }
.cl-intro p { margin: 0; }
.cl-intro button { min-height: 44px; padding: 8px 17px; color: var(--ink); background: transparent; border: 0; }
.cl-intro [data-open] { border: 1px solid var(--signal); margin-top: 9px; }
.cl-intro form button { text-decoration: underline; text-underline-offset: .3em; }
.cl-leader { position: relative; isolation: isolate; width: clamp(95px,23vw,185px); aspect-ratio: 1; border-radius: 50%; background: #d7cfc0; color: #242021; border: 4px double #514b48; margin-bottom: 12px; display: grid; place-items: center; }
.cl-leader::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 1px solid #6e645e; background: conic-gradient(#81726875 92deg,transparent 93deg); z-index: -1; }
.cl-leader i { grid-area: 1/1; font: 700 clamp(45px,13vw,108px)/1 var(--headline); opacity: 0; }
.cl-leader i:first-child { opacity: 1; }
.cl-opening.is-opening .cl-leader::before { animation: cl-sweep .39s linear 3; }
.cl-opening.is-opening .cl-leader i { animation: cl-digit .39s steps(1,end) forwards; }
.cl-opening.is-opening .cl-leader i:nth-child(2) { animation-delay: .39s; }
.cl-opening.is-opening .cl-leader i:nth-child(3) { animation-delay: .78s; }
@keyframes cl-digit { 0% { opacity: 1; } 100% { opacity: 0; } }
.cl-opening.is-opening .cl-leader { animation: cl-project 1.58s ease-in-out both; }
@keyframes cl-project {
  0%, 73% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.24); opacity: 0; }
}
@keyframes cl-sweep { to { transform: rotate(1turn); } }
@media (max-width: 700px) {
  .cl-screen { display: flex; flex-direction: column; padding: 0; min-height: 0; }
  .cl-screen figure { position: relative; width: 100%; height: clamp(210px,56vw,330px); }
  .cl-screen figure::after { background: linear-gradient(0deg,#211f20,transparent 46%); }
  .cl-title { width: 100%; padding: 0 var(--edge) 29px; }
  .cl-title h1 { font-size: clamp(52px,14vw,90px); }
  .cl-synopsis.welcome, .cl-billing .ni-date, .cl-location, .cinema-love .response { grid-template-columns: minmax(0,1fr); }
  .cl-billing .digits { grid-column: 1; grid-row: auto; text-align: left; margin-top: 12px; }
  .cl-location img { min-height: 0; height: auto; }
}
@media (prefers-reduced-motion: reduce) { .cl-opening * { animation: none !important; } }

.cl-screen img[src$="/cinema-love.webp"] { object-position: center 45%; }
.cl-location img[src$="/cinema-love.webp"] { object-position: center 45%; }

@media (max-width: 700px) {
  .cl-billing .schedule ol { display: block; min-width: 0; }
  .cl-billing .schedule li {
    grid-template-columns: 3.4rem minmax(0, 1fr);
    align-items: start;
    gap: .65rem;
  }
  .cl-billing .schedule .event-number { display: none; }
  .cl-billing .schedule time { min-width: 0; white-space: nowrap; }
  .cl-billing .schedule li > div { min-width: 0; overflow-wrap: anywhere; }
}