/* anaudriste.ro · article page, article list, category archive · from the approved mockup docs/machete/articol.html (G0).
   Loaded after tokens.css + site.css on /articole, /articole/<cat>, /articole/<slug> and in the admin preview iframe.
   Renames vs the mockup (md_render markup, Task 4.1): .tbl -> .table-wrap, .callout.y/.m -> .callout--<kind>, h2[data-n] (from toc[].n),
   .cover -> .acover (.acard .cover is the card's), callout <b> -> .callout__label. Shared pieces (.crumbs, .stk, .btn, .inoffer, .endoffer,
   .acard/.agrid, .lbl) live in site.css. Motion (Phase 14) attaches to the data-* hooks; nothing here hides content without JS. */

/* ---------- reading progress (fills with CSS scroll timelines where supported; Phase 14 drives it with JS) ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:7px;z-index:60;background:transparent;pointer-events:none}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--magenta),var(--coral),var(--yellow));transform:scaleX(0);transform-origin:0 50%;border-bottom:2px solid var(--ink)}
@supports (animation-timeline: scroll()){.progress i{animation:aprog linear both;animation-timeline:scroll(root)}}
@keyframes aprog{to{transform:scaleX(1)}}
/* motion.js (Phase 14) drives the bar on scroll, in every mode, and marks the TOC entry being read (.toc a.on) */
.progress i{will-change:transform}

/* ---------- header ---------- */
.ahead{padding:34px 0 30px;position:relative;isolation:isolate}
.ahead .crumbs{margin-bottom:18px}
.ahead .cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.ahead .cats .stk:hover{transform:rotate(-3deg)}
.ahead h1{font:400 clamp(2.2rem,5.6vw,4.6rem)/1 var(--f-head);margin:0;max-width:17ch;letter-spacing:-.02em;overflow-wrap:break-word}
.ahead h1 .c1,.ahead h1 .acc{color:var(--magenta)}.ahead h1 .c2{color:var(--eblue)}
.dek{font:italic 600 clamp(1.25rem,2.6vw,1.75rem)/1.3 var(--f-acc);max-width:34ch;margin:22px 0 0;position:relative;padding-left:22px;border-left:6px solid var(--yellow)}
.byline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px}
.byline img{width:54px;height:54px;border-radius:50%;object-fit:cover;object-position:50% 15%;border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.byline .who{margin:0}
.byline .who b{display:block;font:400 1rem var(--f-head)}
.byline .who span{font:500 .74rem var(--f-mono);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.byline .share{margin-left:auto;display:flex;gap:8px;align-items:center;position:relative}
.byline .share a{width:42px;height:42px;border-radius:12px;border:2.5px solid var(--ink);background:#fff;display:grid;place-items:center;box-shadow:2px 2px 0 var(--ink);font-size:1.05rem;font-weight:800;transition:transform .15s,background .15s}
.byline .share a:hover{background:var(--yellow);transform:rotate(-6deg)}
.share__msg{position:absolute;right:0;top:calc(100% + 8px);font:700 1.2rem/1 var(--f-hand);color:var(--magenta);white-space:nowrap}
.share__msg:empty{display:none}
.ahead .bigd{position:absolute;right:0;top:20px;font:italic 600 clamp(8rem,22vw,17rem)/1 var(--f-acc);color:var(--yellow);-webkit-text-stroke:4px var(--ink);z-index:-1;transform:rotate(8deg);pointer-events:none;user-select:none}
.ahead .e{position:absolute;font-size:3rem;line-height:1;pointer-events:none}
.ahead .e1{right:24%;top:10px}.ahead .e2{right:4%;bottom:0}
@media (max-width:640px){.ahead .bigd{opacity:.55}.ahead .e{font-size:2.2rem}.ahead .e1{right:6%;top:0}.ahead .e2{display:none}}

/* ---------- cover: the photo in the mockup's frame, or the typographic block when there is no photo ---------- */
.acover{border:3px solid var(--ink);border-radius:28px;box-shadow:10px 10px 0 var(--ink);background:var(--yellow);aspect-ratio:21/9;position:relative;overflow:hidden;display:grid;place-items:center;margin:0 0 60px}
@media (max-width:700px){.acover{aspect-ratio:4/3;box-shadow:6px 6px 0 var(--ink);margin-bottom:44px}.acover--img{aspect-ratio:16/10}}
.acover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.acover .t{font:400 clamp(3rem,12vw,9rem)/.9 var(--f-head);text-align:center;position:relative}
.acover .t .acc{color:var(--magenta);font-size:.8em}
.acover .s{position:absolute;z-index:1;line-height:1}
.acover .s1{top:14%;left:6%;background:#fff;transform:rotate(-8deg)}
.acover .s2{bottom:12%;right:6%;background:var(--coral);transform:rotate(6deg)}
.acover .s3{top:16%;right:10%;font-size:3.2rem}
.acover .s4{bottom:12%;left:12%;font-size:3rem}
.acover--img .s3{top:6%;right:4%}.acover--img .s4{bottom:6%;left:4%}
@media (max-width:700px){.acover .s3,.acover .s4{font-size:2.2rem}}

/* ---------- layout: TOC | prose | margin stickers ---------- */
.alayout{display:grid;gap:40px}
@media (min-width:1040px){.alayout{grid-template-columns:240px minmax(0,1fr) 200px;gap:48px}.alayout--notoc{grid-template-columns:minmax(0,1fr) 200px}}
.acol{min-width:0}
.alayout--notoc .acol{max-width:820px}
.toc .box{background:#fff;border:2.5px solid var(--ink);border-radius:20px;padding:16px;box-shadow:var(--hard-s)}
@media (min-width:1040px){.toc .box{position:sticky;top:96px}}
.toc__h{font:400 .9rem var(--f-head);margin:0 0 10px}
.toc ol{list-style:none;margin:0;padding:0}
.toc a{display:block;font-size:.88rem;font-weight:600;padding:6px 8px;border-radius:10px;line-height:1.3}
.toc .toc--h3 a{padding-left:22px;font-weight:500}
.toc a:hover,.toc a.on{background:var(--yellow)}
.toc .time{margin:12px 0 0;font:500 .72rem var(--f-mono);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.side{display:none;position:relative}
@media (min-width:1040px){.side{display:block}}
.side .s{position:absolute;left:0}
.side .note{font:700 1.45rem/1.1 var(--f-hand);color:var(--magenta);transform:rotate(-4deg);width:190px;margin:0}
.side .em{display:inline-block;font-size:3.4rem;line-height:1}

/* ---------- prose ---------- */
.prose{font-size:1.14rem;line-height:1.75;max-width:70ch;overflow-wrap:break-word}
.prose>*{margin:0}
.prose>*+*{margin-top:1.1em}
.prose h2{font:400 clamp(1.6rem,3.4vw,2.3rem)/1.08 var(--f-head);margin-top:2.2em;scroll-margin-top:100px;position:relative}
.prose h2::before{content:attr(data-n);position:absolute;left:-2.1em;top:.05em;font:italic 600 .9em var(--f-acc);color:var(--magenta);display:none}
@media (min-width:1200px){.prose h2::before{display:block}}
.prose h3{font:400 1.3rem/1.2 var(--f-head);margin-top:1.8em;scroll-margin-top:100px}
.prose h4{font:400 1.08rem/1.25 var(--f-head);margin-top:1.6em}
.prose>p:first-of-type::first-letter{font:italic 600 4.6em/.8 var(--f-acc);float:left;margin:.08em .1em 0 0;color:var(--magenta)}
.prose strong{background:linear-gradient(transparent 60%,rgba(255,213,90,.75) 60%);padding:0 2px}
.prose a{font-weight:600;text-decoration:underline;text-decoration-color:var(--magenta);text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{background:var(--yellow)}
.prose ul{padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:2em;margin:.5em 0}
.prose ul li::before{content:"";position:absolute;left:0;top:.45em;width:1em;height:1em;border-radius:5px;border:2.5px solid var(--ink);box-sizing:border-box}
.prose ul li:nth-child(6n+1)::before{background:var(--yellow)}.prose ul li:nth-child(6n+2)::before{background:var(--coral)}.prose ul li:nth-child(6n+3)::before{background:var(--mint)}
.prose ul li:nth-child(6n+4)::before{background:var(--eblue)}.prose ul li:nth-child(6n+5)::before{background:var(--lav)}.prose ul li:nth-child(6n)::before{background:var(--bubble)}
.prose ul li.task{padding-left:0}.prose ul li.task::before{display:none}
.prose .task__box{font-size:1.2em;margin-right:.2em}
.prose ol{padding-left:1.6em}
.prose ol li{margin:.5em 0;padding-left:.3em}
.prose ol li::marker{font:400 1em var(--f-head);color:var(--magenta)}
.prose li>p{margin:0}
.prose img{border:3px solid var(--ink);border-radius:20px;box-shadow:var(--hard);background:#fff}
.prose hr{border:0;height:0;border-top:3px dashed rgba(26,10,46,.3);margin:2.4em 0}
.prose code{font:500 .88em var(--f-mono);background:#fff;border:2px solid var(--ink);border-radius:6px;padding:0 .3em}
.prose pre{background:var(--ink);color:var(--cream);border-radius:16px;padding:16px;overflow-x:auto;font-size:.9rem}
.prose pre code{background:none;border:0;padding:0;color:inherit}

/* callouts (md_render: aside.callout.callout--<kind> > span.ic + p.callout__label + body) */
.callout{border:3px solid var(--ink);border-radius:20px;padding:18px 20px 18px 66px;box-shadow:var(--hard);position:relative;font-weight:600;background:var(--baby)}
.callout .ic{position:absolute;left:16px;top:16px;width:38px;height:38px;border-radius:12px;border:2.5px solid var(--ink);background:#fff;display:grid;place-items:center;font-size:1.2rem;line-height:1}
.callout>*{margin:0}
.callout>*+*{margin-top:.6em}
.callout .callout__label{display:inline;font:400 1em var(--f-head)}
.callout .callout__label::after{content:": "}
.callout .callout__label+p{display:inline;margin:0}
.callout strong{background:none;padding:0}
.callout ul li::before{background:#fff!important}
.callout--inside,.callout--retine,.callout--lab{background:var(--yellow)}
.callout--pe-romaneste,.callout--bani{background:var(--mint)}
.callout--atentie,.callout--termen{background:var(--coral)}
.callout--lege,.callout--paraverifica{background:var(--lav)}
.callout--document,.callout--context{background:var(--peach)}
.callout--verifica,.callout--mecanism{background:var(--baby)}
@media (max-width:520px){.callout{padding:62px 16px 16px}.callout .ic{top:14px;left:14px}}

/* TL;DR (md_render: aside.tldr > span.stk + body) */
.tldr{background:#fff;border:3px solid var(--ink);border-radius:24px;padding:24px 22px 20px;box-shadow:var(--hard);position:relative;margin-top:26px!important;margin-bottom:10px}
.prose>.tldr:first-child{margin-top:16px!important}
.tldr .stk{position:absolute;top:-16px;left:18px;background:var(--magenta);color:var(--ink);transform:rotate(-3deg);white-space:normal}
.tldr>*:not(.stk){margin:0}
.tldr>*+*:not(.stk){margin-top:.5em}
.tldr ul{margin-top:8px}

/* tables (md_render: div.table-wrap[tabindex=0] > table): scroll inside the frame on narrow screens */
.table-wrap{border:3px solid var(--ink);border-radius:20px;overflow-x:auto;box-shadow:var(--hard);background:#fff;-webkit-overflow-scrolling:touch}
.table-wrap table{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.5}
.table-wrap th{background:var(--ink);color:#fff;font:400 .9rem var(--f-head);text-align:left;padding:12px 14px;vertical-align:bottom}
.table-wrap td{padding:12px 14px;border-top:2px solid var(--ink);vertical-align:top}
.table-wrap tr:nth-child(odd) td{background:var(--peach)}.table-wrap tr:nth-child(even) td{background:#fff}
.table-wrap td:first-child{font-weight:700}
@media (min-width:700px){.table-wrap td:first-child{white-space:nowrap}}
.table-wrap td+td,.table-wrap th+th{border-left:2px solid rgba(26,10,46,.15)}

/* pull quote (md_render: a plain > quote) */
.prose .pull{font:italic 600 clamp(1.5rem,3vw,2.1rem)/1.25 var(--f-acc);border:0;margin:1.6em 0 0;padding:0;position:relative;color:var(--ink);isolation:isolate}
.prose .pull+*{margin-top:1.6em}
.prose .pull p{margin:0}
.prose .pull strong{background:none}
.prose .pull::before{content:"“";position:absolute;left:-.1em;top:-.55em;font-size:3.6em;color:var(--coral);line-height:1;z-index:-1;opacity:.9}

/* ---------- end of the article: offer (site.css .endoffer), author, disclaimer ---------- */
.author{margin-top:60px;display:grid;gap:20px;background:#fff;border:3px solid var(--ink);border-radius:26px;padding:24px;box-shadow:var(--hard);align-items:center}
@media (min-width:700px){.author{grid-template-columns:140px 1fr}}
.author img{width:140px;height:140px;border-radius:24px;object-fit:cover;object-position:50% 15%;border:3px solid var(--ink);transform:rotate(-4deg);box-shadow:4px 4px 0 var(--ink)}
.author h2{font:400 1.4rem var(--f-head);margin:0 0 6px}
.author p{margin:0 0 12px}
.author .row{display:flex;gap:8px;flex-wrap:wrap}
.apage .disc{margin:26px 0 0;font-size:.88rem;color:var(--muted);border-top:2px dashed rgba(26,10,46,.25);padding-top:14px}

/* ---------- related + newsletter mini box ---------- */
.rel{padding:100px 0 0}
.rgrid{display:grid;gap:22px;margin-top:20px}
@media (min-width:880px){.rgrid{grid-template-columns:repeat(3,1fr)}}
.rc{position:relative;border:3px solid var(--ink);border-radius:22px;padding:20px;box-shadow:var(--hard);transition:transform .2s,box-shadow .2s;min-height:190px;display:flex;flex-direction:column;gap:10px;background:var(--mint)}
.rc:hover{transform:translate(-3px,-3px) rotate(.8deg);box-shadow:9px 9px 0 var(--ink)}
.rc:nth-child(3n+1){background:var(--mint)}.rc:nth-child(3n+2){background:var(--peach)}.rc:nth-child(3n){background:var(--baby)}
.rc h3{font:400 1.2rem/1.15 var(--f-head);margin:0}
.rc h3 a::after{content:"";position:absolute;inset:0;border-radius:20px} /* whole card clickable; the pill stays its own link */
.rc .stk{align-self:flex-start;font-size:.7rem;position:relative;z-index:1;white-space:normal}
.rc .m{margin-top:auto;font:500 .72rem var(--f-mono);letter-spacing:.08em;color:var(--ink)}
.nlmini{margin-top:80px;background:var(--ink);color:var(--cream);border-radius:28px;padding:30px 24px;display:grid;gap:16px;align-items:center;border:3px solid var(--ink);box-shadow:10px 10px 0 var(--yellow)}
@media (min-width:880px){.nlmini{grid-template-columns:1.2fr 1fr;padding:36px 40px}}
.nlmini h2{font:400 clamp(1.6rem,3.4vw,2.4rem)/1.05 var(--f-head);margin:0}
.nlmini h2 .acc{color:var(--yellow)}
.nlmini .newsletter-form{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.nlmini .newsletter-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.nlmini input[type=email]{flex:1 1 200px;min-width:0;border:3px solid var(--cream);border-radius:14px;padding:14px;background:#fff;color:var(--ink)}
.nlmini .btn{background:var(--yellow);color:var(--ink)}
.nlmini :focus-visible{outline-color:var(--yellow)}
.nlmini .form-note{flex-basis:100%;margin:0;font-size:.8rem;opacity:.85}
.nlmini .form-note:empty{display:none}
.nlmini .form-note a,.nlmini noscript a{text-decoration:underline}

/* ---------- list + category archive ---------- */
.alist .ahead h1{max-width:none}
.alist .dek{max-width:46ch}
.pg-note{font:500 .78rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:18px 0 0}
.apills ul{list-style:none;margin:0 0 34px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.apills a{font-size:.85rem;transition:transform .15s,box-shadow .15s}
.apills li:nth-child(odd) a{transform:rotate(-1.5deg)}.apills li:nth-child(even) a{transform:rotate(1.5deg)}
.apills a:hover{transform:rotate(-4deg) scale(1.04);box-shadow:4px 4px 0 var(--ink)}
.apills a[aria-current]{background:var(--ink);color:var(--cream);box-shadow:3px 3px 0 var(--yellow)}
.alist .agrid{margin-top:0}
.alist .empty{background:#fff;border:3px dashed var(--ink);border-radius:22px;padding:26px;font-weight:600;text-align:center}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin:50px 0 0}
.pager ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.pager ol a,.pager ol span{display:grid;place-items:center;min-width:44px;height:44px;padding:0 8px;border:2.5px solid var(--ink);border-radius:12px;background:#fff;font:400 1rem var(--f-head);box-shadow:var(--hard-s)}
.pager ol span[aria-current]{background:var(--yellow);transform:rotate(-4deg)}
.pager ol a:hover{background:var(--mint)}