html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, p, blockquote, pre,
a, code, em, img, small, strong,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, article, aside, canvas, details,
figure, figcaption, footer, header, menu, nav, section {
  margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, menu, nav, section { display:block; }
body { line-height:1; }
ol, ul { list-style:none; }

:root{
  --bg:#f8f7f3;
  --surface:#ffffff;
  --surface-2:#fcfbf8;
  --ink:#111111;
  --muted:#616161;
  --line:#e7e2da;
  --gold:#b48a4a;
  --gold-dark:#8f6a34;
  --shadow:0 24px 70px rgba(17,17,17,.08);
}
body{
  font-family: Inter, Arial, sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#fcfbf8 0%, #f8f7f3 45%, #f5f2ed 100%);
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

#intro{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:6rem 2rem; position:relative; color:#fff;
}
#intro:before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.44)),
    linear-gradient(90deg, rgba(255,255,255,.08), rgba(0,0,0,.18)),
    url("../../images/hero-fluegel.jpg") center center / cover no-repeat;
}
#intro .inner{ position:relative; z-index:2; max-width:940px; }
.badge{
  display:inline-block; margin-bottom:1.3rem; padding:.8rem 1.1rem; border-radius:999px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); color:#f4e5ca;
  font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
#intro h1{
  font-family: Georgia, "Times New Roman", serif;
  font-size:clamp(3rem,7vw,6rem); line-height:1.02; margin-bottom:1.2rem;
}
#intro p{
  max-width:820px; margin:0 auto 2rem auto; color:rgba(255,255,255,.90);
  font-size:1.12rem; line-height:1.8;
}
.actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.65rem 1.2rem;
  border-radius:999px;
  font-weight:600;
  text-align:center;
  white-space:normal;
  transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.button{
  font-weight: 600;
  letter-spacing: 0.02em;
}
.button.primary{
  background: linear-gradient(180deg, #f1dcc0, #e1bf93);
  color: #6b4823;
  border: 1px solid #d7ad7c;
  box-shadow: 0 12px 28px rgba(215, 173, 124, 0.12);
}
.button.primary:hover{
  background: linear-gradient(180deg, #f4e2c9, #e5c59b);
  color: #5f3f1f;
  border-color: #d9b182;
  box-shadow: 0 14px 30px rgba(217, 177, 130, 0.14);
}
.button.ghost{
  background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.3);
}
.button.light{
  background:#fff; color:var(--ink); border:1px solid var(--line);
}
.button:hover{transform:translateY(-2px)}

#header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
}
#header .inner{
  max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; align-items:center;
  gap:1rem; padding:1rem 1.25rem;
}
.logo{ font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:.9rem; }
.logo span{ display:block; margin-top:.2rem; font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted); }

#wrapper{max-width:1180px; margin:0 auto;}
#main{
  background:rgba(255,255,255,.88); box-shadow:var(--shadow);
  border-left:1px solid var(--line); border-right:1px solid var(--line);
}
.post.featured{
  text-align:center; padding:6.2rem 3.4rem 4.8rem 3.4rem; border-bottom:1px solid var(--line);
}
.post.featured header h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.2rem,4vw,3.5rem); line-height:1.08; margin-bottom:1rem;
}
.post.featured .major{
  max-width:860px; margin:0 auto 1.9rem auto; color:var(--muted); font-size:1.05rem; line-height:1.9;
}
.image.main{
  max-width:1020px; margin:2.8rem auto 3rem auto; border-radius:1.6rem; overflow:hidden; box-shadow:0 22px 60px rgba(0,0,0,.08);
}
.quote-band{
  text-align:center; padding:3rem 2rem; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fff 0%, #faf9f6 100%);
}
.quote-band blockquote{
  font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.5rem,2.8vw,2.2rem); line-height:1.4;
  max-width:900px; margin:0 auto; color:#202020;
}
.posts{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line);
}
.posts article{
  padding:3.5rem 3.1rem 3.3rem 3.1rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.posts article:nth-child(2n){border-right:none}
.posts article header h2,.split-section h2,.legal-wrap h1, .legal-wrap h2{
  font-family:Georgia,"Times New Roman",serif; line-height:1.1;
}
.posts article header h2{ font-size:2rem; margin-bottom:1rem; }
.posts article p{ color:var(--muted); line-height:1.9; margin-bottom:1.3rem; }
.image.fit{ border-radius:1.3rem; overflow:hidden; margin-bottom:6rem; box-shadow:0 18px 50px rgba(0,0,0,.07); }

.split-section{
  display:grid; grid-template-columns:1.03fr .97fr; border-bottom:1px solid var(--line);
}
.split-section .copy,.split-section .media{ padding:3.8rem 3.4rem; }
.meta-kicker{
  color:var(--gold-dark); text-transform:uppercase; letter-spacing:.16em; font-weight:800; font-size:.84rem; margin-bottom:.9rem;
}
.split-section h2{ font-size:clamp(2rem,3vw,3rem); margin-bottom:1rem; }
.split-section p, .split-section li{ color:var(--muted); line-height:1.9; margin-bottom:1.2rem; }
.media.dark{
  background:linear-gradient(180deg,#171717 0%, #0f0f0f 100%); color:#fff;
}
.media.dark p, .media.dark li{ color:rgba(255,255,255,.82); }
.video-wrap{ border-radius:1.3rem; overflow:hidden; margin-bottom:1.2rem; box-shadow:0 18px 50px rgba(0,0,0,.22); }
video{ width:100%; aspect-ratio:16/9; background:#000; }

.cta-panel{
  padding:4rem 3.4rem; background:
    linear-gradient(120deg, rgba(255,255,255,.82), rgba(255,255,255,.72)),
    url("../../images/cta-fluegel.jpg") center center / cover no-repeat;
  border-top:1px solid var(--line);
}
.cta-panel h2{
  font-family:Georgia,"Times New Roman",serif; font-size:clamp(2rem,3vw,3rem); margin-bottom:1rem;
}
.cta-panel p{ max-width:820px; color:#444; line-height:1.9; margin-bottom:1.3rem; }
.cta-panel ul{ list-style:disc; padding-left:1.2rem; color:#444; line-height:1.8; margin-bottom:1.4rem; }

#footer{ background:#fff; border-top:1px solid var(--line); padding:2rem 2rem 3rem 2rem; }
#footer .inner{
  max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; color:var(--muted);
}
#footer a{ color:var(--gold-dark); font-weight:700; }

.legal-wrap{ max-width:920px; margin:0 auto; padding:3rem 1.25rem 4rem 1.25rem; }
.legal-card{
  background:#fff; border:1px solid var(--line); border-radius:1.6rem; box-shadow:var(--shadow); padding:2.2rem;
}
.legal-wrap h1{ font-size:2.7rem; margin-bottom:1rem; }
.legal-wrap h2{ font-size:1.45rem; margin:1.5rem 0 .7rem 0; }
.legal-wrap p, .legal-wrap li{ color:var(--muted); line-height:1.9; }
.legal-wrap ul{ list-style:disc; padding-left:1.2rem; }
.back-link{ display:inline-block; margin-bottom:1rem; color:var(--gold-dark); font-weight:700; }

.lightbox-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.88); display:flex; align-items:center; justify-content:center; z-index:9999; padding:24px;
}
.lightbox-wrap{ position:relative; max-width:min(94vw,1500px); max-height:92vh; display:flex; align-items:center; justify-content:center; }
.lightbox-img{ max-width:100%; max-height:92vh; border-radius:14px; box-shadow:0 26px 80px rgba(0,0,0,.45); }
.lightbox-btn{
  position:absolute; border:none; cursor:pointer; width:46px; height:46px; border-radius:999px; background:rgba(255,255,255,.14); color:#fff; font-size:24px; line-height:1;
}
.lightbox-close{ top:14px; right:14px; }
.lightbox-prev,.lightbox-next{ top:50%; transform:translateY(-50%); }
.lightbox-prev{ left:16px; }
.lightbox-next{ right:16px; }
.lightbox-caption{ position:absolute; left:24px; right:24px; bottom:16px; text-align:center; color:#fff; font:600 14px/1.4 Inter,Arial,sans-serif; text-shadow:0 2px 10px rgba(0,0,0,.45); }

@media (max-width:980px){
  .posts{ grid-template-columns:1fr; }
  .posts article{ border-right:none; }
  .split-section{ grid-template-columns:1fr; }
}

.piano-strip {
  padding: 5rem 3.5rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #faf9f6 100%);
}

.piano-strip__header {
  max-width: 860px;
  margin: 0 auto 2.2rem auto;
  text-align: center;
}

.piano-strip__header h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.piano-strip__header p {
  color: var(--muted);
  line-height: 1.9;
}

.piano-strip__viewport {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.piano-strip__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 280px);
  gap: 1.4rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 0.4rem 0.2rem 1rem 0.2rem;

  -ms-overflow-style: none;   /* IE/Edge alt */
  scrollbar-width: none;      /* Firefox */
}

.piano-strip__track::-webkit-scrollbar {
  display: none;              /* Chrome, Safari */
}

.piano-strip__track::-webkit-scrollbar {
  height: 10px;
}

.piano-strip__track::-webkit-scrollbar-thumb {
  background: #d7d1c8;
  border-radius: 999px;
}

.piano-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: 0 14px 35px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.piano-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 45px rgba(0,0,0,.10);
}

.piano-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.piano-card__title {
  display: block;
  padding: 1rem 1rem 1.1rem 1rem;
  font-weight: 700;
  color: var(--ink);
}

.piano-strip__nav {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 1.1rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}

.piano-strip__nav:hover {
  background: #f7f4ee;
}

.stripe-cta{
  margin-top: 3rem;
  text-align: center;
}

.stripe-cta p{
  margin-bottom: 1.2rem;
}

.stripe-cta .button{
  margin: 0 auto;
}

@media (max-width: 980px) {
  .piano-strip {
    padding: 4rem 2.2rem;
  }

  .piano-strip__track {
    grid-auto-columns: minmax(220px, 250px);
  }
}

@media (max-width: 720px) {
  .piano-strip__nav {
    display: none;
  }

  .piano-strip__track {
    grid-auto-columns: 78%;
  }
}