:root{

  --a53-primary:#B85C2E;
--a53-accent:#1F6E66;
--a53-bg:#FFF8EF;
--a53-surface:#FFF1DD;

  --a53-text:#2B1710;
--a53-soft:#7A4A30;
--a53-line:#F0D5B0;

  --a53-heading:'Marcellus',
serif;
--a53-body:'Karla',
sans-serif;

}

*{
box-sizing:border-box}
html{
scroll-behavior:smooth}
body.a53-body{
margin:0;
background:var(--a53-bg);
color:var(--a53-text);
font-family:var(--a53-body);
font-size:17px;
line-height:1.65}

a{
color:var(--a53-accent);
text-decoration-thickness:1px;
text-underline-offset:3px}
img{
max-width:100%;
height:auto;
display:block}

main,
.a53-main{
padding-top:0!important;
margin-top:0!important}
.a53-container{
width:min(1160px,
calc(100% - 40px));
margin-inline:auto}

.a53-header{
position:sticky;
top:0;
z-index:9000;
background:rgba(255,
248,
239,
.96);
border-bottom:1px solid var(--a53-line);
backdrop-filter:blur(14px)}

.a53-header-inner{
min-height:78px;
display:flex;
align-items:center;
gap:2rem;
width:min(1240px,
calc(100% - 36px));
margin:auto}

.a53-brand-link{
display:inline-flex;
align-items:center;
gap:.85rem;
color:var(--a53-text);
text-decoration:none;
flex-shrink:0}
.a53-brand-logo{
width:auto}
.a53-brand-name{
font-family:var(--a53-heading);
font-size:1.55rem;
letter-spacing:.04em;
text-transform:uppercase;
white-space:nowrap}

.a53-nav-desktop{
display:none}
.a53-nav-desktop-list{
display:flex;
gap:1.05rem;
list-style:none;
margin:0;
padding:0;
align-items:center;
justify-content:center;
flex-wrap:wrap}
.a53-nav-desktop-list a{
color:var(--a53-text);
text-decoration:none;
font-weight:700;
font-size:.94rem;
padding:.4rem .15rem;
border-bottom:2px solid transparent}
.a53-nav-desktop-list a:hover{
border-bottom-color:var(--a53-primary)}

.a53-header-actions{
display:flex;
align-items:center;
gap:.75rem;
margin-left:auto;
flex-shrink:0}
.a53-btn{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
padding:.78rem 1.15rem;
font-weight:800;
text-decoration:none;
border:1px solid transparent;
line-height:1.1}
.a53-btn--cta{
background:var(--a53-primary);
color:#fff!important}
.a53-btn--ghost{
border-color:rgba(255,
255,
255,
.72);
color:#fff!important;
background:rgba(43,
23,
16,
.22)}

.a53-burger{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
min-width:42px;
min-height:42px;
padding:8px;
background:#fff;
border:1.5px solid rgba(0,
0,
0,
.18);
border-radius:8px;
color:#1a1a1a;
cursor:pointer;
z-index:10000;
flex-shrink:0}
.a53-burger-bars{
display:flex;
flex-direction:column;
gap:4px;
width:24px;
height:16px}
.a53-burger-bars span{
display:block;
height:2px;
background:currentColor;
border-radius:2px}

.a53-nav-mobile{
display:none}
.a53-drawer-overlay{
position:fixed;
inset:0;
background:rgba(0,
0,
0,
.35);
z-index:9100}
.a53-drawer-close{
position:absolute;
top:18px;
right:18px;
width:42px;
height:42px;
border:1px solid var(--a53-line);
background:#fff;
color:#1a1a1a;
border-radius:8px;
font-size:1.5rem}

.a53-nav-mobile-list{
list-style:none;
margin:0;
padding:0;
display:grid;
gap:.35rem}
.a53-nav-mobile-list a{
display:block;
padding:1rem;
border-bottom:1px solid #ead5bd;
color:#1a1a1a;
text-decoration:none;
font-weight:800}
.a53-drawer-cta{
display:block!important;
margin:2rem 1.5rem 1.5rem!important;
padding:1rem 1.5rem!important;
text-align:center!important;
background:var(--a53-accent)!important;
color:#fff!important;
border-radius:8px!important;
font-weight:800!important;
text-decoration:none!important}

.a53-hero{
position:relative;
overflow:hidden;
min-height:72vh;
display:flex;
align-items:end;
background:var(--a53-surface)}
.a53-hero-bg{
position:absolute;
inset:0;
width:100%;
height:115%;
object-fit:cover;
transform:translateY(calc(var(--a53-scroll,
0px) * .08));
filter:saturate(1.04)}
.a53-hero-inner{
position:relative;
z-index:2;
padding:9rem 0 5rem;
color:#fff;
text-shadow:0 2px 14px rgba(0,
0,
0,
.42)}
.a53-hero-inner h1{
font-family:var(--a53-heading);
font-size:clamp(2.7rem,
6vw,
5.9rem);
line-height:.98;
margin:.3rem 0 1rem;
max-width:920px;
letter-spacing:0;
color:#fff!important}
.a53-hero h1,
.a53-hero h1 *,
.a53-hero-inner h1,
.a53-hero-inner h1 *,
.a53-hero h1 .a53-typewriter,
.a53-hero h1 .a53-typewriter *,
.a53-hero h1 .a53-rotator,
.a53-hero h1 .a53-rotator *,
.a53-hero h1 [class*="typewriter"],
.a53-hero h1 [class*="typewriter"] *,
.a53-hero h1 [class*="rotator"],
.a53-hero h1 [class*="rotator"] *,
.a53-hero h1 [class*="typed"],
.a53-hero h1 [class*="typed"] *{
color:#fff!important;
-webkit-text-fill-color:#fff!important}
.a53-hero-inner p{
max-width:760px;
font-size:1.2rem}
.a53-hero-kicker{
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em}
.a53-hero-actions{
display:flex;
gap:.8rem;
flex-wrap:wrap;
margin-top:1.5rem}

.a53-hero-video-wrap{
position:absolute;
inset:0;
pointer-events:none}
.a53-hero-video{
position:absolute;
top:50%;
left:50%;
width:100vw;
height:56.25vw;
min-height:100%;
min-width:177.78vh;
transform:translate(-50%,
-50%);
border:0}
.a53-hero-video-overlay{
position:absolute;
inset:0;
background:linear-gradient(180deg,
rgba(0,
0,
0,
.35) 0%,
rgba(0,
0,
0,
.65) 100%)}
.a53-hero--has-video .a53-hero-inner{
color:#fff}

.a53-editorial{
padding:5rem 0;
background:var(--a53-bg)}
.a53-editorial-grid{
display:grid;
grid-template-columns:1.6fr .8fr;
gap:2rem;
align-items:start}
.a53-editorial h2,
.a53-section-head h2,
.a53-tool-cta h2{
font-family:var(--a53-heading);
font-size:clamp(2rem,
3vw,
3.15rem);
line-height:1.05;
margin:0 0 1rem}
.a53-editorial article,
.a53-editorial aside,
.a53-teasers div{
background:#fff;
border:1px solid var(--a53-line);
border-radius:8px;
padding:1.5rem}
.a53-editorial aside{
border-top:5px solid var(--a53-accent)}
.a53-teasers{
display:grid;
grid-template-columns:repeat(3,
1fr);
gap:1rem;
margin-top:1rem}
.a53-teasers h3{
font-family:var(--a53-heading);
font-size:1.45rem;
margin:.1rem 0 .4rem}

.a53-home-by-category{
padding:4rem 0;
background:#fff1dd}
.a53-section-head{
display:flex;
align-items:end;
justify-content:space-between;
gap:1rem;
margin-bottom:1.5rem}
.a53-section-kicker{
font-weight:900;
color:var(--a53-primary);
text-transform:uppercase;
letter-spacing:.08em;
margin:0}

.a53-category-strip{
padding:1.25rem 0;
border-top:1px solid var(--a53-line)}
.a53-category-strip-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
margin-bottom:1rem}
.a53-category-strip h3{
font-family:var(--a53-heading);
font-size:2rem;
margin:0}
.a53-category-strip h3 a{
color:var(--a53-text);
text-decoration:none}
.a53-post-row{
display:grid;
grid-template-columns:repeat(3,
1fr);
gap:1rem}

.a53-card{
background:#fff;
border:1px solid var(--a53-line);
border-radius:8px;
overflow:hidden}
.a53-card img{
width:100%;
aspect-ratio:16/10;
object-fit:cover}
.a53-card-body{
padding:1rem}
.a53-card time{
font-size:.85rem;
color:var(--a53-soft);
font-weight:700}
.a53-card h4{
font-family:var(--a53-heading);
font-size:1.35rem;
line-height:1.15;
margin:.35rem 0}
.a53-card h4 a{
color:var(--a53-text);
text-decoration:none}
.a53-empty{
background:#fff;
border:1px dashed var(--a53-primary);
padding:1rem;
border-radius:8px}

.a53-tool-cta{
padding:4rem 0;
background:var(--a53-accent);
color:#fff}
.a53-tool-cta-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:1.5rem}
.a53-tool-cta p{
max-width:620px}
.a53-tool-cta .a53-btn--cta{
background:#fff;
color:var(--a53-accent)!important}

.a53-footer{
background:#2b1710;
color:#fff8ef;
padding:4rem 0 0}
.a53-footer-inner{
width:min(1160px,
calc(100% - 40px));
margin:auto;
display:grid;
grid-template-columns:1.4fr 1fr 1fr 1fr;
gap:2rem}
.a53-footer a{
color:#fff8ef;
text-decoration:underline}
.a53-footer-title{
font-family:var(--a53-heading);
font-size:1.3rem;
margin:0 0 1rem}
.a53-footer-links{
list-style:none;
margin:0;
padding:0;
display:grid;
gap:.55rem}
.a53-footer-brand-pitch{
color:#f7dfc5}
.a53-footer-logo{
max-width:120px}
.a53-footer-brand-cta{
display:inline-block;
margin-top:.8rem;
font-weight:800}
.a53-footer-bottom{
border-top:1px solid rgba(255,
255,
255,
.18);
margin-top:3rem;
padding:1rem 2rem;
text-align:center;
color:#f7dfc5}

.a53-cat-hero{
position:relative;
height:320px;
max-height:350px;
overflow:hidden}
.a53-cat-hero-bg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:1}
.a53-cat-hero .a53-container{
position:relative;
z-index:2;
height:100%;
display:flex;
flex-direction:column;
justify-content:flex-end;
background:linear-gradient(180deg,
transparent 30%,
rgba(0,
0,
0,
.75) 100%)}
.a53-cat-hero h1{
color:#fff;
text-shadow:0 2px 14px rgba(0,
0,
0,
.7);
font-family:var(--a53-heading)}

.a53-persona-photo{
max-width:320px;
border-radius:8px;
margin:0 0 1.25rem;
border:1px solid var(--a53-line)}

@keyframes rpRoundedToSquare{
0%{
border-radius:999px}
100%{
border-radius:8px}
}
.a53-btn--cta:hover{
animation:rpRoundedToSquare .28s ease forwards}

@keyframes rpFloatLinks{
0%,
100%{
transform:translateY(0)}
50%{
transform:translateY(-4px)}
}
.a53-floating-sidebar a{
animation:rpFloatLinks 3s ease-in-out infinite}

@keyframes rpNewBadge{
0%{
transform:scale(.96);
opacity:.75}
50%{
transform:scale(1.05);
opacity:1}
100%{
transform:scale(.96);
opacity:.75}
}
.a53-badge-new{
animation:rpNewBadge 2.4s ease-in-out infinite}

.a53-card,
.a53-cat-card{
transition:box-shadow .25s ease,
transform .25s ease}
.a53-card:hover,
.a53-cat-card:hover{
box-shadow:0 18px 44px rgba(31,
110,
102,
.18);
transform:translateY(-4px)}

@media(min-width:1024px){
.a53-nav-desktop{
display:flex;
flex:1;
justify-content:center;
margin:0 1rem}
.a53-burger,
.a53-burger-wrap{
display:none!important}
.a53-drawer-cta{
display:none!important}
}

@media(max-width:1023px){
.a53-header-inner{
min-height:68px}
.a53-header-cta-desktop,
.a53-header [class*="-btn--cta"]:not([class*="-drawer-"]){
display:none!important}
.a53-header-actions,
.a53-burger-wrap,
.a53-header [class*="actions"]{
display:flex!important;
align-items:center!important;
gap:8px!important;
flex-shrink:0!important}
.a53-burger{
display:inline-flex!important}
.a53-nav-mobile.is-open{
display:flex;
flex-direction:column;
position:fixed;
top:0;
right:0;
bottom:0;
width:86%;
max-width:380px;
background:#fff8ef;
padding:4.5rem 1.5rem 2rem;
z-index:9999;
overflow-y:auto;
box-shadow:-10px 0 30px rgba(0,
0,
0,
.3)}
.a53-editorial-grid,
.a53-teasers,
.a53-post-row,
.a53-footer-inner{
grid-template-columns:1fr}
.a53-tool-cta-inner{
display:block}
.a53-section-head{
display:block}
.a53-hero-inner{
padding:7rem 0 3rem}
}



/* Zellige motif utilities: optional section helpers, all a53-prefixed. */
.a53-zellige-tone-01 {
  --a53-zellige-alpha: 0.04;
  --a53-zellige-size: 20px;
}
.a53-zellige-tone-02 {
  --a53-zellige-alpha: 0.05;
  --a53-zellige-size: 22px;
}
.a53-zellige-tone-03 {
  --a53-zellige-alpha: 0.06;
  --a53-zellige-size: 24px;
}
.a53-zellige-tone-04 {
  --a53-zellige-alpha: 0.07;
  --a53-zellige-size: 26px;
}
.a53-zellige-tone-05 {
  --a53-zellige-alpha: 0.08;
  --a53-zellige-size: 28px;
}
.a53-zellige-tone-06 {
  --a53-zellige-alpha: 0.09;
  --a53-zellige-size: 30px;
}
.a53-zellige-tone-07 {
  --a53-zellige-alpha: 0.10;
  --a53-zellige-size: 32px;
}
.a53-zellige-tone-08 {
  --a53-zellige-alpha: 0.03;
  --a53-zellige-size: 34px;
}
.a53-zellige-tone-09 {
  --a53-zellige-alpha: 0.04;
  --a53-zellige-size: 18px;
}
.a53-zellige-tone-10 {
  --a53-zellige-alpha: 0.05;
  --a53-zellige-size: 20px;
}
.a53-zellige-tone-11 {
  --a53-zellige-alpha: 0.06;
  --a53-zellige-size: 22px;
}
.a53-zellige-tone-12 {
  --a53-zellige-alpha: 0.07;
  --a53-zellige-size: 24px;
}
.a53-zellige-tone-13 {
  --a53-zellige-alpha: 0.08;
  --a53-zellige-size: 26px;
}
.a53-zellige-tone-14 {
  --a53-zellige-alpha: 0.09;
  --a53-zellige-size: 28px;
}
.a53-zellige-tone-15 {
  --a53-zellige-alpha: 0.10;
  --a53-zellige-size: 30px;
}
.a53-zellige-tone-16 {
  --a53-zellige-alpha: 0.03;
  --a53-zellige-size: 32px;
}
.a53-zellige-tone-17 {
  --a53-zellige-alpha: 0.04;
  --a53-zellige-size: 34px;
}
.a53-zellige-tone-18 {
  --a53-zellige-alpha: 0.05;
  --a53-zellige-size: 18px;
}
.a53-zellige-tone-19 {
  --a53-zellige-alpha: 0.06;
  --a53-zellige-size: 20px;
}
.a53-zellige-tone-20 {
  --a53-zellige-alpha: 0.07;
  --a53-zellige-size: 22px;
}
.a53-zellige-tone-21 {
  --a53-zellige-alpha: 0.08;
  --a53-zellige-size: 24px;
}
.a53-zellige-tone-22 {
  --a53-zellige-alpha: 0.09;
  --a53-zellige-size: 26px;
}
.a53-zellige-tone-23 {
  --a53-zellige-alpha: 0.10;
  --a53-zellige-size: 28px;
}
.a53-zellige-tone-24 {
  --a53-zellige-alpha: 0.03;
  --a53-zellige-size: 30px;
}
.a53-zellige-tone-25 {
  --a53-zellige-alpha: 0.04;
  --a53-zellige-size: 32px;
}
.a53-zellige-tone-26 {
  --a53-zellige-alpha: 0.05;
  --a53-zellige-size: 34px;
}
.a53-zellige-tone-27 {
  --a53-zellige-alpha: 0.06;
  --a53-zellige-size: 18px;
}
.a53-zellige-tone-28 {
  --a53-zellige-alpha: 0.07;
  --a53-zellige-size: 20px;
}
.a53-zellige-tone-29 {
  --a53-zellige-alpha: 0.08;
  --a53-zellige-size: 22px;
}
.a53-zellige-tone-30 {
  --a53-zellige-alpha: 0.09;
  --a53-zellige-size: 24px;
}
.a53-zellige-tone-31 {
  --a53-zellige-alpha: 0.10;
  --a53-zellige-size: 26px;
}
.a53-zellige-tone-32 {
  --a53-zellige-alpha: 0.03;
  --a53-zellige-size: 28px;
}
.a53-zellige-tone-33 {
  --a53-zellige-alpha: 0.04;
  --a53-zellige-size: 30px;
}
.a53-zellige-tone-34 {
  --a53-zellige-alpha: 0.05;
  --a53-zellige-size: 32px;
}
.a53-zellige-tone-35 {
  --a53-zellige-alpha: 0.06;
  --a53-zellige-size: 34px;
}
.a53-zellige-tone-36 {
  --a53-zellige-alpha: 0.07;
  --a53-zellige-size: 18px;
}
.a53-zellige-tone-37 {
  --a53-zellige-alpha: 0.08;
  --a53-zellige-size: 20px;
}
.a53-zellige-tone-38 {
  --a53-zellige-alpha: 0.09;
  --a53-zellige-size: 22px;
}
.a53-zellige-tone-39 {
  --a53-zellige-alpha: 0.10;
  --a53-zellige-size: 24px;
}
.a53-zellige-tone-40 {
  --a53-zellige-alpha: 0.03;
  --a53-zellige-size: 26px;
}
.a53-zellige-tone-41 {
  --a53-zellige-alpha: 0.04;
  --a53-zellige-size: 28px;
}
.a53-zellige-tone-42 {
  --a53-zellige-alpha: 0.05;
  --a53-zellige-size: 30px;
}
.a53-zellige-tone-43 {
  --a53-zellige-alpha: 0.06;
  --a53-zellige-size: 32px;
}
.a53-zellige-tone-44 {
  --a53-zellige-alpha: 0.07;
  --a53-zellige-size: 34px;
}
.a53-zellige-tone-45 {
  --a53-zellige-alpha: 0.08;
  --a53-zellige-size: 18px;
}
.a53-zellige-tone-46 {
  --a53-zellige-alpha: 0.09;
  --a53-zellige-size: 20px;
}
.a53-zellige-tone-47 {
  --a53-zellige-alpha: 0.10;
  --a53-zellige-size: 22px;
}
.a53-zellige-tone-48 {
  --a53-zellige-alpha: 0.03;
  --a53-zellige-size: 24px;
}
.a53-zellige-tone-49 {
  --a53-zellige-alpha: 0.04;
  --a53-zellige-size: 26px;
}
.a53-zellige-tone-50 {
  --a53-zellige-alpha: 0.05;
  --a53-zellige-size: 28px;
}
.a53-zellige-tone-51 {
  --a53-zellige-alpha: 0.06;
  --a53-zellige-size: 30px;
}
.a53-zellige-tone-52 {
  --a53-zellige-alpha: 0.07;
  --a53-zellige-size: 32px;
}
.a53-zellige-tone-53 {
  --a53-zellige-alpha: 0.08;
  --a53-zellige-size: 34px;
}
.a53-zellige-tone-54 {
  --a53-zellige-alpha: 0.09;
  --a53-zellige-size: 18px;
}
.a53-zellige-tone-55 {
  --a53-zellige-alpha: 0.10;
  --a53-zellige-size: 20px;
}
.a53-zellige-tone-56 {
  --a53-zellige-alpha: 0.03;
  --a53-zellige-size: 22px;
}
.a53-zellige-tone-57 {
  --a53-zellige-alpha: 0.04;
  --a53-zellige-size: 24px;
}
.a53-zellige-tone-58 {
  --a53-zellige-alpha: 0.05;
  --a53-zellige-size: 26px;
}
.a53-zellige-tone-59 {
  --a53-zellige-alpha: 0.06;
  --a53-zellige-size: 28px;
}
.a53-zellige-tone-60 {
  --a53-zellige-alpha: 0.07;
  --a53-zellige-size: 30px;
}
.a53-zellige-tone-61 {
  --a53-zellige-alpha: 0.08;
  --a53-zellige-size: 32px;
}
.a53-zellige-tone-62 {
  --a53-zellige-alpha: 0.09;
  --a53-zellige-size: 34px;
}
.a53-zellige-tone-63 {
  --a53-zellige-alpha: 0.10;
  --a53-zellige-size: 18px;
}
.a53-zellige-tone-64 {
  --a53-zellige-alpha: 0.03;
  --a53-zellige-size: 20px;
}
.a53-zellige-tone-65 {
  --a53-zellige-alpha: 0.04;
  --a53-zellige-size: 22px;
}
.a53-zellige-tone-66 {
  --a53-zellige-alpha: 0.05;
  --a53-zellige-size: 24px;
}
.a53-zellige-tone-67 {
  --a53-zellige-alpha: 0.06;
  --a53-zellige-size: 26px;
}
.a53-zellige-tone-68 {
  --a53-zellige-alpha: 0.07;
  --a53-zellige-size: 28px;
}
.a53-zellige-tone-69 {
  --a53-zellige-alpha: 0.08;
  --a53-zellige-size: 30px;
}
.a53-zellige-tone-70 {
  --a53-zellige-alpha: 0.09;
  --a53-zellige-size: 32px;
}
.a53-zellige-tone-71 {
  --a53-zellige-alpha: 0.10;
  --a53-zellige-size: 34px;
}
.a53-zellige-tone-72 {
  --a53-zellige-alpha: 0.03;
  --a53-zellige-size: 18px;
}
.a53-zellige-tone-73 {
  --a53-zellige-alpha: 0.04;
  --a53-zellige-size: 20px;
}
.a53-zellige-tone-74 {
  --a53-zellige-alpha: 0.05;
  --a53-zellige-size: 22px;
}
.a53-zellige-tone-75 {
  --a53-zellige-alpha: 0.06;
  --a53-zellige-size: 24px;
}
.a53-zellige-tone-76 {
  --a53-zellige-alpha: 0.07;
  --a53-zellige-size: 26px;
}
.a53-zellige-tone-77 {
  --a53-zellige-alpha: 0.08;
  --a53-zellige-size: 28px;
}
.a53-zellige-tone-78 {
  --a53-zellige-alpha: 0.09;
  --a53-zellige-size: 30px;
}
.a53-zellige-tone-79 {
  --a53-zellige-alpha: 0.10;
  --a53-zellige-size: 32px;
}
.a53-zellige-tone-80 {
  --a53-zellige-alpha: 0.03;
  --a53-zellige-size: 34px;
}
.a53-zellige-tone-81 {
  --a53-zellige-alpha: 0.04;
  --a53-zellige-size: 18px;
}
.a53-zellige-tone-82 {
  --a53-zellige-alpha: 0.05;
  --a53-zellige-size: 20px;
}
.a53-zellige-tone-83 {
  --a53-zellige-alpha: 0.06;
  --a53-zellige-size: 22px;
}
.a53-zellige-tone-84 {
  --a53-zellige-alpha: 0.07;
  --a53-zellige-size: 24px;
}
.a53-zellige-tone-85 {
  --a53-zellige-alpha: 0.08;
  --a53-zellige-size: 26px;
}
.a53-zellige-tone-86 {
  --a53-zellige-alpha: 0.09;
  --a53-zellige-size: 28px;
}
.a53-zellige-tone-87 {
  --a53-zellige-alpha: 0.10;
  --a53-zellige-size: 30px;
}
.a53-zellige-tone-88 {
  --a53-zellige-alpha: 0.03;
  --a53-zellige-size: 32px;
}
.a53-zellige-tone-89 {
  --a53-zellige-alpha: 0.04;
  --a53-zellige-size: 34px;
}
.a53-zellige-tone-90 {
  --a53-zellige-alpha: 0.05;
  --a53-zellige-size: 18px;
}


/* === RP AGNOSTIC ANTI-FOOTPRINT FIXES === */
/* Auto-append par child_theme_builder pour garantir les regles anti-empreinte (cat-hero, burger, footer, etc.) meme quand Claude override le style.css custom. */
body section[class*="cat-hero"], body div[class*="cat-hero"] {
  position: relative !important;
  width: 100% !important; max-width: 100% !important;
  margin-left: 0 !important; margin-right: 0 !important;
  left: 0 !important; right: 0 !important;
  height: 360px !important; min-height: 360px !important; max-height: 360px !important;
  padding: 0 !important; overflow: hidden !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important;
  border: none !important; box-shadow: none !important; outline: none !important;
  box-sizing: border-box !important;
}
/* Aussi force le parent <main> a etre full-width pour eviter cap a 1024 */
body main, body [class*="lda-main"], body [class*="bdf-main"], body [class*="a53-main"], body #content {
  width: 100% !important; max-width: 100% !important;
  margin-left: 0 !important; margin-right: 0 !important;
}
body [class*="cat-hero"] > img, body [class*="cat-hero-bg"], body [class*="cat-hero"] img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  max-height: 360px !important;
  object-fit: cover !important; z-index: 0 !important;
  border: none !important;
}
body [class*="cat-hero"]::before, body [class*="cat-hero"]::after {
  content: none !important; display: none !important;
}
/* Overlay : absolute par-dessus l'image, juste pour le gradient sombre (fix 2026-06-17) */
body [class*="cat-hero-overlay"], body [class*="cat-hero"] > [class*="overlay"] {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  margin: 0 !important; padding: 0 !important;
  max-width: none !important;
  display: block !important;
  z-index: 1 !important;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.55) 100%) !important;
  pointer-events: none !important;
  border: none !important;
}
/* Container / inner du titre : centré au-dessus de l'overlay (z-index 2) */
body [class*="cat-hero"] > [class*="container"],
body [class*="cat-hero"] > [class*="cat-hero-inner"],
body [class*="cat-hero"] > [class*="hero-inner"]:not([class*="overlay"]),
body [class*="cat-hero"] > div:not([class*="overlay"]):not([class*="-bg"]) {
  position: relative !important; z-index: 2 !important;
  text-align: center !important;
  max-width: 900px !important; margin: 0 auto !important;
  padding: 1.5rem 2rem !important;
  border: none !important; background: transparent !important;
}
body [class*="cat-hero"] h1 {
  color: #ffffff !important;
  font-size: clamp(2.4rem, 6vw, 4rem) !important;
  text-align: center !important;
  margin: 0 !important; font-weight: 800 !important;
  text-shadow: 0 3px 12px rgba(0,0,0,.85), 0 0 30px rgba(0,0,0,.5) !important;
  border: none !important; display: block !important;
}
body [class*="cat-hero"] [class*="breadcrumb"],
body [class*="cat-hero"] nav[aria-label*="riane"],
body [class*="cat-hero"] nav[aria-label*="readcrumb"] {
  display: none !important;
}


/* [2026-06-17] PERSONA PHOTO — Force taille raisonnable.
   Sans contrainte, l'image 1024x1024 (Codex output) s'affiche en grand
   sur la page "À propos". On force max 280px avec auto height.
*/
body [class*="persona-photo"], body img[class*="persona"], body [class*="-persona"] img {
  max-width: 280px !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 50% !important;
  display: block !important;
  margin: 0 auto !important;
}
@media (min-width: 768px) {
  body [class*="persona-photo"], body img[class*="persona"], body [class*="-persona"] img {
    max-width: 320px !important;
  }
}

/* [2026-06-17] BURGER MOBILE — Garantit l'affichage en mobile.
   Le CSS Claude met souvent display:none par defaut + media query qui
   n'est pas garantie. Force agnostique : tout selecteur contenant "burger"
   visible en mobile, invisible en desktop. Couvre tous prefixes
   (.a53-, .bdf-, .lda-, etc.) via [class*="burger"].
*/
@media (max-width: 1023px) {
  body [class*="burger"], body button[class*="burger"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 42px !important;
    min-height: 42px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 100 !important;
  }
}
@media (min-width: 1024px) {
  body [class*="burger"], body button[class*="burger"] {
    display: none !important;
  }
}

/* [2026-06-17] BURGER PARENT FIX : si un wrapper du header contient un
   burger, force-le visible en mobile. Claude met parfois le burger DANS un
   wrapper "cta-wrap" qui est display:none en mobile -> burger invisible.
*/
/* [2026-06-17] FOOTER COLOR HERITAGE — Force le footer ENTIER à hériter
   de la couleur du body. Claude définit parfois color:var(--bg) sur le footer
   (utile si bg sombre, illisible si bg clair). On force color:inherit → texte
   reste lisible peu importe le bg footer.
*/
body footer, body [class*="footer"]:not([class*="logo"]):not([class*="brand-logo"]) {
  color: inherit !important;
}

/* [2026-06-17] FOOTER LINKS HERITAGE — Force les liens à hériter du texte.
   Claude définit parfois color: var(--bg) sur les liens footer (utile si bg
   sombre, mais illisible si bg clair). On force color:inherit qui suit le
   texte parent → toujours lisible. underline pour distinguer du texte normal.
*/
body footer ul li a, body footer ol li a,
body [class*="footer"] ul li a:not([class*="btn"]):not([class*="cta"]),
body footer [class*="link"]:not([class*="brand"]):not([class*="btn"]) {
  color: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: currentColor !important;
  opacity: 0.85 !important;
  transition: opacity .2s ease !important;
}
body footer ul li a:hover, body footer ol li a:hover,
body [class*="footer"] ul li a:hover {
  opacity: 1 !important;
  text-decoration-thickness: 2px !important;
}

/* [2026-06-17] BURGER STYLE — 3 barres visibles + hover/animation.
   Le bouton burger Claude est souvent un <button> avec 3 <span> dedans qui
   représentent les barres, mais sans CSS la cible est un carré vide.
   Force ici un style propre, agnostique au prefixe.
*/
body [class*="burger"] {
  background: transparent !important;
  border: 1px solid currentColor !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  padding: 8px !important;
  color: inherit !important;
  transition: background .2s ease, border-color .2s ease !important;
}
body [class*="burger"]:hover, body [class*="burger"]:focus-visible {
  background: rgba(0,0,0,0.06) !important;
  border-color: var(--a53-accent, currentColor) !important;
}
/* Container des 3 barres (peut s'appeler "bars", "lines", etc.) */
body [class*="burger"] > [class*="bar"],
body [class*="burger"] > [class*="line"],
body [class*="burger"] > span {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  width: 22px !important;
  height: 16px !important;
  gap: 0 !important;
}
/* Les 3 barres elles-mêmes */
body [class*="burger"] [class*="bar"] > span,
body [class*="burger"] [class*="line"] > span,
body [class*="burger"] > span > span {
  display: block !important;
  width: 22px !important;
  height: 2.5px !important;
  background: currentColor !important;
  border-radius: 2px !important;
  margin: 2px 0 !important;
  transition: transform .25s ease, opacity .25s ease !important;
}
/* Etat ouvert : transforme en X */
body [class*="burger"][aria-expanded="true"] [class*="bar"] > span:nth-child(1),
body [class*="burger"][aria-expanded="true"] [class*="line"] > span:nth-child(1),
body [class*="burger"][aria-expanded="true"] > span > span:nth-child(1) {
  transform: translateY(6px) rotate(45deg) !important;
}
body [class*="burger"][aria-expanded="true"] [class*="bar"] > span:nth-child(2),
body [class*="burger"][aria-expanded="true"] [class*="line"] > span:nth-child(2),
body [class*="burger"][aria-expanded="true"] > span > span:nth-child(2) {
  opacity: 0 !important;
}
body [class*="burger"][aria-expanded="true"] [class*="bar"] > span:nth-child(3),
body [class*="burger"][aria-expanded="true"] [class*="line"] > span:nth-child(3),
body [class*="burger"][aria-expanded="true"] > span > span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg) !important;
}

@media (max-width: 1023px) {
  body header [class*="cta-wrap"]:has([class*="burger"]),
  body header > div:has([class*="burger"]),
  body [class*="header"] [class*="-wrap"]:has([class*="burger"]),
  body [class*="header-inner"] > div:has([class*="burger"]) {
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* [2026-06-19] FIX gap main padding-top (Claude met parfois padding-top: 30px sur .{prefix}-main qui casse le collage hero) */
html body main[class*="-main"],
html body main.a53-main,
html body main#bdf-main, html body main#lda-main, html body main#a66-main,
html body main#b3b-main, html body main#e96-main, html body main#aaa-main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* [2026-06-19] FIX drawer mobile height : force full viewport */
html body [class*="nav-mobile"]:not([class*="close"]):not([class*="overlay"]),
html body [class*="menu-mobile"]:not([class*="close"]),
html body [class*="drawer-mobile"]:not([class*="close"]) {
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 100vh !important;
  bottom: 0 !important;
  overflow-y: auto !important;
}

/* [2026-06-19] BURGER variation seedee : shape=short-mid (w1=24/w2=14/w3=24) + dimensions + couleur + angle X */
html body button[class*="burger"] > span > span,
html body button[class*="burger"] > span:not([class*="bar"]):not([class*="line"]),
html body button[class*="burger"] [class*="bar"] > span,
html body button[class*="burger"] [class*="line"] > span {
  height: 2px !important;
  border-radius: 999px !important;
  background: var(--a53-text, currentColor) !important;
  display: block !important;
  margin: 0 !important;
  transition: transform 0.25s ease, opacity 0.2s ease, width 0.2s ease !important;
}
/* Widths individuelles seedees -> forme distincte par site */
html body button[class*="burger"] > span > span:nth-child(1),
html body button[class*="burger"] [class*="bar"] > span:nth-child(1),
html body button[class*="burger"] [class*="line"] > span:nth-child(1) {
  width: 24px !important;
}
html body button[class*="burger"] > span > span:nth-child(2),
html body button[class*="burger"] [class*="bar"] > span:nth-child(2),
html body button[class*="burger"] [class*="line"] > span:nth-child(2) {
  width: 14px !important;
}
html body button[class*="burger"] > span > span:nth-child(3),
html body button[class*="burger"] [class*="bar"] > span:nth-child(3),
html body button[class*="burger"] [class*="line"] > span:nth-child(3) {
  width: 24px !important;
}
/* En etat ouvert (X) : les 3 barres ont meme largeur pour X symetrique */
html body button[class*="burger"][aria-expanded="true"] > span > span,
html body button[class*="burger"][aria-expanded="true"] [class*="bar"] > span,
html body button[class*="burger"][aria-expanded="true"] [class*="line"] > span {
  width: 24px !important;
}
html body button[class*="burger"] > span:has(> span) {
  flex-direction: column !important;
  gap: 5px !important;
}
html body button[class*="burger"][aria-expanded="true"] > span > span:nth-child(1),
html body button[class*="burger"][aria-expanded="true"] > span:nth-child(1):not([class*="bar"]),
html body button[class*="burger"][aria-expanded="true"] [class*="bar"] > span:nth-child(1),
html body button[class*="burger"][aria-expanded="true"] [class*="line"] > span:nth-child(1) {
  transform: translateY(7.0px) rotate(45deg) !important;
}
html body button[class*="burger"][aria-expanded="true"] > span > span:nth-child(2),
html body button[class*="burger"][aria-expanded="true"] > span:nth-child(2):not([class*="bar"]),
html body button[class*="burger"][aria-expanded="true"] [class*="bar"] > span:nth-child(2),
html body button[class*="burger"][aria-expanded="true"] [class*="line"] > span:nth-child(2) {
  opacity: 0 !important;
}
html body button[class*="burger"][aria-expanded="true"] > span > span:nth-child(3),
html body button[class*="burger"][aria-expanded="true"] > span:nth-child(3):not([class*="bar"]),
html body button[class*="burger"][aria-expanded="true"] [class*="bar"] > span:nth-child(3),
html body button[class*="burger"][aria-expanded="true"] [class*="line"] > span:nth-child(3) {
  transform: translateY(-7.0px) rotate(-45deg) !important;
}

/* [2026-06-19] FIX contraste boutons (anti bouton invisible) */
html body a[class*="btn--primary"], html body button[class*="btn--primary"],
html body a[class*="btn-primary"], html body button[class*="btn-primary"],
html body a[class*="-cta"]:not([class*="ghost"]):not([class*="link"]),
html body button[class*="-cta"]:not([class*="ghost"]):not([class*="link"]) {
  color: #ffffff !important;
}
html body a[class*="btn--ghost"], html body button[class*="btn--ghost"],
html body a[class*="btn--secondary"], html body button[class*="btn--secondary"],
html body a[class*="btn-secondary"], html body button[class*="btn-secondary"] {
  color: var(--a53-text, #1a1a1a) !important;
}

/* [2026-06-19] PERSONA shape variation seedee : rounded-square (16px) */
html body img[class*="persona"],
html body img[class*="author"],
html body img[class*="author-photo"],
html body img[class*="persona-photo"],
html body img[class*="redaction"],
html body img[class*="about-photo"],
html body img[class*="team-photo"],
html body img[class*="profile"],
html body [class*="persona"] > img,
html body [class*="author"] > img:not([class*="logo"]),
html body [class*="about"] img:not([class*="logo"]):not([class*="brand"]) {
  border-radius: 16px !important;
}


/* Mouse effect : card_hover_shadow */
.a53-card,.a53-cat-card{transition:box-shadow .25s ease,transform .25s ease}.a53-card:hover,.a53-cat-card:hover{box-shadow:0 18px 44px rgba(31,110,102,.18);transform:translateY(-4px)}