/* София — бохо × 1920-е. Тёплая бумага, деко-линии, золото. */
:root{
  --paper:#F1E7D3; --paper-2:#EADEC6; --ink:#2C2521; --ink-soft:#5E5247;
  --terra:#AC5A39; --rose:#C2857A; --sage:#79805C; --gold:#A9852F;
  --band:#35443A; --on-band:#F1E7D3; --line:rgba(44,37,33,.20);
  color-scheme:light;
  --maxw:860px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#201B17; --paper-2:#2A2420; --ink:#EFE3CF; --ink-soft:#BEAF9C;
    --terra:#D07E57; --rose:#D4978A; --sage:#A7AD80; --gold:#D3B058;
    --band:#2B362E; --on-band:#EFE3CF; --line:rgba(239,227,207,.16);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#201B17; --paper-2:#2A2420; --ink:#EFE3CF; --ink-soft:#BEAF9C;
  --terra:#D07E57; --rose:#D4978A; --sage:#A7AD80; --gold:#D3B058;
  --band:#2B362E; --on-band:#EFE3CF; --line:rgba(239,227,207,.16);
  color-scheme:dark;
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:radial-gradient(120% 55% at 50% -8%, rgba(169,133,47,.10), transparent 60%), var(--paper);
  color:var(--ink);
  font-family:"EB Garamond",Georgia,"Times New Roman",serif;
  font-size:1.12rem; line-height:1.7; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:20px;}

/* типографика */
.kicker{font-family:"Marcellus",serif; font-size:.74rem; letter-spacing:.32em; text-transform:uppercase; color:var(--terra); margin:0 0 14px;}
h1{font-family:"Prata",Georgia,serif; font-weight:400; font-size:clamp(3rem,16vw,6rem); line-height:.96; margin:0; text-wrap:balance;}
h2{font-family:"Prata",Georgia,serif; font-weight:400; font-size:clamp(1.7rem,7vw,2.4rem); line-height:1.12; margin:0 0 6px; text-wrap:balance;}
h3{font-family:"Marcellus",serif; font-weight:400; font-size:1.2rem; letter-spacing:.02em; margin:0 0 6px;}
p{margin:0 0 18px;}
.lead{color:var(--ink-soft);}
.script{font-family:"Pinyon Script",cursive; font-size:clamp(2.2rem,10vw,3rem); color:var(--gold); line-height:1;}
.section-label{font-family:"Marcellus",serif; font-size:.76rem; letter-spacing:.3em; text-transform:uppercase; color:var(--sage); margin:0 0 20px;}
section{padding-block:clamp(52px,11vw,90px);}

/* верхняя полоса */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; max-width:var(--maxw); margin:0 auto;}
.brand{font-family:"Prata",serif; font-size:1.3rem; letter-spacing:.02em; text-decoration:none; color:var(--ink);}
.topbar nav{display:flex; gap:18px; font-family:"Marcellus",serif; font-size:.82rem; letter-spacing:.08em;}
.topbar nav a{text-decoration:none; color:var(--ink-soft); border-bottom:1px solid transparent; padding-bottom:2px;}
.topbar nav a:hover,.topbar nav a[aria-current]{color:var(--terra); border-color:var(--gold);}

/* деко-разделитель */
.divider{display:flex; align-items:center; gap:14px; color:var(--gold); opacity:.85; margin-inline:auto; max-width:320px;}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold));}
.divider::after{background:linear-gradient(90deg,var(--gold),transparent);}
.diamond{width:9px; height:9px; transform:rotate(45deg); border:1px solid var(--gold); flex:0 0 auto;}

/* hero */
.hero{text-align:center; padding-block:clamp(40px,11vw,78px);}
.hero-frame{position:relative; border:1px solid var(--gold); padding:clamp(34px,9vw,60px) clamp(20px,7vw,50px);}
.hero-frame::before{content:""; position:absolute; inset:6px; border:1px solid var(--line); pointer-events:none;}
.sunburst{display:block; width:58px; height:34px; margin:0 auto 18px; color:var(--gold);}
.tagline{font-family:"Marcellus",serif; font-size:clamp(1rem,4.2vw,1.18rem); letter-spacing:.02em; color:var(--ink-soft); max-width:30ch; margin:20px auto 22px;}

/* трио */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.card{background:var(--paper-2); border:1px solid var(--line); padding:24px 16px; text-align:center;}
.card .ico{width:36px; height:36px; margin:0 auto 14px; color:var(--terra);}
.card h3{color:var(--ink);}
.card p{margin:0; font-size:.96rem; color:var(--ink-soft); line-height:1.5;}

/* про меня */
.about{text-align:center;}
.portrait{max-width:560px; margin:0 auto 28px;}
.portrait img{width:100%; display:block;}
.about-text{max-width:58ch; margin:0 auto; text-align:left;}

/* превью работ на главной */
.teaser{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.teaser a{display:block; aspect-ratio:3/4; overflow:hidden; border:1px solid var(--gold); position:relative;}
.teaser img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.teaser a:hover img{transform:scale(1.05);}
.cta-row{text-align:center; margin-top:30px;}
.btn{display:inline-block; font-family:"Marcellus",serif; letter-spacing:.14em; text-transform:uppercase; font-size:.8rem; text-decoration:none; color:var(--ink); border:1px solid var(--gold); padding:14px 26px; transition:all .25s;}
.btn:hover{background:var(--gold); color:var(--paper);}

/* band */
.band{background:var(--band); color:var(--on-band); text-align:center;}
.band .section-label{color:rgba(241,231,211,.6);}
.band h2{color:var(--on-band);}
.band p{color:rgba(241,231,211,.82); max-width:42ch; margin-inline:auto;}
.band .record{width:64px; height:64px; color:var(--gold); margin:0 auto 22px;}
.band .script{margin-top:22px;}

/* footer */
footer{text-align:center; padding-block:40px 52px; color:var(--ink-soft); font-family:"Marcellus",serif; font-size:.8rem; letter-spacing:.14em;}

/* ---- портфолио ---- */
.port-hero{text-align:center; padding-block:clamp(40px,10vw,70px) 10px;}
.port-hero .intro{max-width:52ch; margin:18px auto 0; color:var(--ink-soft);}
.cat{padding-block:clamp(40px,8vw,64px);}
.cat-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:22px; border-bottom:1px solid var(--line); padding-bottom:12px;}
.cat-head h2{margin:0;}
.cat-head .medium{font-family:"Marcellus",serif; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage);}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.grid.wide{grid-template-columns:repeat(4,1fr);}
.tile{display:block; border:1px solid var(--gold); overflow:hidden; cursor:zoom-in; background:var(--paper-2); position:relative; aspect-ratio:1/1;}
.tile img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.tile:hover img{transform:scale(1.04);}

/* лайтбокс */
.lb{position:fixed; inset:0; background:rgba(24,20,17,.94); display:none; align-items:center; justify-content:center; z-index:50; padding:24px;}
.lb.open{display:flex;}
.lb img{max-width:92vw; max-height:86vh; width:auto; height:auto; border:1px solid var(--gold); box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lb-close,.lb-nav{position:absolute; background:none; border:1px solid rgba(241,231,211,.4); color:#F1E7D3; font-family:"Marcellus",serif; cursor:pointer; width:46px; height:46px; display:grid; place-items:center; font-size:1.4rem; border-radius:50%;}
.lb-close{top:18px; right:18px;}
.lb-nav{top:50%; transform:translateY(-50%);}
.lb-prev{left:14px;} .lb-next{right:14px;}
.lb-nav:hover,.lb-close:hover{border-color:var(--gold); color:var(--gold);}
.lb-cap{position:absolute; bottom:18px; left:0; right:0; text-align:center; color:rgba(241,231,211,.75); font-family:"Marcellus",serif; font-size:.8rem; letter-spacing:.12em;}

.reveal{opacity:0; transform:translateY(14px); animation:rise .9s ease forwards;}
@keyframes rise{to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; animation:none;} .teaser img,.tile img{transition:none;} }

/* адаптив */
@media (max-width:620px){
  .trio{grid-template-columns:1fr;}
  .teaser{grid-template-columns:repeat(2,1fr);}
  .grid,.grid.wide{grid-template-columns:repeat(2,1fr);}
  .topbar{flex-direction:column; gap:8px;}
}