/* MERIDIAN — flip-book identity. Standalone artifact (not the portfolio site's
   design system). Cold graphite palette, champagne-gold accent, serif display,
   coordinate motif. Type scales with each page via container-query units. */

:root {
  --void: #08090b;
  --page: #0e1116;
  --mist: #cbd4de;
  --mist-dim: rgba(203, 212, 222, 0.6);
  --mist-faint: rgba(203, 212, 222, 0.34);
  --gold: #c8a96a;
  --line: rgba(203, 212, 222, 0.16);
  --serif: "Cormorant Garamond", "Songti SC", "STSong", "Noto Serif SC", serif;
  --sans: ui-sans-serif, system-ui, "PingFang SC", "Hiragino Sans GB",
    sans-serif;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--void);
  color: var(--mist);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Faint film grain over everything for depth. */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- chrome ---------- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
}
.mark {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.42em;
  font-size: 15px;
  color: var(--mist);
  padding-left: 0.42em;
}
.lang {
  background: none;
  border: 1px solid var(--line);
  color: var(--mist-dim);
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.16em;
  padding: 8px 12px;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.lang:hover {
  color: var(--mist);
  border-color: var(--mist-faint);
}

.stage {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 84px 24px 96px;
}
.book {
  width: min(94vw, 1180px);
  max-height: 82dvh;
}
/* StPageFlip sets pixel sizes on the wrapper; keep shadows visible. */
.book,
.stf__parent {
  margin: 0 auto;
}

/* Embedded in the case-page iframe: fit the viewport exactly, no scrollbar,
   tighter chrome. Standalone (not embedded) keeps the larger layout above. */
body.embedded {
  overflow: hidden;
}
body.embedded .stage {
  min-height: 0;
  height: 100dvh;
  overflow: hidden;
  padding: 54px 16px 74px;
}
body.embedded .book {
  width: min(96vw, 1120px);
  max-height: 72dvh;
}
body.embedded .topbar {
  padding: 14px 20px;
}
body.embedded .controls {
  padding: 14px;
}

/* ---------- page base ---------- */
.page {
  container-type: size;
  position: relative;
  overflow: hidden;
  background: var(--page);
  color: var(--mist);
}
.page__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page__bg--dim {
  opacity: 0.5;
}
.page__bg--faint {
  opacity: 0.28;
}
.scrim {
  position: absolute;
  inset: 0;
}
.scrim--full {
  background: radial-gradient(
      120% 90% at 50% 42%,
      rgba(8, 9, 11, 0.28),
      rgba(8, 9, 11, 0.82) 100%
    ),
    linear-gradient(to bottom, rgba(8, 9, 11, 0.2), rgba(8, 9, 11, 0.6));
}
.scrim--bottom {
  background: linear-gradient(
    to top,
    rgba(8, 9, 11, 0.9) 4%,
    rgba(8, 9, 11, 0.5) 34%,
    rgba(8, 9, 11, 0) 62%
  );
}
.page__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

/* coordinate motif — appears on every page */
.coord {
  position: absolute;
  top: 6.5cqh;
  left: 7cqw;
  z-index: 3;
  font: 500 1.9cqw/1 var(--sans);
  letter-spacing: 0.28em;
  color: var(--mist-faint);
  text-transform: uppercase;
}

/* ---------- cover ---------- */
.cover-content {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 3.2cqh;
}
.cover-mark {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.34em;
  font-size: 11cqw;
  line-height: 1;
  padding-left: 0.34em;
  color: #eef2f6;
}
.cover-meta {
  margin: 0;
  font: 500 2.1cqw/1.4 var(--sans);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--mist-dim);
}
.page--cover .coord {
  top: auto;
  bottom: 6.5cqh;
  left: 0;
  right: 0;
  text-align: center;
  letter-spacing: 0.34em;
}

/* ---------- statement ---------- */
.statement-content {
  align-items: flex-start;
  justify-content: center;
  padding: 0 11cqw;
  gap: 4cqh;
}
.statement-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 8.4cqw;
  line-height: 1.08;
  color: #eef2f6;
  text-wrap: balance;
}
.statement-body {
  margin: 0;
  max-width: 74%;
  font-family: var(--serif);
  font-style: italic;
  font-size: 3.4cqw;
  line-height: 1.5;
  color: var(--mist-dim);
}

/* ---------- image-caption (workhorse) ---------- */
.caption-content {
  justify-content: flex-end;
  padding: 0 8cqw 9cqh;
  gap: 2.4cqh;
}
.cap-title {
  margin: 0;
  max-width: 90%;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 6cqw;
  line-height: 1.12;
  color: #eef2f6;
  text-wrap: balance;
}
.cap-body {
  margin: 0;
  max-width: 72%;
  font: 400 2.7cqw/1.5 var(--sans);
  letter-spacing: 0.01em;
  color: var(--mist-dim);
}

/* ---------- plan ---------- */
.page--plan {
  background: radial-gradient(120% 100% at 50% 40%, #12161c, #0a0c10);
}
.plan-figure {
  position: absolute;
  inset: 12cqh 12cqw 26cqh;
  display: grid;
  place-items: center;
}
.plan-figure img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0.94;
}
.page--plan .caption-content {
  justify-content: flex-end;
  padding: 0 12cqw 9cqh;
}

/* ---------- closing ---------- */
.closing-content {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 3cqh;
  padding: 0 10cqw;
}
.closing-body {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 3.6cqw;
  line-height: 1.4;
  color: var(--mist);
}
.closing-meta {
  margin: 3cqh 0 0;
  font: 500 1.9cqw/1.5 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist-faint);
}
.page--closing .coord {
  top: auto;
  bottom: 6.5cqh;
  left: 0;
  right: 0;
  text-align: center;
}

/* thin gold hairline accent under cover mark & closing */
.cover-mark::after,
.page--closing .cover-mark::after {
  content: "";
  display: block;
  width: 2.4em;
  height: 1px;
  margin: 0.5em auto 0;
  background: var(--gold);
  opacity: 0.8;
}

/* ---------- controls ---------- */
.controls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 20px;
}
.ctrl {
  width: 42px;
  height: 42px;
  background: none;
  border: 1px solid var(--line);
  color: var(--mist);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}
.ctrl:hover {
  border-color: var(--mist-faint);
}
.pageno {
  min-width: 84px;
  text-align: center;
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.22em;
  color: var(--mist-dim);
}
.download {
  margin-left: 10px;
  color: var(--mist);
  text-decoration: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 18px;
  transition: background 0.3s, color 0.3s;
}
.download:hover {
  background: var(--gold);
  color: var(--void);
}

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .stage {
    padding: 76px 12px 92px;
  }
  .book {
    width: 96vw;
    max-height: 78dvh;
  }
  .mark {
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
  }
}