/* ===========================================================
   Sektion Sound — rebuilt static site
   Body: paper white · Header: black · accents: mono / ghost numerals
   =========================================================== */

:root{
  /* body (light) */
  --paper: #faf9f5;
  --ink: #121210;
  --ink-soft: #625f56;
  --line: rgba(18,18,16,0.13);
  --line-strong: rgba(18,18,16,0.22);

  /* header (dark, fixed) */
  --head-bg: #0a0a0a;
  --head-ink: #f5f5f2;
  --head-line: rgba(245,245,242,0.14);

  --head-ink-soft: rgba(245,245,242,0.62);

  --max: 1180px;
  --edge: clamp(24px, 6vw, 96px);

  --ff-head: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
  --ff-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --ff-mono: 'Space Mono', 'Courier New', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

#top, #about, #courses, #tuition, #workshops{ scroll-margin-top:82px; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

ul{ list-style:none; }

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--edge);
}

/* ---------- Scroll progress ---------- */
.progress{
  position:fixed;
  top:0; left:0; right:0;
  height:2px;
  z-index:1100;
  background:transparent;
}
.progress__bar{
  display:block;
  height:100%;
  width:100%;
  background:var(--head-ink);
  transform:scaleX(0);
  transform-origin:left center;
}

/* ---------- Header / Nav (stays dark) ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:rgba(10,10,10,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--head-line);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--max);
  margin:0 auto;
  padding:16px var(--edge);
}

.nav__logo{
  display:flex;
  align-items:center;
}

.nav__logo img{ height:38px; width:auto; transition:opacity .2s ease; }
.nav__logo:hover img{ opacity:0.8; }

.nav__links{
  display:flex;
  gap:34px;
}

.nav__links a{
  font-family:var(--ff-mono);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.1em;
  color:var(--head-ink);
  opacity:0.7;
  transition:opacity .2s ease;
  padding:6px 0;
  position:relative;
}

.nav__links a:hover,
.nav__links a.active{ opacity:1; }

.nav__links a.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-4px;
  height:2px;
  background:var(--head-ink);
}

.nav__toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.nav__toggle span{
  width:24px; height:2px; background:var(--head-ink);
}

/* ---------- Hero ---------- */
.hero{
  padding:200px 0 100px;
  text-align:center;
  background:var(--head-bg);
  border-bottom:1px solid var(--head-line);
}

.hero__eyebrow{
  font-family:var(--ff-mono);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.24em;
  color:var(--ink-soft);
  margin-bottom:26px;
}

.hero .hero__eyebrow{ color:var(--head-ink-soft); }

.hero__logo{
  width:100vw;
  max-width:100vw;
  margin:0 calc(50% - 50vw) 32px;
}

.hero__video{
  display:block;
  width:100%;
  height:auto;
}

.hero__video-fallback{
  display:none;
  width:100%;
  max-width:460px;
  margin:0 auto;
}

.hero h1{
  font-family:var(--ff-head);
  font-size:clamp(28px,4.2vw,52px);
  letter-spacing:0.02em;
  line-height:1.15;
  margin-bottom:20px;
}

.hero p{
  color:var(--head-ink-soft);
  max-width:560px;
  margin:0 auto;
  font-size:16px;
}

.hero__rule{
  width:64px;
  height:2px;
  background:var(--head-ink);
  margin:34px auto 0;
}

.hero__scroll{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:56px;
}

.hero__scroll span{
  font-family:var(--ff-mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.22em;
  color:var(--head-ink-soft);
}

.hero__scroll i{
  display:block;
  width:1px;
  height:34px;
  background:var(--head-line);
  position:relative;
  overflow:hidden;
}

.hero__scroll i::after{
  content:"";
  position:absolute;
  top:-100%; left:0; right:0;
  height:100%;
  background:var(--head-ink);
  animation:scrollLine 1.8s ease-in-out infinite;
}

@keyframes scrollLine{
  0%{ top:-100%; }
  60%{ top:100%; }
  100%{ top:100%; }
}

/* ---------- Section markers (in-page dividers) ---------- */
.section-marker{
  padding:150px 0 46px;
  text-align:center;
}

.section-marker .hero__eyebrow{ margin-bottom:16px; }

.section-marker h2{
  font-family:var(--ff-head);
  font-size:clamp(30px,5vw,54px);
  letter-spacing:0.03em;
}

.page-hero{
  padding:168px 0 70px;
  text-align:center;
  border-bottom:1px solid var(--line);
}

.page-hero .hero__eyebrow{ margin-bottom:18px; }

.page-hero h1{
  font-family:var(--ff-head);
  font-size:clamp(30px,5vw,54px);
  letter-spacing:0.03em;
}

/* ---------- Course / Content rows ---------- */
.row{
  border-bottom:1px solid var(--line);
}

.row__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
  padding:104px var(--edge);
  position:relative;
}

.row.reverse .row__media{ order:2; }
.row.reverse .row__text{ order:1; }

.row__media{ position:relative; }

.row__index{
  position:absolute;
  top:-46px;
  left:-6px;
  font-family:var(--ff-mono);
  font-weight:700;
  font-size:120px;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(18,18,16,0.15);
  pointer-events:none;
  user-select:none;
  z-index:0;
}

.row__media img{
  position:relative;
  z-index:1;
  border-radius:2px;
  filter:grayscale(20%);
  box-shadow:0 30px 60px -30px rgba(18,18,16,0.35);
}

.row__text .eyebrow{
  font-family:var(--ff-mono);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.2em;
  color:var(--ink-soft);
  margin-bottom:16px;
}

.row__text h2{
  font-family:var(--ff-head);
  font-size:clamp(24px,3vw,34px);
  letter-spacing:0.01em;
  margin-bottom:20px;
}

.row__text p{
  color:var(--ink-soft);
  margin-bottom:22px;
  font-size:15.5px;
}

.row__list{
  margin-bottom:28px;
}

.row__list li{
  padding:10px 0;
  border-top:1px solid var(--line);
  font-size:14.5px;
  color:var(--ink);
  opacity:0.85;
}

.row__list li:first-child{ border-top:none; }

.row__price{
  font-family:var(--ff-mono);
  font-weight:700;
  font-size:26px;
  margin-bottom:24px;
}

.btn{
  display:inline-block;
  font-family:var(--ff-mono);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.12em;
  color:var(--paper);
  background:var(--ink);
  padding:16px 36px;
  border-radius:2px;
  border:1px solid var(--ink);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}

.btn:hover{
  background:transparent;
  color:var(--ink);
  transform:translateY(-2px);
}

.btn--outline{
  background:transparent;
  color:var(--ink);
}
.btn--outline:hover{
  background:var(--ink);
  color:var(--paper);
}

/* ---------- Courses accordion ---------- */
.course-list{
  border-top:1px solid var(--line);
  padding:8px 0;
}

.course-item{ border-bottom:1px solid var(--line); }

.course-item__header{
  all:unset;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:22px;
  width:100%;
  padding:30px 4px;
  cursor:pointer;
}

.course-item__index{
  font-family:var(--ff-mono);
  font-weight:700;
  font-size:14px;
  color:var(--ink-soft);
  width:24px;
  flex-shrink:0;
}

.course-item__title-wrap{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.course-item__eyebrow{
  font-family:var(--ff-mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.18em;
  color:var(--ink-soft);
}

.course-item__title{
  font-family:var(--ff-head);
  font-size:clamp(16px,2.1vw,21px);
  letter-spacing:0.01em;
}

.course-item__price{
  font-family:var(--ff-mono);
  font-weight:700;
  font-size:18px;
  flex-shrink:0;
}

.course-item__toggle{
  position:relative;
  width:16px; height:16px;
  flex-shrink:0;
}
.course-item__toggle::before,
.course-item__toggle::after{
  content:"";
  position:absolute;
  background:var(--ink);
  transition:transform .35s ease;
}
.course-item__toggle::before{ top:50%; left:0; right:0; height:2px; transform:translateY(-50%); }
.course-item__toggle::after{ left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%); }
.course-item.is-open .course-item__toggle::after{ transform:translateX(-50%) rotate(90deg); }

.course-item__panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .5s cubic-bezier(.4,0,.2,1);
}
.course-item.is-open .course-item__panel{ grid-template-rows:1fr; }

.course-item__panel-inner{ overflow:hidden; min-height:0; }

.course-item__panel-content{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:36px;
  align-items:start;
  padding:6px 4px 40px;
}

.course-item__media img{
  width:100%;
  border-radius:2px;
  filter:grayscale(20%);
  box-shadow:0 20px 44px -26px rgba(18,18,16,0.4);
}

.course-item__body p{
  color:var(--ink-soft);
  font-size:15px;
  margin-bottom:20px;
}

.course-item__body .row__list{ margin-bottom:24px; }

@media (prefers-reduced-motion: reduce){
  .course-item__panel,
  .course-item__toggle::before,
  .course-item__toggle::after{ transition:none; }
}

/* ---------- Text-only sections (about/tuition) ---------- */
.section{
  padding:96px 0;
  border-bottom:1px solid var(--line);
}

.section__inner{
  max-width:760px;
  margin:0 auto;
  padding:0 var(--edge);
  text-align:center;
}

.section__inner h3{
  font-family:var(--ff-head);
  font-size:clamp(20px,2.6vw,28px);
  margin-bottom:20px;
}

.section__inner p{
  color:var(--ink-soft);
  font-size:16px;
}

.section__inner p strong{ color:var(--ink); font-weight:600; }

.section__image{
  max-width:var(--max);
  margin:0 auto 96px;
  padding:0 var(--edge);
}

.section__image img{
  width:100%;
  height:auto;
  border-radius:2px;
  box-shadow:0 40px 80px -40px rgba(18,18,16,0.3);
}

.section__quote-frame{ position:relative; }

.section__quote-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:2px;
  background:linear-gradient(180deg, rgba(10,10,10,0) 42%, rgba(8,8,8,0.72) 100%);
  pointer-events:none;
}

.section__quote{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:2;
  padding:32px clamp(20px,4.5vw,56px);
}

.section__quote-line{
  font-family:var(--ff-head);
  color:var(--head-ink);
  font-size:clamp(20px,3.4vw,38px);
  line-height:1.18;
  letter-spacing:0.01em;
}

/* ---------- Duo (two text columns, no image) ---------- */
.duo{
  padding:90px 0;
  border-bottom:1px solid var(--line);
}

.duo__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  padding:0 var(--edge);
}

.duo__col h3{
  font-family:var(--ff-head);
  font-size:clamp(19px,2.4vw,25px);
  margin-bottom:18px;
}

.duo__col p{ color:var(--ink-soft); font-size:15.5px; }
.duo__col p strong{ color:var(--ink); font-weight:600; }

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
  padding:96px var(--edge);
  border-bottom:1px solid var(--line);
}

.split img{ border-radius:2px; box-shadow:0 30px 60px -30px rgba(18,18,16,0.3); }

.split--even{ align-items:stretch; }

.split__frame{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:2px;
  box-shadow:0 30px 60px -30px rgba(18,18,16,0.3);
}

.split__frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  box-shadow:none;
}

.split h3{
  font-family:var(--ff-head);
  font-size:clamp(20px,2.6vw,28px);
  margin-bottom:20px;
}

.split p{ color:var(--ink-soft); font-size:15.5px; }

/* ---------- Workshop cards ---------- */
.workshop{
  border-bottom:1px solid var(--line);
}

.workshop__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
  padding:96px var(--edge);
}

.workshop.reverse .workshop__media{ order:2; }
.workshop.reverse .workshop__text{ order:1; }

.workshop__tag{
  font-family:var(--ff-mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.2em;
  color:var(--ink-soft);
  margin-bottom:14px;
}

.workshop h3{
  font-family:var(--ff-head);
  font-size:clamp(20px,2.6vw,26px);
  margin-bottom:18px;
  line-height:1.3;
}

.workshop p{ color:var(--ink-soft); font-size:15px; margin-bottom:14px; }

.workshop ul{ margin:16px 0; }
.workshop ul li{
  color:var(--ink-soft);
  font-size:14.5px;
  padding:6px 0 6px 20px;
  position:relative;
}
.workshop ul li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--ink);
}

.workshop img{ border-radius:2px; box-shadow:0 30px 60px -30px rgba(18,18,16,0.3); }

/* ---------- Newsletter / signup ---------- */
.signup{
  padding:110px 0;
  text-align:center;
}
.signup h3{
  font-family:var(--ff-head);
  font-size:clamp(22px,3vw,32px);
  margin-bottom:16px;
}
.signup p{ color:var(--ink-soft); margin-bottom:30px; }

.signup form{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.signup input[type="email"]{
  background:transparent;
  border:1px solid var(--line-strong);
  color:var(--ink);
  padding:15px 18px;
  font-family:var(--ff-mono);
  font-size:14px;
  min-width:280px;
  border-radius:2px;
}

.signup input[type="email"]::placeholder{ color:var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer{
  padding:80px 0 44px;
  text-align:center;
  border-top:1px solid var(--line);
}

.site-footer img{
  max-width:400px;
  margin:0 auto 34px;
}

.site-footer__social{
  display:flex;
  justify-content:center;
  gap:22px;
  margin-bottom:28px;
}

.site-footer__social a{
  width:38px; height:38px;
  border:1px solid var(--line-strong);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}

.site-footer__social a:hover{
  background:var(--ink);
  border-color:var(--ink);
}
.site-footer__social a:hover svg{ fill:var(--paper); }

.site-footer__social svg{ width:16px; height:16px; fill:var(--ink); }

.site-footer__copy{
  font-family:var(--ff-mono);
  color:var(--ink-soft);
  font-size:12px;
  letter-spacing:0.04em;
}

/* ---------- Scroll / load animation hooks ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
}

.split-heading{ overflow:hidden; }
.split-heading .word{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
}
.split-heading .word__inner{
  display:inline-block;
  transform:translateY(110%);
  will-change:transform;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .nav{ padding:16px 24px; }

  .nav__links{
    position:fixed;
    top:68px; left:0; right:0;
    flex-direction:column;
    background:var(--head-bg);
    border-bottom:1px solid var(--head-line);
    padding:20px 24px;
    gap:18px;
    transform:translateY(-150%);
    transition:transform .25s ease;
  }
  .nav__links.open{ transform:translateY(0); }
  .nav__toggle{ display:flex; }

  .row__grid, .split, .workshop__grid, .duo__grid{
    grid-template-columns:1fr;
    gap:40px;
    padding:70px 24px;
  }

  .course-item__header{ gap:14px; padding:22px 0; }
  .course-item__index{ display:none; }
  .course-item__title{ font-size:16px; }
  .course-item__price{ font-size:15px; }
  .course-item__panel-content{
    grid-template-columns:1fr;
    gap:18px;
    padding:0 0 30px;
  }
  .course-item__media{ max-width:220px; }
  .row.reverse .row__media,
  .row.reverse .row__text,
  .workshop.reverse .workshop__media,
  .workshop.reverse .workshop__text{ order:initial; }

  .row__index{ font-size:80px; top:-30px; }

  .hero{ padding:160px 0 64px; }
  .page-hero{ padding:140px 0 54px; }
  .section-marker{ padding:120px 0 34px; }
  .duo{ padding:0; }
  .section__inner, .section__image{ padding:0 24px; }
}

@media (prefers-reduced-motion: reduce){
  .hero__scroll i::after{ animation:none; top:0; }
}