/* ============================================================
   ZENITH — post design tokens
   Palette and type lifted from the Maintenance Journal template.
   Deliberately NO dark-mode block: your Divi header and footer are
   light, so a dark article would leave a light chrome around a dark
   page — worse than either on its own.
   ============================================================ */
body.single-post{
  /* Zenith palette — taken from the logo files, matching the module
     pages and the Resources index. Structure and type stay as the
     Maintenance Journal template; only the colour changes. */
  --zg-ground:#F2F5F5;
  --zg-surface:#FFFFFF;
  --zg-surface-2:#EAEFEF;
  --zg-ink:#0E1A1C;
  --zg-ink-2:#26383B;
  --zg-muted:#56696C;
  --zg-rule:#D3DCDC;
  --zg-rule-soft:#E4EAEA;
  --zg-blue:#004D54;          /* deep teal — CTA ground, drop cap */
  --zg-bright:#00666F;        /* accent — links, rail, eyebrow */
  --zg-wash:#D8EBEC;
  --zg-ok:#1E6B52;      --zg-ok-w:#DDEDE6;
  --zg-warn:#8F5A00;    --zg-warn-w:#F6EAD2;
  --zg-crit:#93362C;    --zg-crit-w:#F6DDDA;
  --zg-shadow:0 1px 2px rgba(14,26,28,.05), 0 12px 32px -18px rgba(14,26,28,.35);

  --zg-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --zg-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --zg-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --zg-col:38rem;     /* the reading column — 608px */
  --zg-rail:210px;
}

/* the frame needs more room than Divi's 1080px container */
body.single-post #main-content .container{max-width:1220px}
body.single-post #main-content{background:var(--zg-ground)}

/* ---------- reading progress ---------- */
.zg-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:9999;background:transparent;pointer-events:none}
.zg-progress span{display:block;height:100%;width:0;background:var(--zg-bright);transition:width .08s linear}

/* ---------- article header ---------- */
.zg-post .post-meta{display:none !important}

.zg-head{max-width:min(var(--zg-col),100%);margin:0 auto}
.zg-eyebrow{
  display:flex;align-items:center;gap:.7rem;margin:0 0 1.1rem;
  font-family:var(--zg-mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--zg-bright);
}
.zg-eyebrow::after{content:"";flex:1;height:1px;background:var(--zg-rule);max-width:120px}
.zg-eyebrow a{color:inherit;text-decoration:none}
.zg-eyebrow a:hover{text-decoration:underline}

.zg-post h1.entry-title{
  font-family:var(--zg-display) !important;font-weight:700 !important;
  font-size:clamp(2.1rem,5.2vw,3.4rem) !important;
  line-height:1.05 !important;letter-spacing:-.028em !important;
  color:var(--zg-ink) !important;margin:0 !important;padding:0 !important;
  max-width:min(var(--zg-col),100%);margin-left:auto !important;margin-right:auto !important;
  text-wrap:balance;
}
.zg-dek{
  max-width:min(var(--zg-col),100%);margin:1.35rem auto 0;
  font-family:var(--zg-body);font-style:italic;
  font-size:clamp(1.1rem,2.1vw,1.28rem);line-height:1.55;color:var(--zg-ink-2);
}
.zg-byline{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  max-width:min(var(--zg-col),100%);margin:2rem auto 0;
}
.zg-avatar{
  width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--zg-wash);color:var(--zg-blue);border:1px solid var(--zg-rule);
  font-family:var(--zg-display);font-weight:700;font-size:.8125rem;letter-spacing:-.02em;
}
.zg-who{font-family:var(--zg-display);font-size:.875rem;font-weight:600;color:var(--zg-ink)}
.zg-when{font-family:var(--zg-mono);font-size:.6875rem;color:var(--zg-muted);letter-spacing:.05em}

/* featured image as a figure */
.zg-post .et_pb_image_wrap,
.zg-post .entry-featured-image-url{
  display:block;max-width:min(var(--zg-col),100%);margin:2.5rem auto 0;
  border:1px solid var(--zg-rule);border-radius:4px;overflow:hidden;
  background:var(--zg-surface);box-shadow:var(--zg-shadow);
}
.zg-post img.wp-post-image{display:block;width:100%;border:0;border-radius:0}

/* ---------- the 3-column frame ---------- */
.zg-frame{
  max-width:100%;
  display:grid;grid-template-columns:var(--zg-rail) minmax(0,var(--zg-col)) var(--zg-rail);
  gap:3.5rem;justify-content:center;align-items:start;padding:3rem 0 1rem;
}
.zg-rail{position:sticky;top:96px;min-width:0}
.zg-rail h2{
  font-family:var(--zg-mono);font-size:.625rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--zg-muted);margin:0 0 .9rem;padding:0;border:0;
}
.zg-toc{list-style:none;margin:0 0 2rem;padding:0;display:flex;flex-direction:column;gap:.1rem}
.zg-toc li{margin:0;padding:0;list-style:none}
.zg-toc li::before{display:none}
.zg-toc a{
  display:block;text-decoration:none;font-family:var(--zg-display);font-size:.8125rem;
  line-height:1.35;color:var(--zg-muted);padding:.4rem 0 .4rem .8rem;
  border-left:2px solid var(--zg-rule);transition:color .15s,border-color .15s;
}
.zg-toc a:hover{color:var(--zg-ink)}
.zg-toc a.zg-on{color:var(--zg-bright);border-left-color:var(--zg-bright);font-weight:600}
.zg-share{display:flex;gap:.4rem}
.zg-share button{
  width:34px;height:34px;border:1px solid var(--zg-rule);background:var(--zg-surface);
  border-radius:3px;color:var(--zg-muted);cursor:pointer;display:grid;place-items:center;
  transition:color .15s,border-color .15s;padding:0;
}
.zg-share button:hover{color:var(--zg-bright);border-color:var(--zg-bright)}
.zg-share svg{width:15px;height:15px}
/* Collapsed state. Driven by a class the script sets from the MEASURED
   container width, not by viewport width — with Divi's widget sidebar on,
   a 1440px screen still leaves under 600px beside the rails, and the
   article was being squeezed to 346px. */
.zg-frame.zg-narrow{
  grid-template-columns:minmax(0,1fr);gap:0;padding-top:2rem;
  max-width:min(var(--zg-col),100%);margin:0 auto;
}
.zg-frame.zg-narrow .zg-rail{position:static;margin-bottom:2.5rem}
.zg-frame.zg-narrow .zg-rail-r{display:none}
.zg-frame.zg-narrow .zg-toc{margin-bottom:1.5rem}

/* ---------- prose ---------- */
.zg-article{
  /* grid items default to min-width:auto, so the article refuses to
     shrink below the min-content of the widest thing inside it — a
     520px table. Without this it overflows every phone. */
  min-width:0;
  font-family:var(--zg-body) !important;
  font-size:1.0625rem;line-height:1.72;color:var(--zg-ink);
  max-width:min(var(--zg-col),100%);margin:0 auto;
}
.zg-article p{
  font-family:var(--zg-body) !important;
  font-size:1.0625rem;line-height:1.72;color:var(--zg-ink);margin:0 0 1.35rem;
}
/* every direct child is capped and allowed to shrink — a <pre> with a
   long line, or a wide table, otherwise widens the article past its
   grid track no matter what overflow it carries */
.zg-article > *{max-width:100%;min-width:0}
.zg-article pre,.zg-article .zg-tablewrap{width:100%;max-width:100%}

.zg-article > p:first-of-type::first-letter{
  font-family:var(--zg-display);font-weight:700;font-size:3.4rem;line-height:.82;
  float:left;padding:.16em .12em 0 0;color:var(--zg-blue);
}
.zg-article h2{
  font-family:var(--zg-display) !important;font-weight:700 !important;
  font-size:1.6rem !important;letter-spacing:-.02em;line-height:1.2 !important;
  color:var(--zg-ink) !important;margin:3.2rem 0 1rem !important;
  scroll-margin-top:96px;text-wrap:balance;padding:0;border:0;
}
.zg-article h3{
  font-family:var(--zg-display) !important;font-weight:600 !important;
  font-size:1.125rem !important;letter-spacing:-.01em;line-height:1.35 !important;
  color:var(--zg-ink) !important;margin:2.2rem 0 .7rem !important;padding:0;
}
.zg-article h4{
  font-family:var(--zg-display) !important;font-weight:600 !important;
  font-size:1rem !important;color:var(--zg-ink) !important;margin:1.8rem 0 .6rem !important;
}
.zg-article a{
  color:var(--zg-bright) !important;text-decoration:none;
  border-bottom:1px solid rgba(0,102,111,.42);transition:border-color .15s;
}
.zg-article a:hover{border-bottom-color:var(--zg-bright)}
.zg-article strong,.zg-article b{font-weight:600;color:var(--zg-ink)}
.zg-article ul,.zg-article ol{margin:0 0 1.35rem;padding-left:1.15rem}
.zg-article li{margin:0 0 .55rem;line-height:1.65;color:var(--zg-ink)}
.zg-article li::marker{color:var(--zg-bright)}
.zg-article ul li::before{display:none}

.zg-article blockquote{
  margin:2.4rem 0;padding:0 0 0 1.5rem;border-left:3px solid var(--zg-bright);
  font-family:var(--zg-display) !important;font-weight:500;font-size:1.35rem;
  line-height:1.38;letter-spacing:-.015em;color:var(--zg-ink);font-style:normal;background:none;
}
.zg-article blockquote p{font:inherit;color:inherit;margin:0 0 .5rem}
.zg-article blockquote cite{
  display:block;margin-top:.9rem;font-family:var(--zg-mono);font-size:.6875rem;
  font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--zg-muted);
}

.zg-article img{border-radius:4px;border:1px solid var(--zg-rule);display:block;max-width:100%;height:auto}
.zg-article figure{margin:2.2rem 0}
.zg-article figcaption,.zg-article .wp-caption-text{
  font-family:var(--zg-mono);font-size:.6875rem;color:var(--zg-muted);
  padding:.75rem 0 0;letter-spacing:.02em;text-align:left;line-height:1.5;
}

.zg-article code{
  font-family:var(--zg-mono);font-size:.85em;background:var(--zg-surface-2);
  border:1px solid var(--zg-rule-soft);border-radius:3px;padding:.1em .35em;color:var(--zg-blue);
}
.zg-article pre{
  background:var(--zg-surface-2);border:1px solid var(--zg-rule);border-radius:4px;
  padding:1.1rem 1.25rem;overflow-x:auto;margin:2rem 0;
  font-family:var(--zg-mono);font-size:.8125rem;line-height:1.7;
}
.zg-article pre code{background:none;border:0;padding:0;color:var(--zg-ink)}

.zg-tablewrap{overflow-x:auto;margin:2.2rem 0;border:1px solid var(--zg-rule);border-radius:4px;background:var(--zg-surface)}
.zg-article table{border-collapse:collapse;width:100%;min-width:520px;font-family:var(--zg-display);font-size:.875rem;margin:0}
.zg-article th{
  text-align:left;font-family:var(--zg-mono);font-size:.625rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--zg-muted);
  padding:.85rem 1.1rem;border-bottom:1px solid var(--zg-rule);background:var(--zg-surface-2);
}
.zg-article td{padding:.85rem 1.1rem;border-bottom:1px solid var(--zg-rule-soft);font-variant-numeric:tabular-nums;color:var(--zg-ink)}
.zg-article tr:last-child td{border-bottom:0}

/* ---------- author, CTA, related ---------- */
.zg-author{
  max-width:min(var(--zg-col),100%);margin:3.5rem auto 0;padding:1.5rem;
  border:1px solid var(--zg-rule);background:var(--zg-surface);border-radius:4px;
  display:flex;gap:1.15rem;align-items:flex-start;box-shadow:var(--zg-shadow);
}
.zg-author .zg-avatar{width:52px;height:52px;font-size:1.0625rem}
.zg-author h4{margin:0 0 .15rem !important;font-family:var(--zg-display);font-size:1rem;font-weight:600;color:var(--zg-ink)}
.zg-author .zg-role{font-family:var(--zg-mono);font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--zg-muted);margin:0 0 .6rem}
.zg-author p{margin:0;font-family:var(--zg-body);font-size:.9375rem;color:var(--zg-ink-2);line-height:1.6}

.zg-cta{
  max-width:min(var(--zg-col),100%);margin:4rem auto 0;background:var(--zg-blue);
  border:1px solid var(--zg-blue);border-radius:5px;padding:2.25rem 2rem;
  color:#DBECED;position:relative;overflow:hidden;
}
.zg-cta::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:1px solid rgba(255,255,255,.13)}
.zg-cta h3{margin:0 0 .5rem !important;font-family:var(--zg-display) !important;font-size:1.5rem !important;letter-spacing:-.02em;font-weight:700 !important;color:#FFFFFF !important}
.zg-cta p{margin:0 0 1.35rem;font-family:var(--zg-body) !important;font-size:.9375rem !important;max-width:42ch;color:#DBECED !important}
.zg-cta-b{display:flex;gap:.6rem;flex-wrap:wrap;position:relative;z-index:1}
.zg-cta a{
  font-family:var(--zg-display) !important;font-weight:600;font-size:.875rem;padding:.7rem 1.25rem;
  border-radius:3px;text-decoration:none;border:1px solid transparent;transition:filter .12s ease;
}
.zg-cta a.zg-p{background:#FFFFFF;color:var(--zg-blue) !important}
.zg-cta a.zg-g{border-color:rgba(255,255,255,.45);color:#FFFFFF !important}
.zg-cta a:hover{filter:brightness(1.06)}

/* ============================================ the module rail
   Injected at the top of Divi's widget sidebar on posts. Sticky, so it
   travels with the reader while the widgets below scroll past. */

.zg-mods{
  background:var(--zg-surface);
  border:1px solid var(--zg-rule);
  border-radius:5px;
  overflow:hidden;
  margin:0 0 30px;
  box-shadow:var(--zg-shadow);
}
/* Sticky is constrained by its parent's height. Divi floats #sidebar, so
   with only the panel inside it the rail is exactly as tall as the panel
   and there is nowhere to stick to. Flex on the row, with the sidebar
   stretched, gives it the full height of the article to travel down. */
@media(min-width:981px){
  body.single-post #content-area{display:flex;align-items:stretch}
  body.single-post #left-area{float:none;flex:1 1 auto;min-width:0}
  body.single-post #sidebar{float:none;flex:0 0 20.875%;min-width:0}
  .zg-mods{position:sticky;top:24px}
}

.zg-mods-h{padding:15px 17px 13px;border-bottom:1px solid var(--zg-rule-soft);background:var(--zg-surface-2)}
.zg-mods-h span{
  display:block;font-family:var(--zg-mono);font-size:.625rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--zg-bright);
}
.zg-mods-h b{
  display:block;margin-top:5px;font-family:var(--zg-display);font-weight:700;
  font-size:1rem;line-height:1.25;letter-spacing:-.015em;color:var(--zg-ink);
}
.zg-mods ul{list-style:none;margin:0;padding:7px 0}
.zg-mods li{margin:0;padding:0;list-style:none}
.zg-mods li::before{display:none}
.zg-mods-l{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 17px;font-family:var(--zg-display);font-size:.8125rem;font-weight:500;
  line-height:1.3;color:var(--zg-ink-2);text-decoration:none !important;
  border-left:2px solid transparent;
  transition:color .14s,border-color .14s,background .14s;
}
.zg-mods-l:hover{color:var(--zg-bright);border-left-color:var(--zg-bright);background:var(--zg-wash)}
.zg-mods-l::after{
  content:"";flex:none;width:5px;height:5px;
  border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;
  transform:rotate(45deg);opacity:0;transition:opacity .14s;
}
.zg-mods-l:hover::after{opacity:.75}

.zg-mods-cta{padding:13px 15px 15px;border-top:1px solid var(--zg-rule-soft);background:var(--zg-surface-2)}
.zg-mods-cta p{margin:0 0 10px;font-family:var(--zg-body);font-size:.8125rem;line-height:1.5;color:var(--zg-muted)}
.zg-mods-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  padding:11px 14px;border-radius:3px;background:var(--zg-blue);
  color:#FFFFFF !important;font-family:var(--zg-display);font-weight:600;
  font-size:.875rem;text-decoration:none !important;
  transition:background .14s,transform .14s;
}
.zg-mods-btn:hover{background:var(--zg-bright);transform:translateY(-1px)}
.zg-mods-btn svg{flex:none}

/* an empty widget is dead weight in a rail meant to look considered */
.zg-widget-empty{display:none !important}

/* ============================================ Divi's own widgets
   Brought into the same system so the rail reads as one panel set. */

.zg-side-w .et_pb_widget{margin-bottom:30px;float:none;width:auto}
.zg-side-w .widgettitle,.zg-side-w .widgettitle a,.zg-side-w h4{
  font-family:var(--zg-display) !important;font-weight:700 !important;
  font-size:.9375rem !important;line-height:1.25 !important;letter-spacing:-.01em;
  color:var(--zg-ink) !important;padding:0 0 9px !important;margin:0 0 12px !important;
  border-bottom:1px solid var(--zg-rule);
}
.zg-side-w ul{list-style:none;padding:0;margin:0}
.zg-side-w ul li{margin:0 0 10px;padding:0;line-height:1.4;border:0}
.zg-side-w ul li:last-child{margin-bottom:0}
.zg-side-w a{
  font-family:var(--zg-display);font-size:.8125rem;color:var(--zg-ink-2);
  text-decoration:none;transition:color .14s;
}
.zg-side-w a:hover{color:var(--zg-bright)}
.zg-side-w p{font-family:var(--zg-body);font-size:.8125rem;color:var(--zg-muted);line-height:1.55}
/* Divi gives the search input width:100%, which pushes the button onto
   its own line. Flex row, and let the input flex instead. */
.zg-side-w form,.zg-side-w .searchform,.zg-side-w #searchform{display:flex;width:100%;gap:0}
.zg-side-w form > div{display:flex;width:100%}
.zg-side-w input[type="text"],.zg-side-w input[type="search"]{
  flex:1 1 auto;min-width:0;width:auto !important;
  font-family:var(--zg-display) !important;font-size:.8125rem !important;
  padding:10px 12px !important;border:1px solid var(--zg-rule) !important;
  border-radius:3px 0 0 3px !important;background:var(--zg-surface) !important;
  color:var(--zg-ink) !important;
}
.zg-side-w input[type="submit"],.zg-side-w #searchsubmit{
  font-family:var(--zg-display) !important;font-weight:600 !important;font-size:.8125rem !important;
  background:var(--zg-bright) !important;color:#FFFFFF !important;border:0 !important;
  border-radius:0 3px 3px 0 !important;padding:10px 16px !important;cursor:pointer;
}
.zg-side-w input[type="submit"]:hover{background:var(--zg-blue) !important}

.zg-related{max-width:1140px;margin:4.5rem auto 0;padding:3rem 0 1rem;border-top:1px solid var(--zg-rule)}
.zg-related h2{
  font-family:var(--zg-mono) !important;font-size:.6875rem !important;letter-spacing:.14em;
  text-transform:uppercase;color:var(--zg-muted) !important;margin:0 0 1.5rem !important;
  font-weight:600 !important;padding:0;border:0;
}
.zg-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:820px){.zg-cards{grid-template-columns:1fr}}
.zg-card{
  border:1px solid var(--zg-rule);border-radius:4px;padding:1.35rem;background:var(--zg-surface);
  text-decoration:none;display:flex;flex-direction:column;gap:.6rem;
  transition:border-color .15s,transform .15s;
}
.zg-card:hover{border-color:var(--zg-bright);transform:translateY(-2px)}
.zg-card .zg-tag{font-family:var(--zg-mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--zg-bright)}
.zg-card h3{margin:0 !important;font-family:var(--zg-display);font-size:1.0625rem;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--zg-ink)}
.zg-card .zg-meta{margin-top:auto;font-family:var(--zg-mono);font-size:.625rem;color:var(--zg-muted);letter-spacing:.06em;padding-top:.6rem}

.zg-reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.zg-reveal.zg-in{opacity:1;transform:none}

.zg-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:var(--zg-ink);color:#fff;font-family:var(--zg-display);font-size:.875rem;
  padding:.7rem 1.25rem;border-radius:3px;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;z-index:9999;
}
.zg-toast.zg-on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion:reduce){
  .zg-reveal{opacity:1;transform:none;transition:none}
  .zg-progress span,.zg-toast{transition:none}
}
@media(max-width:640px){
  .zg-article > p:first-of-type::first-letter{font-size:2.8rem}
  .zg-cta{padding:1.6rem 1.4rem}
  .zg-author{flex-direction:column;gap:1rem}
}