/* ============================================================
   Kamila Glinka Portraits — site-wide dark brand stylesheet
   ============================================================ */

:root{
  --bg:        #1c1c1a;
  --bg-raised: #232320;
  --ink:       #F2F0EA;
  --ink-dim:   #C9C5BA;
  --ink-mute:  #8f8a7c;
  --accent:    #B9AF98;
  --line:      #3a3833;
  --serif:     'Lora', serif;
  --sans:      'Poppins', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

.eyebrow{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin:0 0 14px;
}
h1,h2,h3{ font-family:var(--sans); font-weight:700; letter-spacing:-.01em; margin:0; color:var(--ink); text-transform:uppercase; }
h1{ font-size:clamp(2.4rem,5.6vw,4.6rem); line-height:.98; }
h2{ font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1.05; }
h3{ font-size:1.05rem; letter-spacing:.02em; }
p{ color:var(--ink-dim); margin:0 0 1em; }
.serif-italic{ font-family:var(--serif); font-style:italic; color:var(--ink-dim); font-weight:400; }

/* ---------- Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(28,28,26,.92);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:20px 32px; max-width:1180px; margin:0 auto; }
.nav .logo{ font-family:var(--serif); font-size:1.25rem; letter-spacing:.02em; color:var(--ink); border:1px solid var(--line); padding:6px 16px; white-space:nowrap; }
.nav .logo b{ font-weight:600; }
.nav ul{ list-style:none; display:flex; margin:0; padding:0; }
.nav ul li{ margin-left:32px; }
.nav a{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); font-weight:600; transition:color .2s; white-space:nowrap; }
.nav a:hover, .nav a.active{ color:var(--ink); }
.nav-toggle{ display:none; background:none; border:0; color:var(--ink); font-size:1.4rem; cursor:pointer; }
@media (max-width:860px){
  .nav ul{ position:fixed; inset:64px 0 0 0; background:var(--bg); flex-direction:column; align-items:flex-start;
    padding:36px; transform:translateY(-110%); transition:transform .35s ease; }
  .nav ul li{ margin-left:0; margin-bottom:22px; }
  .nav ul.open{ transform:translateY(0); }
  .nav-toggle{ display:block; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:14px 30px; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; border:1px solid var(--ink); color:var(--ink); transition:.2s;
}
.btn:hover{ background:var(--ink); color:var(--bg); }
.btn-solid{ background:var(--ink); color:var(--bg); }
.btn-solid:hover{ background:transparent; color:var(--ink); }
.btn-row{ display:flex; flex-wrap:wrap; }
.btn-row > *{ margin:0 16px 12px 0; }

/* ---------- Hero ---------- */
.hero{ padding:86px 0 64px; }
.hero .quote-top{ text-align:right; max-width:280px; margin-left:auto; font-size:.95rem; line-height:1.5; }
.hero-grid{ display:flex; flex-wrap:wrap; align-items:flex-end; margin-top:26px; margin-right:-56px; }
.hero-copy{ flex:1 1 420px; padding-right:56px; margin-bottom:20px; }
.hero-copy p{ font-size:1.05rem; max-width:46ch; }
.hero-img{ flex:1 1 380px; margin-right:56px; margin-bottom:20px; aspect-ratio:4/5; overflow:hidden; }
.hero-img img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:860px){ .hero-img{ order:-1; aspect-ratio:16/10; } }

/* ---------- Sections ---------- */
section{ padding:78px 0; border-top:1px solid var(--line); }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head p{ font-size:1.02rem; }

/* Offer cards (home) */
.offer-grid{ display:flex; flex-wrap:wrap; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.offer-card{ background:var(--bg); padding:34px 26px; transition:.2s; flex:1 1 240px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.offer-card:hover{ background:var(--bg-raised); }
.offer-card .num{ font-family:var(--serif); font-style:italic; color:var(--accent); font-size:.95rem; display:block; margin-bottom:22px; }
.offer-card h3{ margin-bottom:10px; }
.offer-card p{ font-size:.9rem; margin:0; }

/* Print teaser */
.split{ display:flex; flex-wrap:wrap; align-items:center; margin-right:-56px; }
.split .img-col{ flex:1 1 340px; margin-right:56px; margin-bottom:24px; }
.split .img-col img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.split > div:not(.img-col){ flex:1.3 1 380px; margin-right:56px; margin-bottom:24px; }
@media (max-width:860px){ .split .img-col{ order:-1; } }

/* ---------- Carousel (Portfolio) ---------- */
.cat{ padding:56px 0; border-top:1px solid var(--line); }
.cat-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; margin-bottom:26px; }
.cat-head .num{ font-family:var(--serif); font-style:italic; color:var(--accent); font-size:1rem; }
.cat-sub{ color:var(--ink-dim); font-size:.95rem; max-width:44ch; margin-top:10px; }
.carousel-wrap{ position:relative; }
.carousel{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; padding-bottom:4px;
}
.carousel::-webkit-scrollbar{ display:none; }
.carousel figure{ margin:0 14px 0 0; flex:0 0 auto; scroll-snap-align:start; height:400px; }
.carousel img{ height:100%; width:auto; object-fit:cover; cursor:grab; }
.carousel.dragging img{ cursor:grabbing; }
@media (max-width:640px){ .carousel figure{ height:280px; } }

.car-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:rgba(28,28,26,.82); color:var(--ink); font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.car-btn:hover{ background:var(--ink); color:var(--bg); }
.car-prev{ left:-8px; } .car-next{ right:-8px; }
@media (max-width:640px){ .car-btn{ display:none; } }

.subrow-label{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); margin:28px 0 12px; }

/* ---------- Pricing tiers ---------- */
.tiers{ display:flex; flex-wrap:wrap; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.tier{ background:var(--bg); padding:40px 30px; flex:1 1 260px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.tier h3{ margin-bottom:20px; }
.tier ul{ list-style:none; margin:0 0 26px; padding:0; }
.tier li{ font-size:.86rem; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.02em; padding:5px 0; border-top:1px solid var(--line); }
.tier li:first-child{ border-top:0; }
.tier .price{ font-family:var(--serif); font-size:1.8rem; color:var(--ink); }
.tier .price span{ font-size:.7rem; letter-spacing:.14em; color:var(--accent); display:block; text-transform:uppercase; font-family:var(--sans); margin-top:4px; }

.note{ font-family:var(--serif); font-style:italic; color:var(--ink-mute); font-size:.92rem; margin-top:28px; }

/* Simple single-price offer block (used on preise.html) */
.offer-block{ display:flex; flex-wrap:wrap; padding:44px 0; border-top:1px solid var(--line); align-items:flex-start; margin-right:-48px; }
.offer-block:first-of-type{ border-top:0; }
.offer-block img{ width:100%; aspect-ratio:3/2; object-fit:cover; flex:1 1 320px; margin-right:48px; margin-bottom:20px; }
.offer-block > div{ flex:1 1 320px; margin-right:48px; margin-bottom:20px; }
.offer-block .price-line{ display:flex; align-items:baseline; margin:20px 0 12px; }
.offer-block .price-line .amt{ font-family:var(--serif); font-size:2.2rem; margin-right:10px; }
.offer-block .price-line .cap{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.offer-block ul{ list-style:none; padding:0; margin:0 0 14px; }
.offer-block li{ font-size:.88rem; color:var(--ink-dim); padding:4px 0; }
.offer-block li:before{ content:"— "; color:var(--accent); }

/* Print price table */
table.pricetable{ width:100%; border-collapse:collapse; margin:18px 0 30px; font-size:.86rem; }
table.pricetable th, table.pricetable td{ border:1px solid var(--line); padding:10px 12px; text-align:center; color:var(--ink-dim); }
table.pricetable th{ color:var(--ink); text-transform:uppercase; letter-spacing:.06em; font-size:.74rem; font-weight:600; }
table.pricetable td:first-child, table.pricetable th:first-child{ text-align:left; color:var(--ink); }

/* ---------- Contact ---------- */
.contact-grid{ display:flex; flex-wrap:wrap; margin-right:-56px; }
.contact-form{ flex:1.1 1 340px; margin-right:56px; margin-bottom:24px; }
.contact-info{ flex:.9 1 260px; margin-right:56px; margin-bottom:24px; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.field input, .field textarea{
  width:100%; background:transparent; border:1px solid var(--line); color:var(--ink);
  padding:12px 14px; font-family:var(--sans); font-size:.95rem;
}
.field textarea{ min-height:130px; resize:vertical; }
.contact-info a{ display:block; margin-bottom:14px; font-size:1rem; }
.contact-info .lbl{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:22px 0 6px; }
.contact-info .lbl:first-child{ margin-top:0; }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--line); padding:56px 0 30px; }
.foot-grid{ display:flex; flex-wrap:wrap; margin-bottom:40px; margin-right:-36px; }
.foot-grid > div{ margin-right:36px; margin-bottom:20px; }
.foot-grid h3{ font-family:var(--serif); font-style:italic; text-transform:none; font-weight:400; font-size:1.2rem; margin-bottom:8px; }
.foot-grid p{ font-size:.86rem; max-width:32ch; }
.foot-col .lbl{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.foot-col a{ display:block; font-size:.85rem; color:var(--ink-dim); margin-bottom:8px; }
.foot-col a:hover{ color:var(--ink); }
.foot-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; border-top:1px solid var(--line); padding-top:22px; font-size:.76rem; color:var(--ink-mute); }