/* Album display: framed photo (1) or book (2+). See album.js. */
.album-root {
  --paper: #FBF8F1;
  --paper-edge: #E9E3D6;
  --cloth: #23305F;
  --cloth-ink: #F3E9D2;
  --wood: #4A3426;
  --wood-light: #6B4D38;
  --mat: #FCFBF7;
  --wall: #EFECE4;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- toolbar ---------- */
.album-toolbar { display: flex; justify-content: flex-end; }
.segmented { display: inline-flex; padding: 3px; border-radius: 999px; background: #E6E3DB; }
.segmented .seg { min-height: 36px; padding: 0 16px; border: none; border-radius: 999px; background: transparent; font: inherit; font-size: 14px; color: var(--muted, #5C5F66); cursor: pointer; }
.segmented .seg.on { background: #fff; color: var(--ink, #1B1D22); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* ---------- shared photo ---------- */
.album-root .photo { position: relative; display: block; padding: 0; border: none; background: none; cursor: zoom-in; line-height: 0; }
.album-root .photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.album-root .photo.loading { background: #E4E0D6; }
.album-root .photo.loading img { opacity: 0; }
.album-root .photo img { transition: opacity .35s ease; }
.album-root .photo:focus-visible { outline: 3px solid var(--accent, #2F3B8F); outline-offset: 3px; }
.album-root .photo.failed { cursor: default; display: flex; align-items: center; justify-content: center; background: #EEE9DF; line-height: 1.5; }
.failed-text { font-size: 12px; color: var(--muted, #5C5F66); padding: 8px; text-align: center; }

/* ---------- 1 photo: frame on a wall ---------- */
.frame-wall { display: flex; justify-content: center; padding: clamp(28px, 6vw, 64px) 16px clamp(28px, 5vw, 48px); background: var(--wall); border-radius: 16px; transition: background-color .3s ease; }
.frame { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; }
.frame.landscape { max-width: 680px; }
.frame.portrait { max-width: 440px; }
.frame-moulding { position: relative; width: 100%; box-sizing: border-box; transition: all .3s ease; }
.frame-mat { transition: all .3s ease; }
.frame-photo { width: 100%; aspect-ratio: var(--ratio); }
.frame-plate { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 22px; border-radius: 3px; text-align: center; }
.plate-title { font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; font-size: 15px; font-weight: 600; letter-spacing: .06em; }
.plate-date { font-size: 12px; letter-spacing: .08em; }

/* Brass name plate, used by most frames */
.frame-plate { background: #CDB98A; color: #3A2E14; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.25); }

/* Walnut: dark wood, white mat */
.frame-walnut .frame-moulding {
  padding: clamp(12px, 2.6vw, 22px);
  background: var(--wood);
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px var(--wood-light), inset 0 0 0 6px var(--wood), inset 0 0 0 7px rgba(0,0,0,.35),
    0 18px 30px -12px rgba(30, 20, 10, .45), 0 4px 8px rgba(30, 20, 10, .2);
}
.frame-walnut .frame-mat { padding: clamp(18px, 7%, 48px); background: var(--mat); box-shadow: inset 0 2px 6px rgba(0,0,0,.18); }

/* Natural oak: light wood with grain, warm mat */
.wall-oak { background: #F1EDE4; }
.frame-oak .frame-moulding {
  padding: clamp(12px, 2.4vw, 20px);
  background:
    repeating-linear-gradient(90deg, rgba(120, 80, 40, .10) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(90deg, rgba(255, 240, 210, .18) 0 1px, transparent 1px 23px),
    #C9A26E;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 0 0 5px rgba(0,0,0,0), inset 0 0 0 6px rgba(90, 60, 30, .35),
    0 16px 28px -12px rgba(60, 40, 20, .4), 0 3px 6px rgba(60, 40, 20, .18);
}
.frame-oak .frame-mat { padding: clamp(18px, 7%, 46px); background: #FAF6EC; box-shadow: inset 0 2px 5px rgba(80, 60, 30, .16); }

/* Black: slim modern metal frame, wide white mat */
.wall-black { background: #E9E9E7; }
.frame-black .frame-moulding {
  padding: clamp(6px, 1.1vw, 9px);
  background: #1D1D1F;
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px #3A3A3D, 0 18px 30px -14px rgba(0,0,0,.5), 0 3px 6px rgba(0,0,0,.18);
}
.frame-black .frame-mat { padding: clamp(28px, 11%, 72px); background: #FFFFFF; box-shadow: inset 0 1px 4px rgba(0,0,0,.2); }
.frame-black .frame-plate { background: #2A2A2C; color: #EDEDED; box-shadow: 0 1px 2px rgba(0,0,0,.3); }

/* White: gallery white frame on a soft grey wall */
.wall-white { background: #DFE2E3; }
.frame-white .frame-moulding {
  padding: clamp(12px, 2.4vw, 20px);
  background: #FAFAF8;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), inset 0 0 0 7px #FAFAF8, inset 0 0 0 8px rgba(0,0,0,.08),
    0 18px 30px -14px rgba(40, 50, 60, .35), 0 3px 6px rgba(40, 50, 60, .12);
}
.frame-white .frame-mat { padding: clamp(14px, 5%, 34px); background: #FFFFFF; box-shadow: inset 0 1px 3px rgba(0,0,0,.12); }
.frame-white .frame-plate { background: #FFFFFF; color: #3C4248; box-shadow: 0 1px 3px rgba(0,0,0,.15); }

/* Gold: classic gilded frame with layered bevels, cream mat, deep wall */
.wall-gold { background: #3B3530; }
.frame-gold .frame-moulding {
  padding: clamp(18px, 3.6vw, 30px);
  background: linear-gradient(135deg, #8A6A22 0%, #E3C46E 22%, #B48A33 45%, #F1D98C 62%, #9C7528 82%, #D8B65D 100%);
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 2px #F6E3A1, inset 0 0 0 4px #7A5A1C, inset 0 0 0 9px #C9A24A, inset 0 0 0 10px #6E4F15,
    inset 0 0 0 clamp(14px, 3vw, 24px) rgba(255, 230, 160, .12),
    0 22px 36px -14px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.35);
}
.frame-gold .frame-mat { padding: clamp(18px, 7%, 46px); background: #F3EBD8; box-shadow: inset 0 0 0 4px #EADFC4, inset 0 3px 7px rgba(60, 40, 10, .3); }
.frame-gold .frame-plate { background: linear-gradient(180deg, #E8CF85, #B8923F); color: #2E2410; }
.wall-gold .frame-plate { box-shadow: 0 2px 6px rgba(0,0,0,.45); }

/* Shadow box: the photo floats in front of a linen backing inside a deep box */
.wall-shadowbox { background: #ECE7DE; }
.frame-shadowbox .frame-moulding {
  padding: clamp(10px, 1.8vw, 14px);
  background: #2F2B28;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px #4A4440, 0 20px 34px -14px rgba(30, 25, 20, .55), 0 4px 8px rgba(30,25,20,.2);
}
.frame-shadowbox .frame-mat {
  padding: clamp(26px, 10%, 64px);
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.02) 0 1px, transparent 1px 3px), #F2EEE6;
  box-shadow: inset 0 10px 16px -8px rgba(0,0,0,.35), inset 8px 0 14px -10px rgba(0,0,0,.25), inset -8px 0 14px -10px rgba(0,0,0,.25);
}
.frame-shadowbox .frame-photo { box-shadow: 0 14px 22px -8px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.2); }
.frame-shadowbox .frame-plate { background: #2F2B28; color: #EAE3D6; }

/* Instant photo: a white print taped to the wall, caption written in the wide bottom margin */
.wall-instant { background: #E7E1D6; }
.frame-instant { gap: 0; }
.frame-instant.landscape { max-width: 600px; }
.frame-instant.portrait { max-width: 400px; }
.frame-instant .frame-moulding {
  padding: 5% 5% 4%;
  background: #FDFCF9;
  border-radius: 2px;
  transform: rotate(-1.6deg);
  box-shadow: 0 16px 26px -12px rgba(40, 30, 20, .45), 0 2px 5px rgba(40, 30, 20, .18);
}
.frame-instant .frame-moulding::before {
  content: ""; position: absolute; top: -14px; left: 50%; width: 26%; height: 28px; transform: translateX(-50%) rotate(2deg);
  background: rgba(236, 226, 196, .78); box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.frame-instant .frame-mat { padding: 0; background: none; box-shadow: none; }
.frame-instant .frame-photo { box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
/* The instant print carries its caption in its own wide bottom margin, written by hand.
   It is part of the print (not laid over it), so long names never cover the photo. */
.instant-caption { display: none; }
.frame-instant .instant-caption {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: clamp(56px, 14%, 110px); padding: clamp(10px, 3%, 20px) 4% 0; box-sizing: border-box;
  color: #3B3F7A; text-align: center; word-break: break-word;
  font-family: "Klee One", "Hannotate SC", "Yu Kyokasho", "Hiragino Maru Gothic ProN", cursive;
}
.frame-instant .frame-plate { display: none; }
.instant-caption .plate-names { font-family: inherit; font-weight: 600; font-size: clamp(15px, 2.3vw, 20px); letter-spacing: .08em; }
.instant-caption .plate-title, .instant-caption .plate-sub { font-family: inherit; font-weight: 500; font-size: clamp(13px, 1.9vw, 16px); letter-spacing: .04em; opacity: 1; }
.instant-caption .plate-date { font-family: inherit; font-size: clamp(11px, 1.5vw, 13px); color: #5B5F95; }

/* Frame picker */
.frame-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.frame-option { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 8px; border: 1px solid #D6D1C6; border-radius: 999px; background: #fff; font: inherit; font-size: 13px; color: var(--ink, #1B1D22); cursor: pointer; }
.frame-option.on { border-color: var(--accent, #2F3B8F); box-shadow: inset 0 0 0 1px var(--accent, #2F3B8F); font-weight: 600; }
.frame-option:focus-visible { outline: 3px solid var(--accent, #2F3B8F); outline-offset: 2px; }
.frame-swatch { width: 24px; height: 24px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.swatch-walnut { background: #4A3426; }
.swatch-oak { background: #C9A26E; }
.swatch-black { background: #1D1D1F; }
.swatch-white { background: #FAFAF8; }
.swatch-gold { background: linear-gradient(135deg, #8A6A22, #F1D98C 55%, #B48A33); }
.swatch-shadowbox { background: radial-gradient(circle at 50% 50%, #F2EEE6 0 38%, #2F2B28 40%); }
.swatch-instant { box-sizing: border-box; background: #B9C7D6; border: 4px solid #FDFCF9; border-bottom-width: 8px; box-shadow: 0 0 0 1px rgba(0,0,0,.2); border-radius: 3px; }

/* ---------- 2+ photos: book ---------- */
.book { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(16px, 4vw, 40px) 0 4px; background: var(--wall); border-radius: 16px; }
.book-viewport { position: relative; width: min(100% - 32px, 980px); aspect-ratio: 3 / 2; }
.book.closed .book-viewport { width: min(100% - 32px, 980px); }
.view { position: absolute; inset: 0; display: none; }
.view.active { display: flex; }
.view.from-right { animation: towa-turn-in-right .45s ease both; }
.view.from-left { animation: towa-turn-in-left .45s ease both; }
@keyframes towa-turn-in-right { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes towa-turn-in-left { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .view.from-right, .view.from-left { animation: none; } }

.page { position: relative; flex: 1 1 0; min-width: 0; background: var(--paper); }

/* Open spread: two pages with a soft gutter shadow and stacked page edges */
.view.spread { box-shadow: 0 18px 32px -16px rgba(40, 30, 15, .45), 0 2px 6px rgba(40,30,15,.15); border-radius: 4px; }
.view.spread .page.left { border-radius: 4px 0 0 4px; background: linear-gradient(to left, rgba(0,0,0,.10), rgba(0,0,0,0) 7%), var(--paper); box-shadow: inset 3px 0 0 var(--paper-edge); }
.view.spread .page.right { border-radius: 0 4px 4px 0; background: linear-gradient(to right, rgba(0,0,0,.10), rgba(0,0,0,0) 7%), var(--paper); box-shadow: inset -3px 0 0 var(--paper-edge); }

/* Cover: a closed book, one page wide, centred */
.view.cover { justify-content: center; }
.page.cover { flex: 0 0 auto; height: 100%; aspect-ratio: 3 / 4; border-radius: 3px 8px 8px 3px; background: var(--cloth); color: var(--cloth-ink); box-shadow: inset 10px 0 0 rgba(0,0,0,.18), inset 12px 0 0 rgba(255,255,255,.06), 0 18px 32px -14px rgba(20, 20, 40, .55), 0 3px 6px rgba(0,0,0,.2); }
.cover-inner { position: absolute; inset: 9% 12% 9% 16%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; border: 1px solid rgba(243, 233, 210, .35); padding: 8% 6%; }
.cover-rule { width: 40px; height: 1px; background: rgba(243, 233, 210, .6); }
.cover-title { margin: 0; font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; font-size: clamp(18px, 2.6vw, 28px); font-weight: 600; line-height: 1.5; letter-spacing: .08em; word-break: break-word; }
.cover-date, .cover-count { margin: 0; font-size: clamp(12px, 1.3vw, 14px); letter-spacing: .1em; opacity: .85; }
.cover-open { margin-top: 10px; min-height: 44px; padding: 0 26px; border: 1px solid rgba(243, 233, 210, .7); border-radius: 999px; background: transparent; color: var(--cloth-ink); font: inherit; font-size: 14px; letter-spacing: .2em; cursor: pointer; }
.cover-open:hover { background: rgba(243, 233, 210, .12); }

/* Photo pages: photos mounted with a thin white border, laid out by how many are on the page */
.page-inner { position: absolute; inset: 8% 9%; display: grid; gap: 6%; }
.page.photos-1 .page-inner { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.page.photos-2 .page-inner { grid-template: repeat(2, minmax(0, 1fr)) / minmax(0, 1fr); }
.page.photos-3 .page-inner, .page.photos-4 .page-inner { grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr)); gap: 5%; inset: 9% 8%; }
/* The cell's size comes from the page grid only; the photo inside is positioned so it never stretches the cell. */
.page-cell { position: relative; min-width: 0; min-height: 0; overflow: visible; }
/* Sized by album.js so the whole photo fits its cell (portrait or landscape) */
.page-photo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 0; height: 0; box-sizing: border-box; border: 5px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 6px 12px -6px rgba(0,0,0,.25); }
.page.photos-1 .page-photo { border-width: 7px; }

/* Closing page */
.end-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 10%; color: #5A5345; }
.end-mark { margin: 0 0 8px; font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; font-size: clamp(16px, 2vw, 22px); letter-spacing: .4em; }
.end-title { margin: 0; font-size: 14px; font-weight: 600; }
.end-date { margin: 0; font-size: 12px; }
.end-back { margin-top: 16px; min-height: 40px; padding: 0 18px; border: 1px solid #B9AF9C; border-radius: 999px; background: transparent; color: #5A5345; font: inherit; font-size: 13px; cursor: pointer; }

/* Navigation */
.book-nav { display: flex; align-items: center; gap: 18px; }
.nav-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid #C9C2B3; border-radius: 999px; background: #fff; color: var(--ink, #1B1D22); cursor: pointer; }
.nav-btn:disabled { opacity: .35; cursor: default; }
.nav-counter { min-width: 64px; text-align: center; font-size: 14px; color: var(--muted, #5C5F66); font-variant-numeric: tabular-nums; }

/* Narrow screens: one page at a time */
@media (max-width: 760px) {
  .book-viewport { width: min(100% - 32px, 460px); aspect-ratio: 3 / 4; }
  .book.closed .book-viewport { width: min(100% - 32px, 460px); }
  .view.single { box-shadow: 0 14px 26px -14px rgba(40, 30, 15, .45), 0 2px 6px rgba(40,30,15,.15); border-radius: 4px; }
  .view.single .page { border-radius: 4px; box-shadow: inset -3px 0 0 var(--paper-edge); }
  .page.cover { width: 100%; }
}

/* ---------- grid ---------- */
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.grid-photo { width: 100%; aspect-ratio: 1; border-radius: 8px; overflow: hidden; }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(14, 14, 16, .92); }
.lightbox-img { max-width: calc(100vw - 32px); max-height: calc(100vh - 96px); object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.lightbox-btn { position: absolute; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; }
.lightbox-btn:hover { background: rgba(255,255,255,.22); }
.lightbox-btn.close { top: 16px; right: 16px; }
.lightbox-btn.prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-btn.next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.8); font-size: 14px; font-variant-numeric: tabular-nums; }
body.no-scroll { overflow: hidden; }
.frame-picker-start { justify-content: flex-start; }

/* =====================================================================
   Couple features: name plate, anniversary, letter on the back,
   two-photo frame, wedding and wa frames, book cover and letter page
   ===================================================================== */

.frame-wall { flex-direction: column; align-items: center; gap: 18px; }
.frame.diptych { max-width: 820px; }

/* ---------- name plate ---------- */
.plate-names { font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; font-size: 17px; font-weight: 600; letter-spacing: .12em; }
.plate-sub { font-size: 12.5px; letter-spacing: .06em; opacity: .9; }

/* ---------- anniversary under the frame ---------- */
.frame-days { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: #6A5F4E; }
.frame-days p { margin: 0; }
.days-count { display: flex; align-items: center; gap: 12px; font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; font-size: 15px; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.days-count::before, .days-count::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .45; }
.days-anniversary { padding: 4px 14px; border-radius: 999px; background: #F6E3DD; color: #8A3B2E; font-size: 13px; font-weight: 600; letter-spacing: .06em; }
.wall-gold .frame-days { color: #E9DDC4; }
.wall-gold .days-anniversary { background: rgba(233, 205, 140, .2); color: #F1D98C; }

/* ---------- two photos side by side, equal height ---------- */
.diptych-row { display: flex; align-items: center; gap: clamp(12px, 5%, 32px); }
.diptych-row .frame-photo { flex: var(--r) 1 0; width: auto; min-width: 0; aspect-ratio: var(--ratio); }
.frame-instant.diptych { max-width: 720px; }

/* ---------- turning the frame over ---------- */
.frame-flip { position: relative; width: 100%; perspective: 1800px; }
.frame-face { width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .9s cubic-bezier(.3, .7, .2, 1); transform-style: flat; }
/* Children (tilted prints, the letter) must not show through when their face is turned away. */
.frame-face * { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.frame-face.back { position: absolute; inset: 0; transform: rotateY(-180deg); }
.frame.flipped .frame-face.front { transform: rotateY(180deg); }
.frame.flipped .frame-face.back { transform: rotateY(0deg); }
/* Also swap visibility half-way through the turn: some browsers ignore backface-visibility on
   scrolling or tilted children, which would let the letter show through mirrored. */
.frame-face { transition: transform .9s cubic-bezier(.3, .7, .2, 1), visibility 0s linear .4s; }
.frame-face.back, .frame.flipped .frame-face.front { visibility: hidden; }
.frame.flipped .frame-face.back { visibility: visible; }


/* Back of the frame: brown board with a letter paper tucked in */
/* Seen from behind, the frame's own moulding forms the rim around the backing board, so each frame
   keeps its colour on the back (walnut, oak, black, white, gold…). */
.frame-back-board {
  position: absolute; inset: 0; display: flex; padding: clamp(10px, 3%, 22px); border-radius: 3px; box-sizing: border-box;
  border: clamp(8px, 2.2vw, 16px) solid var(--rim, var(--wood, #4A3424));
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.025) 0 2px, transparent 2px 6px), #A68A64;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), inset 0 2px 6px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.12), 0 18px 30px -12px rgba(30, 20, 10, .45);
}
.frame-oak .frame-back-board { --rim: #C9A26E; }
.frame-black .frame-back-board { --rim: #1D1D1F; border-width: clamp(5px, 1.1vw, 9px); }
.frame-white .frame-back-board { --rim: #F4F4F1; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), inset 0 2px 6px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.1), 0 18px 30px -14px rgba(40, 50, 60, .35); }
.frame-gold .frame-back-board { border-width: clamp(12px, 3.2vw, 26px); border-image: linear-gradient(135deg, #8A6A22 0%, #E3C46E 22%, #B48A33 45%, #F1D98C 62%, #9C7528 82%, #D8B65D 100%) 1; border-radius: 0; }
.frame-wedding .frame-back-board { --rim: #F1EADF; box-shadow: inset 0 0 0 1px #D7BE84, inset 0 2px 6px rgba(0,0,0,.12), 0 0 0 1px #E2D7C3, 0 18px 32px -14px rgba(120, 80, 70, .35); }
.frame-shadowbox .frame-back-board { --rim: #2F2B28; }
.frame-instant .frame-back-board { border: none; background: #FBF9F4; box-shadow: 0 16px 26px -12px rgba(40, 30, 20, .45); transform: rotate(-1.6deg); }
.frame-back-board .letter { flex: 1; overflow: auto; background: #FFFDF7; box-shadow: 0 2px 6px rgba(0,0,0,.2); transform: rotate(-.6deg); }

/* ---------- the letter ---------- */
.letter {
  --letter-ink: #2F2A40;
  display: flex; flex-direction: column; gap: 14px; padding: clamp(18px, 5%, 36px);
  background: #FFFDF7;
  color: var(--letter-ink);
  font-family: "Klee One", "Hiragino Maru Gothic ProN", "Yu Kyokasho", "Hiragino Mincho ProN", serif;
  font-size: clamp(14px, 1.8vw, 16px); line-height: 32px; text-align: left;
}
.letter p { margin: 0; }
.letter-to { font-size: 1.08em; }
.letter-body { white-space: pre-wrap; word-break: break-word; }
.letter-foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-end; }
.letter-date { font-size: .86em; opacity: .75; }
.letter-from { font-size: 1.04em; }

/* ---------- controls under the frame ---------- */
.frame-controls { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.letter-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid #C9A99E; border-radius: 999px; background: #FFF8F5; color: #7A3E31; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.letter-toggle:hover { background: #FBEDE7; }
.letter-toggle:focus-visible { outline: 3px solid var(--accent, #2F3B8F); outline-offset: 2px; }

/* ---------- wedding: ivory lacquer frame lined with pearls ---------- */
.wall-wedding { background: #F4ECE9; }
.frame-wedding .frame-moulding {
  padding: clamp(16px, 3.2vw, 26px);
  background:
    radial-gradient(circle at 50% 50%, #FFFFFF 0 2.1px, #E9E2D6 2.6px, rgba(233,226,214,0) 3.2px) 0 0 / 9px 9px,
    linear-gradient(135deg, #FBF8F2, #EFE8DC);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px #E2D7C3, inset 0 0 0 clamp(5px, 1vw, 8px) rgba(255,255,255,.65),
    inset 0 0 0 calc(clamp(5px, 1vw, 8px) + 1px) #D7BE84,
    0 18px 32px -14px rgba(120, 80, 70, .35), 0 3px 8px rgba(120, 80, 70, .12);
}
.frame-wedding .frame-mat { padding: clamp(18px, 7%, 46px); background: #FFFFFF; box-shadow: inset 0 0 0 1px #E8DCC0, inset 0 0 0 5px #FFFFFF, inset 0 0 0 6px #D7BE84, inset 0 2px 6px rgba(0,0,0,.08); }
.frame-wedding .frame-plate { background: #FFFFFF; color: #8C6A2C; border: 1px solid #E3CF9F; box-shadow: 0 2px 6px rgba(120, 80, 70, .12); }
.frame-wedding .plate-names { color: #6E5223; }
.wall-wedding .frame-days { color: #8A6E5C; }

/* ---------- wa: paulownia wood, washi mat, red-and-gold mizuhiki knot ---------- */
.wall-wa { background: #EEE8DC; }
.frame-wa .frame-moulding {
  padding: clamp(14px, 2.8vw, 22px);
  background:
    repeating-linear-gradient(90deg, rgba(150, 120, 80, .09) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 2px, transparent 2px 17px),
    #DCCBAE;
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(110, 85, 50, .35), inset 0 0 0 4px rgba(255,255,255,.2), 0 16px 28px -12px rgba(70, 55, 30, .4), 0 3px 6px rgba(70,55,30,.15);
}
.frame-wa .frame-mat {
  padding: clamp(20px, 8%, 52px);
  background:
    radial-gradient(ellipse 3px 1px at 20% 30%, rgba(170, 150, 120, .35), transparent),
    radial-gradient(ellipse 2px 1px at 70% 60%, rgba(170, 150, 120, .3), transparent),
    radial-gradient(ellipse 4px 1px at 40% 80%, rgba(170, 150, 120, .25), transparent),
    #F7F2E7;
  background-size: 37px 29px, 53px 41px, 61px 47px, auto;
  box-shadow: inset 0 1px 4px rgba(90, 70, 40, .2);
}
.frame-wa .frame-moulding::after {
  content: ""; position: absolute; left: 50%; bottom: -26px; width: 120px; height: 60px; transform: translateX(-50%); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%23C8102E' stroke-width='2.2'%3E%3Cpath d='M60 22c-10-14-30-14-30 0s20 14 30 0c10-14 30-14 30 0s-20 14-30 0'/%3E%3Cpath d='M60 25c-9-12-26-12-26 0s17 12 26 0c9-12 26-12 26 0s-17 12-26 0'/%3E%3Cpath d='M57 30c-6 8-12 16-26 26M63 30c6 8 12 16 26 26'/%3E%3C/g%3E%3Cg stroke='%23C9A34A' stroke-width='2.2'%3E%3Cpath d='M60 19c-11-15-34-15-34 3s23 15 34 0c11-15 34-15 34 3s-23 15-34 0'/%3E%3Cpath d='M58 31c-5 9-10 17-23 27M62 31c5 9 10 17 23 27'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.frame-wa .frame-plate { margin-top: 26px; background: #FFFFFF; color: #2B2620; border-radius: 0; border-top: 3px solid #C8102E; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.frame-wa .plate-names { letter-spacing: .2em; }
.frame-wa .frame-back-board { --rim: #CDB894; background: repeating-linear-gradient(90deg, rgba(150,120,80,.09) 0 1px, transparent 1px 6px), #DCCBAE; }
.swatch-wedding { background: radial-gradient(circle, #fff 0 3px, #E9E2D6 3.5px) 0 0 / 8px 8px, #FBF8F2; box-shadow: inset 0 0 0 1px #D7BE84; }
.swatch-wa { background: linear-gradient(135deg, transparent 0 42%, #C8102E 42% 50%, #C9A34A 50% 58%, transparent 58%), #DCCBAE; }

/* ---------- book: names, anniversary, letter page ---------- */
.cover-names { margin: 0; font-size: clamp(13px, 1.5vw, 16px); letter-spacing: .24em; opacity: .9; }
.cover-days { margin: 0; font-size: clamp(12px, 1.3vw, 14px); letter-spacing: .12em; padding: 3px 12px; border: 1px solid rgba(243, 233, 210, .45); border-radius: 999px; word-break: keep-all; }
.end-names { margin: 0; font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; font-size: 16px; letter-spacing: .14em; }
.letter-page-inner { position: absolute; inset: 7% 8%; display: flex; }
.letter-page-inner .letter { flex: 1; overflow: auto; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 16px -10px rgba(0,0,0,.25); transform: rotate(.4deg); line-height: 30px; }

/* ---------- static preview on the create page ---------- */
.album-preview .frame-wall { padding: 28px 12px; border-radius: 12px; }
.album-preview .frame.landscape { max-width: 420px; }
.album-preview .frame.portrait { max-width: 280px; }
.album-preview .frame.diptych { max-width: 520px; }
.album-preview .book { padding: 16px 0; border-radius: 12px; }
.album-preview .book-viewport,
.album-preview .book.closed .book-viewport { width: min(100% - 24px, 360px); aspect-ratio: 3 / 4; }
.album-preview .page.cover { width: 100%; }
.album-preview .photo { cursor: default; }
.letter-toggle.pulse { animation: towa-pulse 1.6s ease-in-out 3; }
@keyframes towa-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(168, 71, 58, .0); } 50% { box-shadow: 0 0 0 8px rgba(168, 71, 58, .18); } }
.wall-instant .frame-days { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .frame-face { transition: visibility 0s; } }
.one-name { white-space: nowrap; display: inline-block; }

/* =====================================================================
   Album (book) designs. Each theme sets the wall, cover and page colours;
   some mount photos with corners instead of a white border.
   ===================================================================== */
.book { --cover-line: rgba(243, 233, 210, .35); --cover-line-strong: rgba(243, 233, 210, .7); --page-ink: #5A5345; --corner: #2A2A2A; }
.book .cover-inner { border-color: var(--cover-line); }
.book .cover-rule { background: var(--cover-line-strong); }
.book .cover-open, .book .cover-days { border-color: var(--cover-line-strong); color: var(--cloth-ink); }
.book .end-inner { color: var(--page-ink); }
.book .end-back { border-color: color-mix(in srgb, var(--page-ink) 45%, transparent); color: var(--page-ink); }
.book .page.cover { transition: background-color .3s ease; }

/* Photo corners (hidden unless a design uses them) */
.album-root .page-photo .corners { position: absolute; inset: 0; pointer-events: none; display: none; }

/* クラシック (navy cloth) — the original look, nothing to override */

/* リネン: natural linen cover with a stitched border */
.book.theme-linen { --wall: #F1EEE8; --cloth: #D8CFBF; --cloth-ink: #4A3F35; --cover-line: rgba(74, 63, 53, .45); --cover-line-strong: rgba(74, 63, 53, .6); --paper: #FFFEFB; --paper-edge: #ECE7DD; }
.book.theme-linen .page.cover { background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 1px, transparent 1px 3px),
  repeating-linear-gradient(90deg, rgba(90, 75, 55, .10) 0 1px, transparent 1px 3px), var(--cloth); }
.book.theme-linen .cover-inner { border-style: dashed; }

/* レザー: brown leather, gold foil, cream pages */
.book.theme-leather { --wall: #ECE6DD; --cloth: #4B2C1D; --cloth-ink: #E2C27A; --cover-line: rgba(226, 194, 122, .55); --cover-line-strong: rgba(226, 194, 122, .75); --paper: #F8F1E3; --paper-edge: #E8DCC5; --page-ink: #5A4630; }
.book.theme-leather .page.cover { background:
  radial-gradient(circle at 30% 20%, rgba(255,255,255,.07), transparent 60%),
  repeating-radial-gradient(circle at 40% 60%, rgba(0,0,0,.05) 0 1px, transparent 1px 4px), var(--cloth); }
.book.theme-leather .cover-inner { box-shadow: inset 0 0 0 4px var(--cloth), inset 0 0 0 5px var(--cover-line); }
.book.theme-leather .cover-title { text-shadow: 0 1px 0 rgba(0,0,0,.4); }

/* 和: washi cover with a mizuhiki knot, washi pages */
.book.theme-wa { --wall: #EEE8DC; --cloth: #F4EEE2; --cloth-ink: #2B2620; --cover-line: rgba(43, 38, 32, .25); --cover-line-strong: rgba(200, 16, 46, .7); --paper: #F7F2E7; --paper-edge: #E7DECB; --page-ink: #3B342C; }
.book.theme-wa .page.cover { background:
  radial-gradient(ellipse 3px 1px at 20% 30%, rgba(170, 150, 120, .35), transparent),
  radial-gradient(ellipse 2px 1px at 70% 60%, rgba(170, 150, 120, .3), transparent),
  linear-gradient(90deg, transparent 0 8%, rgba(200, 16, 46, .9) 8% 10%, transparent 10%), var(--cloth);
  background-size: 37px 29px, 53px 41px, auto, auto; }
.book.theme-wa .cover-inner { border: none; padding-top: 30%; }
.book.theme-wa .cover-inner::before {
  content: ""; position: absolute; top: 9%; left: 50%; width: 96px; height: 48px; transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%23C8102E' stroke-width='2.2'%3E%3Cpath d='M60 22c-10-14-30-14-30 0s20 14 30 0c10-14 30-14 30 0s-20 14-30 0'/%3E%3Cpath d='M60 25c-9-12-26-12-26 0s17 12 26 0c9-12 26-12 26 0s-17 12-26 0'/%3E%3Cpath d='M57 30c-6 8-12 16-26 26M63 30c6 8 12 16 26 26'/%3E%3C/g%3E%3Cg stroke='%23C9A34A' stroke-width='2.2'%3E%3Cpath d='M60 19c-11-15-34-15-34 3s23 15 34 0c11-15 34-15 34 3s-23 15-34 0'/%3E%3Cpath d='M58 31c-5 9-10 17-23 27M62 31c5 9 10 17 23 27'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.book.theme-wa .cover-rule { display: none; }
.book.theme-wa .cover-open { color: #A8102A; }

/* クラフト: kraft paper cover and pages, photos held by corners */
.book.theme-kraft { --wall: #EEE9E1; --cloth: #B58D64; --cloth-ink: #3B2A1A; --cover-line: rgba(59, 42, 26, .5); --cover-line-strong: rgba(59, 42, 26, .65); --paper: #E8D9BF; --paper-edge: #D9C6A5; --page-ink: #4A3826; --corner: #6B4E32; }
.book.theme-kraft .page.cover { background: repeating-radial-gradient(circle at 20% 30%, rgba(80, 55, 30, .06) 0 1px, transparent 1px 3px), var(--cloth); }
.book.theme-kraft .cover-inner { border-style: dashed; }

/* ブラック台紙: black pages with white photo corners, like an old album */
.book.theme-black { --wall: #E9E7E3; --cloth: #1F1E1C; --cloth-ink: #E7E1D3; --cover-line: rgba(231, 225, 211, .3); --cover-line-strong: rgba(231, 225, 211, .6); --paper: #242325; --paper-edge: #333235; --page-ink: #E9E4DA; --corner: #EFEBE2; }
.book.theme-black .view.spread .page.left { background: linear-gradient(to left, rgba(0,0,0,.35), rgba(0,0,0,0) 7%), var(--paper); }
.book.theme-black .view.spread .page.right { background: linear-gradient(to right, rgba(0,0,0,.35), rgba(0,0,0,0) 7%), var(--paper); }

/* Designs that hold photos with corners */
.book.theme-kraft .page-photo, .book.theme-black .page-photo { border: none; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.book.theme-kraft .page-photo .corners, .book.theme-black .page-photo .corners { display: block; }
.book.theme-kraft .page-photo::before, .book.theme-kraft .page-photo::after, .book.theme-kraft .page-photo .corners::before, .book.theme-kraft .page-photo .corners::after,
.book.theme-black .page-photo::before, .book.theme-black .page-photo::after, .book.theme-black .page-photo .corners::before, .book.theme-black .page-photo .corners::after {
  content: ""; position: absolute; z-index: 1; width: 18px; height: 18px; pointer-events: none;
}
.book.theme-kraft .page-photo::before, .book.theme-black .page-photo::before { top: -5px; left: -5px; background: linear-gradient(135deg, var(--corner) 0 52%, transparent 52%); }
.book.theme-kraft .page-photo::after, .book.theme-black .page-photo::after { bottom: -5px; right: -5px; background: linear-gradient(-45deg, var(--corner) 0 52%, transparent 52%); }
.book.theme-kraft .page-photo .corners::before, .book.theme-black .page-photo .corners::before { top: -5px; right: -5px; background: linear-gradient(-135deg, var(--corner) 0 52%, transparent 52%); }
.book.theme-kraft .page-photo .corners::after, .book.theme-black .page-photo .corners::after { bottom: -5px; left: -5px; background: linear-gradient(45deg, var(--corner) 0 52%, transparent 52%); }


/* ---------- Drawn decorations (album-art.js): shown only for the design that owns them ---------- */
.cover-art, .page-deco, .cover-emblem { display: none; }
.cover-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.page-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.album-root .art-wedding, .album-root .art-sakura { display: none; }
.book.theme-wedding .cover-art, .book.theme-sakura .cover-art,
.book.theme-wedding .page-deco, .book.theme-sakura .page-deco,
.book.theme-wedding .cover-emblem, .book.theme-sakura .cover-emblem { display: block; }
.book.theme-wedding .art-wedding, .book.theme-sakura .art-sakura { display: revert; }
.book.theme-wedding .cover-inner, .book.theme-sakura .cover-inner,
.book.theme-wedding .page-inner, .book.theme-sakura .page-inner,
.book.theme-wedding .end-inner, .book.theme-sakura .end-inner,
.book.theme-wedding .letter-page-inner, .book.theme-sakura .letter-page-inner { z-index: 1; }
.cover-emblem svg { display: block; width: 100%; height: auto; }
.book.theme-wedding .cover-rule, .book.theme-sakura .cover-rule { display: none; }

/* ウェディング: ivory damask cover with pearl edging, gold foil frame, filigree corners,
   a laurel wreath with two rings, and gold-matted photos on white pages */
.book.theme-wedding { --wall: #F3ECE6; --cloth: #FBF7EF; --cloth-ink: #9A7634; --paper: #FFFEFB; --paper-edge: #EFE8DA; --page-ink: #8E6E33;
  --gold-foil: linear-gradient(100deg, #A9802F 0%, #E9D08A 28%, #B8913F 46%, #F4E3A8 66%, #B08835 86%, #D9BC6E 100%); }
.book.theme-wedding .page.cover {
  background: radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23CDBA92' stroke-width='.8' opacity='.28'%3E%3Cpath d='M28 12c5 7 5 12 0 16c-5-4-5-9 0-16zM28 44c-5-7-5-12 0-16c5 4 5 9 0 16zM12 28c7-5 12-5 16 0c-4 5-9 5-16 0zM44 28c-7 5-12 5-16 0c4-5 9-5 16 0z'/%3E%3C/g%3E%3Cg fill='%23CDBA92' opacity='.35'%3E%3Ccircle cx='0' cy='0' r='1.4'/%3E%3Ccircle cx='56' cy='0' r='1.4'/%3E%3Ccircle cx='0' cy='56' r='1.4'/%3E%3Ccircle cx='56' cy='56' r='1.4'/%3E%3Ccircle cx='28' cy='28' r='1.2'/%3E%3C/g%3E%3C/svg%3E"), var(--cloth);
  box-shadow: inset 10px 0 0 rgba(160, 130, 80, .08), inset 11px 0 0 rgba(255,255,255,.8), 0 18px 32px -14px rgba(120, 80, 60, .35), 0 3px 6px rgba(0,0,0,.08); }
.book.theme-wedding .cover-inner { inset: 15% 17% 13% 19%; border: none; padding: 0; gap: clamp(6px, 1.4vw, 11px); }
.book.theme-wedding .cover-emblem { order: -2; width: clamp(56px, 30%, 92px); }
.book.theme-wedding .cover-inner::before { content: "Wedding Album"; order: -1; font-family: "Didot", "Bodoni 72", Georgia, "Times New Roman", serif; font-style: italic; font-size: clamp(12px, 1.5vw, 16px); letter-spacing: .14em; color: #A88445; }
.book.theme-wedding .cover-names { font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; font-size: clamp(13px, 1.6vw, 17px); letter-spacing: .22em; color: #8E6E33; }
.book.theme-wedding .cover-title { background: var(--gold-foil); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; letter-spacing: .12em; }
.book.theme-wedding .cover-date, .book.theme-wedding .cover-count { color: #9A7634; opacity: 1; }
.book.theme-wedding .cover-days { border-color: #D8BE80; color: #8E6E33; background: rgba(255,255,255,.6); }
.book.theme-wedding .cover-open { border-color: #C9A85A; color: #8E6E33; background: rgba(255,255,255,.7); }
.book.theme-wedding .cover-open:hover { background: #FFF8E8; }
.book.theme-wedding .page-corner { position: absolute; width: clamp(24px, 10%, 50px); height: auto; }
.book.theme-wedding .page-corner.tl { top: 3%; left: 3%; }
.book.theme-wedding .page-corner.tr { top: 3%; right: 3%; transform: scaleX(-1); }
.book.theme-wedding .page-corner.bl { bottom: 3%; left: 3%; transform: scaleY(-1); }
.book.theme-wedding .page-corner.br { bottom: 3%; right: 3%; transform: scale(-1, -1); }
.book.theme-wedding .page-photo { border: 6px solid #fff; box-shadow: 0 0 0 1px #D8C08A, 0 0 0 4px #FFFDF8, 0 0 0 5px #E8D8B2, 0 12px 20px -12px rgba(110, 80, 40, .4); }
.book.theme-wedding .end-emblem { width: clamp(60px, 26%, 96px); }
.book.theme-wedding .end-mark { color: #9A7634; }

/* さくら: blush washi cover with petals drifting down, a frosted name panel,
   and pages with scattered petals */
.book.theme-sakura { --wall: #F8EFEF; --cloth: #F6E1E4; --cloth-ink: #7A3B4C; --cover-line: rgba(255,255,255,.9); --cover-line-strong: #C77A8E; --paper: #FFFBFA; --paper-edge: #F4E6E5; --page-ink: #8A4E5D; }
.book.theme-sakura .page.cover {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-linecap='round' opacity='.35'%3E%3Cpath d='M8 20c14 4 22 2 34-4' stroke-width='.7'/%3E%3Cpath d='M60 70c10 6 24 6 36 0' stroke-width='.6'/%3E%3Cpath d='M20 96c8-6 16-8 26-6' stroke-width='.5'/%3E%3Cpath d='M84 24c6 8 14 12 26 12' stroke-width='.5'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(110% 70% at 85% 0%, #FDF3F5 0%, rgba(253,243,245,0) 60%), linear-gradient(172deg, #F9E6EA 0%, #F3D4DB 58%, #ECC4CD 100%);
  box-shadow: inset 10px 0 0 rgba(122, 62, 74, .07), inset 11px 0 0 rgba(255,255,255,.5), 0 18px 32px -14px rgba(120, 60, 70, .35), 0 3px 6px rgba(0,0,0,.08); }
.book.theme-sakura .cover-inner { inset: 21% 15% 19% 19%; border: 1px solid rgba(255,255,255,.95); border-radius: 12px; background: rgba(255, 252, 252, .55); padding: 6% 5%; gap: clamp(6px, 1.3vw, 10px); box-shadow: 0 6px 24px -12px rgba(150, 70, 90, .35); }
.book.theme-sakura .cover-emblem { order: -1; width: clamp(30px, 16%, 46px); }
.book.theme-sakura .cover-names { color: #8A4E5D; letter-spacing: .2em; }
.book.theme-sakura .cover-title { color: #6E3344; }
.book.theme-sakura .cover-date, .book.theme-sakura .cover-count { color: #8A4E5D; opacity: 1; }
.book.theme-sakura .cover-days { border-color: #E4A9B8; color: #8A3E52; background: rgba(255,255,255,.7); }
.book.theme-sakura .cover-open { border-color: #C77A8E; color: #8A3E52; background: rgba(255,255,255,.7); }
.book.theme-sakura .cover-open:hover { background: #FFF2F5; }
.cover-art .petals-fall path { animation: towa-petal 11s ease-in-out infinite; }
.cover-art .petals-fall .p2 { animation-duration: 13s; animation-delay: -4s; }
.cover-art .petals-fall .p3 { animation-duration: 10s; animation-delay: -7s; }
.cover-art .petals-fall .p4 { animation-duration: 14s; animation-delay: -2s; }
.cover-art .petals-fall .p5 { animation-duration: 12s; animation-delay: -9s; }
.cover-art .petals-fall .p6 { animation-duration: 15s; animation-delay: -5s; }
@keyframes towa-petal {
  0% { translate: 0 -24px; rotate: 0deg; opacity: 0; }
  15% { opacity: .95; }
  50% { translate: 14px 20px; rotate: 30deg; }
  85% { opacity: .95; }
  100% { translate: -6px 64px; rotate: -10deg; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cover-art .petals-fall path { animation: none; } }
.book.theme-sakura .page:not(.cover) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='%23F4C9D3' opacity='.24'%3E%3Cpath transform='translate(34 46) rotate(30) scale(1)' d='M0 0C-5 -3 -6 -11 -1.5 -14L0 -12.3L1.6 -14C6 -11 5 -3 0 0Z'/%3E%3Cpath transform='translate(196 30) rotate(-40) scale(0.8)' d='M0 0C-5 -3 -6 -11 -1.5 -14L0 -12.3L1.6 -14C6 -11 5 -3 0 0Z'/%3E%3Cpath transform='translate(120 128) rotate(110) scale(0.7)' d='M0 0C-5 -3 -6 -11 -1.5 -14L0 -12.3L1.6 -14C6 -11 5 -3 0 0Z'/%3E%3Cpath transform='translate(250 170) rotate(60) scale(0.9)' d='M0 0C-5 -3 -6 -11 -1.5 -14L0 -12.3L1.6 -14C6 -11 5 -3 0 0Z'/%3E%3Cpath transform='translate(60 236) rotate(-80) scale(0.75)' d='M0 0C-5 -3 -6 -11 -1.5 -14L0 -12.3L1.6 -14C6 -11 5 -3 0 0Z'/%3E%3Cpath transform='translate(170 262) rotate(150) scale(0.85)' d='M0 0C-5 -3 -6 -11 -1.5 -14L0 -12.3L1.6 -14C6 -11 5 -3 0 0Z'/%3E%3Cpath transform='translate(282 280) rotate(10) scale(0.6)' d='M0 0C-5 -3 -6 -11 -1.5 -14L0 -12.3L1.6 -14C6 -11 5 -3 0 0Z'/%3E%3Cpath transform='translate(214 98) rotate(-120) scale(0.65)' d='M0 0C-5 -3 -6 -11 -1.5 -14L0 -12.3L1.6 -14C6 -11 5 -3 0 0Z'/%3E%3C/g%3E%3C/svg%3E"); }
.book.theme-sakura .view.spread .page.left { background: linear-gradient(to left, rgba(0,0,0,.08), rgba(0,0,0,0) 7%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23F4C9D3' opacity='.32'%3E%3Cpath transform='translate(30 40) rotate(30)' d='M0 0C-5 -3 -6 -11 -1.5 -14L0 -12.3L1.6 -14C6 -11 5 -3 0 0Z'/%3E%3Cpath transform='translate(120 100) rotate(-50) scale(.8)' d='M0 0C-5 -3 -6 -11 -1.5 -14L0 -12.3L1.6 -14C6 -11 5 -3 0 0Z'/%3E%3Cpath transform='translate(70 160) rotate(120) scale(.7)' d='M0 0C-5 -3 -6 -11 -1.5 -14L0 -12.3L1.6 -14C6 -11 5 -3 0 0Z'/%3E%3C/g%3E%3C/svg%3E"), var(--paper); }
.book.theme-sakura .view.spread .page.right { background: linear-gradient(to right, rgba(0,0,0,.08), rgba(0,0,0,0) 7%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23F4C9D3' opacity='.32'%3E%3Cpath transform='translate(30 40) rotate(30)' d='M0 0C-5 -3 -6 -11 -1.5 -14L0 -12.3L1.6 -14C6 -11 5 -3 0 0Z'/%3E%3Cpath transform='translate(120 100) rotate(-50) scale(.8)' d='M0 0C-5 -3 -6 -11 -1.5 -14L0 -12.3L1.6 -14C6 -11 5 -3 0 0Z'/%3E%3Cpath transform='translate(70 160) rotate(120) scale(.7)' d='M0 0C-5 -3 -6 -11 -1.5 -14L0 -12.3L1.6 -14C6 -11 5 -3 0 0Z'/%3E%3C/g%3E%3C/svg%3E"), var(--paper); }
.book.theme-sakura .page-sprig { position: absolute; top: 1%; right: 1%; width: 30%; height: auto; }
.book.theme-sakura .page.left .page-sprig { right: auto; left: 0; transform: scaleX(-1); }
.book.theme-sakura .page-petals { position: absolute; bottom: 1.5%; left: 5%; width: 28%; height: auto; }
.book.theme-sakura .page.left .page-petals { left: auto; right: 5%; transform: scaleX(-1); }
.book.theme-sakura .page-inner { top: 12%; }
.book.theme-sakura .page-photo { border: 6px solid #fff; box-shadow: 0 0 0 1px #F3D9DF, 0 10px 18px -10px rgba(150, 70, 90, .35); }
.book.theme-sakura .end-emblem { width: clamp(40px, 18%, 64px); }

.cover-swatch-wedding { background: radial-gradient(circle at 50% 50%, transparent 0 34%, #D2B46A 36% 44%, transparent 46%), #FBF7EF; box-shadow: inset 0 0 0 1px #E2D3B1; }
.cover-swatch-sakura { background: radial-gradient(circle at 34% 40%, #fff 0 12%, transparent 14%), radial-gradient(circle at 64% 62%, #FCE9EE 0 15%, transparent 17%), linear-gradient(160deg, #F8E3E7, #ECC4CD); }

/* Design swatches */
.cover-swatch-navy { background: #23305F; }
.cover-swatch-linen { background: repeating-linear-gradient(90deg, rgba(90,75,55,.15) 0 1px, transparent 1px 3px), #D8CFBF; }
.cover-swatch-leather { background: #4B2C1D; box-shadow: inset 0 0 0 2px #4B2C1D, inset 0 0 0 3px #E2C27A; }
.cover-swatch-wa { background: linear-gradient(90deg, transparent 0 22%, #C8102E 22% 32%, transparent 32%), #F4EEE2; }
.cover-swatch-kraft { background: #B58D64; }
.cover-swatch-black { background: linear-gradient(135deg, #EFEBE2 0 30%, #1F1E1C 30%); }
.book-picker { margin-top: 4px; }
.book-picker { margin-top: 14px; }
/* Backing boards that suit the lighter / darker frames */
.frame-white .frame-back-board { background: repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 2px, transparent 2px 6px), #E6E3DC; }
.frame-wedding .frame-back-board { background: radial-gradient(circle at 50% 50%, rgba(215,190,132,.18) 0 1px, transparent 1.5px) 0 0 / 10px 10px, #F4EEE3; }
.frame-black .frame-back-board, .frame-shadowbox .frame-back-board { background: repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 6px), #4A4643; }

/* ---------- videos ---------- */
.album-root .photo.is-video { cursor: pointer; }
.album-root .play-badge { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 7px; border-radius: 999px; background: rgba(20, 20, 22, .62); color: #fff; font: 600 12px/1 system-ui, sans-serif; letter-spacing: .02em; pointer-events: none; }
.album-root .play-icon { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff; }
.album-root .play-time:empty { display: none; }
.album-root .photo.loading .play-badge { opacity: 0; }
.album-preview .play-badge { left: 4px; bottom: 4px; padding: 2px 6px 2px 5px; font-size: 10px; }
.lightbox-video { background: #000; }
.lightbox-video.hidden, .lightbox-img.hidden, .lightbox-wait.hidden { display: none; }
.lightbox-wait { position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.85); font-size: 14px; }

/* ---------- realistic frames: mitred corners, bevelled mat, gallery light ---------- */
/* A moulding is drawn as four pieces (album.js: .frame-side). Each piece has
   - the moulding's profile across it (--profile, from the outer edge to the inner lip, drawn along --dir),
   - its own share of the light, which comes from the upper left: top and left catch it, right and bottom fall into shade,
   - a surface texture running along the piece (--tex-h / --tex-v: wood grain, brushed metal, pearls…).
   The different light on neighbouring pieces meets on the 45° joins, like a real mitred frame. */
.frame-side { display: none; }
.frame-mitred .frame-moulding { padding: var(--fw); background: var(--base); border-radius: 1px;
  --profile: rgba(255,255,255,var(--hi)) 0, rgba(255,255,255,0) 22%, rgba(255,255,255,calc(var(--hi) * .5)) 48%, rgba(0,0,0,0) 70%, rgba(0,0,0,.26) 88%, rgba(0,0,0,.48) 100%; --hi: .2; --tex-h: none; --tex-v: none; --tex-size-h: 480px 100%; --tex-size-v: 100% 480px; }
.frame-mitred .frame-mat { position: relative; z-index: 1; }
.frame-mitred .frame-side { display: block; position: absolute; pointer-events: none; background-color: var(--base);
  background-image: linear-gradient(var(--dir), var(--profile)), linear-gradient(var(--tone), var(--tone)), var(--tex); background-size: auto, auto, var(--tex-size); }
.frame-side.top { --dir: 180deg; --tone: rgba(255,255,255,calc(var(--hi) * .35)); --tex: var(--tex-h); --tex-size: var(--tex-size-h);
  top: 0; left: 0; right: 0; height: var(--fw); clip-path: polygon(0 0, 100% 0, calc(100% - var(--fw)) 100%, var(--fw) 100%); }
.frame-side.left { --dir: 90deg; --tone: rgba(255,255,255,calc(var(--hi) * .15)); --tex: var(--tex-v); --tex-size: var(--tex-size-v);
  top: 0; bottom: 0; left: 0; width: var(--fw); clip-path: polygon(0 0, 100% var(--fw), 100% calc(100% - var(--fw)), 0 100%); }
.frame-side.right { --dir: 270deg; --tone: rgba(0,0,0,.1); --tex: var(--tex-v); --tex-size: var(--tex-size-v);
  top: 0; bottom: 0; right: 0; width: var(--fw); clip-path: polygon(0 var(--fw), 100% 0, 100% 100%, 0 calc(100% - var(--fw))); }
.frame-side.bottom { --dir: 0deg; --tone: rgba(0,0,0,.17); --tex: var(--tex-h); --tex-size: var(--tex-size-h);
  bottom: 0; left: 0; right: 0; height: var(--fw); clip-path: polygon(var(--fw) 0, calc(100% - var(--fw)) 0, 100% 100%, 0 100%); }

/* each frame */
.frame-walnut .frame-moulding { --fw: clamp(14px, 2.9vw, 26px); --base: #4C3527; --hi: .16; --tex-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='96'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.42' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.04  0 0 0 0 0.02  1.6 0 0 0 -0.67'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23g)'/%3E%3C/svg%3E"); --tex-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='480'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42 0.006' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.04  0 0 0 0 0.02  1.6 0 0 0 -0.67'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23g)'/%3E%3C/svg%3E");
  box-shadow: 0 1px 1px rgba(20, 12, 6, .35), 0 8px 14px -4px rgba(20, 12, 6, .3), 0 30px 44px -20px rgba(20, 12, 6, .5); }
.frame-oak .frame-moulding { --fw: clamp(14px, 2.7vw, 24px); --base: #CFA56B; --hi: .3; --tex-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='96'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.24' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.26  0 0 0 0 0.1  1.1 0 0 0 -0.46'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23g)'/%3E%3C/svg%3E"); --tex-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='480'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.24 0.006' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.26  0 0 0 0 0.1  1.1 0 0 0 -0.46'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23g)'/%3E%3C/svg%3E");
  box-shadow: 0 1px 1px rgba(70, 45, 20, .3), 0 8px 14px -4px rgba(70, 45, 20, .22), 0 30px 44px -20px rgba(70, 45, 20, .42); }
.frame-wa .frame-moulding { --fw: clamp(14px, 2.8vw, 22px); --base: #DCCAA9; --hi: .34; --tex-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='96'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.5' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.42  0 0 0 0 0.25  0.9 0 0 0 -0.38'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23g)'/%3E%3C/svg%3E"); --tex-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='480'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5 0.006' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.42  0 0 0 0 0.25  0.9 0 0 0 -0.38'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23g)'/%3E%3C/svg%3E");
  box-shadow: 0 1px 1px rgba(70, 55, 30, .3), 0 8px 14px -4px rgba(70, 55, 30, .2), 0 28px 40px -18px rgba(70, 55, 30, .4); }
/* black: a slim aluminium frame with a flat face and a crisp inner edge */
.frame-black .frame-moulding { --fw: clamp(7px, 1.2vw, 10px); --base: #1C1C1E; --hi: .22; --tex-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='96'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.9' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0.5 0 0 0 -0.25'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23g)'/%3E%3C/svg%3E"); --tex-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='480'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.006' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0.5 0 0 0 -0.25'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23g)'/%3E%3C/svg%3E");
  --profile: rgba(255,255,255,.28) 0, rgba(255,255,255,.06) 18%, rgba(255,255,255,0) 50%, rgba(0,0,0,.2) 84%, rgba(0,0,0,.55) 100%;
  box-shadow: 0 1px 1px rgba(0,0,0,.4), 0 8px 14px -4px rgba(0,0,0,.28), 0 30px 44px -20px rgba(0,0,0,.5); }
/* white: painted wood, softly rounded */
.frame-white .frame-moulding { --fw: clamp(12px, 2.4vw, 20px); --base: #F7F6F2; --hi: .6; --tex-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='96'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.3' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.48  0 0 0 0 0.44  0.35 0 0 0 -0.15'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23g)'/%3E%3C/svg%3E"); --tex-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='480'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.3 0.006' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.48  0 0 0 0 0.44  0.35 0 0 0 -0.15'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23g)'/%3E%3C/svg%3E");
  --profile: rgba(255,255,255,.9) 0, rgba(255,255,255,0) 26%, rgba(0,0,0,0) 60%, rgba(0,0,0,.06) 80%, rgba(0,0,0,.2) 100%;
  box-shadow: 0 0 0 1px rgba(40, 50, 60, .08), 0 8px 14px -4px rgba(40, 50, 60, .16), 0 30px 44px -20px rgba(40, 50, 60, .36); }
/* gold: a gilded moulding with several raised beads */
.frame-gold .frame-moulding { --fw: clamp(18px, 3.6vw, 30px); --base: #C9A24A;
  --profile: #F8E7A8 0, #C69B3E 6%, #8A6522 11%, #E8CB79 17%, #FBEAB0 23%, #B98F38 31%, #E3C46E 42%, #F3DC92 52%, #A47B2C 62%, #6E4F15 68%, #D8B65D 74%, #F1D98C 80%, #9C7528 88%, #5A3F10 100%;
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 16px -4px rgba(0,0,0,.4), 0 34px 50px -20px rgba(0,0,0,.7); }
.frame-gold .frame-side.right { --tone: rgba(40, 25, 0, .14); }
.frame-gold .frame-side.bottom { --tone: rgba(40, 25, 0, .24); }
/* wedding: ivory lacquer lined with seed pearls */
.frame-wedding .frame-moulding { --fw: clamp(16px, 3.2vw, 26px); --base: #F8F3EA; --hi: .5;
  --tex-h: radial-gradient(circle at 50% 50%, #FFFFFF 0 2.1px, #E6DCCB 2.7px, rgba(230,220,203,0) 3.3px); --tex-v: var(--tex-h); --tex-size-h: 9px 9px; --tex-size-v: 9px 9px;
  --profile: rgba(255,255,255,.7) 0, rgba(255,255,255,0) 14%, rgba(0,0,0,0) 72%, #E9D9AE 80%, #D7BE84 84%, rgba(0,0,0,.05) 86%, rgba(0,0,0,.16) 100%;
  box-shadow: 0 0 0 1px #E2D7C3, 0 8px 14px -4px rgba(120, 80, 70, .16), 0 30px 44px -20px rgba(120, 80, 70, .36); }
/* shadow box: a deep dark box */
.frame-shadowbox .frame-moulding { --fw: clamp(10px, 1.8vw, 14px); --base: #2F2B28; --hi: .12;
  --profile: rgba(255,255,255,.16) 0, rgba(255,255,255,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,.4) 100%;
  box-shadow: 0 1px 1px rgba(30, 25, 20, .4), 0 10px 16px -4px rgba(30, 25, 20, .3), 0 34px 50px -20px rgba(30, 25, 20, .55); }

/* the mat: shadow cast by the top and left of the moulding, and a bevelled window cut around the photo */
.frame-mitred .frame-mat { box-shadow: inset 0 3px 5px -1px rgba(0,0,0,.22), inset 3px 0 5px -2px rgba(0,0,0,.12), inset 0 -1px 2px rgba(0,0,0,.06); }
.frame-wedding .frame-mat { box-shadow: inset 0 0 0 5px #FFFFFF, inset 0 0 0 6px #D7BE84, inset 0 3px 5px -1px rgba(0,0,0,.16), inset 3px 0 5px -2px rgba(0,0,0,.08); }
.frame-gold .frame-mat { box-shadow: inset 0 0 0 4px #EADFC4, inset 0 3px 6px -1px rgba(60, 40, 10, .32), inset 3px 0 6px -2px rgba(60, 40, 10, .16); }
.frame-shadowbox .frame-mat { box-shadow: inset 0 12px 18px -8px rgba(0,0,0,.4), inset 10px 0 16px -10px rgba(0,0,0,.28), inset -8px 0 14px -10px rgba(0,0,0,.2); }
.frame-bevel .frame-photo { box-shadow: 0 0 0 1px rgba(60, 45, 25, .18), -1px -1px 0 3px #FFFFFF, 1px 1px 0 3px #E7DFCF, 0 0 0 4px rgba(60, 45, 25, .1); }
.frame-bevel .frame-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 2px 3px rgba(0,0,0,.18), inset 1px 0 2px rgba(0,0,0,.08); }

/* frameless: the print mounted on a thin block that stands off the wall */
.wall-frameless { background: #ECEAE5; }
.frame-frameless .frame-moulding { padding: 0; background: none; border-radius: 0;
  box-shadow: 1px 1px 0 #D9D5CC, 2px 2px 0 #CFCAC0, 3px 3px 0 #C5BFB4, 0 2px 3px rgba(0,0,0,.18), 0 14px 22px -6px rgba(30, 25, 20, .3), 0 36px 52px -22px rgba(30, 25, 20, .45); }
.frame-frameless .frame-mat { padding: 0; background: none; box-shadow: none; position: relative; }
.frame-frameless .frame-photo { box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.frame-frameless .frame-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.14) 47%, rgba(255,255,255,0) 58%); }
.frame-frameless .frame-plate { background: #FFFFFF; color: #34363B; border-radius: 1px; box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.frame-frameless .frame-back-board { border: none; border-radius: 0; background: #F1EEE8;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 1px 1px 0 #D9D5CC, 2px 2px 0 #CFCAC0, 3px 3px 0 #C5BFB4, 0 14px 22px -6px rgba(30, 25, 20, .3), 0 36px 52px -22px rgba(30, 25, 20, .45); }
.frame-frameless .diptych-row { gap: 14px; }
.swatch-frameless { background: linear-gradient(135deg, #9DB3C8, #E8D2B8); box-shadow: 1px 1px 0 #C5BFB4, inset 0 0 0 1px rgba(0,0,0,.1); border-radius: 4px; }

/* gallery light from above, on every wall */
.frame-wall { position: relative; isolation: isolate; }
.frame-wall::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255, 252, 240, .55), rgba(255, 252, 240, 0) 70%), linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.05)); }
.wall-gold::before { background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255, 236, 190, .16), rgba(255, 236, 190, 0) 70%); }
.frame-gold .frame-side { background-image: linear-gradient(var(--tone), var(--tone)), linear-gradient(var(--dir), var(--profile)); background-size: auto; }
.picker-break { flex-basis: 100%; height: 0; }