@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap");

:root { color-scheme: light; --paper: #eee7d9; --ink: #745332; --edge: clamp(24px, 3.5vw, 80px); font-family: "Montserrat", Arial, sans-serif; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
body { margin: 0; background: linear-gradient(110deg, #e9dfce, #f2eee5 55%, #eee7d9); }
a { color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
p, h1 { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.enter-work { position: fixed; inset: 0; z-index: 1; cursor: pointer; }
.enter-work:focus-visible { outline: 2px solid var(--ink); outline-offset: -12px; }
.landing-shell { height: 100svh; display: flex; flex-direction: column; padding: clamp(16px, 3vh, 36px) var(--edge) 0; }
.landing-main { display: flex; align-items: center; flex: 1; min-height: 0; padding: 0; }
.title-stage { position: relative; width: 100%;  }
/* Display capitals extend above the tight line box; keep the image mask clear of glyph edges. */
.image-title { font-family: "Montserrat", Arial, sans-serif; font-weight: 700; font-size: min(calc((100vw - var(--edge) * 2) * .222), calc((100svh - 130px) / 2.1)); line-height: .79; letter-spacing: -.065em; color: #745332; width: 100%; padding: .24em .035em .16em 0; background-position: center; background-size: cover; }
.image-title.has-frame { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.title-cine, .title-harbor { display: block; text-align: left; }
/* Optical overhang compensates for C's curved edge, at each line's own font size. */
.title-cine { text-indent: -.035em; }
/* Montserrat 700: C starts at .039em, H at .083em; align the visible glyph edges. */
.title-harbor { margin-top: .11em; text-indent: -.044em; }
.landing-footer { flex: 0 0 72px; min-height: 72px; padding: 16px 0; display: flex; justify-content: center; align-items: center; }
.slogan { font-family: "Montserrat", Arial, sans-serif; font-weight: 600; font-size: clamp(16px, 1.15vw, 20px); line-height: 1.5; letter-spacing: .025em; text-align: center; }
@media (max-width: 700px) {
  :root { --edge: 22px; }
  .landing-shell { padding-top: 20px; }
  .landing-main { padding: 0; }
  .image-title { font-size: min(calc((100vw - var(--edge) * 2) * .222), calc((100svh - 110px) / 2.75)); letter-spacing: -.07em; line-height: .83; padding-top: .3em; padding-bottom: .16em; }
  .title-cine { font-size: 1.5em; line-height: .82; }
  /* CINE is 1.5 times larger here: (1.5 * .039em) - .083em. */
  .title-harbor { margin-top: .2em; text-indent: -.0245em; }
  .landing-footer { min-height: 72px; padding: 16px 0; }
}
@media (forced-colors: active) { .image-title.has-frame { background: none !important; color: CanvasText; -webkit-text-fill-color: CanvasText; } }

/* Keep the opening full-screen for three seconds, then ease into the wordmark. */
.opening-film { position: fixed; inset: 0; pointer-events: none; background-size: cover; background-position: center; filter: brightness(.72); opacity: 0; }
.landing-shell { position: relative; }
.title-solid { position: absolute; inset: 0; color: var(--paper); -webkit-text-fill-color: var(--paper); background: none; opacity: 0; pointer-events: none; }
body.intro-playing { --intro-hold: 3s; --intro-reveal: 2.4s; --intro-ease: cubic-bezier(.45, 0, .2, 1); }
body.intro-playing .opening-film { animation: film-to-wordmark var(--intro-reveal) var(--intro-ease) var(--intro-hold) both; }
body.intro-playing .title-solid { animation: wordmark-reveal var(--intro-reveal) var(--intro-ease) var(--intro-hold) both; }
/* Keep the slogan visible throughout; only its contrast changes with the backdrop. */
body.intro-playing .slogan { animation: slogan-contrast var(--intro-reveal) var(--intro-ease) var(--intro-hold) both; }
@keyframes film-to-wordmark {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes wordmark-reveal {
  0%, 8% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes slogan-contrast {
  0% { color: var(--paper); text-shadow: 0 1px 6px rgb(0 0 0 / .8); }
  75% { color: var(--ink); text-shadow: 0 1px 6px rgb(238 231 217 / .85); }
  100% { color: var(--ink); text-shadow: 0 1px 6px rgb(0 0 0 / 0); }
}
@media (prefers-reduced-motion: reduce) {
  .opening-film, .title-solid { display: none; }
  body.intro-playing .slogan { animation: none; }
}


/* Home is a removable cover over a Work page loaded from the first visit. */
html, body { height: 100%; overflow: hidden; }
.work-underlay { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: 0; pointer-events: none; background: var(--paper); }
.landing-cover { position: fixed; inset: 0; z-index: 2; background: linear-gradient(110deg, #e9dfce, #f2eee5 55%, #eee7d9); }
.sand-air { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
body.work-open .work-underlay { pointer-events: auto; }
@property --sand-edge { syntax: "<percentage>"; inherits: false; initial-value: -18%; }
.landing-cover.sand-lifting { animation: sand-lift 760ms cubic-bezier(.25, .1, .4, 1) both; -webkit-mask-image: linear-gradient(100deg, transparent calc(var(--sand-edge) - 4%), #000 calc(var(--sand-edge) + 4%)); mask-image: linear-gradient(100deg, transparent calc(var(--sand-edge) - 4%), #000 calc(var(--sand-edge) + 4%)); }
@keyframes sand-lift { from { --sand-edge: -18%; } to { --sand-edge: 118%; } }
.landing-cover[hidden], .sand-air[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .landing-cover.sand-lifting { animation: none; } }