/* =========================================================
   Philosophy strip — tea × code, mugham waveform
   ========================================================= */

.philosophy{
  background: var(--bark);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 5rem);
}

.philosophy__inner{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}

.philosophy__phrase{
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
  color: var(--sand);
}
.philosophy__phrase strong{ color: var(--cream); font-weight: 600; }
.philosophy__phrase:last-child{ text-align: right; }

.mugham{
  width: clamp(140px, 20vw, 240px);
  height: 40px;
  color: var(--copper);
}
.mugham path{
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: draw-wave 2.4s var(--ease-out) forwards;
}

@keyframes draw-wave{
  to{ stroke-dashoffset: 0; }
}

@media (max-width: 760px){
  .philosophy__inner{ grid-template-columns: 1fr; text-align: center; }
  .philosophy__phrase:last-child{ text-align: center; }
  .mugham{ margin-inline: auto; }
}