/* Typography & contrast aligned on faceexpert.be — loaded after the page styles. */
:root{--muted:#4b5349;--ink:#1f2f26;--gold-text:#7a6236}
body{font-size:16px;line-height:1.7;color:var(--ink)}

/* Brand: official Face Clinic logo, as on faceexpert.be */
.brand{display:flex;align-items:center;gap:12px;font-size:16px;letter-spacing:0;line-height:1}
.brand-logo{width:48px;height:48px;border-radius:50%;object-fit:contain;padding:3px;background:#ece6d9;box-shadow:0 0 0 1px var(--line);flex-shrink:0}
.brand-text{display:flex;flex-direction:column;gap:6px}
.brand-name{font-size:20px;font-weight:400;letter-spacing:.01em;color:var(--ink)}
.brand small,.brand-text small{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0}

/* Headings: same scale as faceexpert.be, regular weight for contrast */
h1,h2,h3,h4,.hero h1,.page-heading h1{font-weight:400;color:var(--ink)}
.hero h1{font-size:clamp(2.5rem,3.6vw + 1rem,4.4rem);line-height:1.05}
.page-heading h1{font-size:clamp(2.2rem,2.8vw + 1rem,3.6rem);line-height:1.08}
h2,.section-top h2,.contact h2,.page-bottom h2{font-size:clamp(1.9rem,1.9vw + 0.9rem,3rem);line-height:1.12}
.content-section h2{font-size:clamp(1.6rem,1.2vw + 0.9rem,2.3rem);line-height:1.15}
h3,.solution h3,.alternative-card h3{font-size:clamp(1.25rem,0.9vw + 0.95rem,1.65rem);line-height:1.25}
.procedure summary{font-size:clamp(1.2rem,0.8vw + 0.9rem,1.5rem)}
.link-card strong,.image-caption strong{font-size:clamp(1.15rem,0.5vw + 1rem,1.4rem)}

/* Body text: 16-17px instead of 12px */
.intro,.section-top p,.solution p,.bio p,.faq p,.articles p,.contact p,.alternative-card p,.alternative-note,
.content-section p,.content-section li,.tech-list p,.link-card span,.dark p,.page-bottom p{font-size:17px;line-height:1.72}
.intro,.section-top p,.solution p,.bio p,.faq p,.articles p,.alternative-card p,.alternative-note,
.content-section p,.content-section li,.tech-list p,.link-card span{color:var(--muted)}
.dark p,.page-bottom p{color:#dde3d9}
.page-heading .deck{font-size:19px;line-height:1.6;color:var(--muted)}
.content-section table{font-size:15px}
.content-section th{color:var(--ink)}
.content-section summary,.faq summary{font-size:17px;color:var(--ink)}
.source-list{font-size:14.5px}
.reading-note{font-size:13.5px!important}
.tech-list strong,.addresses b{font-size:15px;color:var(--ink)}
.addresses span{font-size:15px}

/* Small labels: readable, darker gold */
.eyebrow,.page-heading .byline,.page-toc strong{font-size:11.5px;color:var(--gold-text)}
.dark .eyebrow,.page-bottom .eyebrow{color:#cdb88f}
nav a{font-size:13px}
.cta{font-size:11.5px}
.text-link,.solution a,.alternative-card .text-link,.download-row a{font-size:12.5px}
.breadcrumbs{font-size:12.5px;color:var(--muted)}
.page-toc{font-size:13.5px}
.page-toc a{font-size:13.5px;color:var(--muted)}
.trust span{font-size:12.5px}
.tabs button{font-size:13px}
.dates span,.tech-label,.image-caption span{font-size:11.5px}
.hero-foot{font-size:11px}
footer{font-size:12px;color:var(--muted)}
.seo-foot{font-size:13.5px;color:var(--muted)}
.seo-foot strong{font-size:11px}
nav .lang-switch{font-size:12px}

@media(max-width:850px){
  .brand-logo{width:40px;height:40px}
  .brand-name{font-size:17px}
  .brand small,.brand-text small{font-size:9.5px}
  .intro,.section-top p,.solution p,.bio p,.faq p,.articles p,.contact p,.alternative-card p,.alternative-note,
  .content-section p,.content-section li,.tech-list p,.link-card span,.dark p,.page-bottom p{font-size:16px}
  .page-heading .deck{font-size:17px}
  .content-section table{font-size:13.5px}
  nav a{font-size:16px}
}

/* Biography / clinic story pages */
.bio-story p,.bio-story li,.bio-ending p{font-size:17px;line-height:1.75;color:var(--muted)}
.bio-story aside{font-size:11.5px;color:var(--gold-text)}
@media(max-width:850px){.bio-story p,.bio-story li,.bio-ending p{font-size:16px}}
.bio-intro p{font-size:17px;line-height:1.75;color:var(--muted)}
.bio-intro .crumb,.crumb{font-size:12.5px;color:var(--muted)}
@media(max-width:850px){.bio-intro p{font-size:16px}}
.bio-photo{max-width:480px}