*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-heading);font-weight:var(--weight-bold);letter-spacing:var(--tracking-display);margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
.btn{display:inline-flex;align-items:center;gap:var(--space-2);height:40px;padding-inline:var(--space-5);border:0;border-radius:var(--radius-md);background:var(--color-btn-bg);color:var(--color-btn-ink);font-family:var(--font-body);font-weight:var(--weight-medium);font-size:var(--text-sm);cursor:pointer;text-decoration:none}
.brush{font-family:var(--font-brush);font-weight:400}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Page frame: centered 1130px column with hairline lines on both edges (see Paper "Line · column left/right"). */
.page{position:relative;width:100%;overflow-x:clip}
.container{width:min(var(--container-wide),100%);margin-inline:auto;position:relative}
section{position:relative}

/* Column hairlines at the container edges (Paper "Line · column left/right"): 155/1284 at 1440, 40/770 at 810, 8/382 at 390 (phone, set in scale90.css). */
.page{--line-gutter:max(40px,calc((100% - var(--container-wide))/2));
  --lines-img:linear-gradient(var(--color-border),var(--color-border)),linear-gradient(var(--color-border),var(--color-border));
  --lines-pos:var(--line-gutter) 0,calc(100% - var(--line-gutter) - 1px) 0;   /* shared with the sticky nav (nav.css) so the lines run through the header at the same x */
  background-image:var(--lines-img);
  background-repeat:no-repeat;background-size:1px 100%;
  background-position:var(--lines-pos)}
@media (max-width:599px){.page{--line-gutter:8px}}
/* Padding pass (owner 2026-11-01, PADDING-CHANGES.md): content sits 18px clear of each 1px column line = 19px in from the column edge.
   Desktop + tablet only; phone keeps its own gutters until its pass. */
.page{--edge:0px}
@media (min-width:600px){.page{--edge:19px}}
/* 600-810: the gutter is a fixed 40px and the right line was drawn 1px further in than the column edge (right gap read 17, left 18). Pin it one gutter from the right edge. 811+ already measures 18/18. */
@media (min-width:600px) and (max-width:810px){.page{--lines-pos:var(--line-gutter) 0,right var(--line-gutter) top 0}}