:root{
--color-bg-primary:#16110E;
--color-bg-secondary:#241C18;
--color-surface-elevated:rgba(244,235,220,0.14);
--color-text-primary:#F4EBDC;
--color-text-secondary:#A99A8B;
--color-accent-gold:#C99A49;
--color-accent-green:#6B7A6A;
--color-accent-danger:#B93737;
--color-border-subtle:#A99A8B;
--color-surface-paper:#F4EBDC;
--color-text-on-light:#241C18;
--color-shadow-soft:0 4px 24px rgba(36,28,24,0.18);

--font-heading:'Playfair Display',Georgia,serif;
--font-body:'Inter','Segoe UI',Arial,sans-serif;

--fs-xl:clamp(2rem,4vw,2.8rem);
--fs-lg:clamp(1.7rem,3vw,2.2rem);
--fs-md:1.5rem;
--fs-base:1rem;
--fs-sm:0.92rem;

--lh-heading:1.25;
--lh-body:1.6;

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

--radius-sm:0.75rem;
--radius-md:1.25rem;

--container-main:1120px;
--container-narrow:900px;

--transition-fast:180ms ease;
}

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

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

body{
font-family:var(--font-body);
background:var(--color-bg-primary);
color:var(--color-text-primary);
line-height:var(--lh-body);
min-height:100vh;
overflow-x:hidden;
text-rendering:optimizeLegibility;
}

img,
picture,
video{
max-width:100%;
display:block;
height:auto;
border-radius:var(--radius-sm);
}

a{
color:var(--color-accent-gold);
text-decoration:none;
transition:color var(--transition-fast);
}

a:hover{
text-decoration:underline;
}

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

button{
cursor:pointer;
}

input,
textarea,
select{
background:var(--color-bg-secondary);
border:1px solid var(--color-border-subtle);
border-radius:var(--radius-md);
padding:0 var(--space-3);
min-height:44px;
}

input::placeholder,
textarea::placeholder{
color:var(--color-text-secondary);
}

input:focus,
textarea:focus,
select:focus{
border-color:var(--color-accent-gold);
box-shadow:0 0 0 2px rgba(201,154,73,0.3);
}

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

h1,h2,h3,h4,h5,h6{
font-family:var(--font-heading);
line-height:var(--lh-heading);
letter-spacing:-0.01em;
margin-bottom:var(--space-3);
}

h1{font-size:var(--fs-xl);}
h2{font-size:var(--fs-lg);}
h3{font-size:var(--fs-md);}
h4{font-size:1.15rem;}
h5{font-size:var(--fs-base);}
h6{font-size:var(--fs-sm);}

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

ul,ol{
margin-bottom:var(--space-3);
padding-left:1.25rem;
}

blockquote{
margin-bottom:var(--space-4);
padding-left:var(--space-3);
border-left:2px solid var(--color-accent-gold);
color:var(--color-text-secondary);
}

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

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

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

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

.surface{
background:var(--color-surface-elevated);
border:1px solid var(--color-border-subtle);
border-radius:var(--radius-sm);
box-shadow:var(--color-shadow-soft);
}

.surface-paper{
background:var(--color-surface-paper);
color:var(--color-text-on-light);
border-radius:var(--radius-sm);
}

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

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

.cluster{
display:flex;
flex-wrap:wrap;
gap:var(--space-3);
align-items:center;
min-width:0;
}

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

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

.button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--space-2);
min-height:44px;
padding:0 var(--space-4);
border-radius:var(--radius-md);
font-weight:600;
transition:all var(--transition-fast);
background:var(--color-bg-secondary);
color:var(--color-text-primary);
box-shadow:var(--color-shadow-soft);
}

.button-primary{
background:var(--color-accent-gold);
color:var(--color-text-on-light);
}

.button-danger{
background:var(--color-accent-danger);
color:#fff;
}

.button:hover{
filter:brightness(1.05);
}

.card{
padding:var(--space-4);
border-radius:var(--radius-sm);
background:var(--color-surface-elevated);
border:1px solid var(--color-border-subtle);
box-shadow:var(--color-shadow-soft);
}

.badge{
display:inline-flex;
align-items:center;
padding:0.25rem 0.6rem;
border-radius:999px;
font-size:0.8rem;
background:var(--color-accent-gold);
color:var(--color-text-on-light);
}

.badge-success{
background:var(--color-accent-green);
color:#fff;
}

.ribbon-21{
position:fixed;
top:0;
left:0;
width:100%;
background:var(--color-accent-danger);
color:#fff;
text-align:center;
padding:0.4rem var(--space-3);
font-size:0.85rem;
line-height:1.2;
z-index:1000;
}

.ribbon-21 a{
color:#fff;
}

body.has-ribbon{
padding-top:32px;
}

.header{
position:sticky;
top:32px;
z-index:900;
background:var(--color-bg-primary);
backdrop-filter:blur(6px);
}

@media (max-width:768px){
.container,
.container-narrow{
padding-inline:var(--space-4);
}
.section{
padding-block:var(--space-5);
}

.ribbon-21{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:0.125rem;
min-height:56px;
padding:0.35rem var(--space-3);
}

.ribbon-21-message{
font-size:clamp(0.68rem,3.5vw,0.78rem);
white-space:nowrap;
}

.ribbon-21-separator{
display:none;
}

body.has-ribbon{
padding-top:56px;
}
}

@media (prefers-reduced-motion:reduce){
*{
transition:none!important;
animation:none!important;
}
}