@page { size: A4 portrait; margin: 0; }

:root {
  --ink: #111014;
  --paper: #f3efe9;
  --paper-2: #e9e1dc;
  --pink: #efa5bd;
  --hot: #f02c83;
  --silver: #c7c8cb;
  --muted: #786f75;
  --red: #8e2038;
  --champagne: #c7aa7a;
  --blue: #a9cfe0;
  --gold: #d8ad55;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #2b292d; color: var(--ink); }
body { font-family: Arial, Helvetica, sans-serif; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
a { color: inherit; text-decoration: none; }

.page {
  width: 210mm;
  height: 297mm;
  position: relative;
  overflow: hidden;
  page-break-after: always;
  background: var(--paper);
}
.page:last-child { page-break-after: auto; }
.page.dark { background: #0c0b0e; color: #f7f3f1; }
.page.pink-paper { background: #efd3dc; }
.page.jisoo { --accent: var(--red); }
.page.jennie { --accent: var(--champagne); }
.page.rose { --accent: var(--blue); }
.page.lisa { --accent: var(--gold); }

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .13;
  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='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.page-no {
  position: absolute;
  z-index: 15;
  bottom: 9mm;
  right: 12mm;
  font: 700 8pt/1 Arial, sans-serif;
  color: var(--hot);
  letter-spacing: .16em;
}
.page-no.left { right: auto; left: 12mm; }
.running {
  position: absolute;
  z-index: 15;
  top: 8mm;
  left: 12mm;
  right: 12mm;
  display: flex;
  justify-content: space-between;
  border-bottom: .25mm solid currentColor;
  padding-bottom: 2.2mm;
  font: 700 6.5pt/1 Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .75;
}

.pad { position: absolute; inset: 18mm 14mm 16mm; z-index: 3; }
.pad-tight { position: absolute; inset: 14mm 11mm 13mm; z-index: 3; }
.top-safe { padding-top: 12mm; }

.eyebrow {
  color: var(--accent, var(--hot));
  font: 800 8pt/1 Arial, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 4mm;
}
.display {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .88;
  margin: 0;
}
.display.xl { font-size: 52pt; }
.display.lg { font-size: 39pt; }
.display.md { font-size: 28pt; line-height: .95; }
.display em { color: var(--pink); font-style: normal; }
.dek {
  max-width: 150mm;
  font: 400 12pt/1.4 Georgia, 'Times New Roman', serif;
  margin: 5mm 0 0;
}
.kicker {
  font: 700 9pt/1.15 Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.body { font: 9.4pt/1.55 Georgia, 'Times New Roman', serif; }
.body p { margin: 0 0 3.6mm; }
.body p:first-child::first-letter {
  float: left;
  font: 700 34pt/.75 Georgia, serif;
  color: var(--accent, var(--hot));
  margin: 1mm 2mm 0 0;
}
.body.no-drop p:first-child::first-letter { float: none; font: inherit; color: inherit; margin: 0; }
.columns-2 { column-count: 2; column-gap: 8mm; column-rule: .2mm solid rgba(120,110,116,.35); }
.columns-3 { column-count: 3; column-gap: 6mm; }

.rule { height: .25mm; background: currentColor; opacity: .4; margin: 4mm 0; }
.rule.pink { background: var(--hot); opacity: 1; }
.star { color: var(--pink); font-size: 18pt; line-height: 1; }
.tiny { font: 6.6pt/1.35 Arial, sans-serif; letter-spacing: .03em; }
.caption { font: 6.7pt/1.35 Arial, sans-serif; color: var(--muted); margin-top: 2mm; }
.dark .caption { color: #c0b9bd; }

.cover { background: #060609; color: white; }
.cover-photo { position: absolute; inset: 64mm 8mm 8mm; width: calc(100% - 16mm); height: calc(100% - 72mm); object-fit: cover; object-position: center 28%; filter: contrast(1.08) saturate(.82); }
.cover-shade { position: absolute; inset: 0; background: linear-gradient(180deg,#060609 0 20%,rgba(6,6,9,.2) 53%,#060609 100%); }
.cover-title { position: absolute; z-index: 4; left: 11mm; right: 11mm; top: 18mm; text-align: center; }
.cover-title h1 { margin: 0; font: 400 55pt/.78 Georgia, serif; letter-spacing: -.065em; }
.cover-title h1 span { color: var(--pink); }
.cover-title .sub { margin-top: 6mm; font: 800 11pt/1 Arial, sans-serif; letter-spacing: .36em; text-transform: uppercase; }
.cover-lines { position: absolute; z-index: 5; bottom: 15mm; left: 12mm; right: 12mm; display: grid; grid-template-columns: 1fr auto 1fr; gap: 7mm; align-items: end; }
.cover-lines ul { padding: 0; margin: 0; list-style: none; font: 700 7pt/1.5 Arial; letter-spacing: .07em; text-transform: uppercase; }
.cover-lines ul:last-child { text-align: right; }
.edition { border: .4mm solid var(--pink); padding: 3mm; text-align: center; font: 800 6.5pt/1.4 Arial; letter-spacing: .13em; }

.fullbleed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fullbleed-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(5,4,7,.1),rgba(5,4,7,.92)); }
.visual-statement { position: absolute; z-index: 4; left: 15mm; right: 15mm; bottom: 26mm; color: white; font: 400 28pt/.95 Georgia, serif; letter-spacing: -.03em; }
.visual-statement small { display:block; font: 700 7pt/1.4 Arial; letter-spacing: .16em; text-transform: uppercase; color: var(--pink); margin-top: 5mm; }

.toc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5mm 9mm; margin-top: 9mm; }
.toc-item { border-top: .25mm solid currentColor; padding-top: 2.5mm; display: grid; grid-template-columns: 12mm 1fr; gap: 3mm; }
.toc-item .num { color: var(--hot); font: 400 21pt/1 Georgia, serif; }
.toc-item h3 { font: 800 8.4pt/1.2 Arial; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 1mm; }
.toc-item p { font: 7pt/1.3 Georgia, serif; margin: 0; color: var(--muted); }

.hero-grid { display: grid; grid-template-columns: 1.18fr .82fr; gap: 7mm; height: 100%; }
.hero-grid.reverse { grid-template-columns: .82fr 1.18fr; }
.hero-grid img { width: 100%; height: 100%; object-fit: cover; }
.hero-copy { align-self: center; }
.photo-stack { position: relative; min-height: 150mm; }
.photo-stack img { position: absolute; width: 68%; height: 58%; object-fit: cover; border: 2.5mm solid #fff; box-shadow: 0 3mm 8mm rgba(0,0,0,.25); }
.photo-stack img:nth-child(1) { left: 0; top: 0; transform: rotate(-3deg); }
.photo-stack img:nth-child(2) { right: 0; top: 39%; transform: rotate(4deg); }
.photo-stack img:nth-child(3) { left: 7%; bottom: -3%; transform: rotate(-1deg); width: 49%; height: 38%; }

.profile-hero { position: absolute; inset: 0 0 0 39%; width: 61%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(.84) contrast(1.06); }
.profile-shade { position: absolute; inset: 0; background: linear-gradient(90deg,#0b0a0d 0 43%,rgba(11,10,13,.55) 64%,rgba(11,10,13,.05)); }
.profile-title { position: absolute; z-index: 4; left: 14mm; top: 45mm; width: 92mm; color: white; }
.profile-title .name { color: var(--accent); }
.profile-title .signature { margin-top: 9mm; font: italic 14pt/1.2 Georgia, serif; color: #d8d1d4; }

.fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; margin: 6mm 0; }
.fact-card { border: .25mm solid rgba(100,90,96,.5); padding: 4mm; min-height: 33mm; }
.fact-card .big { color: var(--accent, var(--hot)); font: 400 24pt/1 Georgia, serif; }
.fact-card h3 { margin: 2mm 0 1.5mm; font: 800 7.5pt/1.15 Arial; text-transform: uppercase; letter-spacing: .05em; }
.fact-card p { margin: 0; font: 7pt/1.35 Georgia, serif; }
.dark .fact-card { border-color: rgba(255,255,255,.28); }

.quote { border-left: 1mm solid var(--accent, var(--pink)); padding-left: 5mm; margin: 7mm 0; font: 400 21pt/1.08 Georgia, serif; letter-spacing: -.025em; }
.quote cite { display:block; margin-top: 3mm; font: 700 6.5pt/1.35 Arial; letter-spacing: .08em; text-transform: uppercase; color: var(--accent, var(--hot)); font-style: normal; }

.timeline { position: relative; margin-top: 9mm; }
.timeline::before { content:""; position:absolute; left: 18mm; top: 0; bottom: 0; width: .35mm; background: currentColor; opacity: .35; }
.timeline-item { display: grid; grid-template-columns: 14mm 1fr; gap: 8mm; margin-bottom: 6mm; position: relative; }
.timeline-item .year { font: 700 8pt/1 Arial; color: var(--accent, var(--hot)); }
.timeline-item .year::after { content:""; position:absolute; left: 16.3mm; top: 1mm; width: 4mm; height: 4mm; border-radius:50%; background: var(--accent, var(--hot)); border: 1mm solid var(--paper); }
.dark .timeline-item .year::after { border-color: #0c0b0e; }
.timeline-item h3 { margin: 0 0 1mm; font: 800 9pt/1.15 Arial; text-transform: uppercase; }
.timeline-item p { margin: 0; font: 7.7pt/1.35 Georgia, serif; }

.era { background: #0a090c; color: white; }
.era .era-photo { position: absolute; inset: 0 0 42%; width: 100%; height: 58%; object-fit: cover; }
.era .era-gradient { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 28%,#0a090c 59%); }
.era-copy { position: absolute; z-index: 3; left: 13mm; right: 13mm; bottom: 16mm; }
.era-year { font: 400 70pt/.8 Georgia, serif; color: var(--pink); opacity: .9; letter-spacing: -.08em; }
.era-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 7mm; align-items: end; }
.tracklist { border-left: .4mm solid var(--pink); padding-left: 4mm; font: 700 7pt/1.7 Arial; text-transform: uppercase; letter-spacing: .06em; }
.blink-note { background: var(--pink); color: #181015; padding: 4mm; font: 7.3pt/1.4 Georgia, serif; }
.blink-note strong { font-family: Arial; text-transform: uppercase; letter-spacing: .08em; }

.image-grid { display: grid; gap: 3mm; height: 145mm; min-height: 0; overflow: hidden; }
.image-grid.two { grid-template-columns: 1.15fr .85fr; }
.image-grid.three { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.image-grid.three img:first-child { grid-row: 1 / 3; }
.image-grid.four { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.image-grid img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.contact-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2mm; background:#09080a; padding: 3mm; }
.contact-strip figure { margin: 0; }
.contact-strip img { width: 100%; height: 42mm; object-fit: cover; filter: contrast(1.05) saturate(.82); }
.contact-strip figcaption { color: var(--pink); font: 6pt/1 Arial; padding-top: 1.5mm; display:flex; justify-content:space-between; }

.map {
  position: relative;
  height: 118mm;
  margin-top: 7mm;
  border: .3mm solid rgba(255,255,255,.25);
  background: radial-gradient(circle at 20% 36%, rgba(240,44,131,.3) 0 1.2mm, transparent 1.5mm),
    radial-gradient(circle at 48% 28%, rgba(240,44,131,.3) 0 1.2mm, transparent 1.5mm),
    radial-gradient(circle at 77% 41%, rgba(240,44,131,.3) 0 1.2mm, transparent 1.5mm),
    radial-gradient(circle at 88% 72%, rgba(240,44,131,.3) 0 1.2mm, transparent 1.5mm),
    url('../images/blinkmap.png') center/cover no-repeat;
  filter: grayscale(.2);
}
.map::after { content:"SEOUL → LOS ANGELES → PARIS → LONDON → TOKYO"; position:absolute; left:5mm; right:5mm; bottom:4mm; padding:3mm; background:rgba(7,5,9,.82); color:var(--pink); font:700 7pt Arial; letter-spacing:.12em; text-align:center; }

.stat-wall { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; margin-top: 7mm; }
.stat { border-top: .5mm solid currentColor; padding-top: 3mm; min-height: 45mm; }
.stat .value { font: 400 35pt/.9 Georgia, serif; color: var(--accent, var(--hot)); letter-spacing: -.04em; }
.stat h3 { font: 800 8pt/1.2 Arial; text-transform: uppercase; margin: 2mm 0; }
.stat p { font: 7pt/1.4 Georgia, serif; margin: 0; }

.moments { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3mm 7mm; margin-top: 6mm; }
.moment { display: grid; grid-template-columns: 10mm 1fr; gap: 3mm; border-top: .25mm solid currentColor; padding-top: 2mm; }
.moment .n { font: 400 20pt/1 Georgia, serif; color: var(--hot); }
.moment h3 { margin:0 0 1mm; font:800 7.4pt/1.2 Arial; text-transform:uppercase; }
.moment p { margin:0; font:6.7pt/1.35 Georgia, serif; }

.playlist { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm 8mm; margin-top: 7mm; }
.playlist-card { border-top: .4mm solid var(--hot); padding-top: 2mm; }
.playlist-card h3 { margin:0 0 2mm; font:800 8pt Arial; text-transform:uppercase; }
.playlist-card p { margin:0 0 1.5mm; font:7pt/1.4 Georgia, serif; }
.song { display:grid; grid-template-columns:8mm 1fr; gap:2mm; margin-bottom:2mm; }
.song b { color:var(--hot); font:700 7pt Arial; }

.quiz { display:grid; grid-template-columns: 1fr 1fr; gap: 4mm; margin-top:6mm; }
.question { border: .3mm solid rgba(60,50,55,.45); padding:3mm; }
.question h3 { margin:0 0 2mm; font:800 8pt Arial; }
.question p { margin:0; font:7pt/1.55 Georgia, serif; }
.result-row { display:grid; grid-template-columns:repeat(4,1fr); gap:2mm; margin-top:5mm; }
.result { color:white; padding:4mm 2mm; min-height:33mm; background:#151118; text-align:center; }
.result:nth-child(2) { background:#7b263e; }
.result:nth-child(3) { background:#7a8f9a; }
.result:nth-child(4) { background:#a57925; }
.result b { display:block; font:800 7pt Arial; text-transform:uppercase; margin-bottom:1.5mm; }
.result span { font:6.4pt/1.3 Georgia,serif; }

.credits { font: 6.7pt/1.42 Arial, sans-serif; }
.credits h3 { margin: 4mm 0 1.5mm; font: 800 8pt Arial; text-transform:uppercase; color:var(--hot); }
.credits ol { margin:0; padding-left:5mm; }
.credits li { margin-bottom:1.8mm; }
.credits a { text-decoration: underline; text-decoration-color: var(--pink); }
.source-list { display:grid; grid-template-columns:1fr 1fr; gap:2mm 7mm; }
.source { border-top:.2mm solid rgba(100,90,96,.45); padding-top:1.5mm; break-inside:avoid; }

.footer-link { position:absolute; left:14mm; bottom:9mm; z-index:12; font:700 6pt Arial; letter-spacing:.08em; text-transform:uppercase; color:var(--hot); }
.footer-link::before { content:'↗ '; }

@media screen {
  body { display:flex; flex-direction:column; align-items:center; gap:10px; padding:10px 0; }
  .page { box-shadow: 0 3mm 12mm rgba(0,0,0,.38); }
}

@media print {
  body { background: white; }
  .page { box-shadow: none; }
  .grain::after { display: none; }
}