@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Manrope:wght@300;400;500;600&display=swap');

:root {
  --bg: #11100f;
  --bg-soft: #171513;
  --line: #39312b;
  --text: #e6dfd8;
  --muted: #aaa099;
  --accent: #c4a084;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Manrope', Arial, sans-serif; font-size: 14px; font-weight: 300; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.age-bar { min-height: 29px; display: flex; justify-content: center; align-items: center; gap: 10px; background: #090909; color: #8f8780; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.age-bar span { color: var(--accent); font-size: 12px; font-weight: 600; }
.site-header { min-height: 73px; padding: 0 clamp(22px, 6.2vw, 100px); display: flex; align-items: center; gap: 30px; border-bottom: 1px solid #302a26; background: #100f0e; }
.brand { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 43px; line-height: 1; letter-spacing: .15em; color: var(--accent); white-space: nowrap; }
.brand-subtitle { font-size: 9px; letter-spacing: .19em; color: #aaa098; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: clamp(18px, 3.3vw, 52px); margin: 0 auto; }
.nav a, .footer-nav a { transition: color .2s ease; }
.nav a:hover, .footer-nav a:hover { color: var(--accent); }
.header-age { font-size: 17px; margin-left: auto; }
.header-link { color: var(--accent); font-size: 27px; padding: 5px; }
.menu-toggle { display: none; background: none; border: 0; color: var(--text); font-size: 24px; }
.hero { min-height: 435px; position: relative; display: flex; align-items: center; overflow: hidden; background: #100e0d url('assets/hero.jpg') center right / cover no-repeat; border-bottom: 1px solid #302a26; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,11,10,.98) 0%, rgba(12,11,10,.91) 28%, rgba(12,11,10,.3) 58%, rgba(12,11,10,.06) 100%), linear-gradient(0deg, rgba(12,11,10,.2), transparent 45%); }
.hero-content { position: relative; z-index: 1; padding: 55px clamp(24px, 6.7vw, 108px); max-width: 690px; }
.eyebrow { color: var(--accent); font-size: 10px; letter-spacing: .24em; margin: 0 0 17px; }
.hero h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(65px, 6vw, 90px); font-weight: 500; line-height: .95; letter-spacing: .11em; margin: 0 0 9px; color: #d0ad91; }
.hero-kicker { font-size: 13px; letter-spacing: .36em; margin: 0 0 24px; white-space: nowrap; }
.hero-copy { color: #d0c9c2; font-size: 16px; line-height: 1.8; margin: 0 0 25px; }
.button { display: inline-flex; gap: 22px; align-items: center; border: 1px solid var(--accent); padding: 15px 22px; color: #e5d8ce; font-size: 10px; letter-spacing: .16em; transition: background .2s, color .2s; }
.button span { font-size: 17px; line-height: 10px; }
.button:hover { background: var(--accent); color: #15110e; }
.hero-note { position: absolute; z-index: 1; right: 6.2%; bottom: 27px; display: flex; gap: 12px; align-items: center; color: #c1b8b0; }
.hero-note strong { font-size: 19px; font-weight: 400; }
.hero-note span { font-size: 8px; line-height: 1.6; letter-spacing: .06em; color: #aaa099; }
.section-wrap { padding-left: clamp(22px, 6.5vw, 104px); padding-right: clamp(22px, 6.5vw, 104px); }
.catalog { padding-top: 26px; padding-bottom: 39px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.section-heading h2 { font-size: 15px; font-weight: 400; letter-spacing: .18em; margin: 0; }
.section-heading > a { color: var(--accent); font-size: 9px; letter-spacing: .15em; }
.section-heading > a span { margin-left: 10px; font-size: 14px; }
.category-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.category-card { position: relative; min-height: 225px; aspect-ratio: 1.04 / 1; overflow: hidden; border: 1px solid #39312c; background: #171311; }
.category-card::after { content: ''; position: absolute; inset: 30% 0 0; background: linear-gradient(0deg, rgba(7,6,6,.94), transparent); }
.category-card img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform .45s ease, filter .3s ease; filter: brightness(.83); }
.category-card:hover img { transform: scale(1.045); filter: brightness(1); }
.category-card span { position: absolute; z-index: 1; left: 16px; right: 12px; bottom: 15px; font-size: 9px; letter-spacing: .1em; line-height: 1.5; }
.category-card b { font-size: 14px; font-weight: 400; margin-left: 8px; color: var(--accent); }
.qualities { display: grid; grid-template-columns: repeat(4, 1fr); background: #171513; border-top: 1px solid #211e1b; border-bottom: 1px solid #211e1b; padding: 23px clamp(22px, 6.5vw, 104px); }
.quality { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 0 20px; border-right: 1px solid #39312c; }
.quality:first-child { justify-content: flex-start; padding-left: 0; }
.quality:last-child { border-right: 0; }
.quality-icon { color: var(--accent); font-size: 30px; }
.quality p { color: #d0c8c1; font-size: 11px; line-height: 1.7; margin: 0; }
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding-top: 65px; padding-bottom: 65px; align-items: start; }
.about h2, .delivery h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(32px, 3vw, 44px); font-weight: 400; line-height: 1.08; margin: 0; color: #d0ad91; }
.about-copy { color: #bcb3ab; font-size: 14px; line-height: 1.9; margin: 4px 0 0; max-width: 590px; }
.delivery { border-top: 1px solid #302a26; border-bottom: 1px solid #302a26; background: radial-gradient(ellipse at 75% 20%, #241914 0, #131110 58%); }
.delivery-inner { padding-top: 50px; padding-bottom: 55px; }
.delivery h2 { margin-bottom: 14px; }
.delivery-inner > p:not(.eyebrow) { max-width: 620px; color: #bcb3ab; line-height: 1.8; margin: 0 0 24px; }
footer { background: #0c0c0b; }
.footer-main { display: flex; align-items: center; gap: 35px; padding-top: 25px; padding-bottom: 25px; }
.footer-brand { display: flex; align-items: center; gap: 20px; }
.footer-brand .brand { font-size: 33px; }
.footer-brand .brand-subtitle { font-size: 7px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px; margin: 0 auto; color: #aaa19a; font-size: 11px; }
.footer-contact { display: flex; align-items: center; gap: 13px; }
.footer-18 { border: 1px solid #a89583; border-radius: 50%; width: 37px; height: 37px; display: grid; place-items: center; color: #d0c2b6; font-size: 12px; }
.footer-contact p { color: #8e8780; font-size: 9px; line-height: 1.6; }
.copyright { border-top: 1px solid #211e1b; display: flex; justify-content: space-between; padding-top: 12px; padding-bottom: 15px; color: #6f6964; font-size: 9px; letter-spacing: .06em; }

@media (max-width: 1050px) {
  .site-header { gap: 18px; }
  .brand { font-size: 36px; }
  .brand-subtitle { display: none; }
  .nav { gap: 20px; }
  .category-grid { gap: 10px; }
  .category-card { min-height: 190px; }
  .category-card span { left: 10px; font-size: 8px; }
  .quality { gap: 12px; padding: 0 12px; }
  .footer-main { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .site-header { min-height: 65px; padding: 0 20px; gap: 14px; }
  .brand { font-size: 34px; }
  .menu-toggle { display: block; margin-left: auto; order: 3; }
  .header-age { margin-left: auto; font-size: 15px; }
  .header-link { display: none; }
  .nav { display: none; position: absolute; z-index: 10; top: 94px; left: 0; right: 0; padding: 20px; background: #11100f; border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; }
  .nav.is-open { display: flex; }
  .hero { min-height: 470px; background-position: 59% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(12,11,10,.97), rgba(12,11,10,.72) 60%, rgba(12,11,10,.25)); }
  .hero-content { padding: 50px 24px 70px; }
  .hero h1 { font-size: 67px; }
  .hero-kicker { white-space: normal; font-size: 10px; line-height: 1.8; letter-spacing: .25em; max-width: 310px; }
  .hero-copy { font-size: 14px; }
  .hero-note { right: 22px; bottom: 17px; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .category-card { min-height: 0; aspect-ratio: 1 / 1.05; }
  .category-card:last-child { grid-column: span 2; aspect-ratio: 2 / .9; }
  .category-card span { font-size: 9px; }
  .qualities { grid-template-columns: repeat(2, 1fr); gap: 20px 8px; padding-top: 24px; padding-bottom: 24px; }
  .quality, .quality:first-child { justify-content: flex-start; padding: 0 8px; border-right: 0; }
  .quality-icon { font-size: 25px; }
  .quality p { font-size: 10px; }
  .about { grid-template-columns: 1fr; gap: 22px; padding-top: 45px; padding-bottom: 45px; }
  .about h2, .delivery h2 { font-size: 36px; }
  .delivery-inner { padding-top: 40px; padding-bottom: 42px; }
  .footer-main { align-items: flex-start; flex-direction: column; gap: 20px; }
  .footer-nav { margin: 0; gap: 14px 20px; }
  .footer-contact { margin-top: 2px; }
}
@media (max-width: 390px) {
  .age-bar { font-size: 8px; }
  .hero h1 { font-size: 57px; }
  .hero-kicker { letter-spacing: .16em; }
  .section-heading h2 { font-size: 13px; }
  .category-card span { font-size: 8px; }
}