[hidden]{ display:none !important; }
:root{
  --paper:#e7d6c4;
  --paper-deep:#fbf5ea;
  --ink:#2b211b;
  --ink-soft:#6b5c4e;
  --wine:#7c2a34;
  --wine-soft:#c98d8f;
  --gold:#a9824e;
  --line:#e3d5be;
  --shadow:0 18px 40px -20px rgba(43,33,27,0.35);
}
/* This album is designed as a single bright, airy world on purpose (a
   wedding keepsake, not a utility app), so it intentionally does not
   follow the visitor's dark-mode preference — the palette stays light
   in every viewer. */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}
.hero{
  position:relative;
  height:clamp(320px, 42vw, 500px);
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:#fdf6ec;
  background-image:url('/hero-illustration.svg');
  background-size:cover;
  background-position:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-overlay{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 55% at 50% 48%, rgba(255,253,247,0.7) 0%, rgba(255,253,247,0) 72%);
}
.hero-inner{
  position:relative;
  z-index:1;
  padding:clamp(24px,5vw,56px);
  color:#2b211b;
  width:100%;
  max-width:640px;
  text-align:center;
}
.eyebrow{
  display:inline-block;
  font-size:11px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:#7c2a34;
  margin:0 0 10px;
}
.site-title{
  font-family:'Shippori Mincho',serif;
  font-weight:600;
  font-size:clamp(30px,5.2vw,52px);
  line-height:1.15;
  margin:0 0 10px;
  text-wrap:balance;
  letter-spacing:0.04em;
  color:#2b211b;
}
.site-sub{
  margin:0;
  font-size:14px;
  color:#6b5c4e;
  letter-spacing:0.02em;
}
#count-total{font-variant-numeric:tabular-nums;}
main{
  max-width:2100px;
  margin:0 auto;
  padding:clamp(20px,4vw,44px) clamp(16px,4vw,32px) 8px;
}
.book-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,2vw,20px);
}
.book-nav{
  flex:none;
  appearance:none;
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--paper-deep);
  color:var(--wine);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.book-nav:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }
.book-nav:disabled{ opacity:0.35; cursor:default; background:var(--paper-deep); color:var(--ink-soft); }
.book{
  position:relative;
  width:100%;
  max-width:2000px;
  aspect-ratio:16/10.2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  background:var(--line);
  box-shadow:var(--shadow);
  border-radius:4px;
  overflow:hidden;
  animation:page-in 0.35s ease both;
}
@keyframes page-in{ from{opacity:0; transform:scale(0.985);} to{opacity:1; transform:none;} }
.book.spread-solo{ grid-template-columns:1fr; }
.page{
  position:relative;
  background:var(--paper-deep);
  padding:clamp(10px,1.6vw,22px);
  display:grid;
  gap:clamp(8px,1.2vw,14px);
  overflow:hidden;
}
.page.rows-2{ grid-template-rows:1fr 1fr; }
.book::after{
  content:'';
  position:absolute;
  top:0; bottom:0; left:50%;
  width:26px;
  margin-left:-13px;
  background:linear-gradient(90deg, rgba(23,17,13,0.16), rgba(23,17,13,0) 45%, rgba(23,17,13,0) 55%, rgba(23,17,13,0.16));
  pointer-events:none;
  z-index:2;
}
.book.spread-solo::after{ display:none; }
.frame{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:0;
  border:1px solid var(--line);
  cursor:pointer;
}
.frame-img-wrap{
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--paper);
}
.frame img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}
.frame-foot{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.frame-num{
  font-size:11px;
  letter-spacing:0.12em;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.frame:hover .frame-num, .frame:focus-within .frame-num{ color:var(--wine); }
.frame-delete{
  appearance:none;
  width:24px; height:24px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink-soft);
  font-size:14px;
  line-height:1;
  cursor:pointer;
  opacity:0;
  transition:opacity .15s ease;
}
.frame:hover .frame-delete, .frame:focus-within .frame-delete{ opacity:1; }
.frame-delete:hover{ background:var(--wine); border-color:var(--wine); color:#f6ede0; }
.book-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:14px;
}
.book-counter{
  font-size:12px;
  letter-spacing:0.1em;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.add-link{
  appearance:none;
  border:1px dashed var(--gold);
  background:transparent;
  color:var(--wine);
  font-size:12px;
  letter-spacing:0.06em;
  padding:6px 14px;
  cursor:pointer;
}
.add-link:hover{ background:rgba(169,130,78,0.1); }
.site-footer{
  max-width:1180px;
  margin:0 auto;
  padding:24px clamp(16px,4vw,32px) 56px;
  text-align:center;
}
.divider{
  width:64px; height:1px; background:var(--gold);
  margin:0 auto 18px;
}
.site-footer p{
  margin:0 0 14px;
  font-family:'Shippori Mincho',serif;
  font-size:14px;
  color:var(--ink-soft);
  letter-spacing:0.06em;
}
.admin-link{
  appearance:none;
  border:none;
  background:none;
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--line);
  cursor:pointer;
  padding:6px;
}
.admin-link:hover{ color:var(--gold); }
.lightbox{
  position:fixed; inset:0;
  background:rgba(15,10,7,0.92);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
  padding:24px;
}
.lb-figure{
  margin:0;
  max-width:min(92vw,1100px);
  max-height:88vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.lb-figure img{
  max-width:100%;
  max-height:78vh;
  object-fit:contain;
  box-shadow:0 24px 60px -20px rgba(0,0,0,0.7);
  background:#000;
}
.lb-figure figcaption{
  color:#e7ddcc;
  font-size:12px;
  letter-spacing:0.1em;
  font-variant-numeric:tabular-nums;
}
.lb-close, .lb-nav{
  position:absolute;
  appearance:none;
  border:1px solid rgba(230,215,195,0.35);
  background:rgba(23,17,13,0.4);
  color:#f6ede0;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  border-radius:999px;
}
.lb-close{ top:18px; right:18px; width:40px; height:40px; }
.lb-nav{ top:50%; transform:translateY(-50%); width:48px; height:48px; }
.lb-prev{ left:14px; }
.lb-next{ right:14px; }
.lb-close:hover, .lb-nav:hover{ background:rgba(124,42,52,0.55); border-color:var(--gold); }

.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(15,10,7,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:60;
  padding:20px;
}
.modal{
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:28px 26px;
  width:100%;
  max-width:320px;
}
.modal h2{
  font-family:'Shippori Mincho',serif;
  font-size:18px;
  margin:0 0 6px;
  color:var(--ink);
}
.modal p{
  font-size:12px;
  color:var(--ink-soft);
  margin:0 0 16px;
}
.modal input[type="password"]{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  background:var(--paper-deep);
  color:var(--ink);
  font-size:14px;
  margin-bottom:12px;
}
.modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.modal-actions button{
  appearance:none;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink-soft);
  padding:8px 16px;
  font-size:13px;
  cursor:pointer;
}
.modal-actions button.primary{
  background:var(--wine);
  border-color:var(--wine);
  color:#f6ede0;
}
.modal-error{
  color:var(--wine);
  font-size:12px;
  margin:-6px 0 12px;
  min-height:14px;
}
.admin-bar{
  position:fixed;
  bottom:0; left:0; right:0;
  background:var(--wine);
  color:#f6ede0;
  font-size:12px;
  letter-spacing:0.06em;
  padding:8px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  z-index:40;
}
.admin-bar button{
  appearance:none;
  border:1px solid rgba(246,237,224,0.6);
  background:transparent;
  color:#f6ede0;
  padding:3px 10px;
  font-size:11px;
  cursor:pointer;
}