/* =====================================================================
   LAYOUT  -  the page shell: dotted background, line-number gutter,
   scroll progress bar, the section grid, scroll-reveal and the footer.
   (The sidebar has its own file: sidebar.css.)
   ===================================================================== */

:root{--gut:56px}

body{position:relative;padding-left:calc(var(--sb) + var(--gut));background-image:radial-gradient(circle,var(--line) 1px,transparent 1.3px);background-size:28px 28px;transition:background-color .35s ease,border-color .35s ease,color .35s ease}

/* decorative line numbers (drawn by js/features/line-gutter.js) */
.gut{position:absolute;top:0;left:var(--sb);width:var(--gut);margin:0;overflow:hidden;padding-right:14px;text-align:right;font:12px/28px var(--mono);color:var(--ln);border-right:1px solid var(--line);user-select:none;pointer-events:none;z-index:1}

/* thin scroll progress bar */
.prog{position:fixed;top:0;left:var(--sb);right:0;height:2px;z-index:40;pointer-events:none}
.prog::after{content:"";display:block;height:100%;background:var(--blue);transform-origin:left;transform:scaleX(var(--p,0))}

/* ---- sections ----
   Every <section> inside <main> is a two-part grid: the "// title" on top, content below.
   Sections are exactly as tall as their content (only the hero is full-screen),
   so there is no empty space. Change the spacing with the padding line below. */
main{max-width:none;margin:0;padding:0}
main>section{
  display:grid;grid-template-columns:minmax(0,1fr);align-content:start;align-items:start;
  max-width:none;margin:0;overflow-x:clip;
  padding:clamp(56px,6.5vw,88px) max(clamp(20px,5vw,72px),calc((100% - 1200px)/2));
  border-top:1px solid var(--line);
}
main>section>*{width:100%;max-width:900px}
main>section>*:not(h2){grid-column:1;max-width:1040px;min-width:0}
main>section>h2{grid-column:1;width:auto;margin:0 0 32px;font:500 14px/1 var(--mono);color:var(--dim);letter-spacing:0}
main>section>h2 b{color:var(--violet);font-weight:500}
@media (max-width:820px){main>section{padding-block:48px}}

main>footer{padding:28px max(clamp(20px,5vw,72px),calc((100% - 1200px)/2));border-top:1px solid var(--line);font:12px var(--mono);color:var(--dim)}

/* ---- scroll reveal (class .js-rv is added by js/features/reveal.js, .in when a section is on screen) ---- */
.js-rv main>section>*{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.js-rv main>section>h2{transform:translateX(-18px)}
.js-rv main>section.in>*{opacity:1;transform:none}
.js-rv main>section>*:nth-child(2){transition-delay:.1s}
.js-rv main>section>*:nth-child(3){transition-delay:.2s}
.js-rv main>section>*:nth-child(4){transition-delay:.3s}
.js-rv main>section>*:nth-child(5){transition-delay:.4s}
.js-rv main>section>*:nth-child(n+6){transition-delay:.5s}
@media (prefers-reduced-motion:reduce){
  .js-rv main>section>*,.js-rv main>section>h2{opacity:1;transform:none;transition:none}
}

@media (max-width:820px){:root{--gut:0px}.gut{display:none}}