@import url('/f/fonts.css');

:root{
  --ivory:#FAF6F0;
  --paper:#FFFDFA;
  --sand:#F1EAE0;
  --stone:#C9BFB2;
  --sage:#93A18C;
  --plum:#4C3341;
  --plum-soft:#6B4E5C;
  --ink:#2B2429;
  --grey:#7A6E68;
  --terra:#BE7350;
  --line:#E2D9CD;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ivory);color:var(--ink);
  font-family:'Manrope',system-ui,sans-serif;font-weight:300;
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,.d{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;letter-spacing:.006em}
h1{font-size:66px;line-height:1.08}
h2{font-size:40px;line-height:1.22;max-width:15em}
h3{font-size:24px;line-height:1.3}
em{font-style:italic}
strong{font-weight:500}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{max-width:1180px;margin:0 auto;padding:0 56px}
.narrow{max-width:700px;margin:0 auto;padding:0 56px}

.eyebrow{font-size:10px;font-weight:500;letter-spacing:.36em;text-transform:uppercase;color:var(--plum-soft)}
.grey{color:var(--grey)}
.lead{font-size:18px;line-height:1.8;color:var(--grey);max-width:34em}
.caption{font-size:12px;letter-spacing:.08em;color:var(--grey)}

.wip{
  display:inline-block;font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:#8E8279;border:1px solid var(--stone);padding:2px 8px;vertical-align:middle;
  margin-left:8px;position:relative;top:-1px;
}

/* ---- LOGO — jednoriadkový lockup, doladené proporcie ---- */
.lock{display:inline-flex;align-items:center;gap:12px}
.lock svg{display:block;flex:none}
.lock .w{display:flex;align-items:baseline;gap:9px;line-height:1}
.lock .w b{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:27px;letter-spacing:.015em}
.lock .w s{
  font-family:'Manrope',sans-serif;font-weight:500;font-size:9px;text-decoration:none;
  letter-spacing:.34em;text-transform:uppercase;color:var(--plum-soft);
  position:relative;top:-1px;
}
.lock.inv .w b{color:#FAF6F0}
.lock.inv .w s{color:#C9BFB2}
.lock.sm .w b{font-size:22px}
.lock.sm .w s{font-size:8px;letter-spacing:.3em}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(250,246,240,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:82px;gap:24px}
.nav{display:flex;gap:36px;font-size:13px;letter-spacing:.09em;color:var(--plum)}
.nav a:hover{color:var(--terra)}

.btn{
  display:inline-block;font-family:'Manrope',sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;background:var(--plum);color:var(--ivory);
  padding:14px 30px;border:1px solid var(--plum);cursor:pointer;white-space:nowrap;
  transition:background .4s ease,color .4s ease,border-color .4s ease;
}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn.ghost{background:transparent;color:var(--plum);border-color:var(--stone)}
.btn.ghost:hover{background:var(--plum);border-color:var(--plum);color:var(--ivory)}
.btn.light{background:var(--ivory);color:var(--plum);border-color:var(--ivory)}
.btn.light:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.onphoto{background:transparent;color:#FAF6F0;border-color:rgba(250,246,240,.55)}
.btn.onphoto:hover{background:#FAF6F0;color:var(--plum);border-color:#FAF6F0}

/* photo slot */
.ph{position:relative;background:linear-gradient(152deg,#EFE7DA 0%,#E3D9C9 48%,#D4C7B4 100%);overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph[data-ph]::after{
  content:attr(data-ph);position:absolute;left:0;right:0;bottom:0;padding:11px 16px;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#7A6C60;
  background:linear-gradient(to top,rgba(255,253,250,.9),rgba(255,253,250,0));
}
.ph.dim{background:linear-gradient(152deg,#D9CDBB 0%,#C6B7A1 52%,#AE9C86 100%)}
.ph.t{aspect-ratio:3/4}
.ph.s{aspect-ratio:1/1}
.ph.w{aspect-ratio:16/9}
.ph.p{aspect-ratio:21/9}

.figcap{font-size:11px;letter-spacing:.1em;color:var(--grey);margin-top:10px}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* sections */
section{padding:118px 0}
section.s{padding:78px 0}
.band{background:var(--sand)}
.deep{background:var(--plum);color:var(--ivory)}
.deep .eyebrow{color:var(--stone)}
.deep .grey,.deep .lead{color:#CBBBC2}
.hr{height:1px;background:var(--line);border:0}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.g2.top{align-items:start}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}

footer{padding:72px 0;border-top:1px solid var(--line);font-size:13px;color:var(--grey)}

@media (max-width:820px){
  h1{font-size:44px}
  h2{font-size:30px}
  h3{font-size:21px}
  .lead{font-size:17px}
  .wrap,.narrow{padding:0 26px}
  section{padding:72px 0}
  section.s{padding:52px 0}
  .g2,.g3{grid-template-columns:1fr;gap:36px}
  .nav{display:none}
  .hdr .wrap{height:66px}
  .btn{padding:12px 22px;font-size:10px;letter-spacing:.18em}
}