
:root{
  --paper:#EDEEEA; --paper-hi:#F6F7F4; --ink:#191C1A;
  --stamp:#22467A; --marker:#D9E6A8; --rule:#C6CAC4; --dim:#5B615C;
  --pad:clamp(18px,4.5vw,56px);
}
*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"Public Sans",system-ui,sans-serif; font-size:17.5px; line-height:1.68}
h1,h2,h3{font-family:"Newsreader",Georgia,serif; font-weight:500; margin:0; line-height:1.06; letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:inherit}
.lbl{font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--dim)}


.page{max-width:1180px; margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:3px minmax(0,1fr); gap:0 clamp(16px,3.4vw,40px)}
.bar{grid-column:1; grid-row:1/-1; background:var(--rule); position:relative}
.bar::after{content:""; position:absolute; left:0; top:0; width:3px; height:28%; background:var(--stamp)}
.col{grid-column:2; min-width:0}
.block{display:grid; grid-template-columns:minmax(0,1fr); gap:8px 34px}
@media(min-width:1000px){ .block{grid-template-columns:minmax(0,1fr) 232px} }
.marg{font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:15px; line-height:1.5;
  color:var(--stamp); position:relative; padding-top:6px}
@media(min-width:1000px){
  .marg{border-top:1px solid var(--rule)}
  .marg::before{content:""; position:absolute; left:-34px; top:-1px; width:34px; height:1px; background:var(--rule)}
}
@media(max-width:999px){ .marg{border-left:2px solid var(--stamp); padding:2px 0 2px 12px; margin-bottom:14px} }


.top{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0 22px; flex-wrap:wrap}
.logo{display:inline-flex; align-items:center; gap:11px; text-decoration:none}
.logo i{display:block; width:3px; height:20px; background:var(--stamp)}
.logo b{font-family:"Newsreader",serif; font-weight:500; font-size:22px; letter-spacing:.11em}
.nav{display:none; gap:24px; font-size:15px}
.nav a{text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px}
.nav a:hover,.nav a:focus-visible{border-bottom-color:var(--stamp); color:var(--stamp)}
.nav a.on{border-bottom-color:var(--stamp)}
@media(min-width:960px){ .nav{display:flex} }
.lang{font-size:12.5px; letter-spacing:.14em; text-decoration:none; font-weight:600}
.lang b{color:var(--stamp)}


.hero{padding:clamp(28px,6vw,68px) 0 clamp(36px,5vw,60px); border-top:1px solid var(--rule)}
.hero h1{font-size:clamp(2.35rem,5.6vw,4.5rem); max-width:16ch; margin:.28em 0 .44em}
.hl{position:relative; display:inline-block}
.hl svg{position:absolute; left:-6px; top:14%; width:calc(100% + 14px); height:88%; overflow:visible}
.hl svg path{fill:var(--marker); transform-origin:left center; animation:sweep .75s cubic-bezier(.4,0,.2,1) .35s both}
@keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hl i{position:relative; font-style:inherit}
.lede{font-size:clamp(1.02rem,1.6vw,1.24rem); max-width:52ch}
.speeds{margin:14px 0 0; font-size:15px; color:var(--dim); border-left:3px solid var(--stamp); padding:2px 0 2px 14px; max-width:46ch}
.speeds strong{color:var(--ink); font-weight:600}
.facts{list-style:none; display:flex; flex-wrap:wrap; gap:0; margin:20px 0 0; padding:0; max-width:46ch}
.facts li{font-size:14.5px; color:var(--dim); padding:0 18px 0 0; margin-right:18px; border-right:1px solid var(--rule)}
.facts li:last-child{border-right:none; margin-right:0; padding-right:0}
.facts b{font-family:"Newsreader",serif; font-size:1.5rem; font-weight:500; color:var(--ink); margin-right:6px}
.acts{display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:28px}
.btn{display:inline-block; background:var(--stamp); color:#fff; text-decoration:none; padding:14px 26px;
  font-size:15.5px; font-weight:600; border:1px solid var(--stamp); cursor:pointer; font-family:inherit;
  transition:background .18s,color .18s}
.btn:hover,.btn:focus-visible{background:transparent; color:var(--stamp)}
.btn-2{text-decoration:none; font-size:15px; border-bottom:1px solid var(--ink); padding-bottom:3px}
.btn-2:hover,.btn-2:focus-visible{color:var(--stamp); border-bottom-color:var(--stamp)}


.sec{padding:clamp(46px,7vw,88px) 0 0}
.sec > h2{font-size:clamp(1.55rem,3vw,2.35rem); max-width:24ch; margin-bottom:8px}
.hr{height:1px; background:var(--ink); margin:20px 0 6px}


.list{margin-top:14px}
.item{display:block; text-decoration:none; padding:19px 0; border-bottom:1px solid var(--rule)}
.item:first-child{border-top:1px solid var(--rule)}
.item:hover,.item:focus-visible{background:var(--paper-hi)}
.item .h{font-family:"Newsreader",serif; font-size:1.26rem; font-weight:500}
.item:hover .h,.item:focus-visible .h{color:var(--stamp)}
.item .n{font-size:15px; color:var(--dim); margin-top:5px; max-width:66ch}
.item .a{display:block; margin-top:8px; font-family:"Newsreader",serif; font-style:italic; font-size:14.5px; color:var(--stamp)}
.spoke{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--dim); margin-left:10px; vertical-align:2px}


.cfg{margin-top:22px; border-top:1px solid var(--ink); padding-top:22px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 22px}
.chip{font:inherit; font-size:14.5px; padding:7px 14px; background:transparent; color:var(--ink);
  border:1px solid var(--rule); cursor:pointer; border-radius:0; transition:.15s}
.chip:hover{border-color:var(--stamp)}
.chip-head{flex:0 0 100%; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--dim); margin:10px 0 2px}
.chip-head:first-child{margin-top:0}
.legenda{margin-top:14px; font-size:13.5px; color:var(--dim); max-width:70ch}
.chip[aria-pressed="true"]{background:var(--stamp); border-color:var(--stamp); color:#fff}
.tbl{width:100%; border-collapse:collapse; font-size:14.5px}
.tbl th{text-align:left; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim);
  font-weight:600; padding:0 12px 9px 0; border-bottom:1px solid var(--ink); white-space:nowrap}
.tbl td{padding:12px 12px 12px 0; border-bottom:1px solid var(--rule); vertical-align:top}
.tbl tr:hover td{background:var(--paper-hi)}
.b-S{font-weight:600; color:var(--stamp)}
.d2{border-bottom:3px double var(--stamp); padding-bottom:1px}
.void{background-image:repeating-linear-gradient(45deg,var(--rule) 0 1px,transparent 1px 6px);
  color:#4E534F; padding:2px 6px 2px 4px; display:inline-block}
.pnum{font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.sum{margin-top:18px; padding:14px 16px; background:var(--paper-hi); border-left:3px solid var(--stamp); font-size:15.5px}
.sum b{font-variant-numeric:tabular-nums}
.empty{color:var(--dim); font-style:italic; font-family:"Newsreader",serif; padding:22px 0}
.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}


.p{display:grid; gap:4px 20px; padding:20px 0; border-bottom:1px solid var(--rule); text-decoration:none; align-items:baseline}
.p:first-of-type{border-top:1px solid var(--ink)}
@media(min-width:760px){ .p{grid-template-columns:1.25fr 2.3fr .75fr .95fr} }
.p .nm{font-family:"Newsreader",serif; font-size:1.14rem; font-weight:500}
.p:hover .nm{color:var(--stamp)}
.p .ds{font-size:15px; color:var(--dim)}
.p .tm{font-size:13.5px; color:var(--dim)}
.p .pr{font-weight:600; font-size:15px; font-variant-numeric:tabular-nums}
@media(min-width:760px){ .p .pr{text-align:right} }
.split{margin:26px 0 22px; padding:14px 0 14px 18px; border-left:3px solid var(--stamp);
  font-family:"Newsreader",serif; font-size:1.06rem; line-height:1.45; max-width:60ch}


.two{display:grid; gap:0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); margin-top:22px}
@media(min-width:800px){ .two{grid-template-columns:1fr 3px 1fr} }
.two > div{padding:26px 24px 26px 0}
.two > div:last-child{padding:26px 0}
@media(min-width:800px){ .two > div:last-child{padding-left:28px} }
.two h3{font-family:"Public Sans",sans-serif; font-weight:600; font-size:1rem; margin:10px 0 14px}
.two ul{margin:0; padding:0; list-style:none}
.two li{padding:8px 0; border-bottom:1px dotted var(--rule); font-size:15.5px}
.vline{background:var(--stamp); min-height:3px}

.pull{border-left:3px solid var(--stamp); padding:6px 0 6px 22px; margin:26px 0 0;
  font-family:"Newsreader",serif; font-size:clamp(1.15rem,2.3vw,1.6rem); font-weight:300; line-height:1.35; max-width:32ch}
.roster{margin-top:24px; font-size:15.5px; column-gap:44px}
@media(min-width:760px){ .roster{columns:2} }
.roster div{padding:9px 0; border-bottom:1px solid var(--rule); break-inside:avoid}
.roster span{color:var(--dim); font-size:14px}


.cta{margin-top:clamp(46px,7vw,88px); padding-top:clamp(28px,4vw,44px); border-top:3px solid var(--stamp)}
.f{display:grid; gap:13px; max-width:460px; margin-top:20px}
.f .lb{display:block; margin-bottom:5px}
.f input,.f textarea{width:100%; padding:12px 13px; border:1px solid var(--rule);
  background:var(--paper-hi); font:inherit; font-size:15.5px; border-radius:0; color:var(--ink)}
.f input:focus,.f textarea:focus{outline:2px solid var(--stamp); outline-offset:1px; border-color:var(--stamp)}
.f textarea{min-height:86px; resize:vertical}
.note{font-size:13px; color:var(--dim)}

footer{padding:40px 0 56px; font-size:14.5px; color:var(--dim); margin-top:52px; border-top:1px solid var(--rule)}
.badge{background:var(--paper-hi); border-left:3px solid var(--stamp); padding:14px 18px; max-width:70ch;
  margin-bottom:22px; font-size:14.5px; color:var(--ink); font-family:"Newsreader",serif; font-style:italic}
.disc{background:var(--paper-hi); border-left:3px solid var(--rule); padding:16px 18px; max-width:76ch; margin-bottom:26px; font-size:14px; color:var(--ink)}
.fg{display:grid; gap:24px}
@media(min-width:800px){ .fg{grid-template-columns:2fr 1fr 1fr} }
footer a{text-decoration:none; border-bottom:1px solid var(--rule)}
footer a:hover{border-bottom-color:var(--stamp); color:var(--stamp)}
.entity{font-size:12.5px; letter-spacing:.06em; color:var(--dim); margin-top:24px; padding-top:14px; border-top:1px solid var(--rule)}
.skip{position:absolute; left:-9999px; top:0; background:var(--stamp); color:#fff; padding:10px 16px; z-index:99}
.skip:focus{left:8px; top:8px}
:focus-visible{outline:2px solid var(--stamp); outline-offset:2px}
@media(prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} .hl svg path{transform:none} }



.ls-body{max-width:70ch}
.ls-lede{font-size:1.15rem;line-height:1.6;color:var(--indigo,#1A1B4B);margin:0 0 1.4em}
.ls-answer{font-size:1.05rem;line-height:1.7;margin:0 0 1.4em;padding:16px 20px;background:var(--haze,#EDEFF4);border-left:3px solid var(--teal,#00857A)}
.ls-body h2{font-family:Georgia,serif;font-weight:400;font-size:1.6rem;margin:2em 0 .5em;color:var(--indigo,#1A1B4B)}
.ls-body h3{font-family:Georgia,serif;font-weight:400;font-size:1.25rem;margin:1.6em 0 .4em;color:var(--indigo,#1A1B4B)}
.ls-body p{margin:0 0 1.1em;line-height:1.7}
.ls-body ul,.ls-body ol{margin:0 0 1.2em;padding-left:1.3em}
.ls-body li{margin:0 0 .4em}
.ls-note{font-size:.9rem;color:var(--ash,#6B7185);border-left:2px solid var(--ash,#6B7185);padding-left:14px;margin:1.4em 0;font-style:italic}
.ls-body table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.95rem}
.ls-body th,.ls-body td{text-align:left;padding:10px 14px;border-bottom:1px solid #E3E8E3}
.ls-body th{font-family:monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ash,#6B7185)}
.ls-body a{color:var(--teal,#00857A);text-decoration:underline;text-underline-offset:2px}
.ls-cta{display:inline-block;background:var(--indigo,#1A1B4B);color:#fff;padding:.8rem 1.7rem;text-decoration:none;border-radius:6px;margin-top:24px}
.ls-author{font-family:monospace;font-size:13px;color:var(--ash,#6B7185);margin-top:20px}

/* ===== LS-AUGMENT-V1 — styling for article classes + palette harmonisation ===== */
:root{ --indigo:var(--stamp); --teal:var(--stamp); --haze:var(--paper-hi); --ash:var(--dim); }

.crumbs{font-size:12px;color:var(--dim);margin:0 0 16px}
.crumbs a{color:var(--dim);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--stamp);border-bottom-color:var(--stamp)}

/* margin note — the brand's signature aside */
.ls-marginal{font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:1rem;
  line-height:1.5;color:var(--stamp);border-left:3px solid var(--marker);
  padding:2px 0 2px 16px;margin:1.4em 0}

/* limit-of-knowledge block */
.ls-limit{background:var(--paper-hi);border:1px solid var(--rule);border-left:3px solid var(--stamp);
  padding:14px 18px;margin:1.6em 0;font-size:.97rem;line-height:1.6;color:var(--ink)}

/* competence-boundary disclaimer */
.ls-boundary{font-size:.86rem;line-height:1.55;color:var(--dim);background:var(--paper-hi);
  border-left:3px solid var(--rule);padding:12px 16px;margin:2em 0 1.2em}

/* FAQ */
.ls-faq{margin:1.4em 0}
.ls-faq-q{font-weight:600;color:var(--stamp);margin:1.3em 0 .25em;line-height:1.4}
.ls-faq-a{margin:0 0 1em;line-height:1.7}

/* ordered route / decision matrix / checklist */
.ls-steps,.ls-matrix,.ls-check{background:var(--paper-hi);border:1px solid var(--rule);
  padding:14px 18px 14px 20px;margin:1.4em 0}
.ls-steps ul,.ls-matrix ul,.ls-check ul{margin:0;padding-left:1.2em}
.ls-steps li,.ls-matrix li,.ls-check li{margin:.45em 0;line-height:1.55}
.ls-check ul{list-style:none;padding-left:0}
.ls-check li{padding-left:1.5em;position:relative}
.ls-check li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;
  border:2px solid var(--stamp);border-radius:2px}

.ls-related{list-style:none;padding:0;margin:1.6em 0;border-top:1px solid var(--rule)}
.ls-related li{padding:.5em 0;border-bottom:1px solid var(--rule)}

/* conversion blocks: paragraph = callout, anchor = button */
p.ls-cta{display:block;background:var(--paper-hi);color:var(--ink);border-left:3px solid var(--stamp);
  border-radius:0;padding:16px 20px;margin:1.6em 0;font-size:1rem;line-height:1.65}
p.ls-cta strong{color:var(--stamp)}
a.ls-cta{display:inline-block;background:var(--stamp);color:#fff;padding:.8rem 1.7rem;
  text-decoration:none;border:1px solid var(--stamp);border-radius:0;margin-top:8px}
a.ls-cta:hover,a.ls-cta:focus-visible{background:transparent;color:var(--stamp)}

/* contact form at end of article */
.ls-contact{margin:2.4em 0 0;padding-top:1.8em;border-top:3px solid var(--stamp)}
.ls-contact .cf-title{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:1.5rem;
  color:var(--stamp);margin:0 0 14px}
.contact-form .btn{background:var(--stamp);color:#fff;border:1px solid var(--stamp)}
.contact-form .btn:hover,.contact-form .btn:focus-visible{background:transparent;color:var(--stamp)}

/* ===== ARTX-V1 — article index: search + filter + pagination ===== */
.artx-ui{margin:1.6em 0}
.artx-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 18px}
.artx-search{flex:1 1 240px;min-width:0;padding:11px 13px;font:inherit;font-size:1rem;
  border:1px solid var(--rule);background:var(--paper-hi);color:var(--ink);border-radius:0}
.artx-search:focus{outline:2px solid var(--stamp);outline-offset:1px;border-color:var(--stamp)}
.artx-filter{padding:11px 13px;font:inherit;font-size:.95rem;border:1px solid var(--rule);
  background:var(--paper-hi);color:var(--ink);border-radius:0;cursor:pointer}
.artx-filter:focus{outline:2px solid var(--stamp);outline-offset:1px;border-color:var(--stamp)}
.artx-count{font-size:.85rem;color:var(--dim);margin-left:auto;white-space:nowrap}
.artx-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.artx-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  padding:14px 0;border-bottom:1px solid var(--rule)}
.artx-list li a{color:var(--stamp);text-decoration:none;font-size:1.02rem;line-height:1.4}
.artx-list li a:hover,.artx-list li a:focus-visible{text-decoration:underline;text-underline-offset:2px}
.artx-tag{font-size:12px;color:var(--dim);background:var(--paper-hi);border:1px solid var(--rule);
  padding:2px 8px;white-space:nowrap}
.artx-empty{color:var(--dim);font-style:italic;font-family:"Newsreader",Georgia,serif}
.artx-pager{display:flex;flex-wrap:wrap;gap:6px;margin:22px 0 0;align-items:center}
.artx-pg{min-width:38px;height:38px;padding:0 10px;font:inherit;font-size:.95rem;
  border:1px solid var(--rule);background:transparent;color:var(--ink);cursor:pointer;border-radius:0}
.artx-pg:hover:not(:disabled){border-color:var(--stamp);color:var(--stamp)}
.artx-pg.is-cur{background:var(--stamp);border-color:var(--stamp);color:#fff}
.artx-pg:disabled{opacity:.4;cursor:default}
.artx-dots{color:var(--dim);padding:0 4px}
