/* ===== Family Archive — "Тёплый, но свой" (01): textured paper · Bitter slab · monogram · cranberry ===== */
:root{
  --slab:'Bitter', Georgia, 'Times New Roman', serif;
  --sans:'Golos Text', system-ui, -apple-system, sans-serif;

  --bg:#EDE6D8; --bg-2:#E4DAC8; --card:#FBF7EF;
  --ink:#211C16; --ink-soft:#6E6052; --line:#D8CDB8;
  --accent:#A8324A; --accent-deep:#86283B;
  --shadow:26px 32px 60px -38px rgba(74,52,30,.5);
  --shadow-sm:0 6px 20px -12px rgba(74,52,30,.42);
  --radius:12px;
}
:root[data-theme="dark"]{        /* «Тёплый очаг» — вечерний режим */
  --bg:#211C16; --bg-2:#2A241D; --card:#2A241D;
  --ink:#EDE6D8; --ink-soft:#B3A491; --line:#3A3128;
  --accent:#E07A90; --accent-deep:#C76276;
  --shadow:30px 36px 70px -40px rgba(0,0,0,.7);
  --shadow-sm:0 4px 18px -8px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:19px; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .4s ease, color .4s ease;
}
/* textured paper grain — more present than flat beige */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
:root[data-theme="dark"] body::before{mix-blend-mode:screen; opacity:.05}
#app{position:relative; z-index:1}
img{display:block; max-width:100%}
button{font-family:inherit; cursor:pointer}
a{color:inherit}

/* ===== Top bar ===== */
.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  padding:.8rem clamp(1rem,4vw,3rem);
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:saturate(1.15) blur(12px); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:.7rem; font-family:var(--slab); font-size:1.32rem; font-weight:700; letter-spacing:.005em; text-decoration:none}
.brand .mono{display:inline-flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem; border:1.5px solid var(--accent);
  color:var(--accent); border-radius:50%; font-family:var(--slab); font-weight:700; font-size:.82rem; letter-spacing:-.02em}
.toolbtn{border:1px solid var(--line); background:var(--card); color:var(--ink);
  height:48px; min-width:48px; padding:0 1rem; border-radius:999px; display:inline-flex; align-items:center; gap:.5rem;
  font-size:.95rem; font-weight:500; transition:border-color .2s, transform .2s}
.toolbtn:hover{border-color:var(--accent); transform:translateY(-1px)}
.toolbtn svg{width:20px; height:20px}

/* ===== Buttons ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:56px; padding:0 1.9rem;
  border:none; border-radius:999px; background:var(--accent); color:#FBF3E8; font-size:1.06rem; font-weight:600;
  font-family:var(--sans); box-shadow:var(--shadow-sm); transition:transform .2s, background .2s; text-decoration:none}
.btn:hover{background:var(--accent-deep); transform:translateY(-2px)}
.btn svg{width:22px; height:22px}

/* ===== Hero / landing ===== */
.hero{position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden}
.hero-img{position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.06); animation:kenburns 20s ease-out forwards}
.hero-scrim{position:absolute; inset:0;
  background:radial-gradient(120% 92% at 50% 40%, transparent 28%, rgba(33,22,12,.4) 80%),
  linear-gradient(to top, rgba(28,18,10,.8) 0%, rgba(28,18,10,.34) 40%, rgba(28,18,10,.14) 72%)}
.hero-content{position:relative; text-align:center; color:#FBF3E8; padding:2rem clamp(1rem,5vw,3rem) 4rem; max-width:880px}
.hero-mono{display:inline-flex; align-items:center; justify-content:center; width:3.1rem; height:3.1rem; margin:0 auto 1.1rem;
  border:1.5px solid rgba(241,185,160,.85); color:#F3C7AE; border-radius:50%; font-family:var(--slab); font-weight:700; font-size:1.05rem;
  opacity:0; animation:rise .9s .15s cubic-bezier(.2,.7,.2,1) forwards}
.hero-eyebrow{font-size:.8rem; letter-spacing:.4em; text-transform:uppercase; font-weight:500; opacity:0; animation:rise .9s .3s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1{font-family:var(--slab); font-weight:700; line-height:1.04; margin:.5rem 0 0; font-size:clamp(2.6rem,7.6vw,5.4rem);
  letter-spacing:-.005em; text-shadow:0 2px 28px rgba(0,0,0,.36); opacity:0; animation:rise 1s .46s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1 em{font-style:italic; color:#F3C2A6}
.hero-rule{width:128px; height:0; margin:1.5rem auto .2rem; border-top:2px solid #F1B9A0; position:relative; opacity:0; animation:fade 1s .7s forwards}
.hero-rule::after{content:none}
.hero-sub{margin:1.2rem auto 0; max-width:42ch; font-size:1.1rem; color:#F0E3D4; opacity:0; animation:rise 1s .82s cubic-bezier(.2,.7,.2,1) forwards}
.hero-cta{margin-top:2.2rem; opacity:0; animation:rise 1s 1s cubic-bezier(.2,.7,.2,1) forwards}
.hero-foot{position:absolute; bottom:1.4rem; left:0; right:0; text-align:center; color:#EAD9C6; font-size:.78rem; letter-spacing:.32em; text-transform:uppercase; opacity:0; animation:fade 1.2s 1.5s forwards}

/* ===== Page scaffold ===== */
.wrap{max-width:1240px; margin:0 auto; padding:clamp(1.4rem,4vw,3.2rem) clamp(1rem,4vw,3rem) 5rem}
.page-head{margin:1rem 0 2.4rem}
.kicker{display:inline-flex; align-items:center; gap:.6rem; color:var(--accent); font-weight:600; font-size:.76rem; letter-spacing:.24em; text-transform:uppercase}
.kicker::before{content:""; width:26px; height:2px; background:var(--accent)}
.page-head h2{font-family:var(--slab); font-weight:700; font-size:clamp(2.1rem,5.2vw,3.3rem); line-height:1.06; margin:.5rem 0 .2rem; letter-spacing:-.01em}
.page-head p{color:var(--ink-soft); margin:.2rem 0 0; max-width:60ch}
.backlink{display:inline-flex; align-items:center; gap:.5rem; color:var(--ink-soft); text-decoration:none; font-weight:500; margin-bottom:1.2rem; padding:.4rem 0}
.backlink:hover{color:var(--accent)}
.backlink svg{width:20px; height:20px}

/* ===== Albums grid — photo-book tiles, caption BELOW the cover ===== */
.albums-grid{display:grid; gap:clamp(1.1rem,2.4vw,1.9rem); grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.album-card{display:block; text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); opacity:0; transform:translateY(16px); animation:rise .7s forwards;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s}
.album-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.album-cover{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg-2)}
.album-cover img{width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s, transform .8s cubic-bezier(.2,.7,.2,1)}
.album-cover img.loaded{opacity:1}
.album-card:hover .album-cover img{transform:scale(1.05)}
.album-label{padding:.85rem 1rem 1rem}
.album-label h3{font-family:var(--slab); font-weight:700; font-size:1.4rem; line-height:1.12; margin:0; color:var(--ink)}
.album-meta{display:flex; gap:.6rem; align-items:center; margin-top:.25rem; font-size:.92rem; color:var(--accent); font-weight:500}
.album-meta .sep{width:3px; height:3px; border-radius:50%; background:var(--line)}
.album-meta span:last-child{color:var(--ink-soft)}

/* ===== Justified photo rows ===== */
.gallery{display:flex; flex-direction:column; gap:10px}
.jrow{display:flex; gap:10px}
.cell{position:relative; border:none; padding:0; overflow:hidden; border-radius:8px; background:var(--bg-2); box-shadow:var(--shadow-sm)}
.cell img{width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s, transform .7s cubic-bezier(.2,.7,.2,1)}
.cell img.loaded{opacity:1}
.cell:hover img{transform:scale(1.045)}

/* ===== Lightbox ===== */
.lb{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(28,19,11,.95); backdrop-filter:blur(6px); opacity:0; animation:fade .25s forwards; touch-action:none}
.lb-stage{position:relative; max-width:94vw; max-height:82svh; display:flex; align-items:center; justify-content:center}
.lb-stage img{max-width:94vw; max-height:82svh; width:auto; height:auto; border-radius:5px; box-shadow:0 30px 80px -30px rgba(0,0,0,.8); opacity:0; transition:opacity .25s}
.lb-stage img.loaded{opacity:1}
.lb-cap{position:absolute; bottom:max(1rem,env(safe-area-inset-bottom)); left:0; right:0; text-align:center; color:#F0E3D4; font-size:.95rem; letter-spacing:.04em; pointer-events:none}
.lb-counter{font-family:var(--slab); font-variant-numeric:tabular-nums; color:#E0A78F; font-size:.85rem; letter-spacing:.16em; margin-bottom:.25rem}
.lb-btn{position:absolute; z-index:2; width:60px; height:60px; border-radius:50%; border:1px solid rgba(243,194,166,.28);
  background:rgba(40,26,16,.55); color:#F4E8DA; display:flex; align-items:center; justify-content:center; transition:background .2s, transform .2s}
.lb-btn:hover{background:rgba(70,44,26,.85)}
.lb-btn svg{width:26px; height:26px}
.lb-prev{left:max(.6rem,2vw); top:50%; transform:translateY(-50%)}
.lb-next{right:max(.6rem,2vw); top:50%; transform:translateY(-50%)}
.lb-prev:hover{transform:translateY(-50%) scale(1.05)} .lb-next:hover{transform:translateY(-50%) scale(1.05)}
.lb-close{top:max(.8rem,env(safe-area-inset-top)); right:max(.8rem,2vw)}

footer.credit{text-align:center; color:var(--ink-soft); font-size:.82rem; padding:2.5rem 1rem 3rem; letter-spacing:.03em; font-family:var(--slab)}
footer.credit span{color:var(--accent)}

@keyframes rise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:translateY(0)}}
@keyframes fade{from{opacity:0} to{opacity:1}}
@keyframes kenburns{to{transform:scale(1)}}

@media (max-width:640px){
  body{font-size:18px}
  .hero-eyebrow{font-size:.74rem; letter-spacing:.18em; line-height:1.7}
  .albums-grid{grid-template-columns:1fr; gap:1.1rem}
  .lb-btn{width:52px; height:52px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before{animation:none!important; transition:none!important}
  .hero-img{transform:none}
  .album-card,.hero-mono,.hero-eyebrow,.hero h1,.hero-rule,.hero-sub,.hero-cta{opacity:1!important; transform:none!important}
}