/* LivePocket: warm paper, coral ink, lavender tickets, genuine screens. */
:root {
  --red: #f66068;
  --red-dark: #af3448;
  --ink: #201d1e;
  --paper: #fdf7ef;
  --lavender: #d9c3ff;
  --line: #d7c9c1;
  --blush: #f8e1e1;
  --mauve: #302433;
  --hero-red: #d43d49;
}
body { background: var(--paper); }
.wrap { width: min(100% - 80px, 1380px); }

/* Red carries the brand; paper and ink do the supporting work. */
header { color: #fffaf5; }
.nav { border-color: #ffffff75; }
.brand, .links a { color: #fffaf5; }
.brand-dot { color: var(--lavender); }
.links .nav-download {
  border-color: var(--ink); background: #fff8f0; color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.links .nav-download:hover { opacity: 1; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.language { border-color: #fffaf5; background: transparent; color: #fffaf5; }

.hero {
  color: #fffaf5;
  background-color: var(--hero-red);
  background-image:
    linear-gradient(#ffffff25 1px, transparent 1px),
    linear-gradient(90deg, #ffffff25 1px, transparent 1px),
    radial-gradient(circle at 16% 76%, #b82e4133 0, transparent 35%);
  background-size: 52px 52px, 52px 52px, auto;
}
.hero::before { inset: auto 0 0; height: 10px; background: repeating-linear-gradient(90deg, #fff4e9 0 22px, transparent 22px 40px); opacity: .52; }
.hero-layout { min-height: 840px; grid-template-columns: 1.05fr .95fr; padding-top: 105px; padding-bottom: 58px; gap: 4%; }
.hero-copy { padding: 0 0 28px; }
.hero .eyebrow {
  display: inline-flex; padding: 11px 13px; margin: 0 0 34px;
  border: 1px solid #fffaf5; background: #ffffff14; color: #fffaf5;
  box-shadow: 4px 4px 0 #ba3142; letter-spacing: .13em;
}
.hero .eyebrow .asterisk { color: var(--lavender); }
.hero h1 { width: 110%; font-size: clamp(84px, 9vw, 145px); line-height: 1.06; letter-spacing: -.074em; }
body[data-lang=zh] .hero h1 { font-size: clamp(52px, 6.5vw, 96px); letter-spacing: 0; }
.hero h1 .highlight { color: #ffd8da; }
body[data-lang=en] .hero h1 { font-size: clamp(80px, 8.1vw, 132px); }
.hero .lead { color: #fff5f1; font-size: 18px; line-height: 1.8; }
.hero .release { color: #ffe2df; }
.hero .hero-more { color: #fffaf5; }
.hero .button-light { background: #fff8f0; color: var(--ink); }
.hero-visual { min-height: 690px; }
.hero-orbit {
  width: min(93%, 570px); height: 630px; aspect-ratio: auto;
  border: 1px solid var(--ink); border-radius: 35px;
  background-color: #fff6ed;
  background-image: linear-gradient(#e6cbc379 1px, transparent 1px), linear-gradient(90deg, #e6cbc379 1px, transparent 1px);
  background-size: 46px 46px;
  box-shadow: 17px 17px 0 #9f2b3a;
  transform: rotate(-5deg);
}
.hero-visual::before {
  content: 'LIVEPOCKET / MEMORY NO. 001'; position: absolute; z-index: 1;
  top: 10%; left: 3%; padding: 13px 16px; border: 1px dashed var(--ink);
  background: #fff9f3; color: var(--red-dark); font: 800 11px monospace;
  letter-spacing: .09em; transform: rotate(-8deg);
}
.hero-phone { width: min(69%, 410px); max-height: 770px; filter: drop-shadow(18px 24px 16px #26152745); transform: rotate(8deg) translateY(28px); }
.hero-stamp { top: 11%; right: -1%; width: 110px; height: 110px; background: var(--lavender); color: var(--ink); border: 1px solid var(--ink); box-shadow: 5px 6px 0 var(--ink); }
.visual-note { left: 1%; bottom: 6%; border: 1px solid var(--ink); background: #fffaf5; color: var(--ink); box-shadow: 4px 4px 0 var(--red); }
.hero-bottom { color: #ffe6e2; }
.ticker { border-color: var(--ink); background: var(--mauve); }
.ticker-inner { color: #fffaf4; }
.ticker b { color: var(--lavender); }

.section { padding: 110px 0; }
.index { border-color: var(--ink); background: #fffaf5; color: var(--ink); box-shadow: 3px 3px 0 var(--lavender); }
.section h2 { letter-spacing: -.065em; }
.journal { position: relative; background: #fffdf9; }
.journal::before { content: ''; position: absolute; inset: 0 0 auto; height: 8px; background: repeating-linear-gradient(90deg, #f7bcbf 0 36px, #fffdf9 36px 46px); }
.section-intro h2 { color: var(--ink); }
.section-intro p { color: #5e5350; }
.journal-grid { gap: 24px; }
.journal-card {
  min-height: 710px; border: 1px solid var(--ink); border-radius: 19px;
  background: #fff5ef; box-shadow: 10px 10px 0 #f6d7d8;
}
.journal-card::before {
  content: ''; position: absolute; z-index: 3; top: -2px; right: 30px;
  width: 82px; height: 23px; background: #f8b6be8c; transform: rotate(7deg);
}
.journal-card.card-list { background: #f5effb; box-shadow: 10px 10px 0 #e9def2; }
.journal-card.card-list::before { background: #f8c7d0; transform: rotate(-8deg); }
.card-heading { padding: 31px 32px 0; }
.card-number { border-color: var(--ink); background: var(--red); color: var(--ink); font-weight: 900; }
.card-heading h3 { color: var(--ink); }
.card-heading p { color: #615552; }
.journal-card .screen-button { max-height: 610px; }
.journal-card .screen-button img { width: min(58%, 315px); margin-top: 27px; }

.wall {
  color: #fffaf5; background-color: var(--mauve);
  background-image: linear-gradient(#d9c3ff1e 1px, transparent 1px), linear-gradient(90deg, #d9c3ff1e 1px, transparent 1px);
  background-size: 52px 52px;
}
.wall .index { border-color: var(--lavender); background: transparent; color: var(--lavender); box-shadow: 3px 3px 0 #876da133; }
.wall h2 { color: #fffaf5; }
.wall h2 em { color: #ff8990; }
.wall-copy > p { color: #eadfe9; }
.wall-tags > span { border-color: #d9c3ff8c; background: #d9c3ff1e; color: #fffaf5; }
.wall-stage::before { width: min(92%, 500px); border-color: var(--lavender); border-radius: 24% 32% 27% 35%; background: #d9c3ff35; box-shadow: 14px 14px 0 #ff899045; transform: rotate(-8deg); }
.wall-sun { color: var(--red); }
.wall-note { border: 1px solid var(--lavender); background: var(--lavender); color: var(--ink); }

.preview-section { background: #faf1ea; }
.preview-head h2 { color: var(--ink); }
.preview-head p { color: #5d5451; }
.preview-card { border: 1px solid var(--ink); border-radius: 15px; background: #fffaf5; box-shadow: 5px 5px 0 #d9c3ff; overflow: hidden; }
.preview-card:nth-child(4n+2) { background: #f4edfa; box-shadow: 5px 5px 0 #f4bac1; }
.preview-card:nth-child(4n+3) { background: #fce7e4; box-shadow: 5px 5px 0 #dec6f2; }
.preview-card:nth-child(4n+4) { background: #fff1e8; box-shadow: 5px 5px 0 #cbb8eb; }
.preview-card .screen-button { height: 465px; }
.preview-card .screen-button img { width: min(74%, 210px); filter: drop-shadow(6px 14px 10px #201d1e33); }
.preview-card figcaption { min-height: 61px; border-color: var(--ink); background: #fffaf5; }
.preview-card figcaption > span:last-child { color: var(--red-dark); }

.collage-section { border-color: var(--ink); background: #f8e3df; }
.collage-section .index { background: #fffaf5; }
.collage-section h2 { color: var(--ink); }
.collage-section h2 em { color: var(--red-dark); }
.collage-note { color: #66546c; }
.collage-section figure { transform: rotate(-8deg); }
.privacy { background: #fffaf5; }
.privacy h2 { color: var(--ink); }
.privacy-copy > p { color: #625550; }
.facts { gap: 17px; }
.fact { position: relative; overflow: hidden; min-height: 258px; border: 1px solid var(--ink); border-radius: 16px; background: #fce5e5; box-shadow: 5px 5px 0 #e7d5d5; }
.fact:nth-child(2) { background: #f2eaf8; box-shadow: 5px 5px 0 #e4d7ee; }
.fact:nth-child(3) { background: #f9efe4; box-shadow: 5px 5px 0 #e7dacb; }
.fact::after { content: ''; position: absolute; top: 17px; right: 18px; width: 18px; height: 18px; border: 1px solid var(--ink); border-radius: 50%; background: #fffaf5; }
.fact-icon { color: var(--red-dark); }
.fact h3 { margin-top: 34px; }
.text-link { color: var(--red-dark); }
.faq-section { background: #fffdf9; }
.faq h2 { color: var(--ink); }
.faq details { border-color: var(--ink); }
.faq details[open] summary { color: var(--red-dark); }
.faq summary::after { color: var(--red-dark); }

.closing {
  position: relative; color: #fffaf5; background-color: var(--hero-red);
  background-image: linear-gradient(#ffffff25 1px, transparent 1px), linear-gradient(90deg, #ffffff25 1px, transparent 1px);
  background-size: 52px 52px;
}
.closing::before { content: ''; position: absolute; width: 390px; height: 390px; border-radius: 50%; background: #ffb9bd42; left: 12%; top: 10%; filter: blur(1px); }
.closing-inner { isolation: isolate; }
.closing-mark { color: var(--lavender); }
.closing h2 { color: #fffaf5; }
.closing .button-light { background: #fff8f0; color: var(--ink); }
footer { background: var(--ink); }
.footer-brand span { color: var(--red); }

@media (max-width: 1050px) {
  .hero-layout { grid-template-columns: 1fr .95fr; }
  .hero-orbit { height: 530px; }
  .preview-card .screen-button { height: 430px; }
}
@media (max-width: 700px) {
  .wrap { width: min(100% - 36px, 1380px); }
  header { height: 66px; }
  .brand, .links a { color: #fffaf5; }
  .links .nav-download { padding: 9px 9px; font-size: 10px; }
  .language { border-color: #fffaf5; background: transparent; color: #fffaf5; }
  .hero { background-size: 38px 38px, 38px 38px, auto; }
  .hero-layout { padding-top: 108px; padding-bottom: 74px; }
  .hero-copy { padding: 0; }
  .hero .eyebrow { margin-bottom: 23px; padding: 7px 9px; font-size: 9px; box-shadow: 3px 3px 0 #ba3142; }
  .hero h1 { width: 100%; font-size: clamp(55px, 13.3vw, 83px); line-height: 1.07; }
  body[data-lang=zh] .hero h1 { font-size: clamp(43px, 12vw, 58px); }
  body[data-lang=en] .hero h1 { font-size: clamp(48px, 11.7vw, 73px); }
  .hero .lead { margin: 22px 0 23px; font-size: 15px; }
  .hero-visual { min-height: 540px; margin-top: 14px; }
  .hero-orbit { width: min(79vw, 360px); height: 435px; border-radius: 22px; box-shadow: 11px 11px 0 #9f2b3a; background-size: 34px 34px; }
  .hero-visual::before { left: 1%; top: 9%; padding: 7px; font-size: 8px; }
  .hero-phone { width: min(54vw, 255px); max-height: none; transform: rotate(8deg) translateY(17px); }
  .hero-stamp { top: 8%; right: 0; width: 75px; height: 75px; font-size: 11px; box-shadow: 3px 4px 0 var(--ink); }
  .visual-note { left: 0; bottom: 7%; }
  .hero-bottom { color: #ffe5e1; }
  .ticker-inner { font-size: 18px; }
  .section { padding: 80px 0; }
  .journal-card { min-height: 0; border-radius: 13px; box-shadow: 6px 6px 0 #f6d7d8; }
  .journal-card.card-list { box-shadow: 6px 6px 0 #e9def2; }
  .card-heading { padding: 22px 20px 0; }
  .journal-card .screen-button { height: 510px; }
  .journal-card .screen-button img { width: min(57%, 270px); }
  .wall { background-size: 38px 38px; }
  .wall-stage::before { width: 80%; }
  .preview-card { border-radius: 10px; box-shadow: 3px 3px 0 #d9c3ff; }
  .preview-card:nth-child(4n+2), .preview-card:nth-child(4n+3), .preview-card:nth-child(4n+4) { box-shadow: 3px 3px 0 #dec6f2; }
  .preview-card .screen-button { height: 298px; }
  .preview-card .screen-button img { width: min(79%, 137px); }
  .preview-card figcaption { min-height: 47px; }
  .collage-section { padding: 55px 0; }
  .collage-section figure { transform: rotate(-8deg); }
  .fact { min-height: 0; border-radius: 12px; box-shadow: 4px 4px 0 #e7d5d5; }
  .closing { background-size: 38px 38px; }
  .closing::before { width: 260px; height: 260px; left: -40px; top: 18%; }
}
@media (max-width: 370px) {
  .hero h1 { font-size: clamp(48px, 12.8vw, 55px); }
  .hero-orbit { height: 385px; }
  .hero-visual { min-height: 470px; }
  .hero-phone { width: min(54vw, 215px); }
  .preview-card .screen-button { height: 255px; }
  .preview-card .screen-button img { width: min(79%, 116px); }
}
@media (prefers-reduced-motion: reduce) {
  .preview-card .screen-button img, .links .nav-download { transition: none; }
}