:root{
  --ink:#0d1512;
  --ink-soft:#16211c;
  --ivory:#eae2cd;
  --ivory-dim:#cfc6ab;
  --brass:#b8924c;
  --brass-bright:#d3ab68;
  --oxide:#6f2b2b;
  --steel:#3a4a47;
  --line: rgba(234,226,205,0.16);
  --radius: 2px;
  --maxw: 1160px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--ink);
  color:var(--ivory);
  font-family:'Inter', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--ivory);
}
a{color:inherit;}
img,svg{display:block; max-width:100%;}
button{font-family:inherit;}

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

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(13,21,18,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.headbar{display:flex; align-items:center; justify-content:space-between; padding-block:18px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand-mark{width:30px;height:30px;flex:none;}
.brand-name{font-family:'Fraunces',serif; font-size:1.05rem; letter-spacing:0.04em;}

nav.primary{display:flex; align-items:center; gap:30px;}
nav.primary a{font-size:0.92rem; text-decoration:none; color:var(--ivory-dim); padding-block:4px; border-block-end:1px solid transparent; transition:color .2s, border-color .2s;}
nav.primary a:hover, nav.primary a[aria-current="page"]{color:var(--brass-bright); border-block-end-color:var(--brass);}

.lang-picker{
  appearance:none; -webkit-appearance:none;
  background:var(--ink-soft); color:var(--ivory);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:8px 14px; font-size:0.85rem; cursor:pointer;
  min-width:110px;
}
.header-right{display:flex; align-items:center; gap:22px;}
.menu-toggle{display:none; background:none; border:none; color:var(--ivory); font-size:1.4rem; cursor:pointer;}

@media (max-width:860px){
  nav.primary{position:fixed; inset-inline-start:0; top:66px; width:100%; background:var(--ink); flex-direction:column; align-items:flex-start; gap:0; border-block-end:1px solid var(--line); transform:translateY(-130%); transition:transform .25s ease; padding:6px 28px 18px;}
  nav.primary.open{transform:translateY(0);}
  nav.primary a{width:100%; padding-block:12px; border-block:1px solid transparent; border-block-end-color:var(--line);}
  .menu-toggle{display:block;}
}

/* ---------- Sections ---------- */
section{padding-block:88px;}
.section-head{max-width:640px; margin-block-end:44px;}
.kicker{color:var(--brass); font-size:0.8rem; letter-spacing:0.02em; margin-block-end:10px;}
.section-head h2{font-size:2rem;}
.section-head p{color:var(--ivory-dim); margin-block-start:14px; font-size:1.02rem;}

/* ---------- Hero ---------- */
.hero{padding-block-start:64px; padding-block-end:70px; border-block-end:1px solid var(--line);}
.hero .wrap{display:grid; grid-template-columns:1.15fr 0.85fr; gap:60px; align-items:center;}
.hero h1{font-size:clamp(2.3rem, 4vw, 3.6rem); line-height:1.08;}
.hero p.lead{margin-block-start:22px; font-size:1.1rem; color:var(--ivory-dim); max-width:46ch;}
.hero .actions{display:flex; gap:16px; margin-block-start:36px; flex-wrap:wrap;}
.btn{
  display:inline-block; padding:13px 26px; border-radius:var(--radius);
  text-decoration:none; font-size:0.92rem; cursor:pointer; border:1px solid transparent;
  transition:background .2s, color .2s, border-color .2s;
}
.btn-primary{background:var(--brass); color:var(--ink); font-weight:600;}
.btn-primary:hover{background:var(--brass-bright);}
.btn-outline{border-color:var(--line); color:var(--ivory);}
.btn-outline:hover{border-color:var(--brass); color:var(--brass-bright);}

.hero-visual{position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;}
.hero-visual svg{width:100%; height:100%;}

/* ---------- Collections ---------- */
.collection-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.collection-card{background:var(--ink); padding:30px 24px; display:flex; flex-direction:column; gap:14px;}
.collection-card .watch-icon{width:56px; height:56px; margin-block-end:6px;}
.collection-card h3{font-size:1.15rem;}
.collection-card p{color:var(--ivory-dim); font-size:0.92rem; flex:1;}
.collection-card .price{color:var(--brass-bright); font-size:0.95rem; font-weight:600; padding-block-start:10px; border-block-start:1px solid var(--line);}
@media (max-width:900px){ .collection-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .collection-grid{grid-template-columns:1fr;} }

/* ---------- Craft ---------- */
.craft{background:var(--ink-soft); border-block:1px solid var(--line);}
.craft .wrap{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center;}
.craft-points{display:flex; flex-direction:column; gap:26px; margin-block-start:10px;}
.craft-point{display:flex; gap:16px; align-items:flex-start;}
.craft-point .num{font-family:'Fraunces',serif; color:var(--brass); font-size:1.3rem; flex:none; width:34px;}
.craft-point h4{font-size:1.02rem; margin-block-end:6px; color:var(--ivory);}
.craft-point p{color:var(--ivory-dim); font-size:0.92rem;}
@media (max-width:860px){ .craft .wrap{grid-template-columns:1fr;} }

/* ---------- Blog ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.blog-card{border:1px solid var(--line); padding:26px; transition:border-color .2s, transform .2s; display:flex; flex-direction:column; height:100%; text-decoration:none;}
.blog-card:hover{border-color:var(--brass); transform:translateY(-3px);}
.blog-card .cat{color:var(--brass); font-size:0.78rem; margin-block-end:12px;}
.blog-card h3{font-size:1.15rem; margin-block-end:12px;}
.blog-card p.excerpt{color:var(--ivory-dim); font-size:0.9rem; flex:1;}
.blog-card .read-more{margin-block-start:16px; font-size:0.85rem; color:var(--brass-bright);}
@media (max-width:900px){ .blog-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .blog-grid{grid-template-columns:1fr;} }

/* ---------- Post page ---------- */
.post-hero{padding-block:56px 30px; border-block-end:1px solid var(--line);}
.post-hero .cat{color:var(--brass); font-size:0.85rem; margin-block-end:14px;}
.post-hero h1{font-size:2.1rem;}
.post-hero .meta{color:var(--ivory-dim); font-size:0.85rem; margin-block-start:14px;}
article.post-body{max-width:680px; margin:0 auto; padding-block:56px;}
article.post-body h1{font-size:2.1rem; margin-block-end:14px;}
article.post-body .meta{color:var(--ivory-dim); font-size:0.85rem;}
article.post-body p{color:var(--ivory-dim); margin-block-end:18px; font-size:1.02rem;}
.back-link{display:inline-block; margin-block-end:26px; font-size:0.88rem; color:var(--brass-bright); text-decoration:none;}

/* ---------- Forms ---------- */
.form-panel{border:1px solid var(--line); padding:40px; background:var(--ink-soft);}
.field{margin-block-end:20px; display:flex; flex-direction:column; gap:8px;}
.field label{font-size:0.85rem; color:var(--ivory-dim);}
.field input, .field textarea, .field select{
  background:var(--ink); border:1px solid var(--line); color:var(--ivory);
  padding:12px 14px; border-radius:var(--radius); font-size:0.95rem; font-family:inherit;
}
.field input:focus, .field textarea:focus, .field select:focus{outline:2px solid var(--brass); outline-offset:1px; border-color:var(--brass);}
.field textarea{resize:vertical; min-height:110px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:640px){ .form-row{grid-template-columns:1fr;} }

.newsletter{background:var(--oxide); border-block:1px solid var(--line);}
.newsletter .wrap{display:flex; flex-wrap:wrap; gap:30px; align-items:center; justify-content:space-between; padding-block:56px;}
.newsletter h2{font-size:1.7rem; max-width:420px;}
.newsletter form{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start;}
.newsletter input[type=email]{padding:13px 16px; border:1px solid rgba(234,226,205,0.35); background:rgba(0,0,0,0.15); color:var(--ivory); border-radius:var(--radius); min-width:250px;}
.newsletter input[type=email]::placeholder{color:rgba(234,226,205,0.6);}
.newsletter label{position:absolute; width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

/* ---------- FAQ ---------- */
.faq-item{border-block-end:1px solid var(--line); padding-block:22px;}
.faq-item h3{font-size:1.05rem; margin-block-end:10px;}
.faq-item p{color:var(--ivory-dim);}

/* ---------- Footer ---------- */
footer{border-block-start:1px solid var(--line); padding-block:50px; color:var(--ivory-dim); font-size:0.88rem;}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; align-items:center;}
.social-links{display:flex; gap:16px;}
.social-links a{color:var(--ivory-dim); text-decoration:none; font-size:0.85rem;}
.social-links a:hover{color:var(--brass-bright);}

.page-hero{padding-block:60px 40px; border-block-end:1px solid var(--line);}
.page-hero h1{font-size:2.2rem;}
.page-hero p{color:var(--ivory-dim); margin-block-start:12px; max-width:56ch;}

/* ---------- Popups ---------- */
.popup-overlay{
  position:fixed; inset:0; background:rgba(6,10,8,0.78); z-index:200;
  display:none; align-items:center; justify-content:center; padding:24px;
}
.popup-overlay.show{display:flex;}
.popup-box{
  position:relative; width:100%; max-width:440px;
  background:var(--ink-soft); border:1px solid var(--brass);
  padding:38px 34px; box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.popup-close{
  position:absolute; inset-inline-end:16px; top:12px; background:none; border:none;
  color:var(--ivory-dim); font-size:1.5rem; line-height:1; cursor:pointer;
}
.popup-close:hover{color:var(--brass-bright);}
.popup-kicker{color:var(--brass); font-size:0.78rem; margin-block-end:10px;}
.popup-box h3{font-size:1.4rem; margin-block-end:12px;}
.popup-box p.popup-copy{color:var(--ivory-dim); font-size:0.95rem; margin-block-end:20px;}
.popup-code{
  display:inline-block; border:1px dashed var(--brass); color:var(--brass-bright);
  padding:10px 18px; font-family:'Fraunces', serif; font-size:1.1rem; letter-spacing:0.04em;
  margin-block-end:20px;
}
.popup-box form .field{margin-block-end:14px;}
.popup-box form .field input{width:100%;}
.popup-box .btn{width:100%; text-align:center;}

/* ---------- 404 ---------- */
.notfound{padding-block:120px; text-align:center;}
.notfound h1{font-size:2.6rem; margin-block-end:16px;}
.notfound p{color:var(--ivory-dim); margin-block-end:30px;}