:root {
  --peat: #0b0e0a;
  --deep: #10130f;
  --bone: #e9e2d2;
  --bone-muted: #bbb5a6;
  --lichen: #9fa391;
  --fog: #666a62;
  --ember: #863e32;
  --line: rgba(233, 226, 210, 0.16);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--bone); background: var(--peat); font-family: var(--sans); font-size: 16px; line-height: 1.65; }
body::selection { color: var(--peat); background: var(--lichen); }
a { color: inherit; text-decoration: none; }

.skip-link { position: fixed; z-index: 100; top: -60px; left: 16px; padding: 10px 14px; color: var(--peat); background: var(--bone); }
.skip-link:focus { top: 16px; }

.site-header { position: absolute; z-index: 20; top: 0; right: 0; left: 0; display: flex; justify-content: center; padding: 30px 24px; }
.site-nav { display: flex; gap: clamp(25px, 5vw, 76px); }
.site-nav a, .footer-links a { position: relative; color: var(--bone); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.site-nav a::after, .footer-links a::after { position: absolute; right: 0; bottom: -7px; left: 0; height: 1px; background: var(--bone); content: ""; transform: scaleX(0); transform-origin: left; transition: transform 200ms ease; }
.site-nav a:hover::after, .site-nav a:focus-visible::after, .footer-links a:hover::after, .footer-links a:focus-visible::after { transform: scaleX(1); }

.hero { position: relative; display: grid; min-height: clamp(620px, 71vw, 840px); overflow: hidden; isolation: isolate; place-items: center; background: #0d100d url("/manus-storage/tlo-hero-zatwierdzone_22e3f12d.jpg") center/cover no-repeat; }
.hero::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(5,8,6,.18) 0%, rgba(5,8,6,.03) 38%, rgba(5,8,6,.66) 100%); content: ""; }
.hero-shade { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 50% 61%, rgba(9,12,9,.72) 0%, rgba(9,12,9,.3) 33%, transparent 68%); }
.hero-grain { position: absolute; z-index: -1; inset: 0; opacity: .28; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); pointer-events: none; }
.hero-content { width: min(100% - 44px, 920px); margin-top: clamp(85px, 12vw, 148px); text-align: center; }
h1, h2, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 500; line-height: .86; }
h1 { margin-bottom: 19px; font-size: clamp(48px, 10.4vw, 174px); letter-spacing: .015em; text-transform: uppercase; white-space: nowrap; }
.hero-claim { margin: 0 0 29px; color: var(--bone); font-size: clamp(10px, 1.2vw, 13px); font-weight: 500; letter-spacing: .34em; text-transform: uppercase; }
.button { display: inline-flex; align-items: center; gap: 13px; padding: 15px 25px; border: 1px solid transparent; color: var(--bone); background: var(--ember); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: transform 200ms ease, color 200ms ease, background 200ms ease; }
.button:hover, .button:focus-visible { color: var(--peat); background: var(--bone); transform: translateY(-2px); }

.fragments { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); background: #0d100d; }
.fragment { position: relative; display: flex; min-height: clamp(190px, 20vw, 310px); padding: 28px clamp(20px, 3vw, 50px); overflow: hidden; flex-direction: column; justify-content: flex-end; border-right: 1px solid rgba(233,226,210,.14); background-color: #111510; background-position: center; background-size: cover; isolation: isolate; }
.fragment:last-child { border-right: 0; }
.fragment::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(8,11,8,.08), rgba(8,11,8,.82)); content: ""; transition: background 220ms ease; }
.fragment::after { position: absolute; z-index: -2; inset: 0; background-image: radial-gradient(circle at 38% 20%, rgba(233,226,210,.15), transparent 3%), radial-gradient(circle at 66% 70%, rgba(159,163,145,.15), transparent 2%); background-size: 35px 35px, 57px 57px; content: ""; opacity: .55; }
.fragment-music { background-image: linear-gradient(180deg, rgba(8,11,8,.12), rgba(8,11,8,.82)), url("/manus-storage/tlo-muzyka_eee61b23.jpg"); background-position: 78% center; }
.fragment-about { background-image: linear-gradient(180deg, rgba(8,11,8,.12), rgba(8,11,8,.82)), url("/manus-storage/tlo-o-nas_3d00a880.jpg"); background-position: center; }
.fragment-contact { background-image: linear-gradient(180deg, rgba(8,11,8,.12), rgba(8,11,8,.82)), url("/manus-storage/tlo-kontakt_f8ed0f33.jpg"); background-position: 74% center; }
.fragment:hover::before, .fragment:focus-visible::before { background: linear-gradient(180deg, rgba(8,11,8,.0), rgba(8,11,8,.55)); }
.fragment-number, .fragment-label { color: var(--lichen); font-size: 9px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.fragment-label { margin: 3px 0 13px; color: var(--bone-muted); }
.fragment-title { font-family: var(--serif); font-size: clamp(28px, 3vw, 48px); line-height: .95; }

.section { position: relative; display: grid; grid-template-columns: minmax(120px, .5fr) minmax(0, 2fr); gap: clamp(42px, 11vw, 200px); overflow: hidden; isolation: isolate; padding: clamp(90px, 13vw, 190px) clamp(24px, 8vw, 145px); background-color: var(--deep); background-position: center; background-size: cover; }
.section::before { position: absolute; z-index: 0; inset: 0; content: ""; }
.section-index, .section-copy { position: relative; z-index: 1; }
.section-index { color: var(--lichen); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.section-index span { display: block; margin-bottom: 10px; color: var(--ember); }
.section-copy { max-width: 810px; }
.eyebrow { margin-bottom: 20px; color: var(--lichen); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
h2 { margin-bottom: 33px; font-size: clamp(54px, 7.5vw, 120px); letter-spacing: -.04em; }
.section-copy > p:not(.eyebrow) { max-width: 620px; color: var(--bone-muted); font-size: clamp(16px, 1.5vw, 19px); }
.section-copy > p + p { margin-top: 21px; }
.music { background-image: url("/manus-storage/tlo-muzyka_eee61b23.jpg"); background-position: center right; }
.music::before { background: linear-gradient(90deg, rgba(11,14,10,.94) 0%, rgba(11,14,10,.84) 42%, rgba(11,14,10,.47) 100%), linear-gradient(180deg, rgba(11,14,10,.15), rgba(11,14,10,.7)); }
.music .section-copy { position: relative; }
.music .section-copy::after { position: absolute; z-index: 0; top: -80px; right: -20%; width: min(35vw, 450px); aspect-ratio: 1; border: 1px solid rgba(159,163,145,.16); border-radius: 50%; box-shadow: inset 0 0 0 90px rgba(11,14,10,.13), inset 0 0 0 180px rgba(159,163,145,.04); content: ""; pointer-events: none; }
.music .section-copy > * { position: relative; z-index: 1; }
.text-link { display: inline-flex; gap: 12px; padding-bottom: 7px; border-bottom: 1px solid var(--lichen); color: var(--bone); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.text-link:hover, .text-link:focus-visible { color: var(--lichen); }
.about { background-image: url("/manus-storage/tlo-o-nas_3d00a880.jpg"); background-position: center; }
.about::before { background: linear-gradient(90deg, rgba(11,14,10,.79) 0%, rgba(11,14,10,.7) 48%, rgba(11,14,10,.42) 100%), linear-gradient(180deg, rgba(11,14,10,.3), rgba(11,14,10,.75)); }
.contact { background-image: url("/manus-storage/tlo-kontakt_f8ed0f33.jpg"); background-position: center; }
.contact::before { background: linear-gradient(90deg, rgba(11,14,10,.84) 0%, rgba(11,14,10,.72) 48%, rgba(11,14,10,.35) 100%), linear-gradient(180deg, rgba(11,14,10,.22), rgba(11,14,10,.75)); }
.button-outline { border-color: var(--bone-muted); background: transparent; }

.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: end; padding: 34px clamp(24px, 5vw, 80px); border-top: 1px solid var(--line); }
.footer-name { font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: .04em; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 21px; }
.site-footer > p { justify-self: end; margin: 0; color: var(--fog); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }

@media (max-width: 700px) {
  .site-header { padding: 24px 18px; }
  .site-nav { gap: 20px; }
  .site-nav a { font-size: 8px; letter-spacing: .12em; }
  .hero { min-height: 665px; background-position: center top; }
  .hero-content { width: calc(100% - 32px); margin-top: 92px; }
  h1 { font-size: clamp(44px, 12.5vw, 62px); letter-spacing: .012em; }
  .hero-claim { font-size: 9px; letter-spacing: .22em; }
  .fragments { grid-template-columns: 1fr; }
  .fragment { min-height: 168px; border-right: 0; border-bottom: 1px solid rgba(233,226,210,.14); }
  .fragment:last-child { border-bottom: 0; }
  .section { grid-template-columns: 1fr; gap: 52px; padding: 83px 24px; }
  h2 { font-size: clamp(52px, 16.5vw, 78px); }
  .music .section-copy::after { top: -24px; right: -70px; width: 300px; }
  .site-footer { grid-template-columns: 1fr; align-items: start; gap: 21px; }
  .footer-links { justify-content: flex-start; }
  .site-footer > p { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }