/* Page layouts shared by the flipbook and the print album. Sizes use cqw so a page scales as one unit. */
.page {
  --paper: #faf6ef; --ink: #2b241e; --muted: #8f8070; --gold: #b07d2a; --dark: #231c16;
  --pad: 4.9cqw; --gap: 1.3cqw;
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: var(--paper); color: var(--ink);
  container-type: size;
  font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.page .ph { position: relative; overflow: hidden; background: #e7ded1 50% 35% / cover no-repeat; min-width: 0; min-height: 0; }
.page .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; transition: opacity .35s; }
.page h1, .page h2 { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-weight: 600; margin: 0; }
.page .eyebrow { font-size: 1.45cqw; letter-spacing: .28em; text-transform: uppercase; }

/* Collage grid */
.page .in { position: absolute; top: var(--pad); left: var(--pad); right: var(--pad); bottom: 6.4cqw; display: grid; gap: var(--gap); }
.pg-trio .in { grid-template: 184fr 88fr / 1fr 1fr; }
.pg-trio .ph:first-child { grid-column: 1 / -1; }
.pg-four .in { grid-template: 184fr 88fr / 1fr 1fr 1fr; }
.pg-four .ph:first-child { grid-column: 1 / -1; }
.pg-six .in { grid-template: repeat(3, 1fr) / 1fr 1fr; }
.pg-strip .in { grid-template-rows: repeat(3, 1fr); }
.pg-quad .in { grid-template: 64fr 100fr 100fr / 1fr 1fr; }
.pg-quad .cap { grid-column: 1 / -1; align-self: end; padding-bottom: 1.2cqw; }
.pg-duo .in { grid-template: repeat(12, 1fr) / repeat(12, 1fr); gap: 0; }
.pg-duo .ph:nth-child(1) { grid-area: 1 / 1 / 8 / 10; }
.pg-duo .ph:nth-child(2) { grid-area: 6 / 4 / 13 / 13; z-index: 1; box-shadow: 0 0 0 1.1cqw var(--paper), 0 1.6cqw 3.4cqw rgba(40,25,10,.22); }
.pg-duo .cap { grid-area: 9 / 1 / 13 / 4; align-self: end; padding-right: 1.5cqw; font-size: 2.4cqw; }
.page .cap { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 3.4cqw; line-height: 1.2; color: var(--ink); }

/* Running footer */
.page .foot { position: absolute; left: var(--pad); right: var(--pad); bottom: 2.6cqw; display: flex; gap: 2cqw; align-items: baseline; font-size: 1.15cqw; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.page .foot.right { justify-content: flex-end; }
.page .foot.left { flex-direction: row-reverse; justify-content: flex-end; }
.page .foot .fnum { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.9cqw; letter-spacing: 0; color: var(--gold); }

/* Cover */
.pg-cover { background: var(--dark); color: #f4ead9; }
/* Photo bands are sized in cqw (3:2 at full width) so a taller phone page adds paper, not cropping */
.pg-cover .ph { position: absolute; left: 0; right: 0; bottom: 0; height: 66.7cqw; }
.pg-cover .ph::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--dark) 0%, rgba(35,28,22,0) 22%); }
.pg-cover .txt { position: absolute; left: 7cqw; right: 7cqw; top: 0; bottom: 66.7cqw; display: flex; flex-direction: column; justify-content: center; text-align: center; padding-bottom: 3cqw; }
.pg-cover .eyebrow { color: #d9b46e; }
.pg-cover h1 { font-size: 11cqw; line-height: 1; margin: 2.2cqw 0 1.6cqw; font-weight: 500; }
.pg-cover h1 em { color: #e3bd72; }
.pg-cover .sub { font-size: 1.7cqw; opacity: .8; letter-spacing: .05em; }

/* Intro + closing */
.pg-intro .txt, .pg-closing .txt { position: absolute; left: 9cqw; right: 9cqw; }
.pg-intro .txt { top: 9cqw; }
.pg-intro .eyebrow { color: var(--gold); }
.pg-intro h2 { font-size: 7cqw; line-height: 1.05; margin: 2cqw 0 2.6cqw; }
.pg-intro p, .pg-closing p { font-family: "Cormorant Garamond", Georgia, serif; font-size: 2.7cqw; line-height: 1.45; margin: 0; }
.pg-intro .dates, .pg-closing .dates { margin-top: 2.6cqw; font-size: 1.4cqw; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.pg-intro .ph { position: absolute; left: 9cqw; right: 9cqw; bottom: 9cqw; height: 40cqw; }
.pg-closing .ph { position: absolute; left: 0; right: 0; top: 0; height: 60cqw; }
.pg-closing .ph img { object-position: 50% 60%; }
.pg-closing .txt { top: 60cqw; bottom: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.pg-closing h2 { font-size: 6cqw; margin-bottom: 1.6cqw; }

/* Chapter opener */
.pg-hero .ph { position: absolute; left: 0; top: 0; width: 100%; height: 66.7cqw; }
.pg-hero .txt { position: absolute; left: 7cqw; right: 7cqw; top: 66.7cqw; bottom: 3cqw; display: flex; align-items: center; gap: 4cqw; }
.pg-hero .num { font-family: "Cormorant Garamond", Georgia, serif; font-size: 15cqw; line-height: .8; color: var(--gold); font-weight: 500; }
.pg-hero h2 { font-size: 6.4cqw; line-height: 1.02; }
.pg-hero .meta { margin-top: 1.6cqw; font-size: 1.45cqw; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }

/* Endpaper */
.pg-blank { display: flex; align-items: center; justify-content: center; }
.pg-blank .txt { text-align: center; }
.pg-blank .orn { color: var(--gold); font-size: 3cqw; margin-bottom: 2cqw; }
.pg-blank p { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 3.2cqw; color: var(--muted); }

/* Back cover */
.pg-back { background: var(--dark); color: #d9b46e; display: flex; align-items: center; justify-content: center; }
.pg-back .txt { text-align: center; }
.pg-back .mark { font-family: "Cormorant Garamond", Georgia, serif; font-size: 22cqw; line-height: 1; font-style: italic; color: #e3bd72; }
.pg-back .eyebrow { margin-top: 2cqw; color: #bfa77d; }

/* Video page (digital only) */
.pg-video { background: #2a231c; color: #efe4d2; }
.pg-video .in { grid-template-rows: auto 1fr; gap: 2.4cqw; }
.pg-video .vhead { display: flex; align-items: baseline; gap: 2cqw; }
.pg-video .vlabel { font-family: "Cormorant Garamond", Georgia, serif; font-size: 6cqw; font-style: italic; color: #e3bd72; }
.pg-video .vch { font-size: 1.45cqw; letter-spacing: .22em; text-transform: uppercase; opacity: .7; }
.pg-video .vids { display: grid; gap: 2cqw; min-height: 0; }
.pg-video .vids.n1 { grid-template: 1fr / 1fr; }
.pg-video .vids.n2 { grid-template: 1fr 1fr / 1fr; }
.pg-video .vids.n4 { grid-template: 1fr 1fr / 1fr 1fr; }
.pg-video .vc { margin: 0; display: grid; grid-template-rows: 1fr auto; gap: .9cqw; min-height: 0; }
.pg-video video { width: 100%; height: 100%; min-height: 0; background: #000; object-fit: contain; border-radius: .6cqw; }
.pg-video figcaption { display: flex; justify-content: space-between; gap: 1cqw; font-size: 1.5cqw; opacity: .85; }
.pg-video figcaption a { color: #e3bd72; text-decoration: none; }
.pg-video + .foot, .pg-video .foot { color: rgba(239,228,210,.55); }

/* Phone-sized pages: larger type so captions stay readable */
@container (max-width: 520px) {
  .page .eyebrow { font-size: 2.5cqw; }
  .page .in { bottom: 8.4cqw; }
  .page .foot { font-size: 2.1cqw; bottom: 2.6cqw; }
  .page .foot .fnum { font-size: 3.4cqw; }
  .page .cap { font-size: 4.6cqw; }
  .pg-duo .cap { font-size: 3.6cqw; }
  .pg-cover .sub { font-size: 3cqw; }
  .pg-intro p, .pg-closing p { font-size: 4.4cqw; }
  .pg-intro .dates, .pg-closing .dates { font-size: 2.5cqw; }
  .pg-intro h2 { font-size: 9cqw; }
  .pg-hero .txt { left: 6cqw; right: 6cqw; gap: 4cqw; }
  .pg-hero .num { font-size: 17cqw; }
  .pg-hero h2 { font-size: 8.6cqw; }
  .pg-hero .meta { font-size: 2.5cqw; }
  .pg-closing h2 { font-size: 8cqw; }
  .pg-blank p { font-size: 5cqw; }
}
/* Faces page: classmates cut out as circles */
.pg-faces .in { display: flex; flex-direction: column; gap: 4cqw; }
.pg-faces .fhead { text-align: center; padding-top: 2cqw; }
.pg-faces h2 { font-size: 6cqw; line-height: 1.1; }
.pg-faces .fsub { margin-top: 1cqw; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 2.8cqw; color: var(--muted); }
.pg-faces .fgrid { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 3.2cqw 3.6cqw; padding: 0 2cqw; }
.pg-faces .face-circle { width: 18cqw; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 .7cqw var(--paper), 0 0 0 1cqw var(--gold), 0 1.2cqw 2.4cqw rgba(40,25,10,.18); }
.pg-faces .face-circle img { object-position: 50% 45%; }
@container (max-width: 520px) {
  .pg-faces h2 { font-size: 8.6cqw; }
  .pg-faces .fsub { font-size: 4cqw; }
  .pg-faces .face-circle { width: 24cqw; }
  .pg-faces .fgrid { gap: 4.5cqw 5cqw; }
}
/* Faces page: scattered circles (positions set inline by scatter()) */
.pg-faces .fscatter { flex: 1; position: relative; min-height: 0; }
.pg-faces .fscatter .face-circle { position: absolute; aspect-ratio: 1; }.pg-faces .fscatter.tall { display: none; }
@container (aspect-ratio < 0.85) {
  .pg-faces .fscatter.sq { display: none; }
  .pg-faces .fscatter.tall { display: block; }
}
/* Cartoon classroom page */
.pg-classroom .in { display: flex; flex-direction: column; gap: 2cqw; }
.pg-classroom .scene { flex: 1; min-height: 0; border-radius: 1.2cqw; overflow: hidden; background: #f4ecdc; box-shadow: inset 0 0 0 1px rgba(120,90,50,.15); }
.pg-classroom .scene svg { display: block; width: 100%; height: 100%; }
.pg-classroom .cap { text-align: center; }
/* Classroom thought clouds: pop in and out, about four at a time */
.pg-classroom .thought { opacity: 0; transform-box: fill-box; transform-origin: 30% 100%; animation: think 16.8s ease-in-out infinite both; }
@keyframes think {
  0%   { opacity: 0; transform: translateY(12px) scale(.6); }
  3%   { opacity: 1; transform: translateY(0) scale(1.06); }
  5%   { transform: scale(1); }
  12%  { transform: translateY(-3px); }
  20%  { transform: translateY(0); }
  25%  { opacity: 1; }
  29%  { opacity: 0; transform: translateY(-10px) scale(.95); }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-classroom .thought { animation: none; }
  .pg-classroom .thought.still { opacity: 1; }
}
/* Then-and-now rows: one card per person, oval portraits, four ages left → right */
.pg-aging .in { display: flex; flex-direction: column; gap: 1.8cqw; }
.pg-aging .arow { flex: 0 0 calc((100% - 3.6cqw) / 3); min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: .6cqw;
  padding: 1.4cqw 2.2cqw 1.6cqw 3cqw; border-radius: 1.6cqw; position: relative;
  background: #f3eadb; box-shadow: inset 0 0 0 1px rgba(150,115,60,.14); }
.pg-aging .arow:nth-child(even) { background: #fbf7f0; }
.pg-aging .in.four { gap: 1.4cqw; }
.pg-aging .in.four .arow { flex-basis: calc((100% - 4.2cqw) / 4); padding-top: 1cqw; padding-bottom: 1.1cqw; }
.pg-aging .arow::before { content: ""; position: absolute; left: 0; top: 1.6cqw; bottom: 1.6cqw; width: .7cqw; border-radius: 0 .7cqw .7cqw 0; background: var(--gold); }
.pg-aging .ahead { display: flex; align-items: baseline; gap: 1.4cqw; }
.pg-aging .anum { font-family: "Cormorant Garamond", Georgia, serif; font-size: 2.6cqw; font-weight: 600; color: var(--gold); letter-spacing: .05em; }
.pg-aging .aname { font-family: "Cormorant Garamond", Georgia, serif; font-size: 3.5cqw; font-weight: 600; color: var(--ink); }
.pg-aging .aline { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: space-between; }
.pg-aging .acell { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6cqw; min-height: 0; }
.pg-aging .acirc { height: 18.5cqw; max-height: calc(100% - 3cqw); aspect-ratio: 4 / 5; width: auto; border-radius: 50%;
  border: .45cqw solid #fff; box-shadow: 0 0 0 .3cqw #d9c7a6, 0 .8cqw 1.8cqw rgba(60,40,15,.16); }
.pg-aging .acirc img { object-position: 50% 30%; }
.pg-aging .acirc.now { box-shadow: 0 0 0 .45cqw var(--gold), 0 .8cqw 1.8cqw rgba(60,40,15,.2); }
.pg-aging .acirc.empty { display: grid; place-items: center; background: rgba(255,255,255,.45); border: .35cqw dashed #cdb994; box-shadow: none;
  color: #c2ad86; font-family: "Cormorant Garamond", Georgia, serif; font-size: 5cqw; }
.pg-aging .ayear { font-size: 1.5cqw; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.pg-aging .acell:last-child .ayear { color: var(--gold); }
.pg-aging .aarrow { flex: 1; height: 1px; margin: 0 1.2cqw 2.4cqw; background: repeating-linear-gradient(90deg, #cdb994 0 .8cqw, transparent .8cqw 1.5cqw); color: transparent; font-size: 0; position: relative; }
.pg-aging .aarrow::after { content: ""; position: absolute; right: -.2cqw; top: -.6cqw; border: .6cqw solid transparent; border-left: .9cqw solid #cdb994; border-right: 0; }
@container (max-width: 520px) {
  .pg-aging .anum { font-size: 3.6cqw; }
  .pg-aging .aname { font-size: 5cqw; }
  .pg-aging .acirc { height: 22cqw; }
  .pg-aging .ayear { font-size: 2.5cqw; }
  .pg-aging .aarrow { margin: 0 .8cqw 3.4cqw; }
}

/* Page 23: 4:5 oval busts with a "last bell" bow-and-bells ornament under each frame */
.pg-faces .fscatter .fwrap { position: absolute; }
.pg-faces .fscatter .fwrap .face-circle { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 50%; }
.pg-faces .face-circle img { object-position: 50% 30%; }
.pg-faces .bells { position: absolute; z-index: 2; left: 50%; top: 100%; width: 58%; transform: translate(-50%, -38%); pointer-events: none;
  filter: drop-shadow(0 .3cqw .4cqw rgba(60,20,10,.3)); }
.pg-faces .bells svg { display: block; width: 100%; height: auto; }
/* Portrait-friendly collages for old photos */
.pg-tall4 .in { grid-template: 1fr 1fr / 1fr 1fr; }
.pg-tall3 .in { grid-template: 1fr 1fr / 1fr 1fr; }
.pg-tall3 .ph:first-child { grid-row: 1 / -1; }
.pg-tall4 .ph img, .pg-tall3 .ph img { object-position: 50% 30%; }
/* Year pages (Өнгөрсөн ба одоо): whole photo, never cropped */
.pg-year .in { display: flex; flex-direction: column; justify-content: center; gap: 3cqw; }
.pg-year .yframe { flex: 0 1 auto; max-height: 72%; background: #fff !important; padding: 1.6cqw; box-shadow: 0 1.2cqw 3cqw rgba(60,40,15,.18); }
.pg-year .yframe img { position: static; width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.pg-year .ylabel { display: flex; align-items: baseline; gap: 2.4cqw; padding: 0 1cqw; }
.pg-year .yyear { font-family: "Cormorant Garamond", Georgia, serif; font-size: 11cqw; line-height: .9; font-weight: 500; color: var(--gold); }
.pg-year .ycap { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 3.4cqw; color: var(--ink); }
@container (max-width: 520px) { .pg-year .yyear { font-size: 14cqw; } .pg-year .ycap { font-size: 4.6cqw; } }
.pg-year .yyear { white-space: nowrap; }

/* Two stacked whole photos on one page */
.pg-year2 .in { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2.2cqw; }
.pg-year2 .yframe { flex: 1 1 0; min-height: 0; background: #fff !important; padding: 1.2cqw; box-shadow: 0 1cqw 2.6cqw rgba(60,40,15,.18); display: flex; }
.pg-year2 .yframe img { position: static; width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.pg-year2 .ylabel { align-self: flex-start; padding: 0 1cqw; }
.pg-year2 .yyear { font-family: "Cormorant Garamond", Georgia, serif; font-size: 9cqw; line-height: .9; font-weight: 500; color: var(--gold); }
@container (max-width: 520px) { .pg-year2 .yyear { font-size: 12cqw; } }
/* Closing page: everyone, one photo each */
.pg-closing .mosaic { position: absolute; left: 0; right: 0; top: 0; height: 60cqw; padding: 3cqw 4cqw; background: #efe6d7;
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 1.1cqw; align-content: center; }
.pg-closing .mcell { aspect-ratio: 4 / 5; border-radius: 50%; border: .35cqw solid #fff; box-shadow: 0 .4cqw 1cqw rgba(60,40,15,.18); }
.pg-closing .mcell img { object-position: 50% 30%; }
@container (aspect-ratio < 0.85) { .pg-closing .mosaic { grid-template-columns: repeat(7, 1fr); height: auto; bottom: 34%; gap: 1.6cqw; } .pg-closing .txt { top: 66%; } }
.pg-closing .mosaic .mcell { position: relative; left: auto; right: auto; top: auto; height: auto; width: 100%; }

/* center the last, shorter row of the mosaic */
.pg-closing .mosaic { display: flex; flex-wrap: wrap; justify-content: center; }
.pg-closing .mosaic .mcell { width: calc((100% - 8 * 1.1cqw) / 9); }
@container (aspect-ratio < 0.85) { .pg-closing .mosaic .mcell { width: calc((100% - 6 * 1.6cqw) / 7); } }
/* Five photos: one wide on top, 2 x 2 below */
.pg-five .in { grid-template: 2fr 1fr 1fr / 1.6fr 1fr 1fr; }
.pg-five .ph:nth-child(1) { grid-column: 1 / -1; }
.pg-five .ph:nth-child(2) { grid-area: 2 / 1; }
.pg-five .ph:nth-child(3) { grid-area: 2 / 2 / 4 / 3; }
.pg-five .ph:nth-child(4) { grid-area: 2 / 3 / 4 / 4; }
.pg-five .ph:nth-child(5) { grid-area: 3 / 1; }

/* Corkboard chapter opener */
.pg-hero .board { position: absolute; left: 0; top: 0; width: 100%; height: 66.7cqw; overflow: hidden;
  background-color: #b98a57;
  background-image: radial-gradient(rgba(90,55,25,.35) 1px, transparent 1.4px), radial-gradient(rgba(255,235,200,.25) 1px, transparent 1.4px), linear-gradient(135deg, #c39463, #a8784a);
  background-size: 7px 7px, 11px 11px, 100% 100%; background-position: 0 0, 3px 5px, 0 0;
  box-shadow: inset 0 0 0 1.4cqw #6e4a2b, inset 0 0 0 1.7cqw #4f3420, inset 0 0 4cqw rgba(0,0,0,.35); }
.pg-hero .board .pinned { position: absolute; width: 29%; aspect-ratio: 4 / 3; background: #fff; padding: 1cqw 1cqw 2.4cqw; box-shadow: 0 .8cqw 1.6cqw rgba(30,15,5,.45); }
.pg-hero .board .pinned .ph { position: relative; width: 100%; height: 100%; }
.pg-hero .board .tack { position: absolute; left: 50%; top: -.9cqw; width: 2.4cqw; height: 2.4cqw; margin-left: -1.2cqw; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 35% 35%, #ff8a7a 0 18%, #d8322a 45%, #8f1712 100%); box-shadow: .3cqw .6cqw .6cqw rgba(0,0,0,.45); }
.pg-hero .board .pinned:nth-child(3n+2) .tack { background: radial-gradient(circle at 35% 35%, #fff2a8 0 18%, #e2b51f 45%, #8a6a07 100%); }
.pg-hero .board .pinned:nth-child(3n) .tack { background: radial-gradient(circle at 35% 35%, #a8d4ff 0 18%, #2f73c9 45%, #163d73 100%); }
.pg-five .ph img { object-position: 50% 60%; }

.pg-year .yyear.long { font-size: 7cqw; }
@container (max-width: 520px) { .pg-year .yyear.long { font-size: 9cqw; } }

/* Two landscapes on top, two portraits below */
.pg-lp4 .in { grid-template: 1fr 2.3fr / 1fr 1fr; }
.pg-lp4 .ph img { object-position: 50% 60%; }
/* Two photos stacked */
.pg-two .in { grid-template-rows: 1fr 1fr; }

/* Two whole photos side by side (no cropping) */
.pg-pair .in { grid-template: 1fr / 1fr 1fr; align-items: center; }
.pg-pair .ph { background: transparent !important; height: 100%; }
.pg-pair .ph img { object-fit: contain; }
/* pair: any number of whole photos side by side */
.pg-pair .in { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }

/* 2 x 2 whole photos */
.pg-grid4 .in { grid-template: 1fr 1fr / 1fr 1fr; align-items: center; }
.pg-grid4 .ph { background: transparent !important; height: 100%; }
.pg-grid4 .ph img { object-fit: contain; }

/* two landscapes stacked left, one portrait right, all whole */
.pg-l2p1 .in { grid-template: 1fr 1fr / 1.35fr 1fr; align-items: center; }
.pg-l2p1 .ph:nth-child(3) { grid-area: 1 / 2 / 3 / 3; }
.pg-l2p1 .ph { background: transparent !important; height: 100%; }
.pg-l2p1 .ph img { object-fit: contain; }

/* two portraits on top, one landscape below, all whole */
.pg-p2l1 .in { grid-template: 1.15fr 1fr / 1fr 1fr; align-items: center; }
.pg-p2l1 .ph:nth-child(3) { grid-column: 1 / -1; }
.pg-p2l1 .ph { background: transparent !important; height: 100%; }
.pg-p2l1 .ph img { object-fit: contain; }

/* single photo: the white mat hugs the photo, also for portrait shots */
.pg-year .yframe { align-self: center; max-width: 100%; }
.pg-year .yframe img { width: auto; max-width: 100%; max-height: 64cqw; margin: 0 auto; }

/* fit: justified rows of whole photos on white mats */
.pg-fit .in { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2cqw; }
.pg-fit .frow { display: flex; gap: 2.2cqw; justify-content: center; }
.pg-fit .fmat { flex: none; box-sizing: content-box; padding: 1.1cqw; background: #fff !important; box-shadow: 0 .8cqw 2cqw rgba(60,40,15,.16); }
.pg-fit .fmat img { position: static; width: 100%; height: 100%; object-fit: cover; }
/* diag: two staggered photos */
.pg-diag .in { display: block; }
.pg-diag .dmat { position: absolute; }
.pg-diag .dmat:nth-child(2) { z-index: 1; }

.pg-diag .dmat { box-sizing: content-box; padding: 1.1cqw; background: #fff !important; box-shadow: 0 1cqw 2.6cqw rgba(60,40,15,.22); }
.pg-diag .dmat img { position: static; width: 100%; height: 100%; object-fit: cover; }
.pg-diag .dmat:first-child { left: 4cqw !important; top: 2cqw !important; }
.pg-diag .dmat:nth-child(2) { right: 4cqw !important; bottom: 2cqw !important; }

/* year label in the empty bottom-left corner of a diag page, same style as year pages */
.pg-diag .dyear { position: absolute; left: 1cqw; bottom: 0; }
.pg-diag .yyear { font-family: "Cormorant Garamond", Georgia, serif; font-size: 11cqw; line-height: .9; font-weight: 500; color: var(--gold); white-space: nowrap; }
@container (max-width: 520px) { .pg-diag .yyear { font-size: 14cqw; } }
.pg-diag .dyear.vert { left: auto !important; bottom: auto !important; top: 2cqw !important; right: -1cqw !important; writing-mode: vertical-rl; }
.pg-diag .dyear.vert .yyear { font-size: 10.5cqw; line-height: 1; }

/* year label goes to the empty top-right corner of a diag page */
.pg-diag .dyear { left: auto; bottom: auto; right: 1cqw; top: 2cqw; }

/* year pages: larger photo, still whole */
.pg-year .in { gap: 2cqw; }
.pg-year .yframe { max-height: none; }
.pg-year .yframe img { max-height: 71cqw; }

/* opener with two photos side by side */
.pg-hero .ph.half { width: 49.6%; }
.pg-hero .ph.half.r { left: auto; right: 0; }

/* opener with two photos stacked */
.pg-hero .ph.stackh { height: 33.1cqw; }
.pg-hero .ph.stackh.r { top: 33.6cqw; }

/* ---------- Photo decoration styles (opt-in: add deco-corners | deco-polaroid | deco-tape to <body>) ---------- */
/* shared: photos inside page layouts (not chapter-opener bands, cover, ovals) */
.deco-corners .page .in .ph:not(.face-circle):not(.acirc),
.deco-polaroid .page .in .ph:not(.face-circle):not(.acirc),
.deco-tape .page .in .ph:not(.face-circle):not(.acirc) { overflow: visible; }

/* 1. Photo corners: paper pockets holding each print */
.deco-corners .page .in .ph:not(.face-circle):not(.acirc)::after {
  content: ""; position: absolute; inset: -.35cqw; z-index: 4; pointer-events: none;
  --c: #2b2420; --s: 2.6cqw;
  background:
    linear-gradient(135deg, var(--c) 50%, transparent 50.5%) top left / var(--s) var(--s) no-repeat,
    linear-gradient(225deg, var(--c) 50%, transparent 50.5%) top right / var(--s) var(--s) no-repeat,
    linear-gradient(45deg, var(--c) 50%, transparent 50.5%) bottom left / var(--s) var(--s) no-repeat,
    linear-gradient(315deg, var(--c) 50%, transparent 50.5%) bottom right / var(--s) var(--s) no-repeat;
  filter: drop-shadow(0 .15cqw .25cqw rgba(0,0,0,.3));
}
.deco-corners .page .in .ph:not(.face-circle):not(.acirc):not(.fmat):not(.yframe):not(.dmat) { box-shadow: 0 .5cqw 1.2cqw rgba(60,40,15,.15); }

/* 2. Polaroid prints: deep bottom border, slight hand-placed tilt, soft shadow */
.deco-polaroid .page .in .ph:not(.face-circle):not(.acirc) {
  background: #fff !important; padding: 1.1cqw 1.1cqw 3.6cqw !important; box-sizing: content-box;
  box-shadow: 0 .8cqw 1.8cqw rgba(40,25,10,.25), 0 .1cqw .2cqw rgba(0,0,0,.1);
  transform: rotate(-1.6deg);
}
.deco-polaroid .page .in .ph:not(.face-circle):not(.acirc) img { position: static; width: 100%; height: 100%; }
.deco-polaroid .page .in .frow:nth-child(odd) .ph:nth-child(even),
.deco-polaroid .page .in .frow:nth-child(even) .ph:nth-child(odd) { transform: rotate(1.8deg); }
.deco-polaroid .page .in .frow:nth-child(even) .ph:nth-child(even) { transform: rotate(-.8deg); }
.deco-polaroid .page .in .frow { gap: 3.4cqw; }
.deco-polaroid .page .in { gap: 3.4cqw; }

/* 3. Less but better tape: one or two translucent strips per page, varied */
.deco-tape .page .in .frow:first-child .ph:first-child::before,
.deco-tape .page .in .frow:last-child .ph:last-child::after,
.deco-tape .pg-year .yframe::before,
.deco-tape .pg-diag .dmat:first-child::before {
  content: ""; position: absolute; z-index: 4; pointer-events: none;
  width: 11cqw; height: 3cqw; mix-blend-mode: multiply; opacity: .75;
  background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0) 40%), var(--tc, #f6b8c8);
  clip-path: polygon(2% 10%, 6% 0, 11% 8%, 17% 1%, 24% 7%, 31% 0, 39% 8%, 47% 2%, 55% 9%, 63% 1%, 71% 8%, 79% 0, 87% 7%, 94% 1%, 99% 9%, 100% 92%, 95% 100%, 88% 93%, 80% 100%, 72% 92%, 64% 99%, 56% 91%, 48% 100%, 40% 93%, 32% 100%, 24% 92%, 16% 99%, 8% 92%, 0 98%);
}
.deco-tape .page .in .frow:first-child .ph:first-child::before { top: -1.6cqw; left: -2.4cqw; transform: rotate(-24deg); --tc: #f6b8c8; }
.deco-tape .page .in .frow:last-child .ph:last-child::after { bottom: -1.4cqw; right: -2.2cqw; transform: rotate(-20deg); --tc: #a8e0cf; width: 9cqw; }
.deco-tape .pg-year .yframe::before { top: -1.6cqw; left: 50%; transform: translateX(-50%) rotate(3deg); --tc: #ffe08a; width: 14cqw; }
.deco-tape .pg-diag .dmat:first-child::before { top: -1.5cqw; left: 40%; transform: rotate(-4deg); --tc: #b9d3ff; }
/* ---------- Push pins (opt-in: deco-pins | deco-pins-tilt on <body>) ---------- */
.deco-pins .page .in .ph:not(.face-circle):not(.acirc),
.deco-pins-tilt .page .in .ph:not(.face-circle):not(.acirc) { overflow: visible; }
.deco-pins .page .in .ph:not(.face-circle):not(.acirc)::before,
.deco-pins-tilt .page .in .ph:not(.face-circle):not(.acirc)::before {
  content: ""; position: absolute; z-index: 5; pointer-events: none;
  top: -.9cqw; left: 50%; width: 2.4cqw; height: 2.4cqw; margin-left: -1.2cqw; border-radius: 50%;
  --p: #e0352b; --pd: #8f160f; --ph: #ff9a8a;
  background: radial-gradient(circle at 34% 30%, #fff 0 9%, var(--ph) 16%, var(--p) 46%, var(--pd) 100%);
  box-shadow: .35cqw .55cqw .5cqw rgba(0,0,0,.38), inset -.15cqw -.2cqw .3cqw rgba(0,0,0,.25);
}
/* the pin's shadow on the print, slightly down-right, makes it look stuck in */
.deco-pins .page .in .ph:not(.face-circle):not(.acirc)::after,
.deco-pins-tilt .page .in .ph:not(.face-circle):not(.acirc)::after {
  content: ""; position: absolute; z-index: 4; pointer-events: none;
  top: .6cqw; left: 50%; width: 1.4cqw; height: .5cqw; margin-left: .2cqw; border-radius: 50%;
  background: rgba(0,0,0,.28); filter: blur(.25cqw);
}
/* colours vary from photo to photo */
:is(.deco-pins, .deco-pins-tilt) .page .in .frow:nth-child(odd) .ph:nth-child(2)::before,
:is(.deco-pins, .deco-pins-tilt) .page .in > .ph:nth-child(2)::before { --p: #f2b705; --pd: #8a6200; --ph: #fff1a8; }
:is(.deco-pins, .deco-pins-tilt) .page .in .frow:nth-child(odd) .ph:nth-child(3)::before,
:is(.deco-pins, .deco-pins-tilt) .page .in > .ph:nth-child(3)::before { --p: #2f7fd6; --pd: #123c73; --ph: #a9d1ff; }
:is(.deco-pins, .deco-pins-tilt) .page .in .frow:nth-child(even) .ph:nth-child(1)::before,
:is(.deco-pins, .deco-pins-tilt) .page .in > .ph:nth-child(4)::before { --p: #2fae66; --pd: #10552f; --ph: #a6f0c6; }
:is(.deco-pins, .deco-pins-tilt) .page .in .frow:nth-child(even) .ph:nth-child(2)::before { --p: #e0352b; --pd: #8f160f; --ph: #ff9a8a; }
:is(.deco-pins, .deco-pins-tilt) .page .in .frow:nth-child(even) .ph:nth-child(3)::before { --p: #f2b705; --pd: #8a6200; --ph: #fff1a8; }
:is(.deco-pins, .deco-pins-tilt) .page .in .ph:not(.fmat):not(.yframe):not(.dmat):not(.face-circle):not(.acirc) { box-shadow: 0 .6cqw 1.4cqw rgba(60,40,15,.18); }
/* hanging variant: each print turns a little around its pin */
.deco-pins-tilt .page .in .ph:not(.face-circle):not(.acirc) { transform-origin: 50% 0; transform: rotate(-1.4deg); }
.deco-pins-tilt .page .in .frow:nth-child(odd) .ph:nth-child(even),
.deco-pins-tilt .page .in .frow:nth-child(even) .ph:nth-child(odd) { transform: rotate(1.6deg); }
.deco-pins-tilt .page .in .frow:nth-child(even) .ph:nth-child(even) { transform: rotate(-.7deg); }

/* ---------- Dark themes (opt-in on <body>): dark-album | dark-gallery | dark-navy ---------- */
:is(.dark-album, .dark-gallery, .dark-navy) .page { --ink: #efe9df; --muted: #9a9284; color: var(--ink); }
:is(.dark-album, .dark-gallery, .dark-navy) .page:not(.pg-cover):not(.pg-back) { background: var(--bg); }
:is(.dark-album, .dark-gallery, .dark-navy) .page h1,
:is(.dark-album, .dark-gallery, .dark-navy) .page h2 { color: #f6f1e7; }
:is(.dark-album, .dark-gallery, .dark-navy) .page .foot { color: #7d766b; }
:is(.dark-album, .dark-gallery, .dark-navy) .pg-hero .num,
:is(.dark-album, .dark-gallery, .dark-navy) .page .foot .fnum,
:is(.dark-album, .dark-gallery, .dark-navy) .pg-year .yyear,
:is(.dark-album, .dark-gallery, .dark-navy) .pg-diag .yyear { color: #d8b36a; }
:is(.dark-album, .dark-gallery, .dark-navy) .pg-hero .meta { color: #a59c8c; }

/* 1. Vintage black photo album: black paper, cream mats, soft shadow */
.dark-album .page { --paper: #191715; --bg:
  radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.035), transparent 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"),
  #191715; }
.dark-album .page .fmat, .dark-album .page .yframe, .dark-album .page .dmat,
.dark-album .page .in .ph:not(.face-circle):not(.acirc) { background: #f1e9d8 !important; box-shadow: 0 1cqw 2.4cqw rgba(0,0,0,.55) !important; }

/* 2. Charcoal gallery: no frames, slightly rounded photos floating with deep shadow */
.dark-gallery .page { --paper: #1c1d20; --bg: radial-gradient(ellipse at 50% 0%, #26282c, #1a1b1e 70%); }
.dark-gallery .page .fmat, .dark-gallery .page .yframe, .dark-gallery .page .dmat { padding: 0 !important; background: transparent !important; }
.dark-gallery .page .in .ph:not(.face-circle):not(.acirc),
.dark-gallery .page .fmat, .dark-gallery .page .yframe, .dark-gallery .page .dmat { border-radius: .6cqw; overflow: hidden; box-shadow: 0 1.2cqw 3cqw rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) !important; }
.dark-gallery .page .fmat img, .dark-gallery .page .yframe img, .dark-gallery .page .dmat img { border-radius: .6cqw; }

/* 3. Midnight navy: deep blue paper, thin white print borders, gold accents */
.dark-navy .page { --paper: #121a2b; --bg: radial-gradient(ellipse at 30% 0%, #1b2742, #111827 65%); }
.dark-navy .page .fmat, .dark-navy .page .yframe, .dark-navy .page .dmat { padding: .5cqw !important; }
.dark-navy .page .fmat, .dark-navy .page .yframe, .dark-navy .page .dmat,
.dark-navy .page .in .ph:not(.face-circle):not(.acirc) { background: #fbfaf6 !important; box-shadow: 0 .9cqw 2.2cqw rgba(0,0,0,.5) !important; }
/* 4. Night-to-yellow gradient (dusk): navy sky fading into a warm golden glow, thin white frames */
:is(.dark-dusk, .dark-dusk2) .page { --ink: #f3eee4; --muted: #c9bfa8; color: var(--ink); }
:is(.dark-dusk, .dark-dusk2) .page h1, :is(.dark-dusk, .dark-dusk2) .page h2 { color: #fbf6ea; }
:is(.dark-dusk, .dark-dusk2) .pg-hero .num, :is(.dark-dusk, .dark-dusk2) .page .foot .fnum,
:is(.dark-dusk, .dark-dusk2) .pg-year .yyear, :is(.dark-dusk, .dark-dusk2) .pg-diag .yyear { color: #ffd36a; }
:is(.dark-dusk, .dark-dusk2) .pg-hero .meta, :is(.dark-dusk, .dark-dusk2) .page .foot { color: #e4cf9e; }
.dark-dusk .page { --paper: #172040; }
.dark-dusk .page:not(.pg-cover):not(.pg-back) { background: linear-gradient(180deg, #0f1730 0%, #1d2a52 45%, #5a4a5e 78%, #c88a3e 100%); }
.dark-dusk2 .page { --paper: #172040; }
.dark-dusk2 .page:not(.pg-cover):not(.pg-back) { background: radial-gradient(ellipse at 85% 110%, #f2b545 0%, #b8743a 18%, #4a3a5c 42%, rgba(23,32,64,0) 70%), linear-gradient(160deg, #0d1430, #1a2550 60%, #2a2a52); }
:is(.dark-dusk, .dark-dusk2) .page .fmat, :is(.dark-dusk, .dark-dusk2) .page .yframe, :is(.dark-dusk, .dark-dusk2) .page .dmat { padding: .5cqw !important; }
:is(.dark-dusk, .dark-dusk2) .page .fmat, :is(.dark-dusk, .dark-dusk2) .page .yframe, :is(.dark-dusk, .dark-dusk2) .page .dmat,
:is(.dark-dusk, .dark-dusk2) .page .in .ph:not(.face-circle):not(.acirc) { background: #fffaf0 !important; box-shadow: 0 1cqw 2.4cqw rgba(5,8,25,.5) !important; }
/* 5. Night sky: deep indigo gradient, soft milky-way glow and scattered stars, thin white frames */
.dark-sky .page { --paper: #0f1633; --ink: #eef0fb; --muted: #aab0d0; color: var(--ink); }
.dark-sky .page:not(.pg-cover):not(.pg-back) {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='23' cy='41' r='.9' opacity='.9'/%3E%3Ccircle cx='88' cy='12' r='.6' opacity='.6'/%3E%3Ccircle cx='140' cy='77' r='1.2' opacity='.85'/%3E%3Ccircle cx='201' cy='30' r='.5' opacity='.5'/%3E%3Ccircle cx='260' cy='95' r='.8' opacity='.7'/%3E%3Ccircle cx='331' cy='22' r='1' opacity='.8'/%3E%3Ccircle cx='377' cy='140' r='.6' opacity='.5'/%3E%3Ccircle cx='52' cy='160' r='.7' opacity='.6'/%3E%3Ccircle cx='118' cy='212' r='.5' opacity='.45'/%3E%3Ccircle cx='190' cy='175' r='1.1' opacity='.75'/%3E%3Ccircle cx='245' cy='240' r='.6' opacity='.5'/%3E%3Ccircle cx='305' cy='190' r='.8' opacity='.65'/%3E%3Ccircle cx='360' cy='280' r='1.2' opacity='.85'/%3E%3Ccircle cx='30' cy='300' r='.6' opacity='.55'/%3E%3Ccircle cx='96' cy='340' r='1' opacity='.7'/%3E%3Ccircle cx='170' cy='300' r='.5' opacity='.45'/%3E%3Ccircle cx='222' cy='365' r='.8' opacity='.6'/%3E%3Ccircle cx='290' cy='330' r='.5' opacity='.5'/%3E%3Ccircle cx='345' cy='385' r='.7' opacity='.6'/%3E%3Ccircle cx='70' cy='255' r='.4' opacity='.4'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 260px 260px,
    radial-gradient(ellipse 70% 30% at 70% 30%, rgba(160,170,255,.14), transparent 70%),
    radial-gradient(ellipse at 15% 100%, rgba(90,60,160,.35), transparent 55%),
    linear-gradient(180deg, #060a1c 0%, #0e1838 45%, #1b2556 80%, #2b2a63 100%);
}
.dark-sky .page h1, .dark-sky .page h2 { color: #f7f8ff; }
.dark-sky .pg-hero .num, .dark-sky .page .foot .fnum, .dark-sky .pg-year .yyear, .dark-sky .pg-diag .yyear { color: #ffe08a; text-shadow: 0 0 1.2cqw rgba(255,224,138,.35); }
.dark-sky .pg-hero .meta, .dark-sky .page .foot { color: #9aa3cc; }
.dark-sky .page .fmat, .dark-sky .page .yframe, .dark-sky .page .dmat { padding: .5cqw !important; }
.dark-sky .page .fmat, .dark-sky .page .yframe, .dark-sky .page .dmat,
.dark-sky .page .in .ph:not(.face-circle):not(.acirc) { background: #fbfcff !important; box-shadow: 0 1cqw 2.6cqw rgba(0,0,10,.6) !important; }
/* 6. More night-gold variants (share colours/frames with dark-dusk) */
:is(.gold-mirror, .gold-horizon, .gold-stars, .gold-sunrise, .gold-amber) .page { --paper: #172040; --ink: #f3eee4; --muted: #c9bfa8; color: var(--ink); }
:is(.gold-mirror, .gold-horizon, .gold-stars, .gold-sunrise, .gold-amber) .page h1,
:is(.gold-mirror, .gold-horizon, .gold-stars, .gold-sunrise, .gold-amber) .page h2 { color: #fbf6ea; }
:is(.gold-mirror, .gold-horizon, .gold-stars, .gold-sunrise, .gold-amber) :is(.pg-hero .num, .page .foot .fnum, .pg-year .yyear, .pg-diag .yyear) { color: #ffd36a; }
:is(.gold-mirror, .gold-horizon, .gold-stars, .gold-sunrise, .gold-amber) :is(.pg-hero .meta, .page .foot) { color: #e4cf9e; }
:is(.gold-mirror, .gold-horizon, .gold-stars, .gold-sunrise, .gold-amber) .page :is(.fmat, .yframe, .dmat) { padding: .5cqw !important; }
:is(.gold-mirror, .gold-horizon, .gold-stars, .gold-sunrise, .gold-amber) .page :is(.fmat, .yframe, .dmat, .in .ph:not(.face-circle):not(.acirc)) { background: #fffaf0 !important; box-shadow: 0 1cqw 2.4cqw rgba(5,8,25,.5) !important; }

/* a. mirrored corner glow: the two facing pages glow toward the spine, so the spread reads as one warm light */
.gold-mirror .page:not(.pg-cover):not(.pg-back) { background: radial-gradient(ellipse at 100% 110%, #f2b545 0%, #b8743a 18%, #4a3a5c 42%, rgba(23,32,64,0) 70%), linear-gradient(200deg, #0d1430, #1a2550 60%, #2a2a52); }
.gold-mirror :is(.face.back, .lp) .page:not(.pg-cover):not(.pg-back) { background: radial-gradient(ellipse at 0% 110%, #f2b545 0%, #b8743a 18%, #4a3a5c 42%, rgba(23,32,64,0) 70%), linear-gradient(160deg, #0d1430, #1a2550 60%, #2a2a52); }
/* b. golden horizon band low on the page, night above and below */
.gold-horizon .page:not(.pg-cover):not(.pg-back) { background: linear-gradient(180deg, #0c1330 0%, #18234d 50%, #6b4a52 74%, #e0a24a 84%, #6b4a52 92%, #1a2148 100%); }
/* c. night-gold with a sprinkle of stars in the dark part */
.gold-stars .page:not(.pg-cover):not(.pg-back) {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='20' cy='30' r='.8' opacity='.8'/%3E%3Ccircle cx='90' cy='15' r='.5' opacity='.6'/%3E%3Ccircle cx='150' cy='60' r='1' opacity='.8'/%3E%3Ccircle cx='230' cy='25' r='.6' opacity='.6'/%3E%3Ccircle cx='280' cy='90' r='.8' opacity='.7'/%3E%3Ccircle cx='60' cy='120' r='.6' opacity='.5'/%3E%3Ccircle cx='200' cy='140' r='.9' opacity='.6'/%3E%3Ccircle cx='120' cy='190' r='.5' opacity='.4'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 220px 220px,
    radial-gradient(ellipse at 85% 110%, #f2b545 0%, #b8743a 18%, #4a3a5c 42%, rgba(23,32,64,0) 70%),
    linear-gradient(160deg, #0b1230, #1a2550 60%, #2a2a52);
}
/* d. sunrise: the gold light comes from the top */
.gold-sunrise .page:not(.pg-cover):not(.pg-back) { background: radial-gradient(ellipse 120% 60% at 50% -10%, #f6c25a 0%, #c27d3e 22%, #4e3b5d 48%, rgba(20,28,60,0) 75%), linear-gradient(180deg, #2a2a52, #141c3c 60%, #0b1129); }
/* e. warmer, deeper amber glow (bigger, richer), mostly bottom-right */
.gold-amber .page:not(.pg-cover):not(.pg-back) { background: radial-gradient(ellipse 110% 80% at 90% 110%, #ffb23e 0%, #e0782c 16%, #7a3f4a 38%, rgba(20,24,56,0) 68%), linear-gradient(160deg, #0a0f28, #171f46 55%, #2a2350); }
/* amber theme for the whole album: sun position comes from each page (--sx/--sy, set in book.js) */
.gold-amber .page:not(.pg-cover):not(.pg-back) {
  background: radial-gradient(ellipse 110% 80% at var(--sx, 90%) var(--sy, 110%), #ffb23e 0%, #e0782c 16%, #7a3f4a 38%, rgba(20,24,56,0) 68%), linear-gradient(160deg, #0a0f28, #171f46 55%, #2a2350);
}
/* special pages on the dark theme */
.gold-amber .pg-aging .arow { background: rgba(10,14,36,.55); box-shadow: inset 0 0 0 1px rgba(255,210,140,.14); }
.gold-amber .pg-aging .arow:nth-child(even) { background: rgba(10,14,36,.38); }
.gold-amber .pg-aging .acirc { border-color: #fffaf0; box-shadow: 0 0 0 .3cqw rgba(255,210,140,.5), 0 .8cqw 1.8cqw rgba(0,0,0,.45); }
.gold-amber .pg-aging .acirc.now { box-shadow: 0 0 0 .45cqw #ffd36a, 0 .8cqw 1.8cqw rgba(0,0,0,.45); }
.gold-amber .pg-aging .acirc.empty { background: rgba(255,255,255,.06); border-color: rgba(255,210,140,.45); color: rgba(255,210,140,.6); }
.gold-amber .pg-aging .aarrow { background: repeating-linear-gradient(90deg, rgba(255,210,140,.5) 0 .8cqw, transparent .8cqw 1.5cqw); }
.gold-amber .pg-aging .aarrow::after { border-left-color: rgba(255,210,140,.5); }
.gold-amber .pg-aging .ayear { color: #c9bfa8; }
.gold-amber .pg-faces .face-circle { box-shadow: 0 0 0 .7cqw #1a2148, 0 0 0 1cqw #ffd36a, 0 1.2cqw 2.4cqw rgba(0,0,0,.4); }
.gold-amber .pg-faces .fsub { color: #e4cf9e; }
.gold-amber .pg-classroom .scene { box-shadow: 0 1cqw 2.6cqw rgba(0,0,0,.5); }
.gold-amber .pg-closing .mosaic { background: rgba(10,14,36,.5); }
.gold-amber .pg-closing .dates { color: #e4cf9e; }
.gold-amber .pg-blank .orn { color: #ffd36a; }
/* ---------- Bell theme (opt-in: bell-theme on <body>): white pages, drawn last-bell ornaments with ribbons ---------- */
.bell-theme .page:not(.pg-cover):not(.pg-back) { background: #fffdf8; }
.bell-theme .page .in { z-index: 2; }
.bell-theme .page.has-orn::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: var(--bx); top: var(--by); width: 15cqw; height: 17.25cqw;
  transform: translate(-50%, -50%) scaleX(var(--bf, 1)) rotate(-6deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 230'%3E%3Cdefs%3E%3ClinearGradient id='rb' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e8413a'/%3E%3Cstop offset='1' stop-color='%23b21f22'/%3E%3C/linearGradient%3E%3ClinearGradient id='rd' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a51b1f'/%3E%3Cstop offset='1' stop-color='%237c1216'/%3E%3C/linearGradient%3E%3CradialGradient id='gb' cx='.35' cy='.3' r='.85'%3E%3Cstop offset='0' stop-color='%23fff4c2'/%3E%3Cstop offset='.35' stop-color='%23f5c842'/%3E%3Cstop offset='.8' stop-color='%23c98f17'/%3E%3Cstop offset='1' stop-color='%238f6208'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M96 46 C80 80 58 92 62 120 C66 146 50 160 54 178' fill='none' stroke='url(%23rb)' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M104 46 C124 74 146 84 140 108 C134 128 150 140 146 156' fill='none' stroke='url(%23rb)' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M100 42 C82 18 48 16 46 34 C44 52 76 54 100 44Z' fill='url(%23rb)' stroke='%238f1418' stroke-width='1.5'/%3E%3Cpath d='M100 42 C118 18 152 16 154 34 C156 52 124 54 100 44Z' fill='url(%23rb)' stroke='%238f1418' stroke-width='1.5'/%3E%3Cpath d='M60 30 C70 30 84 36 96 42' fill='none' stroke='%237c1216' stroke-width='2' opacity='.6'/%3E%3Cpath d='M140 30 C130 30 116 36 104 42' fill='none' stroke='%237c1216' stroke-width='2' opacity='.6'/%3E%3Cpath d='M98 46 L84 70 L92 68 L96 78 L102 50Z' fill='url(%23rd)'/%3E%3Cpath d='M102 46 L118 66 L110 66 L108 76 L98 50Z' fill='url(%23rd)'/%3E%3Crect x='91' y='35' width='18' height='16' rx='5' fill='%23c8262a' stroke='%238f1418' stroke-width='1.5'/%3E%3Cg transform='translate(54 176) rotate(-8)'%3E%3Ccircle cy='-4' r='5' fill='none' stroke='%239a6a0c' stroke-width='3'/%3E%3Cpath d='M0 0 C-17 0 -22 16 -22 30 L-28 42 L28 42 L22 30 C22 16 17 0 0 0Z' fill='url(%23gb)' stroke='%23a9770f' stroke-width='1.5'/%3E%3Cpath d='M-12 12 C-10 6 -6 3 -1 2' fill='none' stroke='%23fff7d6' stroke-width='3' stroke-linecap='round' opacity='.9'/%3E%3Cpath d='M-28 42 Q0 48 28 42' fill='none' stroke='%238f6208' stroke-width='2'/%3E%3Ccircle cy='48' r='5.5' fill='%23b88412'/%3E%3C/g%3E%3Cg transform='translate(146 154) rotate(10) scale(.85)'%3E%3Ccircle cy='-4' r='5' fill='none' stroke='%239a6a0c' stroke-width='3'/%3E%3Cpath d='M0 0 C-17 0 -22 16 -22 30 L-28 42 L28 42 L22 30 C22 16 17 0 0 0Z' fill='url(%23gb)' stroke='%23a9770f' stroke-width='1.5'/%3E%3Cpath d='M-12 12 C-10 6 -6 3 -1 2' fill='none' stroke='%23fff7d6' stroke-width='3' stroke-linecap='round' opacity='.9'/%3E%3Cpath d='M-28 42 Q0 48 28 42' fill='none' stroke='%238f6208' stroke-width='2'/%3E%3Ccircle cy='48' r='5.5' fill='%23b88412'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 .5cqw .6cqw rgba(120,40,20,.18));
}
.bell-theme .pg-hero.has-orn::after { width: 13cqw; height: 15cqw; }
/* thin red-gold rule under chapter titles to tie in with the ribbons */
.bell-theme .pg-hero .ttl h2 { border-bottom: .3cqw solid #d6342a; padding-bottom: .8cqw; display: inline-block; }
.bell-theme .pg-hero .num { color: #c9961a; }
/* bell theme v2: monochrome hand-drawn line-art bells (ink colour like the text) */
.bell-theme .page.has-orn::after {
  width: 17cqw; height: 14.2cqw; transform: translate(-50%, -50%) scaleX(var(--bf, 1)) rotate(-4deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200' fill='none' stroke='%233a2f27' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke-width='2.2'%3E%3Cpath d='M98 62 C80 58 58 64 40 60 C30 58 22 54 14 56 L28 66 L16 78 C30 74 44 80 60 80 C76 80 88 74 100 70' fill='%23fffdf8'/%3E%3Cpath d='M142 62 C160 56 182 60 200 52 C210 48 218 44 226 46 L218 58 L228 68 C214 68 202 76 186 78 C170 80 156 74 140 70' fill='%23fffdf8'/%3E%3C/g%3E%3Cg stroke-width='1' opacity='.7'%3E%3Cpath d='M34 68 L40 62 M42 70 L48 63 M50 72 L56 65 M58 74 L64 67 M66 75 L72 68'/%3E%3Cpath d='M176 70 L182 63 M184 68 L190 61 M192 66 L198 58 M200 63 L206 56'/%3E%3C/g%3E%3Cg transform='translate(150 128) rotate(14)'%3E%3Cpath d='M0 -44 C-18 -44 -24 -26 -26 -4 C-28 14 -36 24 -46 30 L46 30 C36 24 28 14 26 -4 C24 -26 18 -44 0 -44Z' fill='%23fffdf8' stroke-width='2.4'/%3E%3Cellipse cx='0' cy='32' rx='47' ry='9' fill='%23fffdf8' stroke-width='2.4'/%3E%3Cpath d='M-38 32 C-20 38 20 38 38 32' stroke-width='1.2' opacity='.6'/%3E%3Cg stroke-width='1' opacity='.65'%3E%3Cpath d='M12 -36 L18 -30 M16 -26 L23 -20 M18 -16 L26 -9 M20 -6 L28 1 M23 4 L32 12 M28 14 L38 22'/%3E%3C/g%3E%3Ccircle cx='-2' cy='44' r='8' fill='%23fffdf8' stroke-width='2.2'/%3E%3Cpath d='M-4 40 C-1 38 3 39 4 42' stroke-width='1' opacity='.6'/%3E%3C/g%3E%3Cg transform='translate(92 124) rotate(-22)'%3E%3Cpath d='M0 -44 C-18 -44 -24 -26 -26 -4 C-28 14 -36 24 -46 30 L46 30 C36 24 28 14 26 -4 C24 -26 18 -44 0 -44Z' fill='%23fffdf8' stroke-width='2.4'/%3E%3Cellipse cx='0' cy='32' rx='47' ry='10' fill='%233a2f27' fill-opacity='.18' stroke-width='2.4'/%3E%3Cg stroke-width='1' opacity='.55'%3E%3Cpath d='M-30 30 L-22 38 M-20 28 L-10 40 M-8 28 L4 41 M6 28 L18 40 M20 29 L30 37'/%3E%3C/g%3E%3Cg stroke-width='1' opacity='.65'%3E%3Cpath d='M10 -38 L16 -32 M14 -28 L21 -22 M17 -18 L25 -11 M19 -8 L27 -1 M22 2 L31 10 M26 12 L36 20'/%3E%3C/g%3E%3Ccircle cx='-24' cy='34' r='8' fill='%23fffdf8' stroke-width='2.2'/%3E%3C/g%3E%3Cg stroke-width='2.2'%3E%3Cpath d='M118 66 C104 44 86 30 74 38 C62 48 80 68 112 72Z' fill='%23fffdf8'/%3E%3Cpath d='M122 66 C136 44 156 32 168 40 C180 50 160 70 128 72Z' fill='%23fffdf8'/%3E%3Cellipse cx='120' cy='68' rx='10' ry='11' fill='%23fffdf8'/%3E%3C/g%3E%3Cg stroke-width='1' opacity='.65'%3E%3Cpath d='M82 42 C90 46 98 54 106 64 M84 50 C92 54 100 60 108 68'/%3E%3Cpath d='M158 44 C150 48 142 56 134 64 M156 52 C148 56 140 62 132 68'/%3E%3Cpath d='M114 62 C116 66 116 72 114 76'/%3E%3C/g%3E%3C/svg%3E");
  filter: none; opacity: .85;
}
.bell-theme .pg-hero.has-orn::after { width: 15cqw; height: 12.5cqw; }
.bell-theme .pg-hero .ttl h2 { border-bottom-color: #3a2f27; border-bottom-width: .15cqw; }
.bell-theme .pg-hero .num { color: #3a2f27; }
.bell-theme .page.has-orn::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200' fill='none' stroke='%233a2f27' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke-width='2.2'%3E%3Cpath d='M98 62 C80 58 58 64 40 60 C30 58 22 54 14 56 L28 66 L16 78 C30 74 44 80 60 80 C76 80 88 74 100 70' fill='%23fffdf8'/%3E%3Cpath d='M142 62 C160 56 182 60 200 52 C210 48 218 44 226 46 L218 58 L228 68 C214 68 202 76 186 78 C170 80 156 74 140 70' fill='%23fffdf8'/%3E%3C/g%3E%3Cg stroke-width='1' opacity='.7'%3E%3Cpath d='M34 68 L40 62 M42 70 L48 63 M50 72 L56 65 M58 74 L64 67 M66 75 L72 68'/%3E%3Cpath d='M176 70 L182 63 M184 68 L190 61 M192 66 L198 58 M200 63 L206 56'/%3E%3C/g%3E%3Cg transform='translate(148 120) rotate(-24)'%3E%3Cpath d='M0 -44 C-18 -44 -24 -26 -26 -4 C-28 14 -36 24 -46 30 L46 30 C36 24 28 14 26 -4 C24 -26 18 -44 0 -44Z' fill='%23fffdf8' stroke-width='2.4'/%3E%3Cellipse cx='0' cy='32' rx='47' ry='13' fill='%23fffdf8' stroke-width='2.4'/%3E%3Cpath d='M-38 32 C-20 38 20 38 38 32' stroke-width='1.2' opacity='.6'/%3E%3Cg stroke-width='1' opacity='.65'%3E%3Cpath d='M12 -36 L18 -30 M16 -26 L23 -20 M18 -16 L26 -9 M20 -6 L28 1 M23 4 L32 12 M28 14 L38 22'/%3E%3C/g%3E%3Ccircle cx='4' cy='46' r='8' fill='%23fffdf8' stroke-width='2.2'/%3E%3Cpath d='M-4 40 C-1 38 3 39 4 42' stroke-width='1' opacity='.6'/%3E%3C/g%3E%3Cg transform='translate(89 119) rotate(28)'%3E%3Cpath d='M0 -44 C-18 -44 -24 -26 -26 -4 C-28 14 -36 24 -46 30 L46 30 C36 24 28 14 26 -4 C24 -26 18 -44 0 -44Z' fill='%23fffdf8' stroke-width='2.4'/%3E%3Cellipse cx='0' cy='32' rx='47' ry='13' fill='%233a2f27' fill-opacity='.18' stroke-width='2.4'/%3E%3Cg stroke-width='1' opacity='.55'%3E%3Cpath d='M-30 30 L-22 38 M-20 28 L-10 40 M-8 28 L4 41 M6 28 L18 40 M20 29 L30 37'/%3E%3C/g%3E%3Cg stroke-width='1' opacity='.65'%3E%3Cpath d='M10 -38 L16 -32 M14 -28 L21 -22 M17 -18 L25 -11 M19 -8 L27 -1 M22 2 L31 10 M26 12 L36 20'/%3E%3C/g%3E%3Ccircle cx='-6' cy='36' r='8' fill='%23fffdf8' stroke-width='2.2'/%3E%3C/g%3E%3Cg stroke-width='2.2'%3E%3Cpath d='M118 66 C104 44 86 30 74 38 C62 48 80 68 112 72Z' fill='%23fffdf8'/%3E%3Cpath d='M122 66 C136 44 156 32 168 40 C180 50 160 70 128 72Z' fill='%23fffdf8'/%3E%3Cellipse cx='120' cy='68' rx='10' ry='11' fill='%23fffdf8'/%3E%3C/g%3E%3Cg stroke-width='1' opacity='.65'%3E%3Cpath d='M82 42 C90 46 98 54 106 64 M84 50 C92 54 100 60 108 68'/%3E%3Cpath d='M158 44 C150 48 142 56 134 64 M156 52 C148 56 140 62 132 68'/%3E%3Cpath d='M114 62 C116 66 116 72 114 76'/%3E%3C/g%3E%3C/svg%3E"); }

.bell-theme .pg-fit.has-orn::after { width: 13cqw; height: 10.8cqw; }