/* Vrajvik International — design tokens & shared styles
   Palette: paper beige / graphite ink / muted olive accent
   Type: Fraunces (headlines) + IBM Plex Sans (body/UI) */

:root{
  --paper: #EDE8DC;
  --paper-deep: #E2DBC9;
  --ink: #1E1C18;
  --graphite: #4A463E;
  --olive: #4F5D40;
  --olive-deep: #3B4632;
  --line: #C9C0A8;
  --white: #FFFFFF;
  --max: 1180px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans", -apple-system, Segoe UI, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Fraunces", Georgia, serif;
  font-weight:500;
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-.01em;
  color:var(--ink);
}
h1{font-size:clamp(2.4rem,5vw,4.1rem); font-weight:340;}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem);}
h3{font-size:1.25rem; font-weight:560;}
p{margin:0 0 1em; max-width:62ch;}
a{color:inherit;}
img{max-width:100%; display:block;}
.container{max-width:var(--max); margin:0 auto; padding:0 var(--gap);}
.section{padding:clamp(3rem,7vw,6rem) 0;}
.section-border{border-top:1px solid var(--line);}

/* Nav */
header.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(237,232,220,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--gap); max-width:var(--max); margin:0 auto;
}
.brand{font-family:"Fraunces", serif; font-size:1.15rem; font-weight:600; text-decoration:none; letter-spacing:-.01em;}
.brand span{color:var(--olive);}
nav.main-nav{display:flex; gap:1.9rem; align-items:center;}
nav.main-nav a{text-decoration:none; font-size:.94rem; color:var(--graphite);}
nav.main-nav a:hover{color:var(--ink);}
.nav-cta{
  background:var(--ink); color:var(--paper); padding:.62rem 1.15rem;
  border-radius:2px; text-decoration:none; font-size:.9rem;
}
.nav-cta:hover{background:var(--olive-deep);}
.nav-toggle{display:none;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.5rem; border-radius:2px; text-decoration:none;
  font-size:.95rem; border:1px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{background:var(--olive-deep);}
.btn-ghost{border-color:var(--ink); color:var(--ink); background:transparent;}
.btn-ghost:hover{background:var(--ink); color:var(--paper);}

/* Hero */
.hero{
  display:grid; grid-template-columns:1.1fr .9fr; gap:var(--gap);
  align-items:center; padding-top:clamp(2.5rem,6vw,4.5rem);
}
.hero-media{
  aspect-ratio:4/5; background:var(--paper-deep) center/cover no-repeat;
  border:1px solid var(--line);
}
.eyebrow{font-size:.85rem; color:var(--olive-deep); margin-bottom:.9rem;}

/* Cards */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap);}
.card{border-top:1px solid var(--line); padding-top:1.5rem;}
.card img{aspect-ratio:5/4; object-fit:cover; margin-bottom:1.1rem; border:1px solid var(--line);}
.card a.card-link{text-decoration:none; font-size:.92rem; border-bottom:1px solid var(--ink); padding-bottom:2px;}

/* Steps */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem;}
.step{border-top:2px solid var(--ink); padding-top:1rem;}
.step .num{font-family:"Fraunces",serif; font-size:1.6rem; color:var(--olive);}

/* Tables */
table{width:100%; border-collapse:collapse; margin:1.5rem 0 2rem; font-size:.94rem;}
th,td{text-align:left; padding:.75rem 1rem; border-bottom:1px solid var(--line);}
th{font-weight:600; color:var(--graphite); border-bottom:2px solid var(--ink);}

/* FAQ */
.faq-item{border-top:1px solid var(--line); padding:1.4rem 0;}
.faq-item h3{margin-bottom:.4rem; font-size:1.05rem;}

/* Forms */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.5rem;}
.field{display:flex; flex-direction:column; gap:.4rem;}
.field.full{grid-column:1/-1;}
label{font-size:.86rem; color:var(--graphite);}
input,select,textarea{
  font-family:inherit; font-size:.96rem; padding:.75rem .85rem;
  border:1px solid var(--line); background:var(--white); border-radius:2px;
  color:var(--ink);
}
textarea{min-height:110px; resize:vertical;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--olive); outline-offset:1px;}

/* Placeholder notice for unverified source content */
.source-note{
  background:var(--paper-deep); border:1px dashed var(--olive-deep);
  padding:1rem 1.2rem; font-size:.88rem; color:var(--graphite); margin:1.2rem 0;
}
.img-placeholder{
  aspect-ratio:5/4; border:1px dashed var(--line); background:var(--paper-deep);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:.82rem; color:var(--graphite); padding:1rem;
}

/* Footer */
footer{border-top:1px solid var(--line); padding:3.5rem 0 2rem; font-size:.9rem; color:var(--graphite);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--gap);}
footer h4{font-family:"IBM Plex Sans"; font-size:.85rem; color:var(--ink); margin-bottom:.9rem;}
footer a{text-decoration:none; color:var(--graphite); display:block; margin-bottom:.55rem;}
footer a:hover{color:var(--ink);}
.footer-bottom{margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.82rem;}

/* Answer-first content blocks */
.answer{font-size:1.08rem; color:var(--graphite); max-width:72ch;}
.kicker{text-transform:none; font-size:.85rem; color:var(--olive-deep); margin-bottom:.6rem;}

@media (max-width: 880px){
  .hero{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .form-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  nav.main-nav{display:none;}
}