/* Articles (2026-10-03): the 10 live sekhn.com blog posts, rebuilt at their live /post/ addresses. Loaded after v3.css,
   ind.css and insights.css (for the meta line and the "Keep reading" cards). The hero sits on the homepage gradient and
   clouds; the cover photo carries the site's grain; the text runs in one reading column centred on the page. */

/* a thin reading line along the top of the window */
.po-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none;background:transparent}
.po-progress i{display:block;height:100%;background:linear-gradient(90deg,#1F4A31,#ABD963);transform-origin:left;transform:scaleX(0)}

/* ---- hero: breadcrumb, topic and date, headline, the one-line subtitle where the post has one, byline ---- */
.po-hero{min-height:0;padding-top:calc(64px + clamp(2.2rem,7vh,4.25rem));padding-bottom:clamp(1.6rem,4vh,2.4rem)}
.po-hero>.wrap,.po-coverwrap,.po-main>.wrap{max-width:1080px}
.po-head{display:grid;gap:1.05rem;justify-items:start;max-width:820px}
.po-head .crumb{margin:0;color:var(--ink2)}
.po-head .crumb a{color:var(--ink2)}
.po-head .crumb a:hover{color:#0E3A1F;text-decoration:underline;text-underline-offset:3px}
.po-head h1{font-size:clamp(2.1rem,3.9vw,3.35rem);line-height:1.07;letter-spacing:-.045em;color:var(--i-h1c)}
.po-dek{margin:0;font-size:clamp(1.08rem,1.4vw,1.24rem);line-height:1.5;color:var(--ink2);max-width:52ch}
.po-by{display:flex;align-items:center;gap:.7rem;margin-top:.2rem;font-size:.9rem;color:var(--ink2)}
.po-by b{font-weight:600;color:var(--ink)}
.po-av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;background:#1F4A31;color:#C6E57C;font:600 .95rem/1 var(--display);letter-spacing:-.02em}
.po-av.org{font-size:.62rem;letter-spacing:.02em}

/* ---- the cover: the live post's own photo, wide, with grain ---- */
.po-coverwrap{margin:0 auto;padding-inline:var(--pad)}
.po-cover{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:2/1;box-shadow:0 30px 70px rgba(34,53,42,.16)}
.po-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---- body: one reading column, centred ---- */
section.po-main{padding-block:clamp(2.4rem,6vh,3.6rem) clamp(3rem,8vh,4.5rem)}
.po-grid{max-width:700px;margin-inline:auto}
.po-prose{min-width:0}

/* prose: one type scale, generous measure and leading */
.po-prose{font-size:1.075rem;line-height:1.78;color:var(--ink2)}
.po-prose>*{margin:0}
.po-prose>*+*{margin-top:1.15em}
.po-prose h2{margin-top:2.3em;font-size:clamp(1.45rem,2.1vw,1.85rem);line-height:1.18;letter-spacing:-.032em;color:var(--ink);scroll-margin-top:calc(64px + 1.5rem)}
.po-prose h3{margin-top:1.9em;font-size:clamp(1.15rem,1.45vw,1.28rem);line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.po-prose h2+*,.po-prose h3+*{margin-top:.7em}
.po-prose>:first-child{margin-top:0}
.po-prose strong{font-weight:600;color:var(--ink)}
.po-prose a{color:#1F4A31;font-weight:500;text-decoration:underline;text-decoration-color:rgba(171,217,99,.95);text-decoration-thickness:2px;text-underline-offset:3px;transition:text-decoration-color .2s,color .2s}
.po-prose a:hover{color:#0E3A1F;text-decoration-color:#1F4A31}
.po-prose ul,.po-prose ol{padding:0;list-style:none;display:grid;gap:.5em}
.po-prose li{position:relative;padding-left:1.55rem}
.po-prose ul>li::before{content:"";position:absolute;left:.25rem;top:.72em;width:7px;height:7px;border-radius:50%;background:#ABD963;box-shadow:0 0 0 2px #EEF5DF}
.po-prose ol{counter-reset:po}
.po-prose ol>li{counter-increment:po}
.po-prose ol>li::before{content:counter(po);position:absolute;left:0;top:.18em;width:1.2rem;font:600 .9rem/1.6 var(--display);color:#3F5C3B;text-align:center}
.po-prose figure{margin-block:2em;border-radius:20px;overflow:hidden}
.po-prose figure img{display:block;width:100%;height:auto}
.po-prose .po-cta{margin-top:1.6em}
.po-prose .po-cta .btn{min-width:min(260px,100%);justify-content:center;padding:.9rem 2rem;text-decoration:none;color:#fff;font-weight:600}
/* the post's FAQ: the site's question accordion, in the reading column */
.po-prose .iq-acc{margin-top:1em;padding-inline:clamp(1rem,2vw,1.5rem);background:#F7FAEF;border-color:rgba(34,53,42,.06);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.po-prose .iq-a p,.po-prose .iq-a li{font-size:var(--i-body);line-height:1.65;color:var(--i-text)}
.po-prose .iq-a ul{padding:0 3rem 1.2rem 0;gap:.3em}
.po-prose .iq-a ul+p,.po-prose .iq-a p+ul{margin-top:-.6rem}
.po-prose .iq-a a{font-weight:500}

/* added 2026-10-16 for the AI automation article: an opening summary paragraph, a comparison table, a "not legal advice"
   note and a sources list */
.po-prose .po-lead{font-size:1.18em;line-height:1.62;color:var(--ink)}
.po-prose .po-table{margin-block:1.7em;padding:.4rem clamp(.9rem,1.6vw,1.2rem);border-radius:18px;background:#F7FAEF}
.po-table table{width:100%;border-collapse:collapse;font-size:.9rem;line-height:1.5}
.po-table th,.po-table td{padding:.85rem .6rem;text-align:left;vertical-align:top}
.po-table thead th{padding-block:.9rem .7rem;font:600 .8rem/1.35 var(--display);color:#3F5C3B;border-bottom:1.5px solid rgba(34,53,42,.18)}
.po-table tbody tr+tr th,.po-table tbody tr+tr td{border-top:1px solid rgba(34,53,42,.09)}
.po-table tbody th{width:22%;font-weight:600;color:var(--ink)}
.po-table td:nth-of-type(1){width:17%}
.po-table td:nth-of-type(2){width:33%}
.po-prose .po-note{padding:.95rem 1.15rem;border-radius:14px;background:#F7FAEF;font-size:.93em;line-height:1.6}
.po-prose .po-sources{gap:.55em;font-size:.92em;line-height:1.55}
.po-prose .po-sources a{font-weight:400}

/* the end of the article: a hairline, then the topic and date again */
.po-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.5rem;margin-top:2.6em;padding-top:1.4rem;border-top:1px solid rgba(34,53,42,.1)}
.po-end .po-back{display:inline-flex;align-items:center;gap:.4rem;font:600 .9rem/1 var(--sans);color:#1F4A31;text-decoration:none}
.po-end .po-back .ic{width:16px;height:16px;transform:rotate(180deg);transition:transform .3s var(--ease)}
.po-end .po-back:hover .ic{transform:rotate(180deg) translateX(3px)}

/* ---- keep reading: three cards from Insights ---- */
section.po-more{background:var(--g-cream)}
.po-more .in-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---- phones ---- */
@media (max-width:860px){
  .po-hero{padding-bottom:1.3rem}
  .po-head{gap:.8rem}
  .po-dek{font-size:1.05rem}
  .po-cover{aspect-ratio:4/3;border-radius:20px}
  .po-prose{font-size:1.02rem;line-height:1.72}
  .po-prose h2{font-size:1.4rem!important}
  .po-prose .iq-a ul{padding-right:0}
  .po-prose .po-cta .btn{width:100%}
  .po-more .in-grid{grid-template-columns:1fr}
}
/* narrow phones: the table becomes one block per row, the use case first, then each column's label and text */
@media (max-width:640px){
  .po-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .po-table table,.po-table tbody,.po-table tr,.po-table th,.po-table td{display:block;width:auto!important}
  .po-table tbody tr{padding-block:.95rem}
  .po-table tbody tr+tr{border-top:1px solid rgba(34,53,42,.09)}
  .po-table tbody tr+tr th,.po-table tbody tr+tr td{border-top:0}
  .po-table th,.po-table td{padding:0}
  .po-table tbody th{margin-bottom:.35rem;font-size:.98rem}
  .po-table td+td{margin-top:.3rem}
  .po-table td::before{content:attr(data-label) ": ";font-weight:600;color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){.po-end .po-back .ic{transition:none}}