:root{
--color-background-base:#EFECE6;
--color-surface-card:#DFDAD2;
--color-text-primary:#3A3835;
--color-text-secondary:#6D6A67;
--color-accent-olive:#656D4A;
--color-border-separator:rgba(58,56,53,0.12);

--font-heading:'Cormorant Garamond',serif;
--font-body:'Inter','Helvetica Neue',Arial,sans-serif;

--text-xs:0.875rem;
--text-sm:1rem;
--text-md:1.125rem;
--text-lg:1.5rem;
--text-xl:2rem;
--text-xxl:2.75rem;

--space-1:0.25rem;
--space-2:0.5rem;
--space-3:1rem;
--space-4:1.5rem;
--space-5:2.5rem;
--space-6:4rem;

--radius-sm:12px;
--radius-md:16px;
--radius-lg:24px;
--radius-pill:20px;

--shadow-soft:0 2px 8px rgba(58,56,53,0.05);

--container-max:1200px;
--container-pad:1rem;
}

@media (min-width:768px){
:root{
--container-pad:2rem;
}
}

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

html{
scroll-behavior:smooth;
}

body{
font-family:var(--font-body);
font-size:var(--text-sm);
line-height:1.5;
color:var(--color-text-primary);
background:var(--color-background-base);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}

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

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

button{
cursor:pointer;
}

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

ul,
ol{
list-style:none;
}

h1,h2,h3,h4,h5,h6{
font-family:var(--font-heading);
letter-spacing:0.01em;
line-height:1.3;
font-weight:500;
margin-block-end:var(--space-3);
}

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

p{
margin-block-end:var(--space-3);
color:var(--color-text-primary);
}

small{
font-size:var(--text-xs);
color:var(--color-text-secondary);
}

ul,ol{
margin-block-end:var(--space-3);
padding-left:1.2em;
}

li{
margin-block-end:var(--space-2);
}

blockquote{
font-family:var(--font-heading);
font-style:italic;
margin-block-end:var(--space-4);
}

hr{
border:none;
border-top:1px solid var(--color-border-separator);
margin-block:var(--space-5);
}

:where(h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote):last-child{
margin-block-end:0;
}

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

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

.grid{
display:grid;
gap:var(--space-4);
}

.grid-2{
grid-template-columns:1fr;
}

.grid-3{
grid-template-columns:1fr;
}

@media (min-width:768px){
.grid-2{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.grid-3{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}

.flex{
display:flex;
gap:var(--space-3);
}

.flex-center{
align-items:center;
justify-content:center;
}

.flex-between{
    display: flex;
align-items:center;
justify-content:space-between;
}

.stack > * + *{
margin-top:var(--space-3);
}

.card{
background:var(--color-surface-card);
border:1px solid var(--color-border-separator);
border-radius:var(--radius-md);
padding:calc(var(--space-4) * 1.1) var(--space-4) calc(var(--space-4) * 0.9);
box-shadow:var(--shadow-soft);
position:relative;
overflow:hidden;
}

.card:hover{
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(58,56,53,0.08);
}

.surface{
background:var(--color-surface-card);
border-radius:var(--radius-lg);
border:1px solid var(--color-border-separator);
}

.media-frame{
position:relative;
overflow:hidden;
border-radius:var(--radius-md);
border:2px solid var(--color-accent-olive);
}

.media-frame.ratio-3-2{
aspect-ratio:3/2;
}

.media-frame.ratio-4-3{
aspect-ratio:4/3;
}

.button{
display:inline-flex;
align-items:center;
justify-content:center;
padding:0.65em 1.4em;
border-radius:var(--radius-pill);
background:var(--color-accent-olive);
color:#fff;
font-weight:500;
transition:all 0.2s ease;
}

.button:hover{
background:#545c3d;
text-decoration:underline;
}

.button:focus-visible{
outline:2px solid var(--color-accent-olive);
outline-offset:2px;
}

.button-ghost{
background:transparent;
color:var(--color-accent-olive);
border:1px solid var(--color-border-separator);
}

.button-ghost:hover{
background:rgba(101,109,74,0.08);
}

.input,
.textarea,
.select{
width:100%;
padding:0.7em 0.9em;
border-radius:var(--radius-sm);
border:1px solid var(--color-border-separator);
background:transparent;
}

.input:focus,
.textarea:focus,
.select:focus{
border-color:var(--color-accent-olive);
background:rgba(101,109,74,0.05);
}

.label{
display:block;
margin-bottom:var(--space-1);
font-size:var(--text-xs);
color:var(--color-text-secondary);
}

.separator{
height:1px;
background:var(--color-border-separator);
width:100%;
}

.overline{
font-size:var(--text-xs);
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--color-accent-olive);
margin-bottom:var(--space-2);
display:block;
}

.link{
color:var(--color-text-primary);
text-decoration:underline;
text-underline-offset:2px;
}

.link:hover{
color:var(--color-accent-olive);
}

:focus-visible{
outline:2px solid var(--color-accent-olive);
outline-offset:2px;
}

body,html{
max-width:100%;
overflow-x:hidden;
}