/* ── SCOPED TO #tlc-sketchbook ───────────────────────────── */
#tlc-sketchbook *,
#tlc-sketchbook *::before,
#tlc-sketchbook *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#tlc-sketchbook {
–ink: #0d0d0f;
–deep: #0f1115;
–cream: #f7f0e6;
–gold: #d4a843;
–amber: #c47c2a;
–teal: #1a5c5a;
–cobalt: #1b3a6b;
–coral: #d45a3a;
–plum: #3d1f3f;
–sand: #ede4d4;
–muted: rgba(247,240,230,0.52);
–rule: rgba(247,240,230,0.08);
background: var(–ink);
color: var(–cream);
font-family: ‘Crimson Pro’, Georgia, serif;
font-size: 18px;
line-height: 1.75;
overflow-x: hidden;
}
/* ── HERO ── */
#tlc-sketchbook .skb-hero {
min-height: 72vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 5rem 2rem 4rem;
position: relative;
overflow: hidden;
background: var(–ink);
}
/* scattered ink dot texture */
#tlc-sketchbook .ink-dot {
position: absolute;
border-radius: 50%;
background: var(–gold);
opacity: 0;
animation: skbFloat ease-in-out infinite;
pointer-events: none;
}
#tlc-sketchbook .ink-dot:nth-child(1) { width:3px; height:3px; top:12%; left:8%; animation-duration:7s; animation-delay:0s; opacity:.18; }
#tlc-sketchbook .ink-dot:nth-child(2) { width:2px; height:2px; top:25%; left:72%; animation-duration:9s; animation-delay:-2s; opacity:.12; }
#tlc-sketchbook .ink-dot:nth-child(3) { width:4px; height:4px; top:55%; left:18%; animation-duration:11s; animation-delay:-4s; opacity:.15; }
#tlc-sketchbook .ink-dot:nth-child(4) { width:2px; height:2px; top:38%; left:88%; animation-duration:8s; animation-delay:-1s; opacity:.1; }
#tlc-sketchbook .ink-dot:nth-child(5) { width:3px; height:3px; top:70%; left:55%; animation-duration:13s; animation-delay:-6s; opacity:.14; background: var(–coral); }
#tlc-sketchbook .ink-dot:nth-child(6) { width:2px; height:2px; top:18%; left:42%; animation-duration:10s; animation-delay:-3s; opacity:.1; background: var(–teal); }
#tlc-sketchbook .ink-dot:nth-child(7) { width:5px; height:5px; top:82%; left:28%; animation-duration:14s; animation-delay:-8s; opacity:.08; }
#tlc-sketchbook .ink-dot:nth-child(8) { width:2px; height:2px; top:45%; left:65%; animation-duration:6s; animation-delay:-2s; opacity:.15; background: var(–coral); }
@keyframes skbFloat {
0%,100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-12px) scale(1.3); }
}
/* large faint text texture behind hero */
#tlc-sketchbook .skb-hero-texture {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-family: ‘Cormorant Garamond’, serif;
font-style: italic;
font-size: clamp(8rem, 22vw, 18rem);
font-weight: 300;
color: rgba(247,240,230,0.025);
white-space: nowrap;
pointer-events: none;
user-select: none;
letter-spacing: -.02em;
line-height: 1;
}
#tlc-sketchbook .skb-hero-inner {
position: relative;
z-index: 2;
max-width: 1020px;
margin: 0 auto;
width: 100%;
}
#tlc-sketchbook .skb-breadcrumb {
font-size: .78rem;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(247,240,230,.3);
margin-bottom: 2rem;
display: flex;
align-items: center;
gap: .6rem;
opacity: 0;
animation: skbUp .7s ease .1s forwards;
}
#tlc-sketchbook .skb-breadcrumb a {
color: rgba(247,240,230,.3);
text-decoration: none;
transition: color .2s;
}
#tlc-sketchbook .skb-breadcrumb a:hover { color: var(–gold); }
#tlc-sketchbook .skb-breadcrumb span { color: var(–gold); }
#tlc-sketchbook .skb-hero-label {
font-style: italic;
font-size: .8rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(–gold);
display: block;
margin-bottom: 1rem;
opacity: 0;
animation: skbUp .7s ease .25s forwards;
}
#tlc-sketchbook .skb-hero-title {
font-family: ‘DM Serif Display’, serif;
font-size: clamp(3rem, 9vw, 7rem);
font-weight: 400;
color: var(–cream);
line-height: .95;
letter-spacing: -.02em;
opacity: 0;
animation: skbUp .9s ease .4s forwards;
}
#tlc-sketchbook .skb-hero-title em {
font-style: italic;
color: var(–gold);
display: block;
}
#tlc-sketchbook .skb-hero-desc {
margin-top: 1.75rem;
max-width: 560px;
font-size: 1.1rem;
color: var(–muted);
font-style: italic;
line-height: 1.85;
opacity: 0;
animation: skbUp .9s ease .65s forwards;
}
#tlc-sketchbook .skb-hero-meta {
margin-top: 1.5rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.5rem;
opacity: 0;
animation: skbUp .8s ease .85s forwards;
}
#tlc-sketchbook .skb-count {
font-size: .8rem;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(247,240,230,.3);
}
#tlc-sketchbook .skb-count strong {
color: var(–gold);
font-weight: 600;
}
/* ── WAVE ── */
#tlc-sketchbook .skb-wave {
background: var(–ink);
line-height: 0;
}
#tlc-sketchbook .skb-wave svg { display: block; width: 100%; }
/* ── SHARED ── */
#tlc-sketchbook .wrap {
max-width: 1020px;
margin: 0 auto;
padding: 0 1.5rem;
}
#tlc-sketchbook .section {
padding: 5rem 1.5rem;
}
#tlc-sketchbook .eyebrow {
display: block;
font-style: italic;
font-size: .78rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(–gold);
margin-bottom: .85rem;
}
#tlc-sketchbook .section-heading {
font-family: ‘DM Serif Display’, serif;
font-size: clamp(1.6rem, 3.5vw, 2.4rem);
color: var(–cream);
line-height: 1.1;
margin-bottom: .75rem;
}
#tlc-sketchbook .section-heading em { color: var(–gold); font-style: italic; }
/* ── TOPIC FILTER ── */
#tlc-sketchbook .skb-filters {
display: flex;
flex-wrap: wrap;
gap: .6rem;
margin-bottom: 3rem;
}
#tlc-sketchbook .filter-btn {
padding: .38rem 1rem;
border-radius: 50px;
border: 1.5px solid rgba(247,240,230,.15);
background: transparent;
color: rgba(247,240,230,.55);
font-family: ‘Crimson Pro’, serif;
font-size: .88rem;
font-style: italic;
letter-spacing: .05em;
cursor: pointer;
transition: border-color .25s, color .25s, background .25s;
}
#tlc-sketchbook .filter-btn:hover,
#tlc-sketchbook .filter-btn.active {
border-color: var(–gold);
color: var(–gold);
background: rgba(212,168,67,.07);
}
/* ── SEED GRID ── */
#tlc-sketchbook .skb-section {
background: var(–deep);
border-top: 1px solid var(–rule);
}
#tlc-sketchbook .skb-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.25rem;
}
/* seed card base */
#tlc-sketchbook .seed {
border-radius: 4px;
border: 1px solid var(–rule);
background: rgba(247,240,230,.02);
overflow: hidden;
display: flex;
flex-direction: column;
text-decoration: none;
transition: border-color .3s, transform .25s, background .3s;
position: relative;
}
#tlc-sketchbook .seed:hover {
border-color: rgba(212,168,67,.28);
background: rgba(212,168,67,.03);
transform: translateY(-3px);
}
/* bottom current bar on hover */
#tlc-sketchbook .seed::after {
content: ”;
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(to right, var(–teal), var(–gold), var(–coral));
transform: scaleX(0);
transform-origin: left;
transition: transform .35s ease;
}
#tlc-sketchbook .seed:hover::after { transform: scaleX(1); }
/* grid layout sizes */
#tlc-sketchbook .seed-wide { grid-column: span 8; }
#tlc-sketchbook .seed-med { grid-column: span 4; }
#tlc-sketchbook .seed-third { grid-column: span 4; }
#tlc-sketchbook .seed-half { grid-column: span 6; }
#tlc-sketchbook .seed-full { grid-column: span 12; }
/* seed image */
#tlc-sketchbook .seed-img {
width: 100%;
aspect-ratio: 16/9;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
#tlc-sketchbook .seed-wide .seed-img { aspect-ratio: 21/9; }
#tlc-sketchbook .seed-full .seed-img { aspect-ratio: 21/6; }
/* placeholder gradient per category */
#tlc-sketchbook .cat-spirit { background: linear-gradient(135deg, var(–plum) 0%, var(–cobalt) 100%); }
#tlc-sketchbook .cat-genekey { background: linear-gradient(135deg, #1a1840 0%, var(–plum) 60%, var(–gold) 100%); }
#tlc-sketchbook .cat-travel { background: linear-gradient(135deg, var(–teal) 0%, var(–cobalt) 100%); }
#tlc-sketchbook .cat-pm { background: linear-gradient(135deg, var(–amber) 0%, var(–coral) 100%); }
#tlc-sketchbook .cat-wellness { background: linear-gradient(135deg, var(–teal) 0%, #2a4a2a 100%); }
#tlc-sketchbook .cat-poetry { background: linear-gradient(135deg, var(–coral) 0%, var(–plum) 100%); }
#tlc-sketchbook .seed-img::after {
content: ”;
position: absolute;
inset: 0;
background: radial-gradient(ellipse 50% 50% at 35% 40%, rgba(212,168,67,.18) 0%, transparent 65%);
}
/* seed status badge */
#tlc-sketchbook .seed-status {
position: absolute;
top: .75rem;
left: .75rem;
font-size: .62rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
padding: .2rem .55rem;
border-radius: 3px;
z-index: 1;
}
#tlc-sketchbook .status-growing { background: rgba(26,92,90,.8); color: #7adad8; }
#tlc-sketchbook .status-seed { background: rgba(212,168,67,.8); color: var(–ink); }
#tlc-sketchbook .status-blooming { background: rgba(212,90,58,.8); color: #fff; }
/* seed body */
#tlc-sketchbook .seed-body {
padding: 1.5rem 1.5rem 1.75rem;
display: flex;
flex-direction: column;
gap: .5rem;
flex: 1;
}
#tlc-sketchbook .seed-cat {
font-size: .68rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(–gold);
}
#tlc-sketchbook .seed-title {
font-family: ‘DM Serif Display’, serif;
font-size: clamp(1rem, 2vw, 1.3rem);
color: var(–cream);
line-height: 1.2;
}
#tlc-sketchbook .seed-wide .seed-title,
#tlc-sketchbook .seed-full .seed-title {
font-size: clamp(1.2rem, 2.5vw, 1.6rem);
}
#tlc-sketchbook .seed-excerpt {
font-size: .93rem;
color: var(–muted);
line-height: 1.65;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
#tlc-sketchbook .seed-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: .5rem;
}
#tlc-sketchbook .seed-meta {
font-size: .75rem;
color: rgba(247,240,230,.28);
font-style: italic;
}
#tlc-sketchbook .seed-arrow {
font-size: .8rem;
color: var(–gold);
opacity: 0;
transform: translateX(-4px);
transition: opacity .25s, transform .25s;
}
#tlc-sketchbook .seed:hover .seed-arrow {
opacity: 1;
transform: translateX(0);
}
/* ── QUOTE SEED (no image, text-only) ── */
#tlc-sketchbook .seed-quote {
padding: 2.5rem 2rem;
justify-content: center;
}
#tlc-sketchbook .seed-quote .quote-mark {
font-family: ‘Cormorant Garamond’, serif;
font-size: 4rem;
color: rgba(212,168,67,.15);
line-height: .8;
margin-bottom: .5rem;
display: block;
}
#tlc-sketchbook .seed-quote .quote-text {
font-family: ‘Cormorant Garamond’, serif;
font-style: italic;
font-weight: 300;
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
color: var(–cream);
line-height: 1.6;
margin-bottom: 1rem;
}
#tlc-sketchbook .seed-quote .quote-attr {
font-size: .75rem;
letter-spacing: .15em;
text-transform: uppercase;
color: rgba(247,240,230,.3);
}
/* ── LOAD MORE ── */
#tlc-sketchbook .load-more-wrap {
text-align: center;
padding: 3rem 0 1rem;
}
#tlc-sketchbook .btn-ghost {
display: inline-block;
padding: .75rem 2.25rem;
border: 1.5px solid rgba(247,240,230,.2);
color: rgba(247,240,230,.6);
font-family: ‘Crimson Pro’, serif;
font-size: .88rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
text-decoration: none;
border-radius: 2px;
transition: border-color .25s, color .25s, transform .2s;
cursor: pointer;
background: transparent;
}
#tlc-sketchbook .btn-ghost:hover {
border-color: var(–gold);
color: var(–gold);
transform: translateY(-2px);
}
/* ── WHAT IS A SEED ── */
#tlc-sketchbook .what-section {
background: var(–plum);
border-top: 1px solid rgba(247,240,230,.06);
position: relative;
overflow: hidden;
}
#tlc-sketchbook .what-section::before {
content: ”;
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 50% at 80% 50%, rgba(212,168,67,.1) 0%, transparent 65%);
pointer-events: none;
}
#tlc-sketchbook .what-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
position: relative;
z-index: 1;
}
#tlc-sketchbook .what-text .section-heading { color: #fff; }
#tlc-sketchbook .what-text .eyebrow { color: rgba(212,168,67,.85); }
#tlc-sketchbook .what-body {
font-size: 1.05rem;
color: rgba(255,255,255,.68);
line-height: 1.85;
margin-bottom: 1.25rem;
}
#tlc-sketchbook .status-legend {
display: flex;
flex-direction: column;
gap: .85rem;
margin-top: 2rem;
}
#tlc-sketchbook .legend-item {
display: flex;
align-items: flex-start;
gap: 1rem;
}
#tlc-sketchbook .legend-badge {
font-size: .62rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
padding: .22rem .6rem;
border-radius: 3px;
white-space: nowrap;
flex-shrink: 0;
margin-top: .15rem;
}
#tlc-sketchbook .legend-desc {
font-size: .92rem;
color: rgba(255,255,255,.55);
font-style: italic;
line-height: 1.55;
}
/* decorative sketchbook visual */
#tlc-sketchbook .sketchbook-visual {
position: relative;
aspect-ratio: 3/4;
max-width: 400px;
}
#tlc-sketchbook .sb-page {
position: absolute;
border-radius: 3px 8px 8px 3px;
background: var(–cream);
box-shadow: 4px 4px 20px rgba(0,0,0,.3);
overflow: hidden;
}
#tlc-sketchbook .sb-page-1 {
width: 88%; height: 94%;
top: 3%; left: 8%;
transform: rotate(2deg);
}
#tlc-sketchbook .sb-page-2 {
width: 86%; height: 92%;
top: 2%; left: 6%;
transform: rotate(-1.5deg);
background: #f0e8d8;
}
#tlc-sketchbook .sb-page-3 {
width: 84%; height: 90%;
top: 1%; left: 4%;
transform: rotate(.5deg);
background: #ede4d4;
}
#tlc-sketchbook .sb-spine {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 5%;
background: linear-gradient(to right, #1a1208, #2a1f14);
border-radius: 3px 0 0 3px;
z-index: 10;
}
#tlc-sketchbook .sb-content {
position: relative;
z-index: 5;
padding: 2.5rem 2rem;
color: var(–ink);
}
#tlc-sketchbook .sb-lines {
display: flex;
flex-direction: column;
gap: .7rem;
margin-bottom: 1.5rem;
}
#tlc-sketchbook .sb-line {
height: 1px;
background: rgba(26,18,8,.08);
border-radius: 1px;
}
#tlc-sketchbook .sb-text {
font-family: ‘Cormorant Garamond’, serif;
font-style: italic;
font-size: .9rem;
color: rgba(26,18,8,.55);
line-height: 1.8;
position: absolute;
top: 2.5rem;
left: 2rem;
right: 1.5rem;
}
#tlc-sketchbook .sb-gold-mark {
position: absolute;
bottom: 2rem;
right: 2rem;
width: 24px; height: 24px;
border-radius: 50%;
background: var(–gold);
opacity: .4;
}
/* ── BACK TO STUDIO ── */
#tlc-sketchbook .back-strip {
background: var(–ink);
border-top: 1px solid var(–rule);
padding: 2.5rem 1.5rem;
text-align: center;
}
#tlc-sketchbook .back-link {
font-size: .8rem;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(247,240,230,.3);
text-decoration: none;
transition: color .2s;
}
#tlc-sketchbook .back-link:hover { color: var(–gold); }
/* ── REVEAL ── */
#tlc-sketchbook .reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity .7s ease, transform .7s ease;
}
#tlc-sketchbook .reveal.visible {
opacity: 1;
transform: none;
}
/* ── KEYFRAMES ── */
@keyframes skbUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── RESPONSIVE ── */
@media (max-width: 900px) {
#tlc-sketchbook .seed-wide { grid-column: span 12; }
#tlc-sketchbook .seed-med { grid-column: span 6; }
#tlc-sketchbook .seed-third { grid-column: span 6; }
#tlc-sketchbook .seed-half { grid-column: span 12; }
#tlc-sketchbook .what-grid { grid-template-columns: 1fr; gap: 3rem; }
#tlc-sketchbook .sketchbook-visual { max-width: 280px; margin: 0 auto; }
}
@media (max-width: 560px) {
#tlc-sketchbook .seed-wide,
#tlc-sketchbook .seed-med,
#tlc-sketchbook .seed-third,
#tlc-sketchbook .seed-half,
#tlc-sketchbook .seed-full { grid-column: span 12; }
#tlc-sketchbook .skb-hero-title { letter-spacing: -.01em; }
}
Sketchbook
Room two · The open pages
The
Sketchbook
Nothing here is finished. Everything here is real. These are the seeds — spiritual downloads, half-formed essays, Gene Key reflections, travel observations, PM philosophy, wellness notes, and poems that arrived before I was ready for them. Come in. Look around. Something here was written for you.
— seeds planted so far
Always growing
“The becoming is not a destination — it is the current itself, always moving, always whole…”
How this works
What is a seed?
A seed is not a finished essay. It’s a thought in motion — something planted before it’s fully grown. Some seeds stay seeds forever. Others bloom into full pieces over time. All of them are real.
Every piece in this sketchbook is marked with its current state. Come back and watch things grow. That’s the whole point.
✦ Seed
A fresh thought, a fragment, something that just arrived. Short. Unpolished. True.
🌱 Growing
An idea taking shape. Longer, still in progress. I’m still inside it.
✦ Blooming
A finished or near-finished piece. What grew from a seed. The full bloom.
(function() {
// ── Scroll reveal ──
var reveals = document.querySelectorAll(‘#tlc-sketchbook .reveal’);
var obs = new IntersectionObserver(function(entries) {
entries.forEach(function(e, i) {
if (e.isIntersecting) {
setTimeout(function() { e.target.classList.add(‘visible’); }, i * 60);
obs.unobserve(e.target);
}
});
}, { threshold: 0.07 });
reveals.forEach(function(el) { obs.observe(el); });
// ── Topic filter ──
var btns = document.querySelectorAll(‘#tlc-sketchbook .filter-btn’);
var seeds = document.querySelectorAll(‘#tlc-sketchbook .skb-grid .seed, #tlc-sketchbook .skb-grid .seed-quote’);
btns.forEach(function(btn) {
btn.addEventListener(‘click’, function() {
btns.forEach(function(b) { b.classList.remove(‘active’); });
btn.classList.add(‘active’);
var filter = btn.dataset.filter;
seeds.forEach(function(seed) {
if (filter === ‘all’ || seed.dataset.cat === filter) {
seed.style.display = ”;
} else {
seed.style.display = ‘none’;
}
});
});
});
})();
Milan Noelle 