:root {
  --ink: #162536;
  --paper: #f2efe9;
  --mist: #dce3e8;
  --blue: #607c98;
  --deep-blue: #1e344a;
  --coral: #d57d6d;
  --line: rgba(22, 37, 54, 0.18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.lightbox-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; }
img, video { display: block; max-width: 100%; }

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 92px;
  padding: 0 4.5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  border-bottom: 1px solid rgba(255,255,255,.26);
}

.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .15em; }
.brand-mark {
  width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%;
  display: grid; place-items: center; font-family: Georgia, serif; font-size: 16px; letter-spacing: 0;
}

nav { display: flex; gap: 38px; font-size: 12px; letter-spacing: .14em; }
nav a { position: relative; padding: 8px 0; }
nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: white; transition: width .25s; }
nav a:hover::after { width: 100%; }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: white;
  background: var(--deep-blue);
}

.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 38%; }
.hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,25,39,.86) 0%, rgba(20,39,57,.55) 43%, rgba(20,39,57,.08) 76%),
              linear-gradient(0deg, rgba(10,22,34,.55), transparent 45%);
}

.hero-content { position: relative; z-index: 2; padding: 24vh 9vw 12vh; max-width: 950px; }
.eyebrow { margin: 0 0 28px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; }
.hero .eyebrow { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.78); }
.hero .eyebrow span { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }

h1, h2, p { margin-top: 0; }
h1, h2 { font-family: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif; font-weight: 400; }
h1 { margin-bottom: 28px; font-size: clamp(48px, 7.2vw, 108px); line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.hero-intro { margin-bottom: 42px; max-width: 520px; color: rgba(255,255,255,.82); font-size: 16px; letter-spacing: .08em; line-height: 1.8; }
.watch-link { display: inline-flex; align-items: center; gap: 14px; font-size: 13px; letter-spacing: .12em; }
.play-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; font-size: 11px; transition: background .25s, color .25s; }
.watch-link:hover .play-icon { color: var(--ink); background: white; }
.hero-side-note { position: absolute; z-index: 2; right: 3.3vw; top: 50%; font-size: 9px; letter-spacing: .26em; writing-mode: vertical-rl; opacity: .75; }
.hero-scroll { position: absolute; z-index: 2; right: 4.4vw; bottom: 34px; display: flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: .18em; }
.hero-scroll span { display: block; width: 46px; height: 1px; background: rgba(255,255,255,.65); }

.notice {
  display: flex; align-items: center; gap: 34px; padding: 22px 7vw;
  color: #edece8; background: #162536; border-top: 1px solid rgba(255,255,255,.12);
}
.notice p { margin: 0; font-size: 12px; line-height: 1.7; letter-spacing: .04em; }
.notice-label { flex: 0 0 auto; padding-right: 34px; border-right: 1px solid rgba(255,255,255,.3); color: #d9988c; font-size: 10px; letter-spacing: .18em; }

.film-section, .story-section, .photo-section { position: relative; padding: 130px 7vw; }
.section-index { margin-bottom: 86px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 10px; letter-spacing: .18em; }
.film-heading { display: grid; grid-template-columns: 1fr 2fr; align-items: end; margin-bottom: 48px; }
.film-heading .eyebrow { align-self: start; }
.film-heading h2, .story-lead h2, .photo-heading h2, .care-section h2 { margin: 0; font-size: clamp(45px, 6vw, 84px); line-height: 1.12; letter-spacing: -.045em; }
.video-frame { padding: 30px; background: #101c28; }
.video-frame video { width: 100%; height: min(78vh, 880px); object-fit: contain; background: #09121a; }
.film-caption { display: flex; justify-content: space-between; padding: 18px 4px 0; color: #65717d; font-size: 10px; letter-spacing: .16em; }
.film-caption p { margin: 0; }

.story-section { display: grid; grid-template-columns: 1fr 1.1fr; column-gap: 10vw; background: #dbe3e8; }
.story-section .section-index { grid-column: 1 / -1; }
.story-lead .eyebrow { color: #60758b; }
.story-copy { padding-top: 52px; font-size: 15px; line-height: 2.05; letter-spacing: .035em; }
.story-opening { font-family: "Songti SC", "STSong", Georgia, serif; font-size: 24px; line-height: 1.75; }
.process-note { margin-top: 52px; padding-top: 25px; border-top: 1px solid rgba(22,37,54,.25); color: #536477; font-size: 12px; }

.statement { margin: 0; padding: 150px 8vw; color: white; background: var(--deep-blue); text-align: center; }
.statement .quote-mark { display: block; height: 62px; color: #d99284; font-family: Georgia, serif; font-size: 100px; line-height: 1; }
.statement p { margin: 25px 0 0; font-family: "Songti SC", "STSong", Georgia, serif; font-size: clamp(32px, 4.2vw, 62px); line-height: 1.55; letter-spacing: -.03em; }

.photo-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 55px; }
.photo-heading h2 { font-size: clamp(44px, 5vw, 72px); }
.photo-heading > p { margin: 0; color: #78828c; font-size: 10px; letter-spacing: .15em; }
.photo-grid { display: grid; grid-template-columns: 1.25fr .85fr; gap: 4vw; align-items: start; }
.photo-card { position: relative; margin: 0; padding: 0; overflow: hidden; color: var(--ink); background: transparent; border: 0; text-align: left; cursor: zoom-in; }
.photo-card-2 { margin-top: 14vw; }
.photo-card img { width: 100%; height: auto; transition: transform .8s cubic-bezier(.2,.75,.25,1), filter .4s; }
.photo-card:hover img { transform: scale(1.018); filter: saturate(1.05); }
.photo-card span { display: block; padding-top: 15px; font-size: 10px; letter-spacing: .14em; }
.photo-card i { position: absolute; right: 15px; bottom: 4px; font-style: normal; }

.care-section { padding: 150px 8vw; text-align: center; border-top: 1px solid var(--line); background: #eadfd9; }
.care-section .eyebrow { color: #a55f53; }
.care-section h2 { margin-bottom: 38px; }
.care-section > p:last-child { max-width: 660px; margin: 0 auto; color: #53606c; font-size: 14px; line-height: 1.9; }

footer { min-height: 180px; padding: 55px 6vw; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 30px; color: white; background: #121f2b; }
footer p { margin: 0; text-align: center; font-family: "Songti SC", "STSong", Georgia, serif; font-size: 14px; opacity: .68; }
.back-top { font-size: 10px; letter-spacing: .15em; }

.lightbox {
  position: fixed; z-index: 100; inset: 0; padding: 3vh 6vw; display: grid; grid-template-columns: 60px 1fr 60px;
  align-items: center; color: white; background: rgba(7,14,21,.96); backdrop-filter: blur(12px);
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; min-width: 0; height: 94vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lightbox figure img { max-width: 100%; max-height: calc(94vh - 45px); object-fit: contain; }
.lightbox figcaption { padding-top: 14px; color: rgba(255,255,255,.6); font-size: 10px; letter-spacing: .15em; }
.lightbox button { color: white; background: transparent; border: 0; cursor: pointer; }
.lightbox-close { position: absolute; z-index: 2; top: 22px; right: 30px; width: 50px; height: 50px; font-size: 32px; font-weight: 200; }
.lightbox-prev, .lightbox-next { height: 80px; font-size: 28px; opacity: .7; }
.lightbox button:hover { opacity: 1; }

@media (max-width: 760px) {
  .site-header { height: 72px; padding: 0 20px; }
  .brand { font-size: 9px; }
  .brand-mark { width: 29px; height: 29px; }
  nav { gap: 18px; font-size: 10px; }
  .hero-image { object-position: 58% 50%; }
  .hero-shade { background: linear-gradient(0deg, rgba(10,22,34,.83), rgba(16,32,47,.16) 80%); }
  .hero-content { position: absolute; left: 0; bottom: 0; padding: 0 24px 90px; }
  h1 { font-size: clamp(42px, 13vw, 65px); }
  .hero-intro { font-size: 13px; }
  .hero-side-note { display: none; }
  .hero-scroll { right: 22px; bottom: 25px; }
  .notice { align-items: flex-start; gap: 18px; padding: 18px 22px; }
  .notice-label { padding-right: 18px; }
  .film-section, .story-section, .photo-section { padding: 85px 22px; }
  .section-index { margin-bottom: 55px; }
  .film-heading { display: block; }
  .film-heading h2 { font-size: 48px; }
  .video-frame { padding: 12px; }
  .video-frame video { height: auto; aspect-ratio: 9 / 16; }
  .film-caption { display: block; line-height: 1.8; }
  .story-section { display: block; }
  .story-copy { padding-top: 45px; }
  .statement { padding: 100px 22px; }
  .statement p br { display: none; }
  .photo-heading { display: block; }
  .photo-heading > p { margin-top: 18px; }
  .photo-grid { display: block; }
  .photo-card { margin-bottom: 45px; }
  .photo-card-2 { margin: 0; }
  .care-section { padding: 100px 24px; }
  footer { padding: 50px 22px; display: flex; min-height: 270px; flex-direction: column; align-items: flex-start; justify-content: center; }
  footer p { text-align: left; line-height: 1.7; }
  .lightbox { padding: 65px 12px 30px; grid-template-columns: 38px 1fr 38px; }
  .lightbox figure { height: calc(100vh - 95px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}