/* ==========================================================
   Single post (single.php)
   Image + title share the top row; left rail sits beside the article.
   ========================================================== */
.ml-post{--side:clamp(300px,30vw,400px);display:grid;grid-template-columns:var(--side) minmax(0,1fr);grid-template-areas:"fig head" "side main";}
html{scroll-padding-top:88px;}

/* breadcrumb */
.ml-crumbs{display:flex;align-items:center;gap:14px;padding:18px var(--gut);color:var(--muted);}
.ml-crumbs a{text-decoration:none;transition:color .15s;}
.ml-crumbs a:hover{color:var(--blue);}
.ml-crumbs .sep{color:var(--blue);}
.ml-crumbs .here{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}

/* featured image */
.ml-fig{grid-area:fig;position:relative;margin:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:calc(var(--side) * .82);}
.ml-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ml-fig.is-empty{background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/32px 32px;}
.ml-fig::after{
  content:"";position:absolute;right:-5px;bottom:-5px;width:9px;height:9px;z-index:2;
  background:linear-gradient(var(--blue),var(--blue)) center/1px 100% no-repeat,linear-gradient(var(--blue),var(--blue)) center/100% 1px no-repeat;
}

/* title */
.ml-head{grid-area:head;display:flex;align-items:flex-end;padding:clamp(40px,5vw,72px) clamp(24px,5vw,80px) clamp(32px,3.4vw,48px);border-bottom:1px solid var(--line);}
.ml-head h1{font-family:var(--display);font-weight:500;font-size:clamp(34px,4.4vw,62px);line-height:1.05;letter-spacing:0;text-wrap:balance;max-width:18ch;}

/* left rail */
.ml-side{grid-area:side;border-right:1px solid var(--line);}
.ml-cell{padding:22px var(--gut);border-bottom:1px solid var(--line);}
.ml-cell > .mono{display:block;color:var(--muted);margin-bottom:14px;}
.ml-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.ml-meta > .mono{margin:0;}
.ml-meta .val{font-size:15px;color:var(--ink);}

.ml-share{display:flex;border:1px solid var(--line);width:max-content;}
.ml-share a,.ml-share button{display:grid;place-items:center;width:42px;height:42px;padding:0;background:none;border:0;border-right:1px solid var(--line);color:var(--ink);cursor:pointer;transition:background .15s,color .15s;}
.ml-share > :last-child{border-right:0;}
.ml-share a:hover,.ml-share button:hover,.ml-share button.copied{background:var(--blue);color:#fff;}
.ml-share svg{width:17px;height:17px;}

.ml-sticky{position:sticky;top:64px;display:flex;flex-direction:column;max-height:calc(100vh - 64px);}
.ml-sticky > *{flex-shrink:0;}
/* a long "On this page" scrolls inside itself, so "Read next" and Subscribe always stay on screen */
.ml-sticky > .ml-toc-cell{flex-shrink:1;min-height:120px;overflow-y:auto;scrollbar-width:thin;}
.ml-toc{list-style:none;margin:0;padding:0;}
.ml-toc a{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:9px 0;text-decoration:none;color:var(--muted);font-size:14px;line-height:1.4;transition:color .15s;}
.ml-toc a .n{font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding-top:2px;}
.ml-toc a:hover,.ml-toc a.on{color:var(--ink);}
.ml-toc a.on .n{color:var(--blue);}

/* "Read next": related posts */
.ml-rel-cell{border-bottom:1px solid var(--line);}
.ml-rel-head{display:flex;justify-content:space-between;align-items:center;padding:22px var(--gut) 14px;}
.ml-rel-head > span{color:var(--muted);}
.ml-rel-head a{color:var(--muted);text-decoration:none;transition:color .15s;}
.ml-rel-head a:hover{color:var(--blue);}
.ml-rel{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:center;padding:12px var(--gut);border-top:1px solid var(--line);text-decoration:none;transition:background .2s;}
.ml-rel:hover{background:var(--bg-2);}
.ml-rel-img{position:relative;display:block;aspect-ratio:4/3;background:var(--bg-2);overflow:hidden;}
.ml-rel-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.ml-rel:hover .ml-rel-img img{transform:scale(1.05);}
.ml-rel-img.is-empty{background:var(--dots) var(--dots-pos)/var(--dots-size),var(--bg-2);}
.ml-rel-txt{display:block;min-width:0;}
/* phones/tablets: the rail hides "Read next", so this copy sits under the article (single.php) */
.ml-rel-end{display:none;grid-area:rel;}
.ml-rel-end .ml-rel-cell{border-top:1px solid var(--line);border-bottom:0;}
.ml-rel-end .ml-rel:last-child{padding-bottom:22px;}
.ml-rel-date{display:block;color:var(--muted);font-size:10.5px;margin-bottom:4px;}
.ml-rel-t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.35;color:var(--ink);transition:color .15s;}
.ml-rel:hover .ml-rel-t{color:var(--blue);}

.ml-sub{padding:24px var(--gut);background:var(--blue);color:#fff;border-bottom:1px solid var(--blue);}
.ml-sub h3{font-weight:500;font-size:17px;letter-spacing:0;margin-bottom:6px;}
.ml-sub p{color:rgba(255,255,255,.75);font-size:14px;line-height:1.5;margin-bottom:16px;}
.ml-sub form{display:flex;background:#fff;}
.ml-sub input{flex:1;min-width:0;border:0;border-radius:0;background:transparent;padding:0 14px;height:44px;font:inherit;font-size:14px;color:var(--ink);}
.ml-sub input:focus{outline:none;}
.ml-sub button{border:0;background:var(--dark);color:#fff;font-family:var(--mono);font-size:13px;letter-spacing:.04em;padding:0 16px;cursor:pointer;transition:background .15s;}
.ml-sub button:hover{background:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);}

/* article */
.ml-main{grid-area:main;min-width:0;}
.ml-body{padding:clamp(36px,4.5vw,64px) clamp(24px,5vw,80px) clamp(56px,7vw,96px);}
.ml-body > *{max-width:720px;}
.ml-body > * + *{margin-top:1.15em;}
.ml-body p,.ml-body li{color:#3d3e42;font-size:18px;line-height:1.65;text-wrap:pretty;}
.ml-body strong{color:var(--ink);font-weight:500;}
.ml-body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.ml-body a:hover{color:var(--ink);}
.ml-body h2{font-family:var(--display);font-weight:500;font-size:clamp(25px,2.4vw,34px);line-height:1.15;letter-spacing:0;text-wrap:balance;margin-top:2.4em;padding-top:28px;border-top:1px solid var(--line);}
.ml-body h2 .n{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--blue);margin-bottom:14px;}
.ml-body h3{font-family:var(--display);font-weight:500;font-size:clamp(20px,1.7vw,24px);line-height:1.2;letter-spacing:0;margin-top:1.8em;}
.ml-body h2 + *,.ml-body h3 + *{margin-top:.9em;}
.ml-body img{max-width:100%;height:auto;}
.ml-body figure{margin-left:0;margin-right:0;}
.ml-body figcaption{margin-top:10px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.ml-body hr{border:0;border-top:1px solid var(--line);margin:2.2em 0;}
.ml-body blockquote{margin-left:0;margin-right:0;padding-left:22px;border-left:2px solid var(--blue);}

/* short answer (the Excerpt field) */
.ml-answer > .mono{display:inline-flex;align-items:center;gap:8px;color:var(--blue);margin-bottom:12px;}
.ml-answer > .mono::before{content:"";width:7px;height:7px;background:var(--blue);}
.ml-body .ml-answer p{color:var(--muted);font-style:italic;font-weight:500;}
.ml-answer + *{margin-top:2.4em;}

/* tables (Table block) */
.ml-body .wp-block-table,.ml-body > table{max-width:none;overflow-x:auto;border:1px solid var(--line);background:var(--bg);margin-top:1.6em;}
.ml-body table{width:100%;min-width:700px;border-collapse:collapse;font-size:14px;line-height:1.5;margin:0;}
.ml-body .wp-block-table table{border:0;}
.ml-body th{font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:14px 16px;border:0;border-bottom:1px solid var(--line);background:var(--bg-2);white-space:nowrap;}
.ml-body td{padding:14px;border:0;border-bottom:1px solid var(--line);vertical-align:top;color:#3d3e42;text-align:left;}
.ml-body tr:last-child td{border-bottom:0;}
.ml-body td:first-child{font-weight:500;color:var(--ink);white-space:nowrap;}
.ml-body th + th,.ml-body td + td{border-left:1px solid var(--line);}
.ml-body .wp-block-table thead{border-bottom:0;}
.ml-body .wp-block-table figcaption{padding:10px 16px;margin:0;border-top:1px solid var(--line);}

/* numbered lists */
.ml-body ol{list-style:none;padding:0;counter-reset:step;border-top:1px solid var(--line);}
.ml-body ol > li{counter-increment:step;display:grid;grid-template-columns:44px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);margin:0;}
.ml-body ol > li::before{content:counter(step,decimal-leading-zero);font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#fff;background:var(--blue);height:22px;display:grid;place-items:center;margin-top:4px;}

/* bullet lists */
.ml-body ul{list-style:none;padding:0;}
.ml-body ul > li{position:relative;padding-left:22px;margin-top:.55em;}
.ml-body ul > li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:7px;background:var(--blue);}

/* buttons inside posts */
.ml-body .wp-block-button__link{display:inline-flex;align-items:center;height:46px;padding:0 20px;background:var(--blue);color:#fff;font-family:var(--mono);font-size:15px;text-decoration:none;border-radius:0;}
.ml-body .wp-block-button__link:hover{background:var(--ink);color:#fff;}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .ml-post{grid-template-columns:1fr;grid-template-areas:"fig" "head" "side" "main" "rel";}
  .ml-rel-end{display:block;}
  .ml-rel-end .ml-rel-cell{display:block;}
  .ml-fig{border-right:0;min-height:0;aspect-ratio:16/9;}
  .ml-fig.is-empty{display:none;}
  .ml-fig::after{display:none;}
  .ml-head{padding-top:32px;}
  .ml-side{border-right:0;}
  .ml-sticky{position:static;}
  .ml-toc-cell,.ml-side .ml-sub,.ml-rel-cell{display:none;}
}
@media (max-width:600px){
  .ml-body p,.ml-body li{font-size:17px;}
  .ml-crumbs .here,.ml-crumbs .sep{display:none;}
}