Fermentation Calendar
Hand-drawn 21-day grid where each day is a glass jar SVG with rising bubble animations and an activity bar. Soft EB Garamond + Caveat typography on cream paper. Peak days are highlighted in terracotta. Built for time-lapse projects, recipe diaries, and any patient process measured by days.
Fermentation Calendar the 6th of 24 designs in the 24 CSS Timeline Layouts collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<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; }
}