:root{
--color-parchment:#faf7f2;
--color-forest:#1a2e22;
--color-gold:#d4af37;
--color-emerald:#10b981;
--color-shadow:rgba(26,46,34,0.10);
--color-headline:#1a2e22;
--color-body:#2c3a2f;
--color-navlink:#faf7f2;
--color-navlink-active:#d4af37;

--font-heading:"Lora",serif;
--font-body:"Montserrat","Montserrat Hungarian",Arial,sans-serif;

--text-xxl:clamp(2rem,4vw,2.8rem);
--text-xl:clamp(1.6rem,3vw,2rem);
--text-lg:clamp(1.25rem,2.5vw,1.5rem);
--text-md:1.125rem;
--text-base:1rem;
--text-sm:0.95rem;

--space-xs:0.5rem;
--space-sm:1rem;
--space-md:1.5rem;
--space-lg:2.5rem;
--space-xl:4rem;

--radius-sm:4px;
--radius-md:8px;
--radius-lg:12px;

--shadow-soft:0 4px 24px var(--color-shadow);

--container-max:960px;
}

*,
*::before,
*::after{
box-sizing:border-box;
margin:0;
padding:0;
}

html{
font-size:16px;
-webkit-text-size-adjust:100%;
}

body{
font-family:var(--font-body);
font-size:var(--text-base);
color:var(--color-body);
background:var(--color-parchment);
line-height:1.6;
min-height:100vh;
text-rendering:optimizeLegibility;
}

img,
picture,
video,
canvas,
svg{
display:block;
max-width:100%;
height:auto;
}

button,
input,
select,
textarea{
font:inherit;
color:inherit;
background:none;
border:none;
outline:none;
}

ul{
list-style:none !important;
padding:0;
margin:0;
}

a{
text-decoration:none;
color:inherit;
}

h1,h2,h3,h4{
font-family:var(--font-heading);
color:var(--color-headline);
letter-spacing:-0.01em;
line-height:1.2;
}

h1{font-size:var(--text-xxl);}
h2{font-size:var(--text-xl);}
h3{font-size:var(--text-lg);}
h4{font-size:var(--text-md);}

p{
font-size:var(--text-base);
margin-block-end:var(--space-md);
}

h1{margin-block-end:var(--space-md);}
h2{margin-block-end:var(--space-sm);}
h3{margin-block-end:var(--space-sm);}
h4{margin-block-end:var(--space-xs);}

ul,
ol{
margin-block-end:var(--space-md);
}

blockquote{
margin-block-end:var(--space-md);
padding-left:var(--space-sm);
border-left:3px solid var(--color-gold);
}

*:last-child{
margin-block-end:0;
}

.container{
width:100%;
max-width:var(--container-max);
margin-inline:auto;
padding-inline:var(--space-md);
}

.section{
padding-block:var(--space-xl);
}

.surface{
background:var(--color-parchment);
border:2px solid var(--color-gold);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-soft);
padding:var(--space-md);
}

.card{
background:var(--color-parchment);
border:2px solid var(--color-gold);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-soft);
padding:var(--space-md);
transition:transform 160ms ease-in-out, box-shadow 160ms ease-in-out;
}

@media (hover:hover){
.card:hover{
transform:translateY(-2px);
box-shadow:0 8px 28px var(--color-shadow);
}
}

.button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.5rem;
background:var(--color-emerald);
color:#fff;
padding:0.7rem 1.2rem;
border-radius:var(--radius-md);
font-weight:600;
cursor:pointer;
transition:all 160ms ease-in-out;
border:2px solid transparent;
}

.button:hover,
.button:focus-visible{
transform:scale(1.04);
border-color:var(--color-gold);
}

.button:active{
transform:scale(0.98);
}

.input,
textarea,
select{
width:100%;
padding:0.6rem 0.7rem;
border-radius:var(--radius-sm);
border:1px solid rgba(0,0,0,0.15);
background:#fff;
}

.input:focus,
textarea:focus,
select:focus{
border-color:var(--color-gold);
}

.nav-toggle{
display:flex;
flex-direction:column;
gap:4px;
cursor:pointer;
}

.flex{
display:flex;
gap:var(--space-md);
min-width:0;
}

.flex > *{
min-width:0;
}

.stack{
display:flex;
flex-direction:column;
gap:var(--space-md);
min-width:0;
}

.stack > *{
min-width:0;
}

.text-center{
text-align:center;
}

.full-width{
width:100%;
}

.media-frame{
border:2px solid var(--color-gold);
border-radius:var(--radius-md);
box-shadow:var(--shadow-soft);
overflow:hidden;
}

.hr-accent{
height:2px;
background:var(--color-gold);
width:100%;
margin-block:var(--space-md);
}

@media (max-width:768px){
.section{
padding-block:var(--space-lg);
}

.container{
padding-inline:var(--space-sm);
}

body{
font-size:0.95rem;
}
}
html, body {
  overflow-x: clip;
  max-width: 100%;
}

img, video, svg {
  max-width: 100%;
  height: auto;
}