@font-face {
  font-family: "Helvetica Lech";
  src: url("assets/fonts/helvetica-light-587ebe5a59211.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Lech";
  src: url("assets/fonts/Helvetica.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Lech";
  src: url("assets/fonts/Helvetica-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Lech design-system mapping: red / black / white + Helvetica.
     Exact brand values remain subject to brand-guideline confirmation. */
  --lech-red: #ff0000;
  --lech-black: #080808;
  --lech-surface: #111111;
  --lech-surface-2: #171717;
  --lech-line: #2a2a2a;
  --lech-text: #f3f3f0;
  --lech-muted: #969696;
  --lech-soft: #c9c9c4;
  --lech-max: 1240px;

  --lech-font-body: "Helvetica Lech", Helvetica, Arial, sans-serif;
  --lech-font-weight-light: 300;
  --lech-font-weight-regular: 400;
  --lech-font-weight-bold: 700;
  --lech-duration-fast: 200ms;
  --lech-ease-standard: ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--lech-black); color: var(--lech-text); font-family: var(--lech-font-body); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.lech-site { background: var(--lech-black); }
.container-shell { width: min(calc(100% - 40px), var(--lech-max)); margin: 0 auto; }
.site-header { position: absolute; inset: 0 0 auto; z-index: 20; background: transparent; }
.site-header nav { min-height: 72px; position: relative; width: min(calc(100% - 40px), var(--lech-max)); max-width: none; margin: 0 auto; padding: 6px 0 0; }
.site-header nav > a:first-child { position: relative; left: calc(32px - max(0px, (100vw - var(--lech-max)) / 2)); }
.home-header-logo { width: 72px; height: auto; max-width: 72px; max-height: 64px; display: block; object-fit: contain; }
.brand-mark { font-size: 1.15rem; font-weight: 800; letter-spacing: .12em; }
.brand-dot { color: var(--lech-red); }
.nav-link, .language-toggle, .menu-toggle { color: var(--lech-soft); font-size: .86rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; transition: color var(--lech-duration-fast) var(--lech-ease-standard); }
.nav-link:hover, .language-toggle:hover, .menu-toggle:hover { color: var(--lech-red); }
.language-toggle, .menu-toggle { border: 0; background: transparent; cursor: pointer; padding: 0; }
.mobile-menu { display: grid; gap: 18px; border-top: 1px solid var(--lech-line); padding: 18px 0 22px; }
.eyebrow { color: var(--lech-red); font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hero-copy, .section-note, .about-copy { color: var(--lech-soft); font-size: 1rem; line-height: 1.6; }.section-note { font-weight: 600; }
.home-hero { min-height: 100svh; position: relative; overflow: hidden; isolation: isolate; }
.home-hero-photo { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: saturate(1) contrast(1.03) brightness(1); }
.home-hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(8,8,8,.024) 0%, rgba(8,8,8,.036) 34%, rgba(8,8,8,.30) 63%, rgba(8,8,8,.456) 83%), linear-gradient(0deg, rgba(8,8,8,.336) 0%, transparent 32%, rgba(8,8,8,.048) 100%); }
.home-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .22; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, transparent 0%, transparent 35%, #000 58%, #000 100%); }
.home-hero-inner { min-height: 100svh; width: min(calc(100% - 40px), var(--lech-max)); margin: 0 auto; display: block; padding: 0; position: relative; z-index: 2; }
.home-hero-content { position: absolute; top: 50%; right: 0; width: min(720px, 58vw); padding-bottom: 0; transform: translateY(calc(-50% + 10vh)); }
.home-hero-title { margin: 0; font-size: clamp(3.5rem, 6vw, 5.5rem); font-weight: 700; line-height: .84; letter-spacing: -.065em; text-transform: uppercase; text-align: right; }
.home-hero-title > span { display: block; color: var(--lech-red); margin-left: auto; max-width: 100%; width: max-content; }
.home-hero-title .home-welcome { color: var(--lech-text); margin-left: auto; white-space: nowrap; width: max-content; transform: none; }
.home-hero-title .home-lech-line { color: var(--lech-red); text-align: right; white-space: nowrap; }
.home-hero-title .home-hero-community { color: var(--lech-text); text-align: right; white-space: nowrap; }
.home-hero-actions { display: flex; justify-content: flex-end; margin-top: 40px; }
.home-ticket-button { min-height: 46px; background: var(--lech-red); color: #fff; border-color: transparent; }
.home-ticket-button:hover { background: #d90000; color: #fff; transform: translateY(-2px); }
.home-scroll-arrow { position: absolute; z-index: 3; left: 50%; bottom: 24px; color: rgba(255,255,255,.42); font-size: 21px; line-height: 1; transform: translateX(-50%); pointer-events: none; user-select: none; }
.button { align-items: center; border: 1px solid transparent; display: inline-flex; font-size: .7rem; font-weight: 700; gap: 18px; justify-content: center; letter-spacing: .1em; min-height: 48px; padding: 0 20px; text-transform: uppercase; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.button-primary { background: var(--lech-red); color: #fff; }.button-primary:hover { background: #d90000; }
.button-ghost { border-color: var(--lech-line); color: var(--lech-text); }.button-ghost:hover { border-color: var(--lech-red); color: var(--lech-red); }
.section-block { --section-gutter: max(20px, calc((100% - var(--lech-max)) / 2)); position: relative; padding: 96px var(--section-gutter); border-top: 1px solid var(--lech-line); }
.section-logo { position: absolute; top: 20px; left: 32px; z-index: 3; width: 72px; height: 64px; object-fit: contain; object-position: left center; }
.shows-section { --section-gutter: max(20px, calc((100% - var(--lech-max)) / 2)); isolation: isolate; display: flex; flex-direction: column; min-height: 100svh; overflow: hidden; padding: 86px var(--section-gutter) 34px; width: 100%; background-color: #080808; background-image: none; background-position: center; background-repeat: no-repeat; background-size: cover; }.shows-section.is-bg-loaded { background-image: linear-gradient(90deg, rgba(8,8,8,.264) 0%, rgba(8,8,8,.144) 52%, rgba(8,8,8,.048) 100%), url("assets/images/lech-upcoming-shows.jpg"); }
.shows-section > *:not(.section-logo) { position: relative; z-index: 1; }
.shows-section .section-logo { left: 32px; }
.shows-section > .section-heading, .shows-section > .shows-grid { width: 100%; }
.show-album { margin-top: 30px; }
.album-stage { aspect-ratio: 4 / 5; cursor: pointer; overflow: hidden; position: relative; }.album-stage:focus-visible { outline: 1px solid var(--lech-red); outline-offset: 4px; }
.album-slide { display: block; inset: 0; min-height: 0; min-width: 0; opacity: 0; overflow: hidden; position: absolute; transform: translateX(8%); transition: opacity 420ms ease, transform 420ms ease; }
.album-slide.is-active { opacity: 1; transform: translateX(0); z-index: 1; }
.album-media { display: block; height: 100%; max-height: 100%; max-width: 100%; object-fit: contain; object-position: center; width: 100%; }
.album-placeholder { align-items: flex-end; background: #121212; display: flex; height: 100%; justify-content: space-between; overflow: hidden; padding: 20px; position: relative; }
.album-placeholder::before { background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 28px 28px; content: ""; inset: 0; opacity: .28; position: absolute; }
.album-placeholder::after { background: linear-gradient(135deg, transparent 0 46%, rgba(255,0,0,.85) 47% 51%, transparent 52%), radial-gradient(circle at 72% 28%, rgba(255,0,0,.8) 0 4%, transparent 5%), linear-gradient(145deg, #1a1a1a, #080808 62%, #450000); content: ""; inset: 0; position: absolute; }
.album-placeholder span { color: #fff; font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 700; letter-spacing: -.08em; line-height: .8; position: relative; z-index: 1; }
.album-controls { align-items: center; border-bottom: 1px solid rgba(255,255,255,.22); display: flex; gap: 14px; justify-content: center; padding: 12px 0 10px; }
.album-control { background: transparent; border: 0; color: var(--lech-text); cursor: pointer; font-size: 1rem; line-height: 1; padding: 4px; }
.album-control:hover, .album-control:focus-visible { color: var(--lech-red); }
.album-dots { display: flex; gap: 7px; }
.album-dot { background: rgba(255,255,255,.3); border: 0; border-radius: 50%; cursor: pointer; height: 6px; padding: 0; width: 6px; }
.album-dot.is-active { background: var(--lech-red); transform: scale(1.35); }
.section-title { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 700; letter-spacing: -.065em; line-height: .9; }
.shows-grid { align-items: center; display: flex; flex: 1; justify-content: stretch; margin-top: 24px; width: 100%; }
.upcoming-show-card { align-items: center; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; width: 100%; background: transparent; }
.upcoming-show-card .event-card-content { grid-column: 2; grid-row: 1; border-left: 1px solid rgba(255,255,255,.22); padding: 0 0 0 clamp(28px, 4vw, 56px); background: transparent; }
.upcoming-show-card .event-detail { display: block; grid-column: 1; grid-row: 1; padding: 0 clamp(28px, 4vw, 56px) 0 0; }
.upcoming-show-card .event-detail .detail-grid { grid-template-columns: 1fr; }
.event-detail-trigger { margin-top: 14px; }
.event-card { grid-column: span 4; border: 1px solid var(--lech-line); background: var(--lech-surface); transition: border-color .2s ease, transform .2s ease; }
.event-card:hover { border-color: #555; transform: translateY(-3px); }.event-card-featured { grid-column: span 6; }.event-card-content { padding: 22px; }
.event-poster { align-items: flex-end; display: flex; min-height: 300px; overflow: hidden; padding: 22px; position: relative; }.event-poster::before { border: 1px solid rgba(255,255,255,.35); content: ""; inset: 20px; position: absolute; transform: rotate(-8deg); }.event-poster span { color: #fff; font-size: 2.1rem; font-weight: 700; letter-spacing: -.08em; line-height: .8; position: relative; z-index: 1; }.event-poster b { color: var(--lech-red); }.poster-one { background: radial-gradient(circle at 65% 30%, #ee0000 0 8%, transparent 9%), linear-gradient(125deg, #120000, #460000 44%, #090909 45%); }.poster-two { background: radial-gradient(circle at 35% 40%, #fff 0 3%, transparent 4%), linear-gradient(45deg, #260000, #090909 56%, #e00000 57%); }.poster-three { background: repeating-linear-gradient(120deg, #0b0b0b 0 18px, #240000 18px 22px, #0b0b0b 22px 42px); }
.detail-special-guest { border-top: 1px solid var(--lech-line); color: var(--lech-soft); font-size: .7rem; font-weight: 700; letter-spacing: .12em; margin-top: 16px; padding-top: 14px; text-transform: uppercase; }.detail-special-guest-label { color: var(--lech-red); }.detail-special-guest-name { color: var(--lech-soft); }.lineup-table-wrap { margin-top: 12px; max-width: 100%; overflow: visible; overscroll-behavior-inline: auto; }.lineup-table { border-collapse: collapse; table-layout: fixed; width: 100%; }.lineup-table th, .lineup-table td { border-bottom: 1px solid rgba(255,255,255,.14); padding: 10px 8px; text-align: left; vertical-align: top; overflow-wrap: anywhere; word-break: normal; }.lineup-table th:first-child, .lineup-table td:first-child { width: 9%; }.lineup-table th:nth-child(2), .lineup-table td:nth-child(2), .lineup-table th:nth-child(3), .lineup-table td:nth-child(3) { width: 45.5%; }.lineup-table thead th { color: var(--lech-red); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.lineup-table tbody th { color: var(--lech-muted); font-size: .7rem; font-weight: 500; }.lineup-table tbody td { color: var(--lech-text); font-size: .8rem; font-weight: 600; line-height: 1.4; white-space: normal; }.lineup-table tr:last-child th, .lineup-table tr:last-child td { border-bottom: 0; }
.event-date, .event-status, .detail-label { color: var(--lech-red); font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.event-title { font-size: 1.65rem; font-weight: 700; letter-spacing: -.045em; }.event-meta { color: var(--lech-muted); font-size: .82rem; line-height: 1.5; }.event-status { border: 1px solid rgba(255,0,0,.45); padding: 7px 8px; }.event-detail-trigger { align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--lech-red); color: var(--lech-text); cursor: pointer; display: flex; font-size: .68rem; font-weight: 700; gap: 20px; letter-spacing: .1em; padding: 0 0 8px; text-transform: uppercase; }.event-detail-trigger:hover { color: var(--lech-red); }.event-detail { padding: 0 22px 24px; }.detail-rule { border-top: 1px solid var(--lech-line); margin-bottom: 22px; }.detail-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }.detail-ticket-button { display: inline-flex; margin-top: 18px; }
.archive-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }.archive-item { display: block; min-width: 0; }.archive-item:hover .archive-image::after { border-color: rgba(255,255,255,.55); }.archive-item:hover .archive-image-wordmark { transform: translateY(-4px); }.archive-item:hover .archive-image-tag { color: var(--lech-red); }.archive-image { align-items: flex-end; display: flex; min-height: 340px; padding: 20px; position: relative; transition: filter .25s ease; }.archive-item:hover .archive-image { filter: brightness(1.14); }.archive-image::after { border: 1px solid rgba(255,255,255,.25); content: ""; inset: 14px; position: absolute; transition: border-color .25s ease; }.archive-image-wordmark { font-size: 1.7rem; font-weight: 700; letter-spacing: -.07em; line-height: .85; position: relative; transition: transform .25s ease; z-index: 1; }.archive-image-tag { bottom: 20px; color: rgba(255,255,255,.58); font-size: .58rem; font-weight: 700; letter-spacing: .14em; position: absolute; right: 20px; text-transform: uppercase; transition: color .25s ease; z-index: 1; }.archive-one { background: linear-gradient(140deg, #310000, #0e0e0e 65%); }.archive-two { background: linear-gradient(30deg, #e40000, #1b0000 42%, #080808 43%); }.archive-three { background: linear-gradient(160deg, #111, #500000 70%); }.archive-caption { align-items: flex-start; border-bottom: 1px solid var(--lech-line); display: flex; font-size: .72rem; justify-content: space-between; padding: 13px 0; text-transform: uppercase; }.archive-caption > div { display: grid; gap: 5px; }.archive-caption-title { color: var(--lech-text); font-weight: 700; letter-spacing: .04em; }.archive-caption-venue { color: var(--lech-muted); font-size: .62rem; letter-spacing: .1em; }.archive-caption-year { color: var(--lech-muted); font-weight: 600; letter-spacing: .1em; }.archive-image span:last-child { color: rgba(255,255,255,.58); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.archive-section { background-color: #080808; background-image: none; background-position: center; background-repeat: no-repeat; background-size: cover; }.archive-section.is-bg-loaded { background-image: linear-gradient(rgba(8,8,8,.30), rgba(8,8,8,.30)), url("assets/images/Archive/archive-background.webp"); }
.archive-album { margin-top: 48px; width: 100%; }.archive-album-stage { aspect-ratio: 3 / 2; background: #080808; display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; }.archive-frame { background: #080808; min-height: 0; min-width: 0; overflow: hidden; position: relative; }.archive-frame-image { display: block; height: 100%; inset: 0; object-fit: cover; opacity: 0; position: absolute; width: 100%; transition: opacity 1050ms cubic-bezier(.22,.61,.36,1); will-change: opacity; }.archive-frame-image.is-current { opacity: 1; }.archive-frame.is-transitioning .archive-frame-image.is-current { opacity: 0; }.archive-frame.is-transitioning .archive-frame-image.is-next { opacity: 1; }.archive-album-controls { border-bottom: 0; justify-content: center; padding: 14px 0 0; }.archive-album-counter { color: var(--lech-muted); font-size: .65rem; font-weight: 600; letter-spacing: .14em; }.archive-album .album-dots { display: none; }
.about-section { background-color: #080808; background-image: none; background-position: center; background-repeat: no-repeat; background-size: cover; }.about-section.is-bg-loaded { background-image: linear-gradient(rgba(8,8,8,.30), rgba(8,8,8,.30)), url("assets/images/about-background.webp"); }.about-section .section-title { line-height: 1.05; }
.about-panel { padding: 28px; }.connect-block { display: grid; gap: 18px; margin-top: 28px; }.connect-block .text-link { width: fit-content; }.connect-socials { align-items: center; display: flex; gap: 18px; }.social-icon { align-items: center; background: transparent; border: 0; color: #fff; display: inline-flex; height: 28px; justify-content: center; text-decoration: none; transition: opacity .2s ease, transform .2s ease; width: 28px; }.social-icon img { display: block; height: 22px; width: 22px; }.social-zalo { background: transparent; border-radius: 0; height: 28px; width: 44px; }.social-zalo img { display: block; filter: brightness(0) invert(1); height: auto; width: 38px; }.social-icon:hover, .social-icon:focus-visible { opacity: .7; transform: translateY(-2px); }.social-icon[aria-disabled="true"] { cursor: default; opacity: .9; }.social-icon[aria-disabled="true"]:hover { opacity: .9; transform: none; }.about-copy { max-width: 640px; font-size: clamp(1.1rem, 2vw, 1.65rem); letter-spacing: -.02em; line-height: 1.35; }.text-link { border-bottom: 1px solid var(--lech-red); color: var(--lech-red); font-size: .7rem; font-weight: 700; letter-spacing: .1em; padding-bottom: 7px; text-transform: uppercase; }.footer-grid { display: grid; gap: 38px; padding-bottom: 34px; padding-top: 72px; }.footer-note { color: var(--lech-muted); font-size: .82rem; font-weight: 600; }.footer-links { display: flex; flex-wrap: wrap; gap: 24px; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }.footer-links a:hover { color: var(--lech-red); }.footer-bottom { border-top: 1px solid var(--lech-line); color: var(--lech-muted); display: flex; font-size: .68rem; font-weight: 600; justify-content: space-between; letter-spacing: .1em; padding-top: 20px; text-transform: uppercase; }
@keyframes archive-slide-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@media (min-width: 1600px) { .shows-section .section-logo { left: 32px; } }
@media (max-width: 767px) { .container-shell { width: min(calc(100% - 28px), var(--lech-max)); }.site-header nav { min-height: 62px; width: min(calc(100% - 28px), var(--lech-max)); padding: 6px 0 0; }.site-header nav > a:first-child { left: 0; }.home-header-logo { width: 58px; max-width: 58px; max-height: 54px; }.home-hero, .home-hero-inner { min-height: 100svh; }.home-hero-photo { object-position: center center; }.home-hero::before { background: linear-gradient(180deg, rgba(8,8,8,.024) 0%, rgba(8,8,8,.024) 37%, rgba(8,8,8,.408) 65%, rgba(8,8,8,.624) 100%); }.home-hero::after { mask-image: linear-gradient(180deg, transparent 0%, transparent 35%, #000 60%, #000 100%); background-size: 46px 46px; }.home-hero-inner { width: calc(100% - 36px); padding: 62px 0 36px; display: flex; align-items: center; justify-content: center; }.home-hero-content { position: static; align-self: center; width: 100%; padding-bottom: 0; display: flex; flex-direction: column; align-items: center; transform: none; }.home-hero-title { width: min(100%, 420px); font-size: clamp(2.75rem, 11vw, 5.5rem); line-height: .96; text-align: center; }.home-hero-title > span, .home-hero-title .home-welcome { width: auto; margin-left: 0; margin-right: 0; transform: none; }.home-hero-title .home-lech-line, .home-hero-title .home-hero-community { display: block; text-align: center; width: auto; }.home-hero-actions { margin-top: 28px; justify-content: center; }.home-ticket-button { min-height: 42px; padding: 0 14px; font-size: .56rem; }.home-scroll-arrow { bottom: 16px; font-size: 19px; }.section-block { --section-gutter: 14px; padding: 82px var(--section-gutter) 70px; }.section-logo { top: 16px; left: 14px; width: 58px; height: 54px; }.shows-section { --section-gutter: 14px; min-height: 100svh; padding: 68px var(--section-gutter) 24px; }.shows-section { background-position: center; }.shows-section .section-logo { left: 14px; }.shows-grid { align-items: center; margin-top: 8px; }.upcoming-show-card { grid-template-columns: 1fr; max-width: none; width: 100%; }.upcoming-show-card .event-card-content { grid-column: 1; grid-row: 2; border-left: 0; padding: 0; }.upcoming-show-card .event-detail { grid-column: 1; grid-row: 1; border-bottom: 1px solid rgba(255,255,255,.22); padding: 0 0 24px; }.upcoming-show-card .event-detail .detail-grid { grid-template-columns: 1fr; }.show-album { margin-top: 0; }.album-stage { aspect-ratio: 4 / 5; }.album-placeholder { padding: 16px; }.album-placeholder span { font-size: clamp(2rem, 12vw, 3.5rem); }.event-card, .event-card-featured { grid-column: span 12; }.event-poster { min-height: 250px; }.detail-grid, .archive-grid { grid-template-columns: 1fr; }.archive-image { min-height: 280px; }.about-panel { padding: 22px; }.footer-grid { padding-top: 52px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }