:root{
  --brand: #f8b500;
  --line: #b5b5b6;
  --gray-bg: #efefef;
  --ink: #111111;
  --paper: #ffffff;

  --x: calc(clamp(769px, 100vw, 1600px) / 24);
  --edge: calc(var(--x) * 1);
  --gap-obj: calc(var(--x) * 0.5);

  --fs-quantum: 1px;
  --fs-scale: 1.1;
  --fs-fluid: clamp(14px, calc(10px + 0.6vw), 17.27px);
  --fs-body: calc(var(--fs-fluid) * var(--fs-scale));

  --r-h2: 1.6;
  --r-h1: 3.0;
  --fs-h2: calc(var(--fs-body) * var(--r-h2));
  --fs-h1: calc(var(--fs-body) * var(--r-h1));

  --fw-title: 900;
  --lh-title: 1.15;
  --lh-body: 1.6;
  --ls-title: -0.02em;
  --ls-body: 0.01em;

  --header-h: 80px;
  --logo-h: calc(var(--header-h) * 0.35);
  --header-fs-logo: 30px;
  --header-fs-menu: 15px;
  --header-fs-menu-m: calc(var(--x) * 0.75);
  --header-pad: calc(var(--x) * 1);
  --header-glass-alpha: 0.6;
  --header-blur: 13px;
  --menu-open-sec: 0.35;
  --menu-white-solid: calc(var(--x) * 2.5);
  --menu-white-fade: calc(var(--x) * 2.5);
  --menu-white-rgb: 253, 230, 170;
  --menu-blog-gap: calc(var(--x) * 0.4);

  --ham-w: calc(var(--header-h) * 0.38);
  --ham-line: 2px;
  --ham-gap: calc(var(--header-h) * 0.1);
  --ham-shift-x: 0px;
  --ham-shift-y: 0px;

  --ch4-bg: var(--gray-bg);
  --ch4-gray: #8a8a8a;
  --ch4-top-gap: calc(var(--header-h) + var(--x) * 1.5);
  --ch4-bottom-gap: calc(var(--x) * 2.5);
  --ch4-col-gap: calc(var(--x) * 1.5);
  --ch4-left-w: 38%;
  --ch4-right-w: 50%;

  --ch4-item-gap: calc(var(--x) * 0.6);
  --ch4-item-radius: 14px;
  --ch4-item-border: 0.8px;
  --ch4-item-pad-x: calc(var(--x) * 0.8);
  --ch4-item-pad-y: calc(var(--x) * 0.7);
  --ch4-q-fs: var(--fs-h2);
  --ch4-icon-fs: calc(var(--fs-h2) * 0.9);
  --ch4-icon-bar: 2px;
  --ch4-qa-gap: calc(var(--x) * 0.7);
  --ch4-anim-sec: 0.22;
  --ch4-panel-bg: #f7f8f8;
  --ch4-panel-gap: calc(var(--x) * 0.4);
  --ch4-panel-pad-y: calc(var(--x) * 0.75);

  --lead-img-radius: var(--ch4-item-radius);

  --footer-fs: var(--fs-body);
  --footer-pad-y: calc(var(--x) * 1);
  --footer-row-gap: calc(var(--x) * 2.5);
  --footer-link-gap: calc(var(--gap-obj) * 0.4);
}

@supports (width: round(nearest, 1px, 1px)){
  :root{ --fs-body: round(nearest, calc(var(--fs-fluid) * var(--fs-scale)), var(--fs-quantum)); }
}

@media (max-width: 768px){
  :root{
    --x: calc(100vw / 24);

    --header-h: calc(var(--x) * 3.5);
    --logo-h: calc(var(--header-h) * 0.35);
    --header-fs-logo: calc(var(--header-h) * 0.3);
    --header-fs-menu-m: 14px;
    --ham-line: 1.8px;
    --menu-blog-gap: calc(var(--x) * 0.8);

    --fs-fluid: clamp(14px, calc(10px + 1.2vw), 15.45px);
    --r-h1: 2.2;
    --r-h2: 1.35;

    --ch4-top-gap: calc(var(--header-h) + var(--x) * 2);
    --ch4-bottom-gap: calc(var(--x) * 4);
    --ch4-col-gap: calc(var(--x) * 2.5);
    --ch4-item-gap: calc(var(--x) * 0.8);
    --ch4-item-radius: 12px;
    --ch4-item-pad-x: calc(var(--x) * 1.4);
    --ch4-item-pad-y: calc(var(--x) * 1.3);
    --ch4-icon-fs: calc(var(--fs-h2) * 1.1);
    --ch4-icon-bar: 1.8px;
    --ch4-qa-gap: calc(var(--x) * 1.4);
    --ch4-panel-gap: calc(var(--x) * 0.8);
    --ch4-panel-pad-y: calc(var(--x) * 1.4);

    --footer-row-gap: calc(var(--x) * 5);
  }
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ overflow-anchor:none; scroll-behavior:smooth; }

body.patroni-blog-page,
body.patroni-blog-page button,
body.patroni-blog-page input,
body.patroni-blog-page textarea,
body.patroni-blog-page select{
  font-family:'Jost', sans-serif;
}

body{
  font-size:var(--fs-body);
  color:var(--ink);
  background:var(--ch4-bg);
  -webkit-font-smoothing:antialiased;
}

h1, h2, h3{ text-wrap:balance; letter-spacing:var(--ls-title); line-height:var(--lh-title); }
body.patroni-blog-page h1,
body.patroni-blog-page h2,
body.patroni-blog-page h3{
  font-family:'Jost', sans-serif !important;
  font-weight:900 !important;
}
p{ text-wrap:pretty; letter-spacing:var(--ls-body); line-height:var(--lh-body); }
img{ display:block; max-width:100%; -webkit-user-drag:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; pointer-events:none; }
a{ color:inherit; text-decoration:none; }

.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:0; left:0; z-index:200;
  padding:0.75em 1.25em; background:var(--ink); color:var(--paper);
  font-size:var(--header-fs-menu); font-weight:600;
  transform:translateY(-150%); transition:transform 0.2s ease;
}
.skip-link:focus{ transform:translateY(0); }

.site-header{ position:fixed; top:0; left:0; right:0; z-index:100; }
.header-bar{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  height:calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-top:env(safe-area-inset-top, 0px);
  padding-left:max(var(--header-pad), env(safe-area-inset-left, 0px));
  padding-right:max(var(--header-pad), env(safe-area-inset-right, 0px));
}
.header-glass{
  position:absolute; inset:0;
  -webkit-backdrop-filter:blur(var(--header-blur)); backdrop-filter:blur(var(--header-blur));
  pointer-events:none;
}
.header-colors{
  position:absolute; inset:0;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,var(--header-glass-alpha)) 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,var(--header-glass-alpha)) 100%);
}
.header-tint{ position:absolute; inset:0; background:var(--brand); }
.header-white{
  position:absolute; inset:0; background:rgb(var(--menu-white-rgb));
  -webkit-mask-image:linear-gradient(to left,
    #000 var(--menu-white-solid),
    transparent calc(var(--menu-white-solid) + var(--menu-white-fade)));
  mask-image:linear-gradient(to left,
    #000 var(--menu-white-solid),
    transparent calc(var(--menu-white-solid) + var(--menu-white-fade)));
  opacity:0; transition:opacity calc(var(--menu-open-sec) * 1s) ease;
}
.site-header.is-open .header-white{ opacity:1; }

.logo{
  position:relative; z-index:1; display:flex; align-items:center;
  font-size:var(--header-fs-logo); font-weight:700; letter-spacing:0.04em;
}
.header-right{ position:relative; z-index:2; display:flex; align-items:center; }

.hamburger{
  background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; justify-content:center; gap:var(--ham-gap);
  width:var(--ham-w);
  transform:translate(var(--ham-shift-x), var(--ham-shift-y)) rotate(0deg) scaleX(1);
  transform-origin:center;
  transition:transform calc(var(--menu-open-sec) * 1s) ease;
}
.hamburger span{
  display:block; width:100%; height:var(--ham-line); background:var(--paper);
  transition:background calc(var(--menu-open-sec) * 1s) ease;
}
.site-header.is-open .hamburger{
  transform:translate(var(--ham-shift-x), var(--ham-shift-y)) rotate(90deg) scaleX(var(--ham-open-sx, 0.72));
}
.site-header.is-open .hamburger span{ background:var(--ink); }

.menu-nav{
  display:flex;
  align-items:center;
  gap:var(--menu-blog-gap);
  max-width:0;
  opacity:0;
  overflow:hidden;
  white-space:nowrap;
  transition:max-width calc(var(--menu-open-sec) * 1s) ease,
             opacity calc(var(--menu-open-sec) * 1s) ease,
             margin calc(var(--menu-open-sec) * 1s) ease;
}
.site-header.is-open .menu-nav{
  max-width:16em;
  opacity:1;
  margin-right:var(--menu-blog-gap);
}
.menu-nav a{
  font-size:var(--header-fs-menu);
  font-weight:600;
  letter-spacing:0.06em;
  color:var(--ink);
  white-space:nowrap;
}
@media (max-width:768px){
  .menu-nav a{ font-size:var(--header-fs-menu-m); }
}

.page-ch4{
  min-height:100svh;
  background:var(--ch4-bg);
}
.ch4-inner{
  position:relative;
  max-width:1600px;
  margin:0 auto;
  padding:var(--ch4-top-gap) var(--edge) var(--ch4-bottom-gap);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--ch4-col-gap);
}

.ch4-intro{ flex:0 0 var(--ch4-left-w); max-width:var(--ch4-left-w); }
.ch4-intro h1{
  font-size:var(--fs-h1); font-weight:var(--fw-title); line-height:1.1; color:var(--ink);
}
.ch4-intro p.ch4-lead{
  margin-top:var(--gap-obj); font-size:var(--fs-body); font-weight:400; line-height:1.6; color:var(--ch4-gray);
}

.ch4-lead-image{
  width:calc(100% + var(--ch4-col-gap));
  max-width:calc(100% + var(--ch4-col-gap));
  aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:var(--lead-img-radius);
  margin-top:calc(var(--gap-obj) * 1.4);
}
@media (max-width:768px){
  .ch4-lead-image{ width:100%; max-width:100%; }
}

.ch4-list{
  flex:0 0 var(--ch4-right-w); max-width:var(--ch4-right-w);
  display:flex; flex-direction:column; gap:var(--ch4-item-gap);
}

.ch4-item{ display:block; }
.ch4-q{
  display:flex; width:100%; cursor:pointer; align-items:center; justify-content:space-between;
  gap:var(--gap-obj);
  padding:var(--ch4-item-pad-y) var(--ch4-item-pad-x);
  background:var(--paper); border:var(--ch4-item-border) solid var(--line); border-radius:var(--ch4-item-radius);
  font-family:inherit; font-size:var(--ch4-q-fs); font-weight:700; color:var(--ink); line-height:1.2;
  text-align:left; -webkit-tap-highlight-color:transparent;
  transition:border-color calc(var(--ch4-anim-sec) * 1s) ease;
}
.ch4-q:hover{ border-color:var(--brand); }
.ch4-item.is-open .ch4-q{ border-color:var(--brand); }

.ch4-icon{
  position:relative; flex-shrink:0; width:var(--ch4-icon-fs); height:var(--ch4-icon-fs);
  transition:transform calc(var(--ch4-anim-sec) * 1s) ease;
}
.ch4-item.is-open .ch4-icon{ transform:rotate(90deg); }
.ch4-icon::before, .ch4-icon::after{
  content:''; position:absolute; top:50%; left:50%; background:var(--brand); border-radius:2px;
}
.ch4-icon::before{ width:80%; height:var(--ch4-icon-bar); transform:translate(-50%,-50%);
  transition:transform calc(var(--ch4-anim-sec) * 1s) ease; }
.ch4-icon::after{ width:var(--ch4-icon-bar); height:80%; transform:translate(-50%,-50%); }
.ch4-item.is-open .ch4-icon::before{ transform:translate(-50%,-50%) scaleX(0); }

.ch4-a-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows calc(var(--ch4-anim-sec) * 1s) ease; }
.ch4-item.is-open .ch4-a-wrap{ grid-template-rows:1fr; }
.ch4-a{ overflow:hidden; min-height:0; }
.ch4-a-panel{
  margin:var(--ch4-panel-gap) 0 0;
  padding:var(--ch4-panel-pad-y) var(--ch4-item-pad-x);
  background:var(--ch4-panel-bg); border-radius:var(--ch4-item-radius);
}

.ch4-qa + .ch4-qa{ margin-top:var(--ch4-qa-gap); }
.ch4-qa .q{ margin:0; font-size:var(--fs-body); font-weight:700; color:var(--ink); line-height:1.5; }
.ch4-qa .a{ margin:calc(var(--gap-obj) * 0.3) 0 0; font-size:var(--fs-body); font-weight:400; color:var(--ch4-gray); line-height:1.6; }

@media (max-width:768px){
  .ch4-inner{ flex-direction:column; align-items:stretch; }
  .ch4-intro, .ch4-list{ flex:0 0 auto; max-width:100%; width:100%; }
}

.site-footer{ border-top:0.8px solid var(--ch4-gray); background:var(--ch4-bg); color:var(--ch4-gray); }
.footer-inner{ max-width:1600px; margin:0 auto; padding:var(--footer-pad-y) var(--edge); font-size:var(--footer-fs); }
.footer-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--gap-obj); }
.footer-row + .footer-row{ margin-top:var(--footer-row-gap); align-items:flex-end; }
.footer-top-link{ color:var(--ink); text-decoration:underline; text-underline-offset:0.2em; }
.footer-copy{ font-weight:400; }
.footer-copy strong{ font-weight:700; }
.footer-group{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.footer-group-label{ font-weight:600; color:var(--ink); margin-bottom:calc(var(--footer-link-gap) * 0.5); }
.footer-link{ display:block; text-decoration:underline; text-underline-offset:0.2em; }
.footer-link + .footer-link{ margin-top:calc(var(--footer-link-gap) * 0.4); }
.footer-email{ text-decoration:none; }

/* WordPress/Flatsome integration: hidden mobile drawer is still emitted by wp_footer(). */
body.patroni-blog-page #main-menu.mobile-sidebar { display:none !important; }