<section class="tl6-wrap">
  <header class="tl6-head">
    <h2 class="tl6-title">Sourdough <span class="tl6-swash">Starter</span><br>A 21-day Diary</h2>
    <div class="tl6-recipe">
      <h4 class="tl6-recipe-head">before you begin —</h4>
      <p>You need almost nothing. A glass jar, a wooden spoon, room around 22°C, and the patience of someone who has never been in a hurry.</p>
      <p class="tl6-ing">— rye flour, room-temp water, a kitchen with a window</p>
    </div>
  </header>

  <div class="tl6-grid">
    <div class="tl6-day-label">mon</div>
    <div class="tl6-day-label">tue</div>
    <div class="tl6-day-label">wed</div>
    <div class="tl6-day-label">thu</div>
    <div class="tl6-day-label">fri</div>
    <div class="tl6-day-label">sat</div>
    <div class="tl6-day-label">sun</div>

    <div class="tl6-day">
      <div class="tl6-num">1</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="38" width="20" height="8" fill="#d4b890"/>
        </svg>
      </div>
      <div class="tl6-stage">flour + water, mixed</div>
      <div class="tl6-act" style="--act: 10%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">2</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="36" width="20" height="10" fill="#d4b890"/>
          <circle cx="16" cy="42" r="1" class="tl6-bubble" style="animation-delay: 0s"/>
        </svg>
      </div>
      <div class="tl6-stage">quiet still</div>
      <div class="tl6-act" style="--act: 15%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">3</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="32" width="20" height="14" fill="#d4b890"/>
          <circle cx="14" cy="40" r="1.5" class="tl6-bubble" style="animation-delay: 0.5s"/>
          <circle cx="22" cy="38" r="1" class="tl6-bubble" style="animation-delay: 1s"/>
        </svg>
      </div>
      <div class="tl6-stage">first bubbles</div>
      <div class="tl6-act" style="--act: 35%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">4</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="28" width="20" height="18" fill="#d4b890"/>
          <circle cx="14" cy="38" r="1.5" class="tl6-bubble" style="animation-delay: 0.2s"/>
          <circle cx="20" cy="34" r="1" class="tl6-bubble" style="animation-delay: 0.7s"/>
          <circle cx="26" cy="40" r="1.5" class="tl6-bubble" style="animation-delay: 1.2s"/>
        </svg>
      </div>
      <div class="tl6-stage">smells sour</div>
      <div class="tl6-act" style="--act: 55%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">5</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="24" width="20" height="22" fill="#d4b890"/>
          <circle cx="13" cy="36" r="1" class="tl6-bubble" style="animation-delay: 0.1s"/>
          <circle cx="20" cy="32" r="1.5" class="tl6-bubble" style="animation-delay: 0.6s"/>
          <circle cx="27" cy="38" r="1" class="tl6-bubble" style="animation-delay: 1.1s"/>
        </svg>
      </div>
      <div class="tl6-stage">false rise</div>
      <div class="tl6-act" style="--act: 60%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">6</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="30" width="20" height="16" fill="#d4b890"/>
        </svg>
      </div>
      <div class="tl6-stage">it falls. don't worry.</div>
      <div class="tl6-act" style="--act: 30%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">7</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="26" width="20" height="20" fill="#d4b890"/>
          <circle cx="14" cy="36" r="1.5" class="tl6-bubble" style="animation-delay: 0.3s"/>
          <circle cx="24" cy="34" r="1" class="tl6-bubble" style="animation-delay: 0.8s"/>
        </svg>
      </div>
      <div class="tl6-stage">second wind</div>
      <div class="tl6-act" style="--act: 50%"></div>
    </div>

    <div class="tl6-day">
      <div class="tl6-num">8</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="22" width="20" height="24" fill="#d4b890"/>
          <circle cx="13" cy="34" r="1" class="tl6-bubble"/>
          <circle cx="21" cy="30" r="1.5" class="tl6-bubble" style="animation-delay: 0.5s"/>
          <circle cx="27" cy="36" r="1" class="tl6-bubble" style="animation-delay: 1s"/>
        </svg>
      </div>
      <div class="tl6-stage">tangier now</div>
      <div class="tl6-act" style="--act: 65%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">9</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="18" width="20" height="28" fill="#d4b890"/>
          <circle cx="14" cy="32" r="1" class="tl6-bubble" style="animation-delay: 0.1s"/>
          <circle cx="20" cy="28" r="1.5" class="tl6-bubble" style="animation-delay: 0.6s"/>
          <circle cx="26" cy="34" r="1" class="tl6-bubble" style="animation-delay: 1.1s"/>
        </svg>
      </div>
      <div class="tl6-stage">doubling</div>
      <div class="tl6-act" style="--act: 78%"></div>
    </div>
    <div class="tl6-day tl6-peak">
      <div class="tl6-num">10</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="14" width="20" height="32" fill="#d4b890"/>
          <circle cx="13" cy="30" r="1.5" class="tl6-bubble" style="animation-delay: 0s"/>
          <circle cx="20" cy="26" r="1" class="tl6-bubble" style="animation-delay: 0.4s"/>
          <circle cx="27" cy="32" r="1.5" class="tl6-bubble" style="animation-delay: 0.8s"/>
          <circle cx="16" cy="22" r="1" class="tl6-bubble" style="animation-delay: 1.2s"/>
        </svg>
      </div>
      <div class="tl6-stage">first peak ✦</div>
      <div class="tl6-act" style="--act: 90%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">11</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="22" width="20" height="24" fill="#d4b890"/>
          <circle cx="14" cy="34" r="1" class="tl6-bubble" style="animation-delay: 0.3s"/>
          <circle cx="24" cy="30" r="1.5" class="tl6-bubble" style="animation-delay: 0.8s"/>
        </svg>
      </div>
      <div class="tl6-stage">discard half</div>
      <div class="tl6-act" style="--act: 50%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">12</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="20" width="20" height="26" fill="#d4b890"/>
          <circle cx="13" cy="32" r="1.5" class="tl6-bubble"/>
          <circle cx="22" cy="28" r="1" class="tl6-bubble" style="animation-delay: 0.5s"/>
        </svg>
      </div>
      <div class="tl6-stage">rebuilding</div>
      <div class="tl6-act" style="--act: 68%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">13</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="16" width="20" height="30" fill="#d4b890"/>
          <circle cx="14" cy="30" r="1" class="tl6-bubble" style="animation-delay: 0.2s"/>
          <circle cx="22" cy="26" r="1.5" class="tl6-bubble" style="animation-delay: 0.7s"/>
          <circle cx="27" cy="32" r="1" class="tl6-bubble" style="animation-delay: 1.1s"/>
        </svg>
      </div>
      <div class="tl6-stage">predictable</div>
      <div class="tl6-act" style="--act: 82%"></div>
    </div>
    <div class="tl6-day tl6-peak">
      <div class="tl6-num">14</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="12" width="20" height="34" fill="#d4b890"/>
          <circle cx="13" cy="28" r="1.5" class="tl6-bubble" style="animation-delay: 0s"/>
          <circle cx="20" cy="24" r="1" class="tl6-bubble" style="animation-delay: 0.4s"/>
          <circle cx="27" cy="30" r="1.5" class="tl6-bubble" style="animation-delay: 0.8s"/>
          <circle cx="17" cy="20" r="1" class="tl6-bubble" style="animation-delay: 1.2s"/>
        </svg>
      </div>
      <div class="tl6-stage">bake-ready ✦</div>
      <div class="tl6-act" style="--act: 95%"></div>
    </div>

    <div class="tl6-day">
      <div class="tl6-num">15</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="18" width="20" height="28" fill="#d4b890"/>
          <circle cx="14" cy="32" r="1" class="tl6-bubble" style="animation-delay: 0.1s"/>
          <circle cx="24" cy="28" r="1.5" class="tl6-bubble" style="animation-delay: 0.6s"/>
        </svg>
      </div>
      <div class="tl6-stage">first loaf</div>
      <div class="tl6-act" style="--act: 75%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">16</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="20" width="20" height="26" fill="#d4b890"/>
        </svg>
      </div>
      <div class="tl6-stage">rest</div>
      <div class="tl6-act" style="--act: 40%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">17</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="16" width="20" height="30" fill="#d4b890"/>
          <circle cx="14" cy="30" r="1" class="tl6-bubble" style="animation-delay: 0.2s"/>
          <circle cx="22" cy="26" r="1.5" class="tl6-bubble" style="animation-delay: 0.7s"/>
        </svg>
      </div>
      <div class="tl6-stage">name it</div>
      <div class="tl6-act" style="--act: 82%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">18</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="14" width="20" height="32" fill="#d4b890"/>
          <circle cx="13" cy="28" r="1" class="tl6-bubble" style="animation-delay: 0.1s"/>
          <circle cx="21" cy="24" r="1.5" class="tl6-bubble" style="animation-delay: 0.5s"/>
          <circle cx="27" cy="30" r="1" class="tl6-bubble" style="animation-delay: 0.9s"/>
        </svg>
      </div>
      <div class="tl6-stage">share with neighbor</div>
      <div class="tl6-act" style="--act: 88%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">19</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="18" width="20" height="28" fill="#d4b890"/>
          <circle cx="14" cy="32" r="1.5" class="tl6-bubble"/>
        </svg>
      </div>
      <div class="tl6-stage">to the fridge</div>
      <div class="tl6-act" style="--act: 25%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">20</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="22" width="20" height="24" fill="#d4b890"/>
        </svg>
      </div>
      <div class="tl6-stage">sleeping</div>
      <div class="tl6-act" style="--act: 12%"></div>
    </div>
    <div class="tl6-day tl6-peak">
      <div class="tl6-num">21</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="12" width="20" height="34" fill="#d4b890"/>
          <circle cx="13" cy="28" r="1.5" class="tl6-bubble"/>
          <circle cx="20" cy="24" r="1" class="tl6-bubble" style="animation-delay: 0.5s"/>
          <circle cx="27" cy="30" r="1.5" class="tl6-bubble" style="animation-delay: 1s"/>
        </svg>
      </div>
      <div class="tl6-stage">it has a name now ✦</div>
      <div class="tl6-act" style="--act: 92%"></div>
    </div>
  </div>

  <div class="tl6-tasting">
    <div class="tl6-note">
      <h5 class="tl6-note-head">day 3 — first acid</h5>
      <div class="tl6-note-day">tasting note</div>
      Sharp, almost like green apple peel. Bubbles smaller than a poppy seed. You will think it has failed. It has not.
    </div>
    <div class="tl6-note">
      <h5 class="tl6-note-head">day 10 — peak one</h5>
      <div class="tl6-note-day">tasting note</div>
      Yogurt and warm wheat. Doubles in four hours. The smell will rearrange your kitchen — in a good way.
    </div>
    <div class="tl6-note">
      <h5 class="tl6-note-head">day 21 — the bread</h5>
      <div class="tl6-note-day">tasting note</div>
      Crust like old porcelain, crumb the color of evening light. A faint sweetness underneath the sour. Now you have a friend for life.
    </div>
  </div>
</section>

.tl6-wrap {
  background: #f5ecd9;
  color: #3a2a1a;
  font-family: Georgia, serif;
  padding: 2.5rem 2rem 3rem;
  position: relative;
  overflow: hidden;
}
.tl6-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(184, 92, 56, 0.04) 0 80px, transparent 80px),
    radial-gradient(circle at 80% 70%, rgba(106, 130, 90, 0.06) 0 100px, transparent 100px),
    radial-gradient(circle at 50% 50%, rgba(146, 89, 130, 0.03) 0 60px, transparent 60px);
  pointer-events: none;
}
.tl6-wrap > * { position: relative; }
.tl6-head {
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
  align-items: end;
}
.tl6-title {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 5vw, 3rem);
  line-height: 0.95;
  color: #3a2a1a;
  margin: 0;
}
.tl6-swash {
  font-family: Georgia, cursive;
  color: #b85c38;
  font-weight: 700;
  font-style: normal;
  display: block;
  font-size: 1.2em;
  transform: rotate(-2deg) translateX(20px);
}
.tl6-recipe {
  background: #fff8e8;
  border: 1px solid #c4ab85;
  padding: 1rem;
  transform: rotate(1deg);
  box-shadow: 4px 4px 0 rgba(58,42,26,0.1);
  position: relative;
}
.tl6-recipe::before {
  content: '';
  position: absolute;
  top: -10px; left: 50%;
  width: 60px; height: 16px;
  background: rgba(184, 92, 56, 0.3);
  transform: translateX(-50%) rotate(-3deg);
}
.tl6-recipe-head {
  font-family: cursive;
  font-size: 1.35rem;
  color: #b85c38;
  margin: 0 0 0.5rem;
  font-weight: 700;
}
.tl6-recipe p {
  font-size: 13px;
  line-height: 1.5;
  color: #5a3e2a;
  margin: 0 0 0.5rem;
}
.tl6-ing {
  font-family: cursive;
  font-size: 1rem !important;
  color: #6a4a3a !important;
}
.tl6-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.75rem;
}
.tl6-day-label {
  font-family: cursive;
  font-size: 1.15rem;
  color: #b85c38;
  text-align: center;
  padding-bottom: 0.5rem;
  border-bottom: 1.5px dashed #c4ab85;
}
.tl6-day {
  aspect-ratio: 1;
  background: #fff8e8;
  border: 1.5px solid #c4ab85;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  overflow: hidden;
}
.tl6-day:hover {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: 4px 6px 0 rgba(58,42,26,0.15);
  z-index: 3;
}
.tl6-num {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: #6a4a3a;
}
.tl6-stage {
  font-family: cursive;
  font-size: 0.9rem;
  line-height: 1.1;
  color: #3a2a1a;
  margin-top: auto;
}
.tl6-jar {
  width: 44px;
  height: 54px;
  margin: 4px auto;
}
.tl6-jar svg { width: 100%; height: 100%; }
.tl6-bubble {
  fill: rgba(255,255,255,0.6);
  animation: tl6-rise 3s ease-in infinite;
}
@keyframes tl6-rise {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-30px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tl6-bubble { animation: none; opacity: 0.6; }
}
.tl6-peak { background: #ffe9c4; border-color: #b85c38; }
.tl6-peak .tl6-stage { color: #b85c38; font-weight: 700; }
.tl6-act {
  height: 4px;
  background: rgba(196,171,133,0.3);
  margin-top: 4px;
  position: relative;
}
.tl6-act::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--act, 0%);
  background: linear-gradient(90deg, #6a825a, #b85c38);
}
.tl6-tasting {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid #c4ab85;
}
.tl6-note {
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: #5a3e2a;
  padding-left: 1rem;
  border-left: 2px solid #b85c38;
}
.tl6-note-head {
  font-family: cursive;
  font-style: normal;
  font-size: 1.25rem;
  color: #b85c38;
  margin: 0 0 0.25rem;
  font-weight: 700;
}
.tl6-note-day {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6a4a3a;
  margin-bottom: 0.5rem;
}
@media (max-width: 720px) {
  .tl6-head { grid-template-columns: 1fr; gap: 1.25rem; }
  .tl6-grid { grid-template-columns: repeat(4, 1fr); }
  .tl6-tasting { grid-template-columns: 1fr; }
}