/* A shared photographic and typographic treatment for MEMGO's everyday stories. */
body.home-page {
  --paper:#f3f0e9;
  --ink:#292b26;
  --muted:#68695f;
  --line:#d9d6cb;
  --life-accent:#796e50;
  background:#171714;
}
body.home-page :is(.chapter-kicker,.dialogue-label) { font-size:10px; line-height:1.5; letter-spacing:.1em; }
body.home-page :is(.first-week,.companion-section,.film-gallery) .chapter-kicker { color:var(--life-accent); }
body.home-page :is(.hero-visual,.belief-scene,.invitation-portrait) img { filter:saturate(.85) sepia(.09); }
body.home-page #belief .belief-scene::after { background:linear-gradient(90deg,#211b164d,transparent 74%),linear-gradient(0deg,#171714ed,#17171455 36%,transparent 70%); }
body.home-page #belief,
body.home-page #preorder { background:#171714; color:#fff8ec; }
body.home-page #preorder .invitation-portrait { inset:var(--header-height) 0 0 auto; width:min(100%,calc((100dvh - var(--header-height)) * 1.5)); }
body.home-page #preorder .invitation-portrait img { object-fit:contain; object-position:right center; filter:none; mask-image:linear-gradient(90deg,transparent,#000 24%); }
body.home-page #preorder .invitation-portrait::after { background:linear-gradient(90deg,#171714aa,transparent 48%),linear-gradient(0deg,#171714,transparent 25%); }
body.home-page #belief .belief-statement>p:not(.chapter-kicker),
body.home-page #preorder .invitation-lead { color:#f1e9dc; }
body.home-page #belief .chapter-kicker,
body.home-page #preorder .chapter-kicker { color:#e7d6b9; }
html body.home-page #preorder h2 { max-width:11em; }
html[lang|="zh"] body.home-page #preorder h2 { max-width:7.2em; text-wrap:wrap; }
body.home-page #preorder .invitation-lead { max-width:42ch; }
body.home-page #preorder .button-primary { min-height:50px; padding:13px 24px; gap:28px; border-radius:28px; letter-spacing:0; }
body.home-page .companion-portrait img { filter:brightness(1.06) saturate(1.02); }

/* The practice excerpt is one complete exchange, with a clear place to resume. */
body.home-page .first-week { column-gap:clamp(32px,5vw,80px); }
body.home-page .first-week h2 { max-width:10em; }
body.home-page .first-week-dialogue { border-color:var(--line); padding-inline-start:clamp(24px,3vw,48px); }
body.home-page .first-week .dialogue-label { font-size:10px; margin-bottom:24px; }
body.home-page .first-week .dialogue-turn>span { font-size:10px; margin-bottom:8px; }
body.home-page .dialogue-turn { margin-bottom:clamp(18px,3dvh,32px); }
body.home-page .dialogue-turn:last-child { margin-bottom:0; }
body.home-page .dialogue-turn .dialogue-context { max-width:36ch; margin:0 0 14px; font-size:13px; line-height:1.7; color:var(--muted); }
body.home-page .dialogue-turn>p[lang="en"] { max-width:26ch; font-size:clamp(24px,2.5vw,34px); font-weight:400; line-height:1.35; letter-spacing:-.025em; }
body.home-page .dialogue-you>p { color:#6f7859; }
body.home-page .dialogue-turn>span,
body.home-page .dialogue-caption { color:#747368; }

/* The same material palette carries the product into the memory chapter. */

/* Three wishes share one photographic frame; full films open on request. */
body.home-page #experience { display:block; }
body.home-page #experience .film-gallery-inner { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; gap:18px; width:100%; height:100%; min-height:0; }
body.home-page #experience .gallery-heading { grid-column:auto; grid-row:auto; text-align:start; }
body.home-page #experience .gallery-heading .chapter-kicker { margin:0 0 12px; }
html body.home-page #experience .gallery-heading h2 { max-width:24em; color:var(--ink); font-size:clamp(30px,3.1vw,44px); line-height:1.2; font-weight:500; }
body.home-page #experience .film-choices { grid-column:auto; grid-row:auto; justify-content:flex-start; align-items:center; gap:30px; border-bottom:1px solid var(--line); }
body.home-page #experience .film-choices button { min-height:44px; padding:8px 0 12px; color:#7e7b70; font-size:13px; }
body.home-page #experience .film-choices button[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--ink); }
body.home-page #experience .film-choices button:focus-visible { outline-color:var(--life-accent); }
body.home-page #experience .film-gallery-stage { grid-column:auto; grid-row:auto; width:100%; height:100%; min-height:0; }
body.home-page #experience .gallery-panel { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); align-items:center; gap:clamp(30px,5vw,80px); height:100%; min-height:0; }
body.home-page #experience .lifestyle-visual { display:grid; grid-template-rows:minmax(0,1fr) auto; align-items:center; gap:9px; width:100%; height:auto; aspect-ratio:1.45; min-height:0; max-height:100%; margin:0; }
body.home-page #experience .lifestyle-visual img { display:block; width:100%; height:100%; min-height:0; object-fit:contain; object-position:center; }
body.home-page #experience .lifestyle-visual figcaption { margin:0; color:#828072; font-size:9px; line-height:1.5; }
body.home-page #experience .gallery-caption { min-height:0; padding:0; text-align:start; }
body.home-page #experience .lifestyle-number { display:block; margin-bottom:22px; color:#a29b83; font-size:13px; font-variant-numeric:tabular-nums; letter-spacing:.14em; }
html body.home-page #experience .gallery-caption h3 { max-width:12em; color:var(--ink); font-size:clamp(29px,3vw,43px); line-height:1.2; font-weight:500; letter-spacing:-.025em; text-wrap:balance; }
html[lang|="zh"] body.home-page #experience .gallery-caption h3 { max-width:8em; }
body.home-page #experience .gallery-caption>p { max-width:37ch; margin:22px 0 0; color:var(--muted); font-size:14px; line-height:1.85; text-wrap:pretty; }
body.home-page #experience .lifestyle-play { margin-top:25px; min-height:44px; border-color:#b6b1a1; color:var(--ink); font-size:12px; }
body.home-page #experience .gallery-next { grid-column:auto; grid-row:auto; justify-self:end; min-height:40px; color:var(--muted); border-color:var(--line); font-size:11px; }
/* Dialog media keeps its full aspect ratio, independent of the gallery layout. */
body.home-page #experience .brand-film-dialog { color:#f1f0e9; }
body.home-page #experience .brand-film-video { width:100%; height:100%; aspect-ratio:auto; object-fit:contain; }
body.home-page #experience .brand-film-heading h2 { color:inherit; }

@media(max-width:760px), (max-aspect-ratio:1/1) {
  body.home-page #experience .film-gallery-inner { gap:12px; }
  html body.home-page #experience .gallery-heading h2 { font-size:27px; line-height:1.25; }
  body.home-page #experience .gallery-heading .chapter-kicker { margin-bottom:8px; font-size:9px; }
  body.home-page #experience .film-choices { gap:24px; }
  body.home-page #experience .film-choices button { font-size:12px; }
  body.home-page #experience .gallery-panel { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; gap:18px; }
  body.home-page #experience .lifestyle-visual { max-height:none; gap:5px; }
  body.home-page #experience .lifestyle-visual figcaption { font-size:8px; }
  body.home-page #experience .lifestyle-number { display:none; }
  html body.home-page #experience .gallery-caption h3 { max-width:18em; font-size:28px; line-height:1.2; }
  html[lang|="zh"] body.home-page #experience .gallery-caption h3 { max-width:12em; }
  body.home-page #experience .gallery-caption>p { max-width:none; margin-top:12px; font-size:13px; line-height:1.7; }
  body.home-page #experience .lifestyle-play { margin-top:10px; min-height:40px; }
  body.home-page #experience .gallery-next { min-height:32px; font-size:10px; }
  body.home-page .dialogue-turn>p[lang="en"] { max-width:29ch; font-size:23px; }
  body.home-page .dialogue-turn .dialogue-context { font-size:12px; margin-bottom:10px; }
}
@media(max-height:650px) and (min-aspect-ratio:1/1) {
  body.home-page #experience .film-gallery-inner { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; gap:8px; }
  html body.home-page #experience .gallery-heading h2 { font-size:24px; }
  body.home-page #experience .gallery-heading .chapter-kicker { display:none; }
  body.home-page #experience .film-choices button { min-height:32px; padding:4px 0 7px; font-size:11px; }
  body.home-page #experience .gallery-panel { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr); gap:28px; }
  body.home-page #experience .lifestyle-number { display:none; }
  html body.home-page #experience .gallery-caption h3 { max-width:18em; font-size:23px; }
  body.home-page #experience .gallery-caption>p { margin-top:8px; max-width:none; font-size:11px; line-height:1.55; }
  body.home-page #experience .lifestyle-play { margin-top:7px; min-height:30px; padding:5px 0; font-size:10px; }
  body.home-page #experience .gallery-next { min-height:24px; padding:3px 0; font-size:9px; }
  body.home-page #experience .lifestyle-visual { gap:3px; }
  body.home-page #experience .lifestyle-visual figcaption { font-size:7px; }
  body.home-page .dialogue-turn>p[lang="en"] { font-size:19px; }
  body.home-page .dialogue-turn .dialogue-context { font-size:11px; margin-bottom:8px; }
  body.home-page .dialogue-turn { margin-bottom:12px; }
}
@media(max-width:420px) and (max-height:740px) {
  html body.home-page #experience .gallery-heading h2 { font-size:23px; }
  html body.home-page #experience .gallery-caption h3 { font-size:24px; }
  body.home-page #experience .gallery-panel { gap:10px; }
  body.home-page #experience .gallery-caption>p { margin-top:8px; font-size:12px; }
  body.home-page #experience .film-gallery-inner { gap:8px; }
  body.home-page .dialogue-turn>p[lang="en"] { font-size:20px; }
}

/* A centered reading column keeps the practice excerpt together in portrait. */
@media(max-aspect-ratio:1/1) {
  body.home-page .first-week { justify-items:center; gap:28px; }
  body.home-page .first-week-copy,
  body.home-page .first-week-dialogue { width:min(100%,720px); max-width:none; }
  body.home-page .first-week h2 { max-width:none; }
  body.home-page .first-week-dialogue { border:0; border-top:1px solid var(--line); padding:24px 0 0; }
}
@media(min-width:761px) and (max-aspect-ratio:1/1) {
  body.home-page .first-week h2 { font-size:clamp(40px,4.8vw,52px); }
  body.home-page .first-week-copy>p:not(.chapter-kicker) { font-size:15px; margin-top:16px; }
  body.home-page .dialogue-turn>p[lang="en"] { max-width:29ch; font-size:clamp(26px,3.1vw,34px); }
  body.home-page .dialogue-turn .dialogue-context { font-size:14px; }
}
@media(max-width:760px) and (max-aspect-ratio:1/1) {
  body.home-page #preorder .button-primary { min-height:46px; padding:11px 21px; font-size:11px; }
}
@media(max-height:700px) and (max-aspect-ratio:1/1) {
  body.home-page .first-week { gap:18px; }
  body.home-page .first-week-dialogue { padding-top:18px; }
  body.home-page .first-week .dialogue-label { margin-bottom:14px; }
}
@media(max-height:650px) and (min-aspect-ratio:1/1) {
  body.home-page #preorder .button-primary { min-height:40px; padding:9px 20px; font-size:11px; }
  body.home-page .first-week .dialogue-label { margin-bottom:12px; }
  body.home-page .first-week .dialogue-turn>span { font-size:9px; margin-bottom:4px; }
}

/* Keep one message per frame; image and action share the remaining space. */
body.home-page :is(#embodiment,#first-week,#experience) { background:var(--paper); color:var(--ink); }
body.home-page .site-footer { background:#171714; color:#fff8ec; border-top:0; }
body.home-page .site-footer a { color:#fff8ec; }
body.home-page .footer-bottom { color:#b4b5ab; border-color:#ffffff21; }
body.home-page .footer-bottom a { color:#d4d5cc; }
body.home-page .site-footer :focus-visible { outline-color:#fff8ec; }
body.home-page .hero-footer { justify-content:flex-end; }
body.home-page .hero-footer>span:first-child { display:block; }
body.home-page .first-week { position:relative; }
body.home-page .first-week>.anchor-alias { position:absolute; inset:0 auto auto 0; width:0; height:0; min-height:0; scroll-margin:0; }
body.home-page #experience .film-gallery-inner { position:relative; }
body.home-page #experience .film-choices { border-bottom:0; }
body.home-page #experience .gallery-caption>p { margin-top:16px; }
body.home-page #experience .lifestyle-play { margin-top:20px; }
body.home-page #experience .gallery-next { color:var(--ink); }
body.home-page #preorder>.page-shell { width:min(42%,600px); }
html body.home-page #preorder h2 { max-width:9em; }
@media(max-width:760px), (max-aspect-ratio:1/1) {
  body.home-page #experience .gallery-caption>p { margin-top:10px; }
  body.home-page #experience .lifestyle-play { margin-top:10px; }
  body.home-page #preorder .invitation-portrait { inset:var(--header-height) 0 28%; width:100%; }
  body.home-page #preorder .invitation-portrait img { object-fit:cover; object-position:73% 50%; mask-image:none; }
  body.home-page #preorder .invitation-portrait::after { background:linear-gradient(0deg,#171714,transparent 25%); }
  body.home-page #preorder .invitation-portrait figcaption { bottom:20px; }
  body.home-page #preorder>.page-shell { width:100%; }
  html body.home-page #preorder h2 { max-width:12em; }
}
@media(max-height:650px) and (min-aspect-ratio:1/1) {
  body.home-page #experience .gallery-caption>p { margin-top:8px; }
  body.home-page #experience .lifestyle-play { margin-top:8px; }
}