/* Sugo - Warhammer Tone Pro landing designs (a = Sugo Drop, b = Official Showcase, c = Colour Wall).
   Sugo theme tokens taken from the live /timeline/: Archivo Black headings, JetBrains Mono labels,
   near-black #0e0e0e, accent #ff3b1f, yellow #f5c518, lime live dot #a4ff8a, 2px black rules. */
:root { --tpc-ink0: #0e0e0e; --tpc-red: #ff3b1f; --tpc-yel: #f5c518; --tpc-lime: #a4ff8a; --tpc-grey: #b5b5b5; }
.tpc-a, .tpc-b, .tpc-c { max-width: 1200px; margin: 0 auto 18px; font-family: Archivo, system-ui, sans-serif; }
.tpc-a h1, .tpc-b h1, .tpc-c h1, .tpc-b h3 { font-family: "Archivo Black", Archivo, system-ui, sans-serif; font-weight: 800; letter-spacing: -.04em; margin: 0; }
.tpc-eyebrow, .tpc-a__strip, .tpc-marquee, .tpc-b .num, .tpc-c__chips span { font-family: "JetBrains Mono", ui-monospace, monospace; text-transform: uppercase; }
.tpc-logo { display: block; width: min(340px, 80%); height: auto; margin: 0 0 18px; }
.tpc-sub { font-size: 1.02em; line-height: 1.55; margin: 0 0 20px; }
.tpc-btn { display: inline-block; background: var(--tpc-red); color: #fff !important; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; padding: 14px 22px; border: 2px solid var(--tpc-ink0); box-shadow: 4px 4px 0 var(--tpc-ink0); text-decoration: none !important; transition: transform .12s, box-shadow .12s; }
.tpc-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tpc-ink0); }

/* ---------- A: Sugo Drop ---------- */
.tpc-marquee { background: var(--tpc-ink0); color: #fff; font-size: 11px; letter-spacing: .16em; overflow: hidden; white-space: nowrap; border: 2px solid var(--tpc-ink0); }
.tpc-marquee__track { display: inline-flex; gap: 38px; padding: 9px 0; animation: tpc-marquee 38s linear infinite; }
.tpc-marquee .live { color: var(--tpc-lime); }
@keyframes tpc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tpc-a__hero { display: grid; grid-template-columns: 1fr 300px; grid-template-areas: 'copy rack' 'art art'; background: var(--tpc-ink0); color: #fff; border: 2px solid var(--tpc-ink0); border-top: 0; overflow: hidden; }
.tpc-a__copy { grid-area: copy; padding: 38px 34px 30px; }
.tpc-a__rack { grid-area: rack; overflow: hidden; position: relative; background: var(--tpc-ink0); }
.tpc-a__rack img { position: absolute; left: 50%; top: 4%; width: 92%; height: auto; transform: translateX(-50%); }
.tpc-a .tpc-eyebrow { color: var(--tpc-grey); font-size: 12px; letter-spacing: .22em; margin-bottom: 18px; }
.tpc-a h1 { font-size: clamp(38px, 5vw, 64px); line-height: .98; color: #fff; margin-bottom: 16px; }
.tpc-a h1 .accent { color: var(--tpc-red); }
.tpc-a .tpc-sub { color: #d6d6d6; max-width: 520px; }
.tpc-stats { display: flex; gap: 0; margin: 0 0 24px; border-top: 1px solid #333; border-bottom: 1px solid #333; }
.tpc-stats div { flex: 1; padding: 12px 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tpc-grey); }
.tpc-stats div + div { border-left: 1px solid #333; padding-left: 16px; }
.tpc-stats b { display: block; font-family: "Archivo Black", Archivo, sans-serif; font-size: 30px; letter-spacing: -.02em; color: #fff; text-transform: none; }
.tpc-a__art { grid-area: art; position: relative; display: flex; align-items: center; background: radial-gradient(circle at 60% 40%, #2a2224 0%, #151012 60%, #0e0e0e 100%); }
.tpc-a__art img { width: 100%; height: 260px; object-fit: cover; object-position: center 35%; display: block; }
.tpc-a__art { border-top: 2px solid #222; }
.tpc-a__strip { background: var(--tpc-yel); color: var(--tpc-ink0); border: 2px solid var(--tpc-ink0); border-top: 0; font-size: 11px; font-weight: 600; letter-spacing: .18em; padding: 10px 16px; }
.sugo-tpc--a .sugo-tpc__grid { background: #fff; border: 2px solid var(--tpc-ink0); border-radius: 0; padding: 0; }
.sugo-tpc--a .sugo-tpc__row { border: 0; border-bottom: 2px solid var(--tpc-ink0); border-radius: 0; margin: 0; }
.sugo-tpc--a .sugo-tpc__name strong { font-family: "Archivo Black", Archivo, sans-serif; font-weight: 800; letter-spacing: -.02em; }
.sugo-tpc--a .sugo-tpc__tone { border-radius: 0; box-shadow: 0 0 0 2px var(--tpc-ink0); }
.sugo-tpc--a .sugo-tpc__cell.is-sel .sugo-tpc__tone { border-color: var(--tpc-red); box-shadow: 0 0 0 3px var(--tpc-red); }
.sugo-tpc--a .sugo-tpc__cell.is-sel .sugo-tpc__chip::after { background: var(--tpc-red); }
.sugo-tpc--a .sugo-tpc__code, .sugo-tpc--a .sugo-tpc__all, .sugo-tpc--a .sugo-tpc__fams button { font-family: "JetBrains Mono", ui-monospace, monospace; }
.sugo-tpc--a .sugo-tpc__fams button.is-on { background: var(--tpc-red); border-color: var(--tpc-red); }
.sugo-tpc--a .sugo-tpc__tools { background: transparent; border: 2px solid var(--tpc-ink0); border-radius: 0; }
.sugo-tpc--a .sugo-tpc__bar-bottom { border: 2px solid var(--tpc-ink0); border-radius: 0; box-shadow: 4px 4px 0 var(--tpc-ink0); }
.sugo-tpc--a .sugo-tpc__add { background: var(--tpc-red) !important; border-radius: 0; }
.sugo-tpc--a .sugo-tpc__step { background: #fff0ed; border-radius: 0; }
.sugo-tpc--a .sugo-tpc__step button { color: var(--tpc-red); }

/* ---------- B: Official Showcase ---------- */
.tpc-b__hero { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; background: #231f20 repeating-radial-gradient(circle at 20% 60%, transparent 0 60px, rgba(255,255,255,.035) 61px 62px); color: #fff; overflow: hidden; }
.tpc-b__art img { width: 100%; height: auto; display: block; }
.tpc-b__copy { padding: 34px 40px 34px 10px; }
.tpc-b__tag { font-family: "Archivo Black", Archivo, sans-serif; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 14px; }
.tpc-b .tpc-sub { color: #d8d8d8; max-width: 540px; }
.tpc-b__tones { display: flex; align-items: center; gap: 6px; margin: 0 0 24px; }
.tpc-b__tones span { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); box-shadow: 0 0 0 3px rgba(255,255,255,.85); }
.tpc-b__tones em { margin-left: 10px; font-style: normal; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tpc-grey); }
.tpc-b__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.tpc-b__price { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tpc-yel); }
.tpc-b .tpc-btn { border-color: #fff; box-shadow: 4px 4px 0 #fff; }
.tpc-b__tiles { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--tpc-ink0); border-top: 0; }
.tpc-b__tiles div { padding: 18px 18px 20px; background: #fff; }
.tpc-b__tiles div + div { border-left: 2px solid var(--tpc-ink0); }
.tpc-b__tiles .dark { background: var(--tpc-ink0); color: #fff; }
.tpc-b__tiles .num { color: var(--tpc-red); font-size: 12px; letter-spacing: .16em; }
.tpc-b__tiles h3 { font-size: 22px; margin: 6px 0 6px; }
.tpc-b__tiles p { margin: 0; font-size: .9em; line-height: 1.45; color: inherit; opacity: .8; }
.sugo-tpc--b .sugo-tpc__grid { background: #231f20; }
.sugo-tpc--b .sugo-tpc__row { background: #2d2829; border-color: #3a3435; color: #fff; }
.sugo-tpc--b .sugo-tpc__tone { background: #2d2829; box-shadow: 0 0 0 1px #4a4344; }
.sugo-tpc--b .sugo-tpc__price, .sugo-tpc--b .sugo-tpc__n { color: #fff; }
.sugo-tpc--b .sugo-tpc__all { background: transparent; color: #fff; border-color: #5a5354; }
.sugo-tpc--b .sugo-tpc__step { background: #3a3435; }
.sugo-tpc--b .sugo-tpc__step button { color: var(--tpc-yel); }
.sugo-tpc--b .sugo-tpc__cell.is-sel .sugo-tpc__tone { border-color: var(--tpc-yel); box-shadow: 0 0 0 2px var(--tpc-yel); }
.sugo-tpc--b .sugo-tpc__cell.is-sel .sugo-tpc__chip::after { background: var(--tpc-yel); color: var(--tpc-ink0); }

/* ---------- C: Colour Wall ---------- */
.tpc-c__hero { display: grid; grid-template-columns: 340px 1fr 150px; gap: 18px; align-items: stretch; background: #f3f5f8; border: 2px solid var(--tpc-ink0); padding: 18px; }
.tpc-c__card { background: #fff; border: 2px solid var(--tpc-ink0); box-shadow: 6px 6px 0 var(--tpc-ink0); padding: 26px 24px; display: flex; flex-direction: column; justify-content: center; }
.tpc-c__card .tpc-logo { background: #231f20; padding: 12px 14px; box-sizing: border-box; width: 100%; }
.tpc-c h1, .tpc-c__h { font-family: "Archivo Black", Archivo, sans-serif; font-weight: 800; letter-spacing: -.04em; font-size: 34px; line-height: 1.02; color: var(--tpc-ink0); margin-bottom: 12px; }
.tpc-c__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.tpc-c__chips span { font-size: 11px; letter-spacing: .1em; border: 2px solid var(--tpc-ink0); padding: 5px 9px; }
.tpc-c__chips .hot { background: var(--tpc-yel); }
.tpc-c__wall { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; align-content: center; }
.tpc-c__col { display: grid; grid-template-rows: repeat(5, 1fr); aspect-ratio: 1 / 1.6; border: 2px solid var(--tpc-ink0); transition: transform .12s, box-shadow .12s; }
.tpc-c__col i { display: block; }
.tpc-c__col:hover { transform: translateY(-3px); box-shadow: 0 4px 0 var(--tpc-ink0); }
.tpc-c__rack { display: flex; align-items: center; justify-content: center; }
.tpc-c__rack img { max-height: 430px; width: auto; display: block; }
.sugo-tpc--c .sugo-tpc__chip.has-img { height: 92px; background-color: #fff !important; background-size: contain; background-position: center 30%; background-repeat: no-repeat; border-bottom: 10px solid var(--sw); }
.sugo-tpc--c .sugo-tpc__chip.has-img .sugo-tpc__num { position: absolute; top: 4px; left: 6px; color: var(--tpc-ink0); text-shadow: none; font-size: .85em; }
.sugo-tpc--c .sugo-tpc__row:target { box-shadow: 0 0 0 3px var(--tpc-yel); }

@media (max-width: 849px) {
	.tpc-a__hero { grid-template-columns: 1fr; grid-template-areas: 'copy' 'art'; }
	.tpc-a__rack { display: none; }
	.tpc-b__hero { grid-template-columns: 1fr; }
	.tpc-a__copy { padding: 26px 18px; }
	.tpc-a__art img { min-height: 0; }
	.tpc-b__art { max-height: 360px; overflow: hidden; }
	.tpc-b__copy { padding: 22px 18px 26px; }
	.tpc-b__tiles { grid-template-columns: 1fr 1fr; }
	.tpc-b__tiles div:nth-child(3) { border-left: 0; }
	.tpc-b__tiles div:nth-child(n+3) { border-top: 2px solid var(--tpc-ink0); }
	.tpc-c__hero { grid-template-columns: 1fr; padding: 12px; }
	.tpc-c__wall { grid-template-columns: repeat(6, 1fr); }
	.tpc-c__rack { display: none; }
	.tpc-stats b { font-size: 24px; }
	.sugo-tpc--c .sugo-tpc__chip.has-img { height: 64px; border-bottom-width: 7px; }
}

/* C used as the page footer (final layout) */
.tpc-c--footer { margin-top: 22px; }
.tpc-c--footer .tpc-c__h { font-size: 28px; }
/* B header directly above an A-style chart: tighten the seam */
.tpc-b + .sugo-tpc--a { margin-top: 0; }
.tpc-b__art img { object-fit: cover; object-position: center top; }

/* jump targets clear the sticky site header */
#tpc-chart, .sugo-tpc__row { scroll-margin-top: 130px; }