/* guide: reading mode inside the page standard. One 12 column grid, text on A1 (x=100) or A2 (x=732) at 1440,
   the field interpolated down the scroll, the crest tier gauge travelling on the margin. No WebGL. */
.pg-a{--pg-g:clamp(20px,4.5vw,64px);--pg-w:1240px;--pg-gap:24px;background:#0A0D12}
.pg-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pg-gap);padding-inline:max(var(--pg-g),calc((100% - var(--pg-w)) / 2))}
.pg-a1{grid-column:1/7}
.pg-a2{grid-column:7/13}
.pg-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pg-a a:focus-visible{outline:none;border-radius:6px;box-shadow:0 0 0 2px currentColor}
.pg-a .btn.big:focus-visible{box-shadow:0 0 0 3px #0A0D12,0 0 0 5px #EEE9DF}

/* hero: the listing tier of the crest as the ground, text sharing its plane */
.pg-hero{position:relative;min-height:78vh;background:#0A0D12;color:#EEE9DF;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.pg-layer{position:absolute;inset:0;pointer-events:none}
.pg-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 44%;display:block}
.pg-veil{position:absolute;inset:0;background:radial-gradient(ellipse 74% 62% at 24% 40%,rgba(10,13,18,.88) 0%,rgba(10,13,18,.66) 46%,rgba(10,13,18,0) 86%);pointer-events:none}
.pg-dissolve{position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(180deg,rgba(10,13,18,0) 0%,rgba(10,13,18,.8) 30%,rgba(10,13,18,.96) 52%,#0A0D12 100%);pointer-events:none}
.pg-top{position:absolute;inset:0 0 auto 0;padding-top:clamp(96px,12vh,120px)}
.pg-crumb{grid-column:1/-1;color:#EEE9DF}
.pg-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:0 10px}
.pg-crumb li+li::before{content:"/";margin-right:10px;opacity:.7}
.pg-crumb a{text-decoration:none}
.pg-crumb a:hover{text-decoration:underline;text-underline-offset:.25em}
.pg-low{position:relative;padding-top:clamp(180px,30vh,320px);padding-bottom:clamp(40px,7vh,76px)}
.pg-h1{grid-column:1/-1;font-weight:600;font-variation-settings:"wdth" 80;font-size:clamp(32px,3.25vw,46px);line-height:1.06;letter-spacing:-.022em;color:#EEE9DF;max-width:none}
.pg-h1 span{display:block}
.pg-h1 em{font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:360;font-variation-settings:"opsz" 72;letter-spacing:-.01em}
.pg-hero-side{grid-column:7/13;margin-top:clamp(28px,4vh,40px)}
.pg-lede{font-size:clamp(17px,1.35vw,20px);line-height:1.55;max-width:46ch;color:#EEE9DF}
.pg-meta{margin-top:20px;color:#EEE9DF;opacity:.84}

/* the field and the sections */
.pg-journey{position:relative;background:linear-gradient(180deg,#0A0D12 0%,#16202B 12%,#D6DADE 22%,#EEE9DF 46%,#E8DFC9 60%,#EEE9DF 82%,#0A0D12 100%)}
.pg-sec{position:relative;padding-top:clamp(84px,11vh,140px);padding-bottom:clamp(84px,11vh,140px);color:#0A0D12}
.pg-sec.pg-dark{color:#EEE9DF}
.pg-h2{grid-column:1/10;font-weight:600;font-variation-settings:"wdth" 78;font-size:clamp(30px,3.2vw,46px);line-height:1.05;letter-spacing:-.022em;text-wrap:balance}
.pg-tail{height:clamp(200px,26vh,300px)}
.pg-sub{grid-column:1/10;margin-top:clamp(56px,8vh,96px);font-size:clamp(24px,2.3vw,32px)}
.pg-intro{grid-column:7/13;margin-top:clamp(20px,3vh,28px)}
.pg-note-left{grid-column:1/6;margin-top:clamp(20px,3vh,28px);opacity:.65}
.pg-h2-plain{grid-column:auto}
.pg-h2-a1{grid-column:1/6}
.pg-lab{display:block;margin-bottom:4px;color:#2E2820}
.pg-dark .pg-lab{color:#8A8F98}
.pg-panel{border-radius:6px;background:rgba(10,13,18,.055);padding:clamp(20px,2.2vw,30px)}
.pg-dark .pg-panel{background:rgba(238,233,223,.06)}
.pg-card{border-radius:6px;background:rgba(10,13,18,.055);padding:22px 24px 24px}
.pg-media{margin:0}
.pg-media img{display:block;width:100%;height:auto;border-radius:6px}
.pg-fig{margin:0}
.pg-fig figcaption,.pg-media figcaption{margin-top:12px;color:#3A332A;font-size:10.5px}
.pg-dark .pg-fig figcaption,.pg-dark .pg-media figcaption{color:#8A8F98}
.pg-svg{display:block;width:100%;height:auto;color:inherit}
.pg-svg .pg-svg-lab{font:500 14px/1.2 Archivo,system-ui,sans-serif;fill:currentColor}
.pg-svg .pg-svg-note{font:400 11px/1.2 "Martian Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;fill:currentColor;opacity:.62}
.pg-svg .pg-svg-num{font:500 13px/1 "Martian Mono",ui-monospace,monospace;fill:currentColor}

/* the tier gauge: the crest in miniature on the margin, with the section being read */
.pg-gauge{position:fixed;z-index:20;left:calc(max(var(--pg-g),(100vw - var(--pg-w)) / 2) - 52px);top:50%;transform:translateY(-50%);width:30px;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--pg-gc,#EEE9DF);pointer-events:none}
.pg-gauge-t{writing-mode:vertical-rl;transform:rotate(180deg);font:500 10px/1 "Martian Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:opacity .2s}
.pg-gauge-t b{font-weight:500;margin-bottom:12px;display:inline-block}
.pg-gauge ol{list-style:none;display:flex;flex-direction:column;align-items:center;gap:5px;width:100%}
.pg-gauge li{height:4px;border-radius:1px;background:currentColor;opacity:.4}
.pg-gauge li.pg-on{opacity:1;background:transparent;box-shadow:inset 0 0 0 1px currentColor;position:relative;overflow:hidden;height:6px}
.pg-gauge li.pg-on i{position:absolute;inset:0 auto 0 0;width:calc(var(--pg-p,0) * 100%);background:#FFC21A;box-shadow:inset 0 0 0 1px currentColor}
.pg-gauge-quiet .pg-gauge-t{opacity:0}

/* on this page */
.pg-toc{padding-top:clamp(52px,7vh,76px);padding-bottom:clamp(52px,7vh,76px)}
.pg-toc-panel{grid-column:1/-1;border-radius:6px;background:rgba(238,233,223,.06);padding:clamp(20px,2.2vw,30px) 26px;margin-inline:-26px}
.pg-toc-h{color:#8A8F98;margin-bottom:16px}
.pg-toc-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--pg-gap);row-gap:2px;counter-reset:toc}
.pg-toc-list li{counter-increment:toc}
.pg-toc-list a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:9px 0;text-decoration:none}
.pg-toc-list a::before{content:counter(toc,decimal-leading-zero);opacity:.5}
.pg-toc-list a:hover span{text-decoration:underline;text-underline-offset:.25em}
.pg-toc-list a.pg-at span{text-decoration:underline;text-underline-offset:.25em}

/* reading column: A2 carries the prose at about 66 characters, A1 carries the material */
.pg-read{grid-column:7/13;font-size:18px;line-height:1.68}
.pg-read>*+*{margin-top:22px}
.pg-read p{max-width:66ch}
.pg-read p:first-child{font-size:clamp(19px,1.5vw,21px);line-height:1.5}
.pg-side{grid-column:1/6}
.pg-side-sticky{position:sticky;top:112px;align-self:start}
.pg-sec>.pg-read,.pg-sec>.pg-side{margin-top:clamp(40px,6vh,72px)}
.pg-mono{font:400 11px/1.8 "Martian Mono",ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase}
.pg-step-n{font:400 11px/1.8 "Martian Mono",ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;opacity:.6}

/* takeaways: one filled sheet, the five lines set larger than body */
.pg-take{grid-column:7/13;margin-top:clamp(36px,5vh,56px)}
.pg-take ul{list-style:none;display:grid;gap:14px}
.pg-take li{font-size:17px;line-height:1.5;padding-left:26px;position:relative}
.pg-take li::before{content:"";position:absolute;left:0;top:.52em;width:11px;height:11px;border-radius:2px;background:#FFC21A;box-shadow:inset 0 0 0 1px rgba(10,13,18,.5)}
.pg-take-side{grid-column:1/6;margin-top:clamp(36px,5vh,56px)}

/* equations */
.pg-eqs{list-style:none}
.pg-eqs-gap{margin-top:clamp(28px,4vh,44px)}
.pg-eqs .eq{font:400 clamp(12px,1.05vw,14.5px)/1.5 "Martian Mono",ui-monospace,monospace;padding:15px 0;border-top:1px solid rgba(10,13,18,.26)}
.pg-eqs .eq:last-child{border-bottom:1px solid rgba(10,13,18,.26)}

/* tables with a filled head row and one row marked */
.pg-table-head{grid-column:1/-1;margin-top:clamp(40px,6vh,64px);display:block;border-collapse:collapse}
.pg-table-head thead,.pg-table-head tbody{display:block}
.pg-table-head thead tr{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pg-gap);border-radius:6px 6px 0 0;background:rgba(10,13,18,.075);padding:14px 18px}
.pg-table-head thead th{font:500 11px/1.6 "Martian Mono",ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;text-align:left}
.pg-table-head tbody tr{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pg-gap);padding:16px 18px;border-bottom:1px solid rgba(10,13,18,.18);align-items:start}
.pg-table-head tbody tr:nth-child(even){background:rgba(10,13,18,.035)}
.pg-table-head tbody tr.pg-row-on{background:rgba(255,194,26,.16)}
.pg-table-head tbody th{text-align:left;font-weight:600;line-height:1.35}
.pg-table-head tbody td{font-size:15px;line-height:1.5}
.pg-table-head .pg-lab{display:none}
/* attribute limits: name, a drawn bar, the number, the note */
.pg-attr thead th:nth-child(1),.pg-attr tbody th{grid-column:1/4}
.pg-attr thead th:nth-child(2),.pg-attr tbody td:nth-of-type(1){grid-column:4/7}
.pg-attr thead th:nth-child(3),.pg-attr tbody td:nth-of-type(2){grid-column:7/9}
.pg-attr thead th:nth-child(4),.pg-attr tbody td:nth-of-type(3){grid-column:9/13}
.pg-attr tbody th{font:500 13.5px/1.5 "Martian Mono",ui-monospace,monospace;letter-spacing:-.01em;overflow-wrap:anywhere}
.pg-bar{display:block;height:10px;border-radius:2px;background:rgba(10,13,18,.12);position:relative;margin-top:7px}
.pg-bar i{position:absolute;inset:0 auto 0 0;border-radius:2px;background:#0A0D12;opacity:.72}
.pg-row-on .pg-bar i{background:#0A0D12;opacity:1}
.pg-bytes{font:500 15px/1.4 "Martian Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
/* prohibited terms: the examples as chips that read as dropped */
.pg-proh thead th:nth-child(1),.pg-proh tbody th{grid-column:1/5}
.pg-proh thead th:nth-child(2),.pg-proh tbody td:nth-of-type(1){grid-column:5/13}
.pg-chips{display:flex;flex-wrap:wrap;gap:8px}
.pg-chip{display:inline-flex;align-items:center;padding:5px 11px;border-radius:4px;background:#0A0D12;color:#EEE9DF;font:400 13px/1.35 "Martian Mono",ui-monospace,monospace;letter-spacing:-.01em}

/* the two rule panels facing each other */
.pg-rules-a{grid-column:1/7}
.pg-rules-b{grid-column:7/13}
.pg-rules-a,.pg-rules-b{margin-top:clamp(36px,5vh,56px);align-self:stretch}
.pg-rules h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin-bottom:16px}
.pg-rules ul{list-style:none;display:grid;gap:11px}
.pg-rules li{font-size:16px;line-height:1.5;padding-left:24px;position:relative}
.pg-rules li::before{content:"";position:absolute;left:0;top:.52em;width:10px;height:10px}
.pg-rules-a li::before{background:linear-gradient(currentColor,currentColor) center/100% 1.6px no-repeat,linear-gradient(currentColor,currentColor) center/1.6px 100% no-repeat}
.pg-rules-b li::before{background:linear-gradient(currentColor,currentColor) center/100% 1.6px no-repeat}

.pg-callout{grid-column:1/6;margin-top:clamp(32px,4vh,44px);font-size:16px;line-height:1.6;padding:20px 22px;border-radius:6px;background:rgba(10,13,18,.055)}

/* the worked example: two fields, each with its own drawn byte meter */
.pg-ex-a{grid-column:1/7}
.pg-ex-b{grid-column:7/13}
.pg-ex-a,.pg-ex-b{margin-top:clamp(36px,5vh,56px)}
.pg-ex h3{font:500 11px/1.6 "Martian Mono",ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px}
.pg-field{font:400 14.5px/1.85 "Martian Mono",ui-monospace,monospace;letter-spacing:-.01em;overflow-wrap:anywhere;padding:14px 16px;border-radius:6px;background:rgba(238,233,223,.7);box-shadow:inset 0 0 0 1px rgba(10,13,18,.14)}
.pg-ex ul{list-style:none;display:grid;gap:9px;margin-top:18px}
.pg-ex li{font-size:15.5px;line-height:1.5;padding-left:22px;position:relative}
.pg-ex li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:2px;background:currentColor;opacity:.6}
.pg-ex-note{grid-column:7/13;margin-top:clamp(32px,4vh,44px);font-size:17px;line-height:1.6;max-width:62ch}
.pg-mark-rep{background:none;color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.28em;text-decoration-color:rgba(10,13,18,.5)}
.pg-mark-bad{background:#0A0D12;color:#EEE9DF;border-radius:3px;padding:.04em .28em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pg-mark-syn{background:#FFC21A;color:#0A0D12;border-radius:3px;padding:.04em .28em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* steps: the five steps on A1, the path drawn on A2 */
.pg-steps-list{grid-column:1/6;list-style:none;counter-reset:st;margin-top:clamp(36px,5vh,56px);display:grid;gap:4px}
.pg-steps-list li{counter-increment:st;position:relative;padding:13px 0 13px 44px;font-size:16px;line-height:1.5;border-top:1px solid rgba(10,13,18,.2)}
.pg-steps-list li:last-child{border-bottom:1px solid rgba(10,13,18,.2)}
.pg-steps-list li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:16px;font:400 11px/1 "Martian Mono",ui-monospace,monospace;letter-spacing:.13em;opacity:.55}

.pg-steps-fig{grid-column:7/13;margin-top:clamp(36px,5vh,56px)}
.pg-steps-note{grid-column:7/13;margin-top:clamp(26px,3.5vh,36px);font-size:18px;line-height:1.68;max-width:64ch}

/* seven mistakes: cards, two columns, not a stack of rules */
.pg-cards{grid-column:1/-1;margin-top:clamp(36px,5vh,56px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pg-gap)}
.pg-cards .pg-card{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:14px;counter-increment:mis}
.pg-cards{counter-reset:mis}
.pg-cards .pg-card::before{content:counter(mis,decimal-leading-zero);font:400 11px/1.9 "Martian Mono",ui-monospace,monospace;letter-spacing:.13em;opacity:.55;grid-row:1/span 2}
.pg-cards h3{grid-column:2;font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.pg-cards p{grid-column:2;margin-top:6px;font-size:15.5px;line-height:1.55}
.pg-cards .pg-card:last-child:nth-child(odd){grid-column:1/-1}

/* faq */
.pg-faq-head{grid-column:1/6;position:sticky;top:112px;align-self:start}
.pg-faq-head .pg-media{margin-top:clamp(28px,4vh,44px)}
.pg-faq-list{grid-column:7/13;margin-top:0;list-style:none}
.pg-faq-list details{border-top:1px solid rgba(10,13,18,.26)}
.pg-faq-list li:last-child details{border-bottom:1px solid rgba(10,13,18,.26)}
.pg-faq-list summary{list-style:none;cursor:pointer;position:relative;padding:17px 44px 17px 0;font-size:17px;line-height:1.4;font-weight:600;letter-spacing:-.01em}
.pg-faq-list summary::-webkit-details-marker{display:none}
.pg-faq-list summary::marker{content:""}
.pg-faq-list summary::before,.pg-faq-list summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:1.5px;background:currentColor;transition:transform .25s ease}
.pg-faq-list summary::after{transform:rotate(90deg)}
.pg-faq-list details[open] summary::after{transform:rotate(0deg)}
.pg-faq-list summary:focus-visible{outline:none;box-shadow:0 0 0 2px currentColor;border-radius:6px}
.pg-faq-list details p{padding:0 44px 22px 0;font-size:16px;line-height:1.6;max-width:62ch}

/* sources */
.pg-src-list{grid-column:7/13;margin-top:clamp(36px,5vh,56px);list-style:none;counter-reset:src}
.pg-src-list{display:grid;gap:8px}
.pg-src-list li{counter-increment:src;position:relative;padding:18px 20px 18px 56px;border-radius:6px;background:rgba(10,13,18,.055);font-size:16px;line-height:1.5}
.pg-src-list li::before{content:counter(src,decimal-leading-zero);position:absolute;left:20px;top:21px;font:400 11px/1 "Martian Mono",ui-monospace,monospace;letter-spacing:.13em;opacity:.55}
.pg-src-list .pg-verified{display:block;margin-top:5px;font:400 10.5px/1.6 "Martian Mono",ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;opacity:.6}
.pg-src-fig{grid-column:1/6;margin-top:clamp(36px,5vh,56px)}

/* start and related, on the deep field again */
.pg-start{padding-top:clamp(140px,18vh,220px);--fg:#EEE9DF;--muted:#B3B8C0;--line:rgba(238,233,223,.2);--bg:#0A0D12;--monof:"Martian Mono",ui-monospace,monospace;--sans:Archivo,system-ui,sans-serif}
.pg-start-side{grid-column:1/6;margin-top:clamp(36px,5vh,56px)}
.pg-start-lede{font-size:18px;line-height:1.55;max-width:40ch}
.pg-start-links{margin-top:26px}
.pg-fig-crest-end{margin-top:clamp(32px,5vh,48px);max-width:420px}
.pg-start-form{grid-column:7/13;margin-top:clamp(36px,5vh,56px)}
.pg-start-form.dx{background:transparent;z-index:auto;font-size:17px}
.pg-start-form .dx-form{margin-top:0;max-width:none;gap:24px}
.pg-start-form .dx-submit{background:#FFC21A}
.pg-related{padding-top:clamp(52px,7vh,84px);padding-bottom:clamp(96px,12vh,140px)}
.pg-related-h{grid-column:1/6;font-size:clamp(26px,2.6vw,36px)}
.pg-related-list{grid-column:7/13;list-style:none}
.pg-related-list li{border-top:1px solid rgba(238,233,223,.18)}
.pg-related-list li:last-child{border-bottom:1px solid rgba(238,233,223,.18)}
.pg-related-list a{display:block;padding:15px 0;font-size:18px;line-height:1.4;text-decoration:none}
.pg-related-list a:hover{text-decoration:underline;text-underline-offset:.25em}
.pg-a .dx-foot-cols{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pg-gap);row-gap:44px}
.pg-a .dx-foot-cols>div:nth-child(1){grid-column:1/7;grid-row:1/3}
.pg-a .dx-foot-cols>div:nth-child(2){grid-column:7/13}
.pg-a .dx-foot-cols>div:nth-child(3){grid-column:7/13}

@media (max-width:1000px){
  .pg-toc-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .pg-faq-list{margin-top:clamp(20px,3vh,28px)}
  .pg-grid{grid-template-columns:minmax(0,1fr);column-gap:0}
  .pg-h1,.pg-hero-side,.pg-h2,.pg-read,.pg-side,.pg-take,.pg-take-side,.pg-table-head,.pg-rules-a,.pg-rules-b,.pg-ex-a,.pg-ex-b,.pg-ex-note,.pg-callout,.pg-sub,.pg-intro,.pg-note-left,.pg-h2-a1,.pg-steps-list,.pg-cards,.pg-faq-head,.pg-faq-list,.pg-src-list,.pg-src-fig,.pg-steps-fig,.pg-steps-note,.pg-start-side,.pg-start-form,.pg-related-h,.pg-related-list,.pg-toc-panel{grid-column:1/-1}
  .pg-hero{min-height:82vh}
  .pg-low{padding-top:clamp(150px,34vh,300px)}
  .pg-h1{font-size:clamp(30px,8.4vw,40px);max-width:none}
  .pg-h1 span{display:inline}
  .pg-side-sticky,.pg-faq-head{position:static}
  .pg-toc-list{grid-template-columns:minmax(0,1fr)}
  .pg-toc-panel{margin-inline:0;padding-inline:clamp(16px,4vw,24px)}
  .pg-read{font-size:17px}
  .pg-cards{grid-template-columns:minmax(0,1fr)}
  .pg-ex-b,.pg-rules-b{margin-top:22px}
  .pg-table-head thead{display:none}
  .pg-table-head tbody tr{grid-template-columns:minmax(0,1fr);padding:18px 16px}
  .pg-table-head tbody th,.pg-table-head tbody td,.pg-attr tbody td:nth-of-type(1),.pg-attr tbody td:nth-of-type(2),.pg-attr tbody td:nth-of-type(3),.pg-proh tbody td:nth-of-type(1){grid-column:1/-1}
  .pg-table-head tbody td{margin-top:11px}
  .pg-table-head .pg-lab{display:block}
  .pg-side .pg-fig+.pg-fig,.pg-side .pg-media+.pg-fig{margin-top:26px}
  .pg-gauge{left:3px;width:12px;gap:8px}
  .pg-gauge-t{display:none}
  .pg-gauge ol{gap:3px}
  .pg-a .dx-foot-cols{grid-template-columns:minmax(0,1fr)}
  .pg-a .dx-foot-cols>div{grid-column:1/-1!important;grid-row:auto!important}
  .pg-start .dx-form{grid-template-columns:minmax(0,1fr)}
  .pg-start-form{margin-top:32px}
}