:root {
  --paper: #f2f0ea;
  --paper-deep: #e7e3da;
  --black: #171514;
  --muted: #746f68;
  --wine: #7d2638;
  --hairline: rgba(23, 21, 20, 0.16);
  --serif: "Cormorant Garamond", "Noto Serif SC", "Songti SC", serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

html { background: var(--paper); }
body { background: var(--paper); color: var(--black); }
#fx-canvas { display: none; }

.site-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding: 0 clamp(24px, 4vw, 64px);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.28);
  font-size: 11px;
  text-transform: uppercase;
}
.site-nav a { color: inherit; text-decoration: none; }
.site-nav__brand { font-family: var(--serif); font-size: 14px; letter-spacing: .14em; }
.site-nav__links { display: flex; align-items: center; gap: clamp(18px, 3vw, 42px); }
.site-nav__links a { color: rgba(255,255,255,.72); transition: color .2s; }
.site-nav__links a:hover { color: #fff; }

.hero {
  min-height: min(900px, 100svh);
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  background: #26211f;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}
.hero-media { filter: saturate(.72) contrast(1.04); }
.hero-shade {
  background: linear-gradient(90deg, rgba(17,14,13,.86) 0%, rgba(17,14,13,.54) 48%, rgba(17,14,13,.22) 100%), linear-gradient(0deg, rgba(17,14,13,.5), transparent 55%);
}
.hero-inner {
  width: min(1360px, 100%);
  max-width: none;
  margin: auto;
  padding: 150px clamp(24px, 7vw, 112px) 58px;
  display: grid;
  grid-template-columns: minmax(0, 760px) 1fr;
  align-content: center;
}
.hero-kicker { grid-column: 1; margin: 0 0 22px; font-family: var(--sans); font-size: 10px; letter-spacing: .24em; color: rgba(255,255,255,.64); }
.hero-title { grid-column: 1; max-width: 760px; margin: 0 0 20px; font-size: clamp(54px, 7.5vw, 112px); font-weight: 400; line-height: .94; color: #fff; background: none; -webkit-text-fill-color: currentColor; letter-spacing: 0; }
.hero-subtitle { grid-column: 1; max-width: 560px; margin: 0 0 54px; font-family: var(--serif); font-size: clamp(17px, 2vw, 24px); letter-spacing: .04em; color: rgba(255,255,255,.76); }
.hero-stats { grid-column: 1; display: grid; grid-template-columns: minmax(220px, 1fr) 150px; width: min(100%, 520px); align-items: stretch; border-top: 1px solid rgba(255,255,255,.35); border-bottom: 1px solid rgba(255,255,255,.35); }
.day-counter { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; margin: 0; padding: 18px 28px 18px 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
.day-counter__num { font-size: clamp(42px, 5vw, 68px); color: #fff; background: none; -webkit-text-fill-color: currentColor; line-height: .95; }
.day-counter__copy { align-self: center; font-size: 11px; line-height: 1.45; color: rgba(255,255,255,.58); text-transform: uppercase; }
.day-counter__copy span { display: block; font-family: var(--serif); font-size: 17px; line-height: 1.2; color: #fff; }
.hero-stat { min-width: 0; padding: 18px 0 18px 28px; border-left: 1px solid rgba(255,255,255,.35); display: flex; flex-direction: column; justify-content: center; }
.hero-stat strong { display: block; font-family: var(--serif); font-size: 32px; font-weight: 400; color: #fff; line-height: 1.1; }
.hero-stat span { font-size: 11px; color: rgba(255,255,255,.58); }
.milestone { grid-column: 1; margin: 20px 0 0; font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.62); }
.milestone__years, .milestone__days { color: #fff; font-size: 1em; font-family: inherit; }
.hero-names { grid-column: 1 / -1; align-self: end; display: flex; align-items: center; gap: 14px; margin: 72px 0 0; font-family: var(--sans); font-size: 10px; letter-spacing: .18em; color: rgba(255,255,255,.6); }
.hero-names i { display: block; width: 48px; height: 1px; background: rgba(255,255,255,.45); }
.scroll-hint { position: absolute; right: clamp(24px, 4vw, 64px); bottom: 46px; flex-direction: row; gap: 16px; font-size: 9px; letter-spacing: .22em; }
.scroll-hint__arrow { height: 1px; width: 58px; background: rgba(255,255,255,.55); }
.scroll-hint__arrow::after { display: none; }

.main { background: var(--paper); padding: 130px clamp(20px, 5vw, 72px) 150px; }
.timeline-section { max-width: 1320px; margin: 0 auto; }
.section-head { max-width: 1320px; margin: 0 auto 74px; text-align: left; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); align-items: end; gap: 28px; }
.section-head__kicker { grid-column: 1 / -1; margin: 0 0 14px; font-family: var(--sans); font-size: 10px; letter-spacing: .22em; color: var(--wine); }
.section-head__title { margin: 0; font-size: clamp(38px, 5vw, 70px); line-height: 1.05; font-weight: 400; letter-spacing: 0; color: var(--black); }
.section-head__desc { max-width: 360px; padding-bottom: 8px; font-size: 13px; line-height: 1.8; letter-spacing: .04em; color: var(--muted); }
.section-head__line { display: none; }

.view-toggle { justify-content: flex-start; gap: 0; margin-bottom: 24px; border-bottom: 1px solid var(--hairline); }
.view-toggle__btn { padding: 12px 28px 12px 0; border: 0; border-radius: 0; background: transparent; font-family: var(--sans); font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.view-toggle__btn.is-active { background: transparent; color: var(--black); box-shadow: none; }
.view-toggle__btn.is-active::after { content: ""; display: block; height: 2px; margin-top: 10px; background: var(--wine); }
.year-filter { justify-content: flex-start; margin-bottom: 64px; }
.year-chip { padding: 6px 13px; border-radius: 2px; background: transparent; font-family: var(--sans); font-size: 10px; }
.year-chip.is-active { background: var(--black); box-shadow: none; }

.timeline { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 100px 28px; max-width: none; }
.timeline::before { content: ""; display: block; position: absolute; z-index: 0; left: 4%; right: 4%; top: 16%; height: 70%; border: 1px solid rgba(125,38,56,.42); border-color: rgba(125,38,56,.42) transparent transparent; border-radius: 50%; transform: rotate(-5deg); pointer-events: none; }
.memory__dot { display: none; }
.memory { position: relative; z-index: 1; width: auto; padding: 0; left: auto !important; text-align: left !important; }
.memory:nth-child(4n+1) { grid-column: 1 / span 7; }
.memory:nth-child(4n+2) { grid-column: 9 / span 4; padding-top: 140px; }
.memory:nth-child(4n+3) { grid-column: 2 / span 4; }
.memory:nth-child(4n+4) { grid-column: 7 / span 6; padding-top: 80px; }
.memory__card { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; color: inherit; background: transparent; box-shadow: none; cursor: zoom-in; }
.memory__card:hover { transform: none; box-shadow: none; }
.memory__media { position: relative; aspect-ratio: auto; background: #d9d5cc; border: 10px solid #171514; border-bottom-width: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 18px 34px -22px rgba(23,21,20,.6); }
.memory__media img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.memory__media::after { background: linear-gradient(180deg, transparent 68%, rgba(15,12,11,.55)); }
.memory__media img { filter: saturate(.78); }
.memory__card:hover .memory__media img { transform: scale(1.025); filter: saturate(1); }
.memory__missing { display: none; position: absolute; inset: 0; z-index: 1; align-items: center; justify-content: center; flex-direction: column; font-family: var(--serif); font-size: 20px; letter-spacing: .12em; color: #716b63; background: linear-gradient(135deg, #dedad1, #c9c3b8); }
.memory__missing small { margin-top: 8px; font-family: var(--sans); font-size: 10px; letter-spacing: .08em; }
.memory__media.is-missing .memory__missing { display: flex; }
.memory__date { left: 16px; bottom: 13px; font-family: var(--sans); font-size: 9px; letter-spacing: .13em; }
.memory__film-no { position: absolute; top: 14px; right: 16px; z-index: 2; font-family: var(--sans); font-size: 9px; letter-spacing: .16em; color: rgba(255,255,255,.8); }
.memory__body { padding: 18px 0 0; }
.memory__scene { display: block; margin-bottom: 10px; font-family: var(--sans); font-size: 9px; letter-spacing: .18em; color: var(--wine); }
.memory__meta { margin-bottom: 9px; }
.memory__days { padding: 0; border: 0; border-radius: 0; background: transparent; font-family: var(--sans); font-size: 9px; letter-spacing: .1em; color: var(--wine); }
.memory__days--before { color: var(--muted); }
.memory__title { margin: 0 0 6px; font-size: clamp(24px, 3vw, 38px); font-weight: 400; letter-spacing: 0; color: var(--black); }
.memory__desc { max-width: 560px; font-size: 12px; line-height: 1.8; color: var(--muted); }

.calendar-view { max-width: 980px; margin: 0; }
.calendar { border: 1px solid var(--hairline); border-radius: 0; background: transparent; box-shadow: none; }
.calendar__nav, .cal-cell, .cal-day__item { border-radius: 0; }
.calendar__nav { background: transparent; }
.cal-cell.has-entry { background: rgba(125,38,56,.1); }
.cal-cell.is-selected { background: var(--wine); box-shadow: none; }

.notes-section { background: var(--black); padding: 130px clamp(20px, 5vw, 72px) 150px; }
.notes-section { display: none !important; }
.notes-section .section-head__kicker { color: #ba6d7d; }
.notes-section .section-head__title { color: #fff; }
.notes-section .section-head__desc { color: rgba(255,255,255,.45); }
.notes-wall { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1320px; gap: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.18); }
.note { width: auto; min-height: 220px; padding: 34px 32px; border: 0; border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); border-radius: 0; background: transparent !important; box-shadow: none; transform: none; animation: none; opacity: 1; }
.note:hover { transform: none; box-shadow: none; background: rgba(255,255,255,.03) !important; }
.note::before { content: attr(data-index); position: static; display: block; width: auto; height: auto; margin-bottom: 48px; transform: none; background: none; box-shadow: none; font-family: var(--sans); font-size: 9px; color: rgba(255,255,255,.35); }
.note__text { font-size: clamp(20px, 2vw, 29px); line-height: 1.5; color: #fff; }
.note__author { margin-top: 24px; text-align: left; font-size: 10px; color: rgba(255,255,255,.42); }
.notes-empty { color: rgba(255,255,255,.45); }

.footer { padding: 70px 24px; background: #0d0c0b; border-top: 1px solid rgba(255,255,255,.12); }
.footer__heart { display: none; }
.footer__text { font-weight: 400; }
.lightbox { background: rgba(10,9,8,.97); }
.lightbox__img { border-radius: 0; }
.back-top { border: 1px solid rgba(255,255,255,.22); border-radius: 0; background: var(--black); box-shadow: none; }

@media (max-width: 760px) {
  .site-nav { height: 62px; padding: 0 20px; }
  .site-nav__links { gap: 16px; }
  .site-nav__links a:last-child { display: none; }
  .hero { min-height: 740px; }
  .hero-inner { display: block; padding: 128px 22px 42px; }
  .hero-title { font-size: clamp(48px, 16vw, 74px); }
  .hero-subtitle { margin-bottom: 42px; font-size: 17px; }
  .hero-stats { width: 100%; grid-template-columns: minmax(0, 1fr) 104px; }
  .day-counter { padding-right: 20px; gap: 10px; }
  .day-counter__num { font-size: 48px; }
  .hero-stat { min-width: 104px; padding-left: 20px; }
  .hero-names { margin-top: 42px; }
  .scroll-hint { display: none; }
  .main, .notes-section { padding: 92px 20px 100px; }
  .section-head { display: block; margin-bottom: 52px; }
  .section-head__title { font-size: 42px; }
  .section-head__desc { margin-top: 18px; padding: 0; }
  .timeline { display: block; }
  .memory { margin-bottom: 72px; padding: 0 !important; }
  .memory:nth-child(even) { margin-left: 12%; }
  .memory:nth-child(odd) { margin-right: 8%; }
  .memory__media, .memory:nth-child(4n+2) .memory__media, .memory:nth-child(4n+3) .memory__media { aspect-ratio: auto; }
  .memory__title { font-size: 28px; }
  .notes-wall { grid-template-columns: 1fr; }
  .note { min-height: 180px; border-right: 0; padding: 28px 0; }
  .note::before { margin-bottom: 28px; }
  .lightbox__caption { bottom: 22px; }
  .lightbox__img { max-height: 68vh; }
}