/* A full photograph, held in a small piece of cream paper. */
.album-launch {
  position:absolute;right:18px;bottom:18px;z-index:6;min-height:44px;
  display:flex;align-items:center;gap:10px;padding:10px 20px 10px 14px;
  background:var(--cream);color:var(--pine);border-radius:2px 2px 15px 2px;
  box-shadow:0 4px 18px #042f2f40;font-size:12px;font-weight:700;
  transition:transform .3s var(--ease),box-shadow .3s;
}
.album-launch::after {
  content:'';position:absolute;right:0;bottom:0;width:12px;height:12px;
  border-radius:10px 0 13px 0;background:linear-gradient(135deg,#c7af80,#fff8e5 58%);
  box-shadow:-2px -2px 3px #5b4a2820;pointer-events:none;
}
.album-launch svg{width:20px;height:20px}
.album-launch:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 8px 22px #042f2f50}
.album-launch:active:not(:disabled){transform:translateY(0)}
.album-launch:disabled{cursor:wait}
.album-launch-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

dialog.travel-album {
  width:min(1120px,calc(100vw - 40px),calc(100svh * 1.3333 - 240px));max-width:calc(100vw - 24px);
  max-height:calc(100svh - 40px);padding:26px;background:var(--cream);
  color:var(--pine);border:1px solid #aa8b584f;border-radius:3px;
  overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;
  box-shadow:0 30px 100px #001d1ec2,0 0 0 7px #f8efd612;
}
dialog.travel-album[open]{animation:none}
.travel-album::backdrop{background:#012e2be8;backdrop-filter:blur(9px)}
.travel-album .dialog-close{width:44px;height:44px;top:18px;right:18px;background:#e8dec4;border:1px solid #a38b5f55}
.travel-album .dialog-close:hover{background:#dfd2b0}
.album-heading{display:grid;grid-template-columns:1fr auto;gap:9px 20px;padding:1px 58px 23px 3px}
.album-kicker{grid-column:1/-1;font-size:9px;letter-spacing:.17em;font-weight:700;color:#806842}
.album-heading h2{font-size:clamp(25px,3vw,40px);line-height:1.08;letter-spacing:-.035em}
.album-count{align-self:end;padding-bottom:4px;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.08em;color:#716347}
.album-board{display:grid;grid-template-columns:86px minmax(0,1fr);gap:20px;align-items:start}
.album-thumbnails{display:grid;gap:16px;padding-top:8px}
.album-thumbnail{position:relative;display:block;width:100%;min-height:44px;padding:4px 4px 16px;background:#fdf6e4;border:1px solid #a58a553d;box-shadow:0 3px 7px #493c2020;transform:rotate(-3deg);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.album-thumbnail:nth-child(2){transform:rotate(3deg)}
.album-thumbnail:nth-child(3){transform:rotate(-1.5deg)}
.album-thumbnail img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.album-thumbnail>span{position:absolute;right:5px;bottom:2px;font-size:9px;font-weight:700;letter-spacing:.05em;color:#806842}
.album-thumbnail[aria-pressed=true]{transform:rotate(0) translateX(3px);border-color:var(--coral);box-shadow:-3px 0 0 var(--coral),0 4px 10px #493c2020}
.album-thumbnail:hover{transform:rotate(0) translateY(-2px)}
.album-stage{perspective:1800px;min-width:0;padding:5px 0 10px}
.album-lift{transform-origin:50% 85%}
.album-turn{position:relative;aspect-ratio:4/3;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.22,.65,.18,1)}
.is-flipped .album-turn{transform:rotateY(180deg)}
.album-front,.album-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid #b09b6c61;box-shadow:0 9px 18px #493c2029,0 1px 2px #493c2026;background:#fff9e9}
.album-front{padding:7px}
.album-photo-frame{width:100%;height:100%;background:#e8ddc1;overflow:hidden}
.album-photo-frame>img{width:100%;height:100%;object-fit:contain}
.album-photo-frame .image-state-message{background:#e8ddc1;color:var(--pine)}
.album-back{transform:rotateY(180deg);padding:clamp(22px,4vw,58px);overflow:auto;overscroll-behavior:contain;background:linear-gradient(90deg,transparent calc(100% - 30px),#c9b58a45 calc(100% - 29px),transparent calc(100% - 28px)),#fff9e9;text-align:left}
.album-back::after{content:'';position:absolute;right:21px;top:20px;width:47px;height:58px;border:1px solid #b18c54;outline:1px dashed #b18c5480;outline-offset:4px;transform:rotate(7deg);pointer-events:none}
.album-back-kicker{display:block;margin-bottom:22px;padding-right:60px;color:#8b7046;font-size:10px;font-weight:700;letter-spacing:.13em}
.album-back h3{max-width:540px;font-family:OtherlightSerif,Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(25px,4vw,49px);line-height:1.08;letter-spacing:-.025em;margin-bottom:22px}
.album-back p{max-width:570px;font-size:clamp(14px,1.45vw,18px);line-height:1.7}
.album-back-signature{display:block;width:max-content;margin-top:28px;padding-top:12px;border-top:1px solid #b18c5466;font-size:10px;font-weight:700;letter-spacing:.15em;color:#806842}
.album-actions{display:flex;justify-content:space-between;gap:14px;margin:15px 0 0 106px;padding-top:15px;border-top:1px solid #9a855d50}
.album-actions button{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:11px 17px;border:1px solid #8a774e66;border-radius:2px;font-size:13px;font-weight:700;line-height:1.3;transition:background .2s,transform .2s}
.album-actions svg{width:20px;height:20px}
.album-flip{background:transparent;color:var(--pine)}
.album-flip:hover:not(:disabled){background:#e7dcc0}
.album-save{background:var(--pine);color:var(--cream)}
.album-save:hover:not(:disabled){background:#0c514b}
.album-actions button:active:not(:disabled){transform:translateY(2px)}
.album-actions button:disabled{opacity:.5;cursor:default}
.album-status{min-height:20px;margin:10px 0 -4px 106px;font-size:11px;line-height:1.5;color:#665738;text-align:right}
.travel-album button:focus-visible,.album-back:focus-visible,.album-launch:focus-visible{outline:3px solid var(--coral);outline-offset:4px}
.travel-album,.album-back{scrollbar-width:thin;scrollbar-color:#9b6946 #e9dec1}
.travel-album::-webkit-scrollbar,.album-back::-webkit-scrollbar{width:10px;height:10px}
.travel-album::-webkit-scrollbar-track,.album-back::-webkit-scrollbar-track{background:#e9dec1}
.travel-album::-webkit-scrollbar-thumb,.album-back::-webkit-scrollbar-thumb{background:#9b6946;border:2px solid #e9dec1;border-radius:10px}
.travel-album::-webkit-scrollbar-thumb:hover,.album-back::-webkit-scrollbar-thumb:hover{background:var(--coral)}

@media(max-width:620px){
  .album-launch{right:12px;bottom:12px}
  dialog.travel-album{padding:19px 16px 14px;width:calc(100vw - 24px);max-height:calc(100svh - 24px);scrollbar-gutter:auto}
  .travel-album .dialog-close{right:11px;top:12px}
  .album-heading{padding:0 46px 20px 0;gap:8px 10px}
  .album-heading h2{font-size:27px;grid-column:1/-1}
  .album-kicker{font-size:8px}
  .album-count{position:absolute;right:20px;top:68px;font-size:9px;padding:0}
  .album-board{display:flex;flex-direction:column;gap:10px}
  .album-stage{order:0;width:100%;padding-top:2px;padding-bottom:7px}
  .album-thumbnails{order:1;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0 10px}
  .album-thumbnail{max-width:105px;justify-self:center;padding-bottom:14px}
  .album-thumbnail[aria-pressed=true]{transform:rotate(0);box-shadow:0 3px 0 var(--coral),0 4px 10px #493c2020}
  .album-front{padding:5px}
  .album-back{padding:22px 24px;background:#fff9e9}
  .album-back::after{width:28px;height:35px;right:18px;top:18px}
  .album-back-kicker{font-size:8px;margin-bottom:14px}
  .album-back h3{font-size:25px;margin-bottom:12px}
  .album-back p{font-size:14px;line-height:1.55}
  .album-back-signature{font-size:8px;margin-top:20px}
  .album-actions{margin:20px 0 0;gap:10px;display:grid;grid-template-columns:1fr 1fr}
  .album-actions button{padding:10px 8px;font-size:11px;gap:6px}
  .album-actions svg{width:17px;height:17px}
  .album-status{margin-left:0;font-size:10px}
}
@media(max-width:360px){.album-actions{grid-template-columns:1fr}.album-heading h2{font-size:24px}}
.motion-paused .album-turn,.motion-paused .album-launch,.motion-paused .album-thumbnail,.motion-paused .album-actions button{transition:none}
@media(prefers-reduced-motion:reduce){
  .album-turn,.album-launch,.album-thumbnail,.album-actions button{transition:none}
}
@media(forced-colors:active){
  .album-launch,dialog.travel-album,.album-front,.album-back,.album-thumbnail,.album-actions button,.travel-album .dialog-close{background:Canvas;color:CanvasText;border:1px solid ButtonText;box-shadow:none;outline-offset:3px}
  .album-launch::after,.album-back::after{display:none}
  .album-thumbnail[aria-pressed=true]{border:3px solid Highlight;box-shadow:none}
  .album-turn,.album-launch,.album-thumbnail,.album-actions button{transition:none}
  .album-kicker,.album-count,.album-thumbnail>span,.album-back-kicker,.album-back-signature,.album-status{color:CanvasText}
  .travel-album,.album-back{scrollbar-color:auto}
}