/* The about column — the one place its styles live. about.html loads it for the standalone page; editor.js loads it (from about.html's own
   <link>) so the welcome's "about" can lay the same column over the same canvas, taking #aboutCol out of about.html. Everything
   is scoped under #aboutCol, so neither page's own rules reach in or out. Page-level rules (body, the canvas, the column's
   first fade) stay in about.html. */
#aboutCol { position: relative; z-index: 1; box-sizing: border-box; max-width: 36em; margin: 0 auto; padding: 14vh 24px 12vh;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 26px; }
#aboutCol h1 { margin: 0; font: 300 clamp(42px, 9vw, 78px)/1 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  letter-spacing: .03em; color: #f2f6ee; text-shadow: 0 2px 30px rgba(0,0,0,.5); }
#aboutCol h1 .jp { display: block; margin-top: .38em; font-size: .3em; letter-spacing: .5em;
  color: #9fb89f; font-weight: 400; text-indent: .5em; }
#aboutCol h2 { margin: 18px 0 -8px; font: italic 400 clamp(16px,2.2vw,19px)/1.3 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  letter-spacing: .02em; color: #9fb89f; }
#aboutCol p, #aboutCol blockquote { margin: 0; max-width: 30em; color: #cedcc5; text-shadow: 0 1px 16px rgba(0,0,0,.55);
  font: 400 clamp(15px,2.2vw,19px)/1.65 ui-serif,Georgia,"Times New Roman",serif; }
#aboutCol blockquote { font-style: italic; color: #e3ecda; }
#aboutCol p a { color: #9fb89f; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgba(159,184,159,.4);
  transition: color .45s ease, text-decoration-color .45s ease; }
#aboutCol p a:hover, #aboutCol p a:focus-visible { color: #f1e7cf; text-decoration-color: rgba(241,231,207,.5); }
#aboutCol p a[hidden], #aboutCol p[hidden], #aboutCol h2[hidden] { display: none; }
/* "feel", as the welcome has it */
#aboutCol .feel { margin-top: 18px; cursor: pointer; color: #f1e7cf; text-decoration: none;
  font: italic 400 clamp(19px,2.7vw,23px)/1 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  letter-spacing: .015em; padding: 10px 32px; border-radius: 40px;
  background: rgba(240,224,168,.05); border: 1px solid rgba(232,217,168,.30);
  box-shadow: 0 0 0 rgba(240,224,168,0);
  transition: color .45s ease, background .45s ease, border-color .45s ease, box-shadow .55s ease, transform .35s ease; }
#aboutCol .feel:hover, #aboutCol .feel:focus-visible { color: #fff8e6; background: rgba(240,224,168,.11); border-color: rgba(240,224,168,.6);
  box-shadow: 0 0 34px rgba(240,224,168,.28); transform: translateY(-1px); }
#aboutCol .feel:active { transform: translateY(0); }
/* who made it: a quiet last line beneath "feel" */
#aboutCol p.made { margin-top: 2.5em; font-size: clamp(13px,1.8vw,15px); font-style: italic; color: #9fb89f; }