/* Hallmark · v2.0.0 · shape: Film poster, editorial note · genre: atmospheric · theme: bespoke · job: open a family birthday film · draw: dad-birthday-53 · hero: full-bleed film still with oversized birthday typography · nav: two quiet anchors over the picture · footer: one plain-spoken birthday wish · imagery: supplied poster and supplied video only · signature: typographic film cover with a single paper-colored closing note · spore: the family portrait as a title card · axes: immersive image scale, direct family voice · redesign: full */
/* Hallmark · pre-emit critique: P✓ H✓ E✓ S✓ R✓ V✓ · weakest: one supplied still carries the whole visual world; keep the composition confident and let the film provide the detail. */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --color-paper: #efe9df;
  --color-paper-2: #e8e0d4;
  --color-paper-3: #d9cdbb;
  --color-ink: #1d2420;
  --color-ink-2: #414840;
  --color-muted: #667068;
  --color-rule: rgb(29 36 32 / 18%);
  --color-accent: #a84c32;
  --color-accent-2: #743621;
  --color-accent-ink: #fffaf0;
  --color-focus: #a84c32;
  --color-film-black: #171817;
  --color-film-shadow: rgb(16 19 17 / 24%);
  --color-film-control-border: rgb(255 251 244 / 72%);
  --color-film-control: rgb(29 36 32 / 74%);
  --color-film-control-hover: rgb(29 36 32 / 94%);
  --color-film-control-ink: #fffaf0;
  --color-film-status: rgb(29 36 32 / 96%);
  --color-poster-top: rgb(15 20 18 / 52%);
  --color-poster-mid: rgb(15 20 18 / 22%);
  --color-poster-bottom: rgb(15 20 18 / 83%);
  --color-poster-top-mobile: rgb(15 20 18 / 69%);
  --color-poster-mid-mobile: rgb(15 20 18 / 25%);
  --color-poster-bottom-mobile: rgb(15 20 18 / 86%);
  --color-control-edge: rgb(255 250 240 / 65%);
  --color-control-edge-hover: rgb(255 250 240 / 95%);
  --color-meta-rule: rgb(255 250 240 / 68%);
  --color-meta-muted: rgb(255 250 240 / 72%);
  --color-title-ink: #fffaf0;
  --color-header-ink: #fffaf0;
  --play-deep: #1d2420;
  --play-warm: #a84c32;
  --color-control-shadow: rgb(0 0 0 / 18%);
  --color-scroll-mark: #e1a071;
  --font-display: "EB Garamond", Georgia, serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --font-outlier: var(--font-body);
  --container: 1760px;
  --gutter: clamp(22px, 5vw, 84px);
  --tracking-display: -.045em;
}

html { min-width: 320px; scroll-behavior: smooth; }
body { min-height: 100vh; background: var(--color-paper); }
.page-shell { min-height: 100svh; }
.hero {
  position: relative;
  height: 100svh;
  min-height: 640px;
  overflow: clip;
  isolation: isolate;
  background: var(--color-film-black);
  color: var(--color-film-control-ink);
}
.masthead {
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
  color: var(--color-header-ink);
}
.wordmark {
  color: inherit;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
}
.masthead__link, .closing__top {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: inherit;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
}
.masthead__link span, .closing__top span { color: var(--color-accent); font-size: 1.1rem; }
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--color-film-black);
  color: var(--color-film-control-ink);
}
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background: var(--color-film-black);
  color: var(--color-film-control-ink);
}
.hero__veil {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(var(--color-poster-mid), var(--color-poster-mid)),
    linear-gradient(180deg, var(--color-poster-top) 0%, transparent 48%),
    linear-gradient(0deg, var(--color-poster-bottom) 0%, var(--color-poster-mid) 100%);
  pointer-events: none;
  transition: opacity 520ms ease;
}
.hero__title-wrap {
  position: absolute;
  z-index: 2;
  inset: 16% auto auto var(--gutter);
  width: min(48vw, 700px);
  pointer-events: none;
  transition: opacity 560ms ease;
  animation: title-arrive 850ms cubic-bezier(.16, 1, .3, 1) both;
}
.hero h1 {
  max-width: none;
  color: var(--color-title-ink);
  font-family: var(--font-display);
  font-size: clamp(4.8rem, 6vw, 7.2rem);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: .78;
  text-align: left;
  text-shadow: 0 2px 36px var(--color-control-shadow);
}
.hero h1 span { padding-left: .18em; }
.film__play {
  position: absolute;
  z-index: 4;
  inset: auto auto 3% 50%;
  display: inline-flex;
  min-height: 66px;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0 var(--space-lg) 0 var(--space-md);
  transform: translateX(-50%);
  border: 0;
  border-radius: 999px;
  background: var(--play-deep);
  box-shadow: 0 12px 36px var(--color-control-shadow);
  color: var(--color-accent-ink);
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease, scale 220ms ease;
}
.film__play:active { scale: .98; }
.film__play:disabled { cursor: wait; background: var(--color-paper-3); color: var(--color-ink); }
.film__play svg { width: 16px; height: 16px; margin-left: var(--space-3xs); }
.film__play span { font-size: .92rem; font-weight: 600; }
.film__status {
  position: absolute;
  z-index: 5;
  inset: auto var(--gutter) 94px;
  width: fit-content;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-film-status);
  color: var(--color-film-control-ink);
  font-size: .9rem;
}
.film__orientation {
  position: absolute;
  z-index: 5;
  inset: auto 16px 22%;
  width: fit-content;
  align-items: center;
  gap: var(--space-sm);
  margin-inline: auto;
  padding: var(--space-sm) var(--space-md);
  border-radius: 999px;
  background: var(--color-film-control);
  color: var(--color-film-control-ink);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 8px 28px var(--color-control-shadow);
  pointer-events: none;
}
.film__orientation[hidden] { display: none; }
.film__orientation:not([hidden]) { display: flex; }
.film__orientation svg { width: 22px; height: 22px; flex: 0 0 auto; }
.hero__meta {
  position: absolute;
  z-index: 2;
  inset: auto auto 43px var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-film-control-ink);
  font-size: .77rem;
  font-weight: 500;
  letter-spacing: .015em;
}
.hero__meta-rule { width: 30px; height: 1px; background: var(--color-meta-rule); }
.hero__meta-time { margin-left: var(--space-2xs); color: var(--color-meta-muted); font-variant-numeric: tabular-nums; }
.hero__scroll {
  position: absolute;
  z-index: 2;
  inset: auto var(--gutter) 38px auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  color: var(--color-film-control-ink);
  font-size: .82rem;
  text-decoration: none;
}
.hero__scroll-arrow { color: var(--color-scroll-mark); font-size: 1.1rem; transition: transform 220ms ease; }
@media (hover: hover) {
  .film__play:hover { scale: 1.035; background: var(--play-warm); }
  .hero__scroll:hover .hero__scroll-arrow { transform: translateY(3px); }
}
.hero__media.has-started .hero__title-wrap {
  animation: none;
  opacity: 0;
}
.hero__media.has-started .hero__veil { opacity: 0; }
.hero__media.has-started .hero__meta,
.hero__media.has-started .hero__scroll { opacity: 0; transition: opacity 420ms ease; }

.closing {
  position: relative;
  display: grid;
  min-height: 350px;
  grid-template-columns: minmax(100px, .28fr) minmax(0, 1.72fr) auto;
  align-items: center;
  gap: var(--space-2xl);
  padding-block: var(--space-4xl);
}
.closing::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--gutter);
  left: var(--gutter);
  height: 1px;
  background: var(--color-rule);
}
.closing__mark {
  align-self: start;
  padding-top: var(--space-sm);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
}
.closing__copy { max-width: 1050px; }
.closing h2 {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(3rem, 7.1vw, 7rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: .95;
}
.closing p {
  max-width: 38ch;
  margin-top: var(--space-lg);
  color: var(--color-ink-2);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.65;
}
.closing__top { align-self: end; margin-bottom: var(--space-xs); white-space: nowrap; }

@keyframes title-arrive {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (min-width: 1600px) {
  .hero h1 { font-size: clamp(7.2rem, 6vw, 8.4rem); }
}
@media (max-width: 760px) {
  .hero { min-height: 100svh; }
  .masthead {
    min-height: calc(76px + env(safe-area-inset-top));
    padding-block-start: env(safe-area-inset-top);
  }
  .wordmark { display: inline-flex; min-height: 48px; align-items: center; }
  .masthead__link { min-height: 48px; padding-inline: var(--space-2xs); }
  .closing__top { min-height: 48px; }
  .hero__media video { object-position: center top; }
  .hero__veil {
    background:
      linear-gradient(var(--color-poster-mid-mobile), var(--color-poster-mid-mobile)),
      linear-gradient(180deg, var(--color-poster-top-mobile) 0%, transparent 46%),
      linear-gradient(0deg, var(--color-poster-bottom-mobile) 0%, var(--color-poster-mid-mobile) 100%);
  }
  .hero__title-wrap { inset: auto 16px 21% 16px; width: min(80vw, 460px); }
  .hero h1 { font-size: clamp(2.6rem, 12vw, 4.6rem); line-height: .78; }
  .hero h1 span { padding-left: .12em; }
  .film__play {
    inset-block-start: auto;
    inset-block-end: max(9%, calc(env(safe-area-inset-bottom) + 16px));
    min-height: 64px;
  }
  .hero__meta { inset-block-end: max(32px, calc(env(safe-area-inset-bottom) + 8px)); font-size: .76rem; }
  .hero__scroll {
    inset-block-end: max(27px, calc(env(safe-area-inset-bottom) + 4px));
    min-height: 48px;
    font-size: .8rem;
  }
  .closing {
    min-height: 0;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: var(--space-md);
    padding-block: var(--space-2xl) var(--space-2xl);
  }
  .closing__mark { padding-top: var(--space-xs); font-size: 1.5rem; }
  .closing h2 { font-size: clamp(3.1rem, 12vw, 5.5rem); }
  .closing p { margin-top: var(--space-lg); font-size: 1rem; }
  .closing__top { grid-column: 2; justify-self: start; margin-top: var(--space-md); }
}
@media (max-width: 390px) {
  .masthead { min-height: calc(68px + env(safe-area-inset-top)); }
  .wordmark { font-size: .82rem; }
  .masthead__link { gap: var(--space-xs); font-size: .79rem; }
  .film__play { min-height: 60px; padding-inline: var(--space-md) var(--space-lg); }
  .hero__scroll { gap: var(--space-xs); }
  .hero__meta { gap: var(--space-xs); }
  .hero__scroll > span:first-child { font-size: 0; }
  .hero__scroll-arrow { font-size: 1.5rem; }
}
@media (max-width: 760px) and (max-height: 520px) {
  .hero__title-wrap { bottom: 25%; width: min(50vw, 460px); }
  .hero h1 { font-size: clamp(2rem, 8vh, 3rem); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__title-wrap { animation: none; }
  .hero__veil, .hero__scroll-arrow, .film__play { transition: none; }
}