.thelis-story {
--s-bg:        #0c0c10;
--s-bg-card:   rgba(255, 255, 255, 0.028);
--s-bg-card-h: rgba(255, 255, 255, 0.055);
--s-red:       #E8294A;
--s-red-dim:   rgba(232, 41, 74, 0.12);
--s-white:     #f4f2ee;
--s-gray:      rgba(244, 242, 238, 0.75); --s-dim:       rgba(244, 242, 238, 0.62); --s-border:    rgba(244, 242, 238, 0.07);
--s-spine:     rgba(244, 242, 238, 0.09);
--d-software:  #E8294A;
--d-ai:        #2563EB;
--d-embedded:  #059669;
--d-hardware:  #D97316;
background:  var(--s-bg);
color:       var(--s-white);
font-family: 'Syne', sans-serif;
overflow-x:  hidden;
}
.thelis-story * { box-sizing: border-box; margin: 0; padding: 0; } .thelis-story .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 48px; }
@media (max-width: 768px) {
.thelis-story .container { padding: 0 24px; }
} #s-progress {
position: fixed;
top: 0; left: 0;
height: 2px; width: 0%;
background: var(--s-red);
z-index: 9999;
transition: width 0.08s linear;
} .s-hero {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding: 140px 0 120px;
} .s-hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--s-red), transparent 60%);
z-index: 4;
pointer-events: none;
} .s-hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, var(--s-red) 0%, transparent 65%);
z-index: 4;
pointer-events: none;
} .s-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.s-hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
display: block;
filter: brightness(0.90) saturate(0.72) contrast(1.04);
transform: scale(1.04);
animation: sHeroKB 22s ease-out forwards;
}
@keyframes sHeroKB {
from { transform: scale(1.04); }
to   { transform: scale(1.00); }
} .s-hero__panel {
position: absolute;
top: 0; left: 0; bottom: 0;
width: 54vw;
background: rgba(10, 10, 14, 0.93);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 1; clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 100%, 0 100%);
} .s-hero__panel::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(232, 41, 74, 0.055) 1px, transparent 1px);
background-size: 36px 36px;
pointer-events: none;
} .s-hero__divider {
position: absolute;
top: 12%;
bottom: 12%;
left: calc(54vw - 20px); width: 2px;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(232, 41, 74, 0.85) 12%,
rgba(232, 41, 74, 0.85) 88%,
transparent 100%
);
z-index: 3;
transform: scaleY(0);
transform-origin: top center;
animation: sDividerDraw 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}
@keyframes sDividerDraw {
to { transform: scaleY(1); }
} .s-hero .container {
background: transparent !important;
position: relative;
z-index: 3;
max-width: none !important;
width: 100%;
padding: 0;
margin: 0;
} .s-hero__inner {
display: grid;
grid-template-columns: 54vw 1fr;
gap: 0;
align-items: end;
width: 100%;
} .s-hero__left {
padding: 0 48px 0 64px; display: flex;
flex-direction: column;
gap: 32px;
position: relative;
} .s-hero__ghost-year {
position: absolute;
top: -70px;
left: -28px;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(140px, 18vw, 230px);
font-weight: 600;
color: rgba(255, 255, 255, 0.032);
line-height: 1;
letter-spacing: -10px;
pointer-events: none;
user-select: none;
z-index: 0;
white-space: nowrap;
animation: sGhostReveal 2s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both;
}
@keyframes sGhostReveal {
from { opacity: 0; transform: translateX(-20px); }
to   { opacity: 1; transform: translateX(0); }
}
.s-hero__eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 3.5px;
text-transform: uppercase;
color: var(--s-red) !important;
display: flex;
align-items: center;
gap: 14px;
position: relative;
z-index: 1;
animation: sHeroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
.s-hero__eyebrow::before {
content: '';
display: block;
width: 28px; height: 1px;
background: var(--s-red);
flex-shrink: 0;
} .s-hero__title {
font-family: 'Syne', sans-serif;
font-size: clamp(52px, 5.8vw, 86px);
font-weight: 700;
font-style: normal;
line-height: 1.08;
letter-spacing: -2px;
color: var(--s-white) !important;
position: relative;
z-index: 1;
animation: sHeroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
} .s-hero__title em {
font-style: normal;
color: var(--s-red) !important;
} .s-hero__title strong {
font-style: normal;
font-weight: 700;
color: var(--s-white) !important;
}
.s-hero__desc {
font-family: 'Syne', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 1.72;
color: var(--s-gray) !important;
max-width: 480px;
border-left: 1px solid rgba(232, 41, 74, 0.45);
padding-left: 20px;
position: relative;
z-index: 1;
animation: sHeroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
} .s-hero__stats {
display: flex;
align-items: center;
gap: 24px;
padding-top: 8px;
position: relative;
z-index: 1;
animation: sHeroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both;
}
.s-hero__stat {
display: flex;
flex-direction: column;
gap: 5px;
}
.s-hero__stat-val {
font-family: 'Syne', sans-serif;
font-size: 30px;
font-weight: 700;
letter-spacing: -1.5px;
line-height: 1;
color: var(--s-white) !important;
display: flex;
align-items: center;
}
.s-hero__stat-lbl {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--s-dim) !important;
}
.s-hero__stat-sep {
width: 1px;
height: 44px;
background: var(--s-border);
flex-shrink: 0;
} .s-hero__live {
display: block;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--s-red);
position: relative;
animation: sLivePulse 2.8s ease-in-out infinite;
}
.s-hero__live::after {
content: '';
position: absolute;
inset: -5px;
border-radius: 50%;
border: 1.5px solid var(--s-red);
opacity: 0;
animation: sLiveRing 2.8s ease-in-out infinite;
}
@keyframes sLivePulse {
0%, 100% { opacity: 1;    transform: scale(1);    }
50%       { opacity: 0.55; transform: scale(0.82); }
}
@keyframes sLiveRing {
0%   { transform: scale(0.75); opacity: 0.65; }
75%  { transform: scale(2.6);  opacity: 0;    }
100% { transform: scale(2.6);  opacity: 0;    }
} .s-hero__right {
display: flex;
justify-content: flex-end;
align-items: flex-end;
padding-right: 24px;
padding-bottom: 8px;
}
.s-hero__scroll-cue {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 4px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45) !important;
cursor: pointer;
writing-mode: vertical-rl;
text-orientation: mixed;
transition: color 0.25s ease;
animation: sHeroFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both;
}
.s-hero__scroll-cue:hover { color: var(--s-red) !important; }
.s-hero__scroll-cue::after {
content: '';
display: block;
width: 1px; height: 48px;
background: linear-gradient(to bottom, rgba(255,255,255,0.40), transparent);
animation: sScrollDrop 2.2s ease-in-out infinite;
}
@keyframes sScrollDrop {
0%, 100% { opacity: 0.35; transform: scaleY(0.85); transform-origin: top; }
50%       { opacity: 1;    transform: scaleY(1);    }
} @keyframes sHeroFadeUp {
from { opacity: 0; transform: translateY(24px); }
to   { opacity: 1; transform: translateY(0); }
} @media (max-width: 1100px) {
.s-hero__panel { width: 62vw; }
.s-hero__divider { left: calc(62vw - 20px); }
.s-hero__inner { grid-template-columns: 62vw 1fr; }
.s-hero__left { padding-left: 48px; }
}
@media (max-width: 1024px) {
.s-hero__panel { width: 72vw; }
.s-hero__divider { left: calc(72vw - 20px); }
.s-hero__inner { grid-template-columns: 72vw 1fr; }
.s-hero__left { padding-left: 40px; padding-right: 40px; }
.s-hero__title { font-size: clamp(44px, 5.5vw, 72px); }
}
@media (max-width: 768px) {
.s-hero__panel {
width: 100%;
clip-path: none;
background: rgba(10, 10, 14, 0.88);
}
.s-hero__divider { display: none; }
.s-hero__inner { grid-template-columns: 1fr; }
.s-hero__right { display: none; }
.s-hero__left { padding: 0 28px; }
.s-hero__title { font-size: clamp(44px, 11vw, 72px); letter-spacing: -1.5px; }
.s-hero__ghost-year { font-size: clamp(100px, 28vw, 150px); left: -8px; }
}
@media (max-width: 480px) {
.s-hero__stats { gap: 14px; }
.s-hero__stat-val { font-size: 22px; }
.s-hero__desc { font-size: 15px; }
} .s-timeline {
position: relative;
background: #f7f5f1; --s-bg:        #f7f5f1;
--s-bg-card:   #ffffff;
--s-bg-card-h: #f0ede8;
--s-border:    rgba(17, 17, 24, 0.09);
--s-dim:       rgba(17, 17, 24, 0.38);
--s-white:     #111118;
--s-gray:      rgba(17, 17, 24, 0.62);
--s-spine:     rgba(17, 17, 24, 0.08);
} .s-nav {
display: flex;
position: relative;
border-bottom: 1px solid var(--s-border);
padding-bottom: 36px; } .s-nav::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: var(--s-border);
z-index: 1;
pointer-events: none;
} .s-nav__fill {
position: absolute;
bottom: 0; left: 0;
height: 3px;
background: linear-gradient(90deg, var(--s-red) 0%, rgba(232,41,74,0.7) 100%);
width: 20%;
transition: width 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 3;
pointer-events: none;
} .s-nav__milestone {
position: absolute;
bottom: -3px; width: 9px; height: 9px;
border-radius: 50%;
background: var(--s-bg);
border: 1.5px solid var(--s-dim);
transform: translateX(-50%);
z-index: 4;
pointer-events: none;
transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.s-nav__milestone.is-past {
background: var(--s-red);
border-color: var(--s-red);
}
.s-nav__milestone.is-active {
background: var(--s-red);
border-color: var(--s-red);
box-shadow: 0 0 0 3px rgba(232,41,74,0.22);
animation: s-milestone-pulse 2.4s ease-in-out infinite;
}
@keyframes s-milestone-pulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(232,41,74,0.22); }
50%       { box-shadow: 0 0 0 7px rgba(232,41,74,0.06); }
} .s-nav__milestone-label {
position: absolute;
top: 16px; left: 50%;
transform: translateX(-50%);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 1.5px;
color: var(--s-dim);
white-space: nowrap;
pointer-events: none;
transition: color 0.45s ease, opacity 0.45s ease;
opacity: 0.85; } .s-nav__milestone-label::before {
content: '';
position: absolute;
top: -9px;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 6px;
background: currentColor;
opacity: 0.5;
}
.s-nav__milestone.is-past .s-nav__milestone-label {
color: var(--s-gray);
opacity: 0.75;
}
.s-nav__milestone.is-active .s-nav__milestone-label {
color: var(--s-red);
opacity: 1;
} @media (max-width: 900px) {
.s-nav__milestone-label { display: none; }
.s-nav { padding-bottom: 0; }
}
.s-nav__chapter {
flex: 1;
padding: 32px 24px 26px;
border: none;
border-right: 1px solid var(--s-border);
background: none;
cursor: pointer;
text-align: left;
color: inherit;
display: flex;
flex-direction: column;
gap: 5px;
position: relative;
transition: background 0.3s ease;
}
.s-nav__chapter:last-child { border-right: none; }
.s-nav__chapter:hover      { background: rgba(255,255,255,0.018); }
.s-nav__chapter.is-active  { background: rgba(232,41,74,0.038); }
.s-nav__num {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--s-red);
opacity: 0.45;
transition: opacity 0.3s;
}
.s-nav__chapter.is-active .s-nav__num { opacity: 1; }
.s-nav__title {
font-family: 'Syne', sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: -0.3px;
color: var(--s-gray);
transition: color 0.3s;
line-height: 1.2;
}
.s-nav__chapter.is-active .s-nav__title { color: var(--s-white); }
.s-nav__range {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 1.5px;
color: var(--s-dim);
transition: color 0.3s;
}
.s-nav__chapter.is-active .s-nav__range { color: var(--s-gray); } .s-nav__autobar {
position: absolute;
bottom: 0; left: 0;
width: 100%; height: 2px;
background: var(--s-red);
transform: scaleX(0);
transform-origin: left center;
pointer-events: none;
will-change: transform;
opacity: 0.85;
} .s-panels {
position: relative;
min-height: 560px;
overflow: hidden;
} .s-nav__chapter:hover      { background: rgba(17, 17, 24, 0.04) !important; }
.s-nav__chapter.is-active  { background: rgba(232, 41, 74, 0.06) !important; } .s-panel {
position: absolute;
inset: 0;
padding: 56px 0 52px;
opacity: 0;
transform: translateY(14px);
pointer-events: none;
transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
} .s-panel.is-leaving {
opacity: 0;
transform: translateY(-8px);
position: absolute;
pointer-events: none;
transition: opacity 0.28s ease, transform 0.28s ease;
} .s-panel.is-active {
position: relative;
opacity: 1;
transform: none;
pointer-events: auto;
} .s-panel__ghost {
position: absolute;
top: -16px; right: -8px;
font-family: 'Syne', sans-serif;
font-size: clamp(180px, 22vw, 300px);
font-weight: 800;
line-height: 0.85;
letter-spacing: -8px;
color: var(--s-white);
opacity: 0.028;
pointer-events: none;
user-select: none;
z-index: 0;
} .s-panel__header {
display: flex;
align-items: baseline;
gap: 20px;
margin-bottom: 36px;
position: relative;
z-index: 1;
}
.s-panel__eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 3.5px;
text-transform: uppercase;
color: var(--s-red);
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.s-panel__eyebrow::before {
content: '';
display: block;
width: 20px; height: 1px;
background: var(--s-red);
}
.s-panel__era-title {
font-family: 'Syne', sans-serif;
font-size: 15px;
font-style: normal;
font-weight: 300;
color: var(--s-gray);
letter-spacing: 0.2px;
} .s-panel__grid {
display: grid;
gap: 10px;
position: relative;
z-index: 1;
}
.s-panel__grid--1col { grid-template-columns: 1fr;              max-width: 660px; }
.s-panel__grid--2col { grid-template-columns: repeat(2, 1fr);   }
.s-panel__grid--3col { grid-template-columns: repeat(3, 1fr);   } .s-ecard-group__label {
grid-column: 1 / -1;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 3.5px;
text-transform: uppercase;
color: var(--s-red);
display: flex;
align-items: center;
gap: 12px;
padding: 28px 0 12px;
border-bottom: 1px solid rgba(232,41,74,0.2);
margin-bottom: 2px;
}
.s-ecard-group__label::before {
content: '';
display: block;
width: 20px;
height: 1px;
background: var(--s-red);
opacity: 0.55;
flex-shrink: 0;
}
.s-ecard-group__label:first-child { padding-top: 0; } .s-ecard {
background: var(--s-bg-card);
border: 1px solid var(--s-border);
border-top: 2px solid var(--s-border);
padding: 24px 26px;
display: flex;
flex-direction: column;
gap: 9px;
transition: background 0.25s, border-top-color 0.25s;
text-decoration: none;
color: inherit;
}
.s-ecard:hover { background: var(--s-bg-card-h); border-top-color: var(--s-red); } .s-ecard__meta {
display: flex;
align-items: center;
justify-content: space-between;
}
.s-ecard__year {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 1.5px;
color: var(--s-red);
}
.s-ecard__tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--s-dim);
padding: 2px 7px;
border: 1px solid var(--s-border);
} .s-ecard__title {
font-family: 'Syne', sans-serif;
font-size: clamp(15px, 1.45vw, 19px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.3px;
color: var(--s-white);
}
.s-ecard__body {
font-size: 15px;
font-weight: 300;
line-height: 1.75;
color: var(--s-gray);
flex: 1;
} .s-ecard--large { padding: 32px 36px; }
.s-ecard--large .s-ecard__title { font-size: clamp(19px, 2.0vw, 25px); }
.s-ecard--large .s-ecard__body  { font-size: 16px; line-height: 1.8; } .s-ecard__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 4px;
padding-top: 10px;
border-top: 1px solid var(--s-border);
}
.s-ecard__domains {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.s-ecard__domain {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 2px 6px;
border: 1px solid var(--s-border);
color: var(--s-dim);
}
.s-ecard__arrow {
font-size: 14px;
color: var(--s-dim);
transition: color 0.2s, transform 0.2s;
flex-shrink: 0;
}
a.s-ecard:hover .s-ecard__arrow { color: var(--s-white); transform: translateX(4px); }  .s-panel--light { border-top: 1px solid rgba(17, 17, 24, 0.08);
} .s-panel--light .s-panel__ghost {
opacity: 0.045;
} .s-panel--light .s-ecard:hover {
border-top-color: var(--s-red);
box-shadow: 0 4px 24px rgba(17,17,24,0.08);
}  .s-ecard--software { border-top-color: var(--d-software); }
.s-ecard--embedded { border-top-color: var(--d-embedded); }
.s-ecard--hardware { border-top-color: var(--d-hardware); }
.s-ecard--ai       { border-top-color: var(--d-ai);       } .s-ledger {
display: flex;
flex-direction: column;
gap: 40px;
margin-top: 8px;
}
.s-ledger__group {
display: flex;
flex-direction: column;
} .s-ledger__ghead {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 3.5px;
text-transform: uppercase;
color: var(--s-red);
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 14px;
margin-bottom: 2px;
border-bottom: 1px solid rgba(232,41,74,0.25);
}
.s-ledger__ghead::before {
content: '';
display: block;
width: 20px;
height: 1px;
background: var(--s-red);
opacity: 0.55;
flex-shrink: 0;
} .s-ledger__row {
display: grid;
grid-template-columns: 76px 1fr auto 22px;
align-items: center;
gap: 20px;
padding: 15px 8px 15px 0;
border-bottom: 1px solid var(--s-border);
text-decoration: none;
color: inherit;
position: relative;
transition: background 0.22s ease, padding-left 0.28s cubic-bezier(0.34,1.56,0.64,1);
overflow: hidden;
} .s-ledger__row::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: var(--s-red);
transform: scaleY(0);
transform-origin: center;
transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1);
}
.s-ledger__row:hover {
background: rgba(255,255,255,0.02);
padding-left: 14px;
}
.s-ledger__row:hover::before { transform: scaleY(1); } .s-ledger__year {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 1.5px;
color: var(--s-gray);
transition: color 0.22s;
white-space: nowrap;
}
.s-ledger__row:hover .s-ledger__year { color: var(--s-red); } .s-ledger__info {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.s-ledger__name {
font-family: 'Syne', sans-serif;
font-size: 15px;
font-weight: 600;
color: var(--s-white);
letter-spacing: -0.2px;
line-height: 1.2;
}
.s-ledger__desc {
font-family: 'Syne', sans-serif;
font-size: 13px;
font-weight: 300;
color: var(--s-gray);
line-height: 1.45;
} .s-ledger__tag {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--s-dim);
border: 1px solid var(--s-border);
padding: 4px 9px;
border-radius: 2px;
white-space: nowrap;
transition: color 0.22s, border-color 0.22s;
}
.s-ledger__row:hover .s-ledger__tag {
color: var(--s-gray);
border-color: rgba(244,242,238,0.18);
} .s-ledger__arrow {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
color: var(--s-dim);
transition: color 0.22s, transform 0.28s ease;
text-align: center;
}
.s-ledger__row:hover .s-ledger__arrow {
color: var(--s-red);
transform: translateX(4px);
} @media (max-width: 768px) {
.s-ledger__row { grid-template-columns: 60px 1fr 20px; gap: 14px; }
.s-ledger__tag { display: none; }
} .s-today {
background: linear-gradient(160deg, rgba(232,41,74,0.05) 0%, transparent 50%);
border-top: 1px solid var(--s-border);
padding: 120px 0;
position: relative;
overflow: hidden;
} .s-today::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(244,242,238,0.03) 1px, transparent 1px);
background-size: 38px 38px;
pointer-events: none;
}
.s-today__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
position: relative;
}
.s-today__left {}
.s-today__eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 3.5px;
text-transform: uppercase;
color: var(--s-red);
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 24px;
}
.s-today__eyebrow::before {
content: '';
display: block;
width: 28px; height: 1px;
background: var(--s-red);
}
.s-today__title {
font-family: 'Syne', sans-serif;
font-size: clamp(36px, 4.2vw, 58px);
font-weight: 700;
font-style: normal;
line-height: 1.06;
letter-spacing: -2px;
color: var(--s-white);
margin-bottom: 24px;
}
.s-today__title em {
font-style: normal;
color: var(--s-red);
}
.s-today__body {
font-size: 16px;
font-weight: 300;
line-height: 1.8;
color: var(--s-gray);
margin-bottom: 40px;
}
.s-today__links {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.s-today__cta {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--s-white);
text-decoration: none;
border-bottom: 1px solid var(--s-red);
padding-bottom: 3px;
transition: gap 0.2s;
}
.s-today__cta:hover { gap: 16px; }
.s-today__cta--ghost {
border-bottom-color: var(--s-border);
color: var(--s-gray);
}
.s-today__cta--ghost:hover { border-bottom-color: var(--s-gray); } .s-today__stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--s-border);
border: 1px solid var(--s-border);
align-self: start;
}
.s-today__stat {
background: var(--s-bg);
padding: 36px 32px;
display: flex;
flex-direction: column;
gap: 8px;
transition: background 0.2s;
}
.s-today__stat:hover {
background: var(--s-bg-card);
}
.s-today__stat-value {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 56px;
font-weight: 600;
line-height: 1;
color: var(--s-white);
}
.s-today__stat-label {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--s-gray);
} .s-fade-up {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.s-fade-up.is-visible { opacity: 1; transform: translateY(0); } .s-today .s-fade-up:nth-child(1) { transition-delay: 0.00s; }
.s-today .s-fade-up:nth-child(2) { transition-delay: 0.10s; }
.s-today .s-fade-up:nth-child(3) { transition-delay: 0.20s; }
.s-today .s-fade-up:nth-child(4) { transition-delay: 0.30s; }
.s-today .s-fade-up:nth-child(5) { transition-delay: 0.40s; } @media (max-width: 1100px) {
.s-nav__chapter          { padding: 24px 16px 20px; }
.s-nav__title            { font-size: 14px; }
.s-panel__grid--3col     { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
.s-hero__inner           { grid-template-columns: 1fr; gap: 56px; }
.s-hero__right           { flex-direction: row; align-items: flex-end; gap: 40px; }
.s-hero__years           { text-align: left; }
.s-hero__year-sep        { justify-content: flex-start; }
.s-today__grid           { grid-template-columns: 1fr; gap: 48px; }
.s-today__stats          { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.s-nav                   { overflow-x: auto; }
.s-nav__chapter          { min-width: 110px; padding: 20px 14px 16px; }
.s-nav__range            { display: none; }
.s-panels                { min-height: auto; }
.s-panel                 { padding: 40px 0 36px; }
.s-panel__grid--2col,
.s-panel__grid--3col     { grid-template-columns: 1fr; }
.s-panel__ghost          { opacity: 0.015; font-size: 120px; }
}
@media (max-width: 480px) {
.s-hero__right           { flex-direction: column; }
.s-today__stats          { grid-template-columns: 1fr; }
.s-today__stat-value     { font-size: 44px; }
.s-nav__title            { font-size: 13px; }
} body.page-template-page-story {
background: #0c0c10 !important;
}
main.site-main.thelis-story,
.thelis-story {
background: #0c0c10 !important;
color: var(--s-white, #f4f2ee) !important;
}  .s-today::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--s-red), transparent 65%);
pointer-events: none;
}  @keyframes sHeroUp {
from { opacity: 0; transform: translateY(16px); }
to   { opacity: 1; transform: none; }
}
@keyframes sHeroBlur {
from { opacity: 0; transform: translateY(28px); filter: blur(10px); }
to   { opacity: 1; transform: none; filter: none; }
}
@keyframes sHeroFade {
from { opacity: 0; }
to   { opacity: 1; }
}
.s-hero__eyebrow {
opacity: 0;
animation: sHeroUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.10s forwards;
}
.s-hero__title {
opacity: 0;
animation: sHeroBlur 0.90s cubic-bezier(0.22, 1, 0.36, 1) 0.22s forwards;
}
.s-hero__desc {
opacity: 0;
animation: sHeroUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;
}
.s-hero__year:not(.s-hero__year--current) {
opacity: 0;
animation: sHeroFade 0.6s ease 0.32s forwards;
}
.s-hero__year--current {
opacity: 0;
animation: sHeroFade 0.6s ease 0.55s forwards;
}
.s-hero__year-sep {
opacity: 0;
animation: sHeroFade 0.5s ease 0.44s forwards;
}
.s-hero__scroll-cue {
opacity: 0;
animation: sHeroFade 0.5s ease 0.72s forwards;
}
@media (prefers-reduced-motion: reduce) {
.s-hero__eyebrow,
.s-hero__title,
.s-hero__desc,
.s-hero__year,
.s-hero__year--current,
.s-hero__year-sep,
.s-hero__scroll-cue {
opacity: 1;
animation: none;
filter: none;
transform: none;
}
} .s-timeline .container { position: relative; }
.s-spine-fill {
position: absolute;
left: 248px; top: 0;
width: 1px;
height: 0;
background: linear-gradient(
to bottom,
rgba(232, 41, 74, 0) 0%,
rgba(232, 41, 74, 0.6) 5%,
var(--s-red) 14%,
var(--s-red) 100%
);
box-shadow: 0 0 8px rgba(232, 41, 74, 0.55), 0 0 26px rgba(232, 41, 74, 0.2);
z-index: 3;
pointer-events: none;
will-change: height;
} .s-spine-fill::after {
content: '';
position: absolute;
bottom: -5px;
left: -5px;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--s-red);
box-shadow:
0 0 0 3px var(--s-bg),
0 0 12px rgba(232, 41, 74, 0.9),
0 0 32px rgba(232, 41, 74, 0.45);
}
@media (max-width: 720px) {
.s-spine-fill { left: 96px; } }
@media (prefers-reduced-motion: reduce) {
.s-spine-fill { display: none; }
} .s-era__title {
transform: translateX(-14px);
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}
.s-era.is-visible .s-era__title {
transform: translateX(0);
}
.s-era__years-range {
display: block;
opacity: 0;
transform: translateX(-8px);
transition:
opacity   0.55s ease 0.42s,
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.42s;
}
.s-era.is-visible .s-era__years-range {
opacity: 1;
transform: translateX(0);
} .s-era.is-visible .s-era__spine-col::before {
animation: sNodePulse 3s ease-in-out 0.6s infinite;
}
@keyframes sNodePulse {
0%, 100% {
box-shadow:
0 0 0 4px var(--s-bg),
0 0 0 6px rgba(232, 41, 74, 0.22);
}
50% {
box-shadow:
0 0 0 4px var(--s-bg),
0 0 0 13px rgba(232, 41, 74, 0.07),
0 0 24px rgba(232, 41, 74, 0.22);
}
} .s-event__row {
transition: background 0.22s;
}
.s-event__row:hover {
background: rgba(232, 41, 74, 0.025);
} .s-event.is-current .s-event__year {
text-shadow: 0 0 14px rgba(232, 41, 74, 0.55);
}
.s-event.is-current .s-event__spine-col::before {
opacity: 1 !important;
transform: scale(1.3);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s !important;
box-shadow:
0 0 0 3px var(--s-bg),
0 0 0 6px rgba(244, 242, 238, 0.18),
0 0 16px rgba(244, 242, 238, 0.1) !important;
} .s-pcards--row .s-pcard {
transform: translateY(18px);
transition:
transform   0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
background  0.2s ease,
border-color 0.25s ease;
}
.s-project.is-visible .s-pcards--row .s-pcard {
transform: translateY(0);
}
.s-project.is-visible .s-pcards--row .s-pcard:nth-child(1) { transition-delay: 0.06s; }
.s-project.is-visible .s-pcards--row .s-pcard:nth-child(2) { transition-delay: 0.14s; }
.s-project.is-visible .s-pcards--row .s-pcard:nth-child(3) { transition-delay: 0.22s; }
.s-project.is-visible .s-pcards--row .s-pcard:nth-child(4) { transition-delay: 0.30s; }
@media (prefers-reduced-motion: reduce) {
.s-pcards--row .s-pcard {
transform: none;
transition: background 0.2s ease, border-color 0.25s ease;
}
} .s-today__stat-value {
transition: color 0.3s ease;
}
.s-today__stat:hover .s-today__stat-value {
color: var(--s-red);
}