/* =========================================================================
   Timeless Tone — La Bella Strings
   Palette: warm fretboard ebony, ivory inlay, phosphor-bronze, silk red.
   Type: Fraunces (display) / Archivo (body). Built on Bootstrap 5 grid.
   ========================================================================= */

:root {
	--tt-ebony:   #161210;
	--tt-ebony-2: #201a16;
	--tt-ivory:   #f2ecdd;
	--tt-bronze:  #c29a5b;
	--tt-silk:    #a6342b;
	--tt-smoke:   #7e756a;

	--tt-display: "Fraunces", Georgia, serif;
	--tt-body:    "Archivo", -apple-system, sans-serif;

	--tt-ease-pluck: cubic-bezier(.2, 1.4, .3, 1); /* slight overshoot */
	--tt-ease-out:   cubic-bezier(.22, .8, .3, 1);
}

.tt {
	background: var(--tt-ebony);
	color: var(--tt-ivory);
	font-family: var(--tt-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	overflow-x: clip;
}
.tt a { color: var(--tt-bronze); text-decoration: none; }
.tt a:hover, .tt a:focus-visible { color: var(--tt-ivory); }
.tt :focus-visible { outline: 2px solid var(--tt-bronze); outline-offset: 3px; }
.tt img { max-width: 100%; height: auto; display: block; }

/* ---- Reveal on scroll (JS adds .is-in) --------------------------------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s var(--tt-ease-out), transform .7s var(--tt-ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---- Split text: each word rises like a plucked string ----------------- */
[data-split-text] .tt-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}
[data-split-text] .tt-w > span {
	display: inline-block;
	transform: translateY(110%) rotate(2deg);
}
[data-split-text].is-in .tt-w > span {
	transform: none;
	transition: transform .9s var(--tt-ease-pluck);
	transition-delay: calc(var(--w) * 70ms);
}

/* =========================================================================
   ARCHIVE — Timeless Tone
   ========================================================================= */

.tt-intro { padding: clamp(6rem, 14vh, 10rem) 0 0; }
.tt-intro__since {
	color: var(--tt-smoke);
	margin-bottom: 1.25rem;
	font-size: .95rem;
}
.tt-intro__title {
	font-family: var(--tt-display);
	font-weight: 340;
	font-variation-settings: "opsz" 144;
	font-size: clamp(3.2rem, 11vw, 8.5rem);
	line-height: .95;
	letter-spacing: -.015em;
	margin: 0 0 1.5rem;
}
.tt-intro__title em, .tt-hero__title em { font-style: italic; }
.tt-intro__lede {
	max-width: 34em;
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	color: #d8d1c2;
	margin-bottom: 3rem;
}

/* Fret nav — decades as frets on a neck */
.tt-frets {
	position: sticky;
	top: 0;
	z-index: 20;
	background: color-mix(in srgb, var(--tt-ebony) 88%, transparent);
	backdrop-filter: blur(10px);
	border-top: 1px solid #2b241f;
	border-bottom: 1px solid #2b241f;
}
.tt-frets__list {
	display: flex;
	gap: .25rem;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.tt-frets__list::-webkit-scrollbar { display: none; }
.tt-frets__link {
	display: block;
	padding: .9rem 1.1rem;
	font-size: .95rem;
	color: var(--tt-smoke);
	border-left: 1px solid #2b241f; /* the fret wire */
	white-space: nowrap;
}
.tt-frets__list li:last-child .tt-frets__link { border-right: 1px solid #2b241f; }
.tt-frets__link:hover { color: var(--tt-ivory); }
.tt-frets__link.is-active { color: var(--tt-bronze); box-shadow: inset 0 -2px 0 var(--tt-bronze); }

/* The string itself */
.tt-string { position: relative; padding: 4rem 0 6rem; }
.tt-string__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.tt-string__line {
	stroke: #2e2822;
	stroke-width: 1.5;
}
.tt-string__line--drawn {
	stroke: var(--tt-bronze);
	stroke-width: 1.5;
	stroke-dasharray: 1;   /* JS sets real lengths */
	stroke-dashoffset: 1;
	filter: drop-shadow(0 0 6px rgba(194, 154, 91, .35));
}

/* Decade fret marker */
.tt-fret { position: relative; text-align: center; padding: 5rem 0 2rem; }
.tt-fret::before, .tt-fret::after {
	content: "";
	position: absolute;
	top: 55%;
	width: min(18vw, 160px);
	height: 1px;
	background: #2b241f; /* fret wire crossing the string */
}
.tt-fret::before { right: calc(50% + 5.5rem); }
.tt-fret::after  { left:  calc(50% + 5.5rem); }
.tt-fret__year {
	font-family: var(--tt-display);
	font-weight: 320;
	font-size: clamp(2.4rem, 6vw, 4.5rem);
	color: transparent;
	-webkit-text-stroke: 1px var(--tt-bronze);
	background: var(--tt-ebony);
	padding: 0 1.25rem;
	position: relative;
	z-index: 1;
}

/* Story node hanging off the string */
.tt-node { position: relative; padding: clamp(3rem, 7vh, 5.5rem) 0; }
.tt-node__pin {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 13px;
	height: 13px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: var(--tt-ebony);
	border: 2px solid var(--tt-bronze);
	z-index: 2;
	transition: background .3s, box-shadow .3s;
}
.tt-node:hover .tt-node__pin {
	background: var(--tt-silk); /* the silk winding shows when you touch it */
	box-shadow: 0 0 0 6px rgba(166, 52, 43, .18);
}
.tt-node__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--tt-ebony-2);
}
.tt-node__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.9);
	transform: scale(1.01);
	transition: transform 1.2s var(--tt-ease-out), filter .6s;
}
.tt-node:hover .tt-node__media img { transform: scale(1.05); filter: saturate(1.05); }
.tt-node__year {
	font-family: var(--tt-display);
	font-style: italic;
	color: var(--tt-bronze);
	font-size: 1.35rem;
	margin: 2rem 0 .4rem;
}
.tt-node__title {
	font-family: var(--tt-display);
	font-weight: 380;
	font-size: clamp(1.8rem, 3.4vw, 2.9rem);
	line-height: 1.08;
	letter-spacing: -.01em;
	margin-bottom: .9rem;
}
.tt-node__title a { color: var(--tt-ivory); }
.tt-node__title a:hover { color: var(--tt-bronze); }
.tt-node__teaser { color: #cfc8b9; max-width: 32em; margin-bottom: 1.2rem; }
.tt-node__link {
	display: inline-block;
	padding-bottom: .2rem;
	border-bottom: 1px solid var(--tt-bronze);
	transition: border-color .3s, color .3s;
}
.tt-node__link:hover { border-color: var(--tt-ivory); }

/* End of string */
.tt-string__end { position: relative; text-align: center; padding-top: 5rem; z-index: 1; }
.tt-string__end-line {
	font-family: var(--tt-display);
	font-style: italic;
	font-size: clamp(1.4rem, 3vw, 2.1rem);
	margin-bottom: 1.6rem;
	background: var(--tt-ebony);
	display: inline-block;
	padding: 0 1.5rem;
}
.tt-btn {
	display: inline-block;
	padding: .85rem 2rem;
	border: 1px solid var(--tt-bronze);
	color: var(--tt-bronze);
	transition: background .3s, color .3s;
}
.tt-btn:hover { background: var(--tt-bronze); color: var(--tt-ebony); }
.tt-empty { padding: 6rem 0; color: var(--tt-smoke); }

/* =========================================================================
   SINGLE — story
   ========================================================================= */

.tt-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	background: var(--tt-hero-img, var(--tt-ebony-2)) center / cover no-repeat fixed;
	background-image: var(--tt-hero-img);
}
@media (hover: none) { .tt-hero { background-attachment: scroll; } }

.tt-hero__scrim {
	position: absolute;
	inset: 0;
	background:linear-gradient(180deg, rgba(22,18,16,.35) 0%, rgba(22,18,16,.05) 35%, rgba(22,18,16,.88) 92%);
}
.tt-hero__inner { 
	position: relative; 
	z-index: 1; 
	padding-top:20vw;
	padding-bottom: clamp(5rem, 12vh, 8rem); 
}

.tt-hero__year {
	font-family: var(--tt-display);
	font-style: italic;
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	color: var(--tt-bronze);
	margin-bottom: .6rem;
	
}
.tt-hero__title {
	font-family: var(--tt-display);
	font-weight: 340;
	font-variation-settings: "opsz" 144;
	font-size: clamp(2.6rem, 7.5vw, 6.5rem);
	line-height: 1.2em;
	letter-spacing: -.015em;
	max-width: 14em;
	margin-bottom: 1.2rem;
	text-wrap: balance;
}
.tt-hero__descriptor {
	max-width: 36em;
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	color: #e6dfd0;
}
.tt-hero__cue {
	position: absolute;
	left: 50%;
	bottom: 1.5rem;
	transform: translateX(-50%);
	z-index: 1;
	padding: .5rem;
}
.tt-hero__cue-line {
	display: block;
	width: 1px;
	height: 44px;
	background: var(--tt-bronze);
	animation: tt-cue 2.2s var(--tt-ease-out) infinite;
	transform-origin: top;
}
@keyframes tt-cue {
	0%   { transform: scaleY(0); }
	45%  { transform: scaleY(1); }
	100% { transform: scaleY(1); opacity: 0; }
}

/* Body sections */
.tt-body { padding-top: clamp(3rem, 8vh, 6rem); }
.tt-prose { padding: clamp(1.5rem, 4vh, 3rem) 0; }
.tt-prose__text p { margin-bottom: 1.4em; color: #ddd6c7; }
.tt-prose__text p:first-child::first-letter {
	font-family: var(--tt-display);
	font-size: 3.4em;
	line-height: .8;
	float: left;
	padding: .08em .12em 0 0;
	color: var(--tt-bronze);
}
.tt-prose__text h2, .tt-prose__text h3 {
	font-family: var(--tt-display);
	font-weight: 380;
	color: var(--tt-ivory);
	margin: 1.6em 0 .6em;
}

.tt-fullimg { margin: clamp(2rem, 6vh, 4.5rem) 0; }
.tt-fullimg img { width: 100%; max-height: 92svh; object-fit: cover; }
.tt-caption {
	color: var(--tt-smoke);
	font-size: .9rem;
	padding-top: .8rem;
}
.tt-pair { margin: clamp(2rem, 6vh, 4.5rem) 0; }
.tt-pair img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.tt-quote { padding: clamp(2.5rem, 8vh, 5rem) 0; }
.tt-quote__text {
	font-family: var(--tt-display);
	font-style: italic;
	font-weight: 340;
	font-size: clamp(1.7rem, 3.6vw, 2.9rem);
	line-height: 1.2;
	color: var(--tt-ivory);
}
.tt-quote__text::before { content: "\201C"; color: var(--tt-bronze); }
.tt-quote__text::after  { content: "\201D"; color: var(--tt-bronze); }
.tt-quote__cite {
	display: block;
	margin-top: 1.2rem;
	font-style: normal;
	color: var(--tt-smoke);
}

/* YouTube facade — loads iframe only on click */
.tt-video { margin: clamp(2rem, 6vh, 4.5rem) 0; }
.tt-video__facade {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	padding: 0;
	background: var(--tt-ebony-2) center / cover no-repeat;
	cursor: pointer;
}
.tt-video__facade::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(22,18,16,.25);
	transition: background .3s;
}
.tt-video__facade:hover::after { background: rgba(22,18,16,.05); }
.tt-video__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 84px;
	height: 84px;
	border-radius: 50%;
	border: 1px solid var(--tt-ivory);
	background: rgba(22,18,16,.55);
	z-index: 1;
	transition: transform .4s var(--tt-ease-pluck), background .3s;
}
.tt-video__play::before {
	content: "";
	position: absolute;
	left: 54%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent var(--tt-ivory);
}
.tt-video__facade:hover .tt-video__play { transform: translate(-50%, -50%) scale(1.08); background: var(--tt-silk); }
.tt-video iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
}

/* Product tie-in */
.tt-tiein {
	margin-top: clamp(3rem, 8vh, 6rem);
	padding: clamp(3rem, 8vh, 5.5rem) 0;
	background: #fff;
	border-top: 1px solid #2b241f;
	border-bottom: 1px solid #2b241f;
}
.tt-tiein__title {
	font-family: "Cal Sans", sans-serif;
	font-weight: 360;
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	line-height: 1.1;
	margin-bottom: .8rem;
	color:#000;
}
.tt-tiein__note {
	font-family: "Cal Sans", sans-serif;
	font-style: italic;
	color: #000;
	font-size: 1.15rem;
}
.tt-product { display: block; color: #fff; }
.tt-product__img {
	display: block;
	background: #fff;
	margin-bottom: .9rem;
	overflow: hidden;
}
.tt-product__img img { width: 100%; transition: transform .8s var(--tt-ease-out); }
.tt-product:hover .tt-product__img img { transform: scale(1.04); }
.tt-product__name { display: block; font-weight: 600; line-height: 1.3; color:#000;}
.tt-product__price { display: block; color: var(--tt-smoke); font-size: .95rem; margin: .2rem 0 .5rem; }
.tt-product__cta {
	display: inline-block;
	color: #000;
	border-bottom: 1px solid var(--tt-bronze);
	padding-bottom: .15rem;
	font-size: .95rem;
}
.tt-product:hover .tt-product__cta { color: #000; }

/* Prev / next */
.tt-adjacent { padding: clamp(3rem, 8vh, 5rem) 0; }
.tt-adjacent__link { display: block; }
.tt-adjacent__dir { display: block; color: var(--tt-smoke); font-size: .9rem; margin-bottom: .35rem; }
.tt-adjacent__title {
	font-family: var(--tt-display);
	font-size: clamp(1.25rem, 2.4vw, 1.7rem);
	color: var(--tt-ivory);
	line-height: 1.2;
}
.tt-adjacent__link:hover .tt-adjacent__title { color: var(--tt-bronze); }
.tt-adjacent__all { margin-top: 2.5rem; text-align: center; }

/* =========================================================================
   Mobile: the string moves to the left edge, nodes stack
   ========================================================================= */
@media (max-width: 991.98px) {
	.tt-string__line { x1: 1.5rem; x2: 1.5rem; } /* SVG2 geometry props: string hugs the left edge */
	.tt-node__pin { display: none; left: 1.5rem; top: 2rem; }
	.tt-node__media { aspect-ratio: 16 / 10; }
	.tt-node__year { margin-top: 1.25rem; }
	.tt-fret { text-align: left; padding-left: 3.25rem; }
	.tt-fret::before { display: none; }
	.tt-fret::after { left: 0; width: 100%; }
	.tt-fret__year { padding-left: 0; }
	.tt-hero { background-attachment: scroll; }

	.tt-hero {
		position: relative;
	}

	.tt-hero:before {
		content: '';
		position: absolute;
		z-index: 1;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0,0,0,0.6);


}

/* Reduced motion: everything is simply visible */
@media (prefers-reduced-motion: reduce) {
	[data-reveal], [data-split-text] .tt-w > span {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.tt-hero__cue-line { animation: none; }
	.tt-string__line--drawn { stroke-dasharray: none; stroke-dashoffset: 0; }
	.tt-hero { background-attachment: scroll; }
}