/* YARN · 2026-05-13 · respectful reference per CLAUDE.md */
  :root{
    --yarn-ochre-red:    #A0522D;
    --yarn-ochre-yellow: #DAA520;
    --yarn-ochre-white:  #F5E6D3;
    --yarn-ochre-char:   #1A1410;
    --yarn-ochre-burnt:  #8B4513;
    --yarn-dot:          rgba(218, 165, 32, .35);
    --yarn-dot-dim:      rgba(218, 165, 32, .12);
  }
  .yarn-strip{
    position:relative; width:100%; height:26px; overflow:hidden;
    background: linear-gradient(180deg,
      rgba(160, 82, 45, .04) 0%, rgba(160, 82, 45, .13) 50%, rgba(160, 82, 45, .04) 100%);
    border-bottom: 1px solid rgba(218, 165, 32, .14);
    z-index: 1;
  }
  .yarn-strip::before{
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:
      radial-gradient(circle at 4px 6px,  var(--yarn-dot)     0.7px, transparent 1.3px),
      radial-gradient(circle at 8px 18px, var(--yarn-dot-dim) 0.6px, transparent 1.1px);
    background-size: 26px 12px, 34px 12px;
    background-position: 0 0, 0 14px;
    opacity: .9;
    animation: yarnDrift 22s linear infinite;
  }
  @media (prefers-reduced-motion: reduce){ .yarn-strip::before{ animation:none; } }
  @keyframes yarnDrift{
    0%   { background-position: 0 0, 0 14px; }
    100% { background-position: 260px 0, -340px 14px; }
  }
  .yarn-strip .yarn-label{
    position:absolute; top:50%; left:32px; transform:translateY(-50%);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 8.5px; letter-spacing: 3px;
    color: var(--yarn-ochre-yellow);
    text-transform: uppercase; opacity: .7; z-index: 3;
    background: rgba(0,0,0,.78); padding: 2px 9px;
  }
  .yarn-strip .yarn-anchor{
    position:absolute; top:50%; right:32px; transform:translateY(-50%);
    font-family: Georgia, 'Iowan Old Style', serif;
    font-size: 10px; font-style: italic;
    color: var(--yarn-ochre-white); opacity: .55; z-index: 3;
    background: rgba(0,0,0,.78); padding: 2px 10px;
  }
  @media (max-width: 640px){ .yarn-strip .yarn-anchor{ display:none; } }