/* =============================================================================
   art.css — the mark and the cover illustration.

   The mark is a Turing machine reduced to its two essential parts: a tape of
   cells, and a head sitting over one of them. It is the oldest picture in
   computing and it still describes every machine on this site.

   The cover is drawn in the manner of an engraved technical plate: line work,
   cross-hatching for shade, no fills doing the heavy lifting. Everything is
   stroked in currentColor or a theme token, so it reads correctly in both
   themes and needs no image file.
   ========================================================================== */

/* ------------------------------------------------------------------- mark */
.mark{width:26px; height:26px; flex:none; display:block; color:var(--accent)}
.wordmark .mark{width:24px; height:24px}
.mark .tape{stroke:currentColor; fill:none; stroke-width:1.8}
.mark .cell{stroke:currentColor; fill:none; stroke-width:1.2; opacity:.6}
.mark .lit{fill:currentColor; stroke:none}
.mark .head{stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round;
  stroke-linejoin:round}
.mark .pin{fill:currentColor}

/* ------------------------------------------------------- cover engraving */
.cover-art{width:100%; max-width:520px; height:auto; display:block}
.cover-art .ink      {stroke:var(--txt); fill:none; stroke-width:1.15; stroke-linejoin:round}
.cover-art .ink-thin {stroke:var(--txt); fill:none; stroke-width:.6; opacity:.55}
.cover-art .hatch    {stroke:var(--txt); fill:none; stroke-width:.5; opacity:.32}
.cover-art .accent   {stroke:var(--accent); fill:none; stroke-width:1.5}
.cover-art .accent-f {fill:var(--accent); stroke:none}
.cover-art .paper    {fill:var(--panel)}
.cover-art .glyph    {fill:var(--txt); font-family:var(--mono); font-size:11px; opacity:.85}
.cover-art .rule     {stroke:var(--line2); fill:none; stroke-width:1}
.cover-art .halo     {fill:none; stroke:var(--line); stroke-width:.75; opacity:.5}

/* the plate sits in a ruled frame, the way a printed figure would */
.plate{border:1px solid var(--line); border-radius:var(--r-lg,14px); padding:22px 20px 16px;
  background:var(--panel)}
.plate figcaption{margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:.76rem; color:var(--dimmer); line-height:1.5; font-family:var(--mono)}
.plate figcaption b{color:var(--dim); font-weight:700}

/* The .herowrap rules that used to live here, a two-column grid putting the
   plate beside the hero text, went out with the hero itself when the catalog
   became the front door. No page has carried the class since. */

@media (prefers-reduced-motion: no-preference){
  .cover-art .scan{animation:scanmove 9s ease-in-out infinite}
  @keyframes scanmove{
    0%,100%{transform:translateX(0)}
    50%    {transform:translateX(46px)}
  }
}